{"_id":"@material/line-ripple","_rev":"1687-c1cdd2f6ae45af59d28827365bb42273","name":"@material/line-ripple","description":"The Material Components for the web line-ripple 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.30.0":{"name":"@material/line-ripple","version":"0.30.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@0.30.0","maintainers":[{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26f453ce07ae677e23625578ead7da8abd1bb02c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.30.0.tgz","integrity":"sha512-lUVhWN8HCAnIroWD6Ds2CCET0D1wn4EXzRfhuUaLph3QBt1Ra8L5iWeAzRkgMaMiRI4bLAQTWNJgb8CyCzxCeA==","signatures":[{"sig":"MEUCICqmAwOZysFlVggFpnC39WCSEPM+k+Fx7sIQW5SW7V9wAiEAuAUL6RTBuHj5RTCol1Q0t4hoWTnAXOQ8r6VS2Zi3SNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"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":"5.3.0","description":"The Material Components for the web line-ripple component","directories":{},"_nodeVersion":"8.1.4","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_npmOperationalInternal":{"tmp":"tmp/line-ripple-0.30.0.tgz_1517868174357_0.3896318532060832","host":"s3://npm-registry-packages"}},"0.32.0":{"name":"@material/line-ripple","version":"0.32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@0.32.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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":"d52dadc8912fb937f4a70406c43ff64b3545e80b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.32.0.tgz","fileCount":13,"integrity":"sha512-vd/jlnK/paWZnsr9rvKkeo4qjIDTd59TljSUzqgXN4wiOwiCqXWtNgsy+veKG4fNLVqwad7ECKizUn2iQ/+IMQ==","signatures":[{"sig":"MEYCIQCXu3vEyI+6+gXaQwJHaQ07U88KgzWMnWya49MQTjg8LAIhAMZybQwAYochexVEW8rWxZovjMAZQ+pX+X4Sm3cTXEqc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54568},"main":"index.js","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.5.1","description":"The Material Components for the web line-ripple component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.30.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.32.0_1520287725270_0.8592223135736128","host":"s3://npm-registry-packages"}},"0.33.0":{"name":"@material/line-ripple","version":"0.33.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@0.33.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@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":"dfb965f6a03207dd35978bfe7a9adc2ca50f58c3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.33.0.tgz","fileCount":13,"integrity":"sha512-xOlhiCIsFP3f8yC2zYpVxBbwBXLA/+CSnHxVQ3rlqrjZfZcOmYe0VvO85vEexm2Ig3/+hYPmeDZHRJk9scqARw==","signatures":[{"sig":"MEUCIQCKhhzTx3eNKbXgjY77697fh9FSUK9IMcpYwzUy4N+OgAIgZu2KJY4LBRFJdFeB3QpprQ9+OapZDVK7/nGogL0bMtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54394},"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":"5.6.0","description":"The Material Components for the web line-ripple component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.29.0","@material/theme":"^0.33.0","@material/animation":"^0.25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.33.0_1521477603416_0.5201079130879844","host":"s3://npm-registry-packages"}},"0.34.0":{"name":"@material/line-ripple","version":"0.34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@0.34.0","maintainers":[{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b5048d6573e908a98c9ca69f54e3bdc750a7d0f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.34.0.tgz","fileCount":13,"integrity":"sha512-DPmoNKhW12yNMPwmnDvHq8aTjrJ89m71RlbnR/h6SVMN01gmnU44MnCykK+RyVXbRlESb7+PyzDFuL4c85166A==","signatures":[{"sig":"MEUCIQDUCQHuOb/WfhKd6PyE9mQD0rxrMDeOag8uiMnydVjJ8AIgXRtmz8Oa732A7J6H5C/I7TIxxRcqPEyUBEA+FLhIYvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54374},"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":"5.6.0","description":"The Material Components for the web line-ripple component","directories":{},"_nodeVersion":"8.11.0","dependencies":{"@material/base":"^0.34.0","@material/theme":"^0.34.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.34.0_1522705917285_0.5424043858172689","host":"s3://npm-registry-packages"}},"0.35.0":{"name":"@material/line-ripple","version":"0.35.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@0.35.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":"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":"5975b3c7150057eabb997a9453d48b2979b6a4ff","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.35.0.tgz","fileCount":13,"integrity":"sha512-0w0kLYo2dGBiR2kgHxybifO7z4UxIYbL55EKOqkg+rG0dC+NkzFoURhjwoll6910EOlS//5UNo1N/u3to3uNjg==","signatures":[{"sig":"MEYCIQChz5uZPOIFGgmfdUfmWoeyfIbdZhihIjNpz3DxBrPHqwIhAOab89Zh9h80hO+CWK1Oky6cyxqV7M64/6g3Ph7lJXO0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":54702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDYCRA9TVsSAnZWagAATj4P/R5dggInAnYgsVbBGHic\n3kD9w6Rodeofu6ApwSs+KBl4mm7eM2mumoOlZomQLcTYRIax8kHB4b8eGNYR\n9Lx+F57sJYlNNGStabuQ0v9wBvHMoTBzAzG2dLEWizFf3Rbev2RtctHY04Dc\nhu9NWf15G1CkzTE3byI1VsOISLw8guI2ya19qoq95uote93jfKXN5voNmxDv\nUmDXpC/4NTqZ8CdCiVuwOQrG/NJdWUga3G4EA5e8YLPBa0e7YR/p1oCKpufl\niWYcZvIB4SurTJnbDpaFg6lkjCLhknyTTY1Oqv9YjQjuUm2AE06AuqXTZECW\n2pVzh3JXV4xRrXqAN81uJOaGLi6x9nqtxcAZWtaC3hrbr86zN+asiq8MUq6k\n1YwF5EReuErICPsEyuOyiMBaL1p56pfS7gRvOv1wh6J2akaNE4HMPFMaNs4r\nMqPsgUxMLd7Fdlvub1FK7ZhKUzk5e7R2RjaLl6NiZ6lt46MnVgtCif/ix+fQ\nLQKCQKNlDqifzKk/Qu272OaLG61yGrAomTUql//27z999S4Jfj/rwFW9+wf7\nEfnFOgyueicKtKA+/UkBc6/kZC01hhdO6363jBDUWJEdmSLHqe/B1g7Zv9mT\n80xgBQ5jlwh71+PeTihVyxKXWEPlSdMppm6dQOdQt9D3ASqUdpI5AUQwSnL9\nG1LG\r\n=Lp4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified text above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified text above it. When a line ripple is active, the line’s color and thickness vary.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/text-fields.html#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n</ul>\n\n## Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Usage within `mdc-text-field`\n\n```html\n<div class=\"mdc-text-field\">\n  <input type=\"text\" id=\"my-text-field-id\" class=\"mdc-text-field__input\">\n  <label class=\"mdc-floating-label\" for=\"my-text-field-id\">Hint text</label>\n  <div class=\"mdc-line-ripple\"></div>\n</div>\n```\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n### `MDCLineRipple`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"5.6.0","description":"The Material Components for the web line-ripple component","directories":{},"_nodeVersion":"8.7.0","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.35.0_1524523223509_0.8646995994162825","host":"s3://npm-registry-packages"}},"0.38.0":{"name":"@material/line-ripple","version":"0.38.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"Apache-2.0","_id":"@material/line-ripple@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":"e70fec82bfd0b718efcbc72c52210e45bd31bcf9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.38.0.tgz","fileCount":13,"integrity":"sha512-HdfU0J1Q3CT2Z/H4aBEKGRTd7K33WhhQkieI4NGGyKSx4uwiRyr61i44Oo+YHK+fVqPjh+aMSjQU3wAfu3vSvA==","signatures":[{"sig":"MEUCIQC37pVvEzlUoXqj2f53CmvnrgYy54Tk3rsuNbHyA9H4HgIgIuXpcgfsZHg7euuVMJ2QF4gCvYB8IJqbTePbr7wQ7N8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55258,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WPCRA9TVsSAnZWagAATKoQAIRstpu0h+WoFihBP34Q\nntu1ghSVR92aZAvqnnd/u4xA1bn9vDmojb7Nog+/LZQP73CEGxy31iNuwLHa\nVUiGEebTGzm017maBRbrh3jKwwTw0hZZRuYmLDIMv+2G6hX4FjXoB+ZEKQU8\ni9Qk0YIimMTihjMUGD2ElDJWC3/lwhaE80spSzFF4heGJAYhxufpHMH9wPIv\nvg3e73T0ZeB9j9Kj2MMrpJ9TSGPw/anQiA/UW9Hiug4gXfW3VfPeFSpYnP8U\nUnl5/c1eN9nxjJnxFIippAjMnMYN6py2jsgdBqfWJ+ew3FopSKNNMW5HRd9f\nIDfUDM0eBWpP+3cMnC+zrq/4U+6VqK4y0l/d4Z4RJa7MsCreLrZXaI1Bwfb0\nTD0P1SQyejjyVxqcu6uJxT/Kp0ionUUvSP3w80pGUKuA5NntXhOGEVQupLw3\nLOgRnEWeDVeVy02BsryJ1ZnPnc6Len4cIz6MJ8z8WWl0GMkhEXboj1114IXn\nDZfXhiDsHCeV8DRcMQnxx8oow1D0KRgPG1/8YRTI7pEAqhvOpRAKsdCI4lzW\nm9RrbR/QJuF3mFs25CaPcwvu4dR4HBFIt1Y6EfaHvAMOmbkhUMFeuydnctAv\nBrwMOGN2pNCXKF6lSU4lY3kb0MUwp0yCyFj2PTg+YMnxTK3FzWtAeOOFMHto\n3R0b\r\n=6umS\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 line-ripple component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.35.0","@material/theme":"^0.38.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.38.0_1532970382964_0.012574991126748536","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/line-ripple","version":"0.39.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b576767a4cdaba883fdc51df59a366147315b0b3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.39.0.tgz","fileCount":13,"integrity":"sha512-zMTl5/epJrKnnXWx9U/BAp11holye83+2sQVnF8cNheW+U9TB0tK5s04TDdVsHZMT/rkdwDmnAqyW6T1Xl4RJw==","signatures":[{"sig":"MEUCIGfkLc2QhDQQDnUky8cFxh+B2K+FTzROY5nw9+3uKIUlAiEAh6UNGyf9rOK9XZ0qlrsY/KR2Ttrx8/K6TkKwkmGDNE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDeACRA9TVsSAnZWagAACFoP/ibXjnxK2ROv9el2CDn0\n2Ww4+QAXa4Ete1JX4CkI2obk+C/HSQtvH8wnmipxtDNmH822Qwufeon/sOo0\n3Y/sbxoH+XlgpRS5MQuOg7VStbUh+9jm5CqVvQPZfms8xfuM5Cr81SdN7+oU\nlsCpTr67J7TTBCU2TKAQnTRlD2N0K9k5c5ZIlxWCXeXGwUXhkEJ7qQhVPgt/\nW7CEEWCF7eHaEn5Pyutbu6pzS7Yf6J/WqJNpqLHqec7cE2Qad964TuojSWCq\nbXdVp3vsowDutQz7rCc8CI7z71pQn4nZbuKQ+k9tHzD7+xpqoAqCISL3CJVF\nfEF/kNcwlnbgulrPaIp4QrtBJAeo5kf6Im0Z9bG7GP4R2JMZpwb3U0W40tBn\nU1LFXi/8BSmCsrDSuEvQaOttlHxoOobyj5nfzryQT9wfdSMNvkerlz74zWsd\nwuU0BQA3KuVAJD/d3iaosip4Ix0nnIke/5OP5Ql3tlxE7UNF7iG6mYTRVSms\nr2NNtEdosUM2xKL2wvwlOry2nDhYopY98F5JvKo9sCwTwOwhwm0nWwRE45hW\nYqsujM33Xwzxwi4zWKld7ymMNebtStT402kt9X5Ppdk+0YoGGMXHxsR4ynVR\nFdxNnHbnGwDnhBrTdeCpmZJNt8571xK8QvsNcE1lt3+4hShaBLBIR+6yOEvn\nhB9p\r\n=1HHt\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 line-ripple component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.39.0_1535391615853_0.9525842297490579","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/line-ripple","version":"0.39.1","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1caab8dcd2dbec21a96060abd3f1cb85b8b63335","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.39.1.tgz","fileCount":13,"integrity":"sha512-y9sGWor4HC5H3hSC8a+WnrU3pSl0RirXgqrvpUYuOjbAmV7rq45vCUv668t9Oghwr94monIMdudQ87tFYPYa8w==","signatures":[{"sig":"MEUCIQCQ1/wPfme3u+QNPBBNypVNx4wpqnVEBD6lVnePdkzIMQIgIEp2Gv07rKsyiTP/FoGi7NY77qzDRYQAPYU6hivrZgY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTNCRA9TVsSAnZWagAARbUP/26wfpqKwryAvPr0FyDe\nbgQFBS/RO1iR5frbslfQKlxyiagzULm+pNGgSKQoUKz92K0f515VoDAchzFM\nHi6ry21g0X+JE0r/mtnwPUzQVmZHTrYHjOVpE9VY91uMqg626EMISBWK68rq\ntUpA1uxX1OfoV1mtQF//qzhDML2B5On5c9SjnjyQ6JP+K/xnPKLpTjjzn6EH\ni8dIHUHpTSFG2jlhHSGunkTH+C/8lvKE1Ke6qzn+49t2lOyQcaA9Rb1OMzWh\nZL3g3v8o5owk3nT69w/kIvmsA5oPw9CYgQDyaSsTn2YmqgViQ1n41uG77tNh\nOaDZfy3s6tvUDYutBOw3ZU20KHBlERS0Qe3gBGXJ3TYfkSa3WR0TxmT0y3fR\nqiejbROsviq/tFkRVU/xsjo/L1+o8m9VD1njSmqFacM82DF25zWGXCeDW1M/\ncFvTAwURICp3VazWMa62+yGUFBNNXUDdT2aLvsD8aT+DpJsASt2vHi+qIw3G\n0PtXWVZ+xmpm+NEVv9eHyNphpHVCG3riv+o+b91RIdWTd4KZiGVerIU5YFw+\nXRwMAWl6ujlCjQeiaRHQpApqun74TDHPK5hSIKEiEU2mVmRDxFzSGeZvU3cf\n1IrlijsQaRGK26gu6zcut31G3sATw+yjvE21mb/yQMkKhDCtKYH8FOpjcTpC\nacZ7\r\n=wqU5\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 line-ripple component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.39.1_1535751372501_0.7066810756738315","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/line-ripple","version":"0.39.2","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"20494d49997fc4a2f401027748d043881b382bfc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.39.2.tgz","fileCount":13,"integrity":"sha512-66GMani+iicBs9atbG/Vfk27msHhupgFBzTgi9frTNvh7xsyaGQvyfQFt2nf+A4TEa/YIkn4qbEZBJ4G65Xyog==","signatures":[{"sig":"MEYCIQCxMZla/aeD+JnTedt7eKGLl77tbF6uDF/QQk2KLmgM2wIhAMLNwFmFHXC5utH5US9Ej8t5m7dD32URndvrFTqJrqz3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/NjCRA9TVsSAnZWagAAvTAP/iYNZzGpKjd96CYQ0+F8\n8zDsXPEdve4gYTw2mo4hg6IhTyX2c68GkZtWoqxs34Idw3BZnUSI2Co/TXce\nIASCN6hYvsGOLSN5SXVUsBFKSWd/S1Wbk0y5G2f/LAtAsa7PuNDbcxQSOWD/\nur8jltNv87nziSjkpFduhNhlvPmnbFBykUcJPxksPP9du91wSSHDlzgyOAZk\nioKk4/VJRewMOloWvulhMxDs+urY6GCYFCw5cclDDyPn7Juq2fRfoqvMQX8k\nqbgC/KXH95C1MHfZxtLFHgDX6kH8qlf6uhhyZW+i07eVyaxK2cSYK3vZkG6d\npmQBNp8mFTsu9wgDQ1M9oezz98hriTfyS/gaSMJv7yJ/1zSyjotreNiInpFp\n3iPYegPwA1Iz9/FXLV8NjMz04MHXG0FyEaWXLpUGdoGS9gf7PPsFedI+b2U2\njh3WOiVP4k+Z2TTkf+Fnvzl6sGXkzFehxKdRoK1PwEopOrtNkGQ4StI++uw7\nAI7TejM0RFUuR5JxthyobDSeCiaiJFTOwsFduU3WY6RsTmEw/cYzqeXWT1o5\nXuyaSG26gwpL6qdHmwuinH8JRXe3vf4lUplxbRIHKppiky0dOZBcs8PjMTsa\n7i8+bXXTVf075ZoLq0wIz2NmpO4hhvqHgU6+5pqw6qSmFIbE9OdZ7PwnX9Nc\nk9ek\r\n=TlfM\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 line-ripple component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.39.2_1536684899366_0.6202655970390916","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/line-ripple","version":"0.39.3","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4db9d5ea56f5a4745704627d1e96008716fa471e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.39.3.tgz","fileCount":13,"integrity":"sha512-EWAWVYhRUWKWVeKFjntiNKe9OF99jwxxsj4j7FVgVD/XCCqDC5GpUEnIP8pjRVCFzmrO8Io3V5x8BipqSlOqUA==","signatures":[{"sig":"MEUCIQCsb2tkKpnj9lJQNvl+88FGbAyQU8gxy7H40edeycN7lgIgQ+CJYwmcMV2lE9kPoccie4SttNLaLg3VrCPsPTf//sc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/j4CRA9TVsSAnZWagAAQzIP/iIFmjFxXzSLLvSc/Ofc\ny8FJm0jMvkPKgQZNgO5ZZn7S+VEVq2tycWXtoh8Ud2BpsJCxugvgS9hkICNp\nJUzYQO2wiQaJ6pp+k0OYpPRwUCCGn3Ih5U6ldeIKNo0vFC/ZOwSwgkjtEutN\nvly/i1YcWo+3QdiZQWsqUxRI7c5ZBgUeXMpcksIDtKhBl8+XEk+dCUifB+EA\n8xNrOTkgXYNfI8r7f4yoPdQavjsjen5KdjfXLNiDltju7lUSU+Ot9XL2JMov\nA2kIsOm3EcfX/XSXjkxrxGzHV/EHlGwuKSycO8Fj0NkDcPbYOwDuTj67BpCH\nrfNXDOVNZ0YuuaMvyFpZF+Ihd7kUV+2KxJVxJgN//+iH+vBbhDj0ExK9tWui\nS4iFnCxto5B9qZxyI5Dt5ZXZbOw8EulPjF4bU5tI5fMawFfRTSI8o4SNJLHp\nkpADvg3hJKX8kbFfxYeTMfmxrY/w9REYx0lvebiKVARHKc9j9IdkfWISHh1B\nz9JpzvQpm05x3Q3ErLTqz7+ktxwL7ot9TK+uj2Uci2PThwuSZ0eAcdwZc8ld\nQg4w89sEV6c28qVtI3h4VGaAYg/oH9loq8+9I0mEU9lwA8vKq8iS/zrmMlh4\nnkoQpCosV3dEH20JhSpcZuU/UkbX0GgB9GYMRUfyw58cy2LGC5JLr5zi0XUE\nprbs\r\n=ZHPF\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 line-ripple component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.39.1","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.39.3_1536686328069_0.3368470278560822","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/line-ripple","version":"0.40.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5dd890035ec7e99dba19ef8a53de42f1f424d338","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.40.0.tgz","fileCount":13,"integrity":"sha512-tDeFiKqEhGzDAxLZoljLFBQs2mq2OJnD/Xno2IP/vCE6eoP98Wo0BvzorNUZESjepQGYarUPeZgZeFz9+hnsjQ==","signatures":[{"sig":"MEYCIQDEqJryUIKoBb/n9dmD/rCvZYI00HLYrj3/shhSV7YdwgIhAK6Ft8WQqBONMBZsJYEGFFA0Y432HuB9S5nLTkDGb1Up","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62046,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJwCRA9TVsSAnZWagAAgTIQAJA0DrkXSaL3FiibtC28\nGyIrOXrhiEWd6LkyHM77tk6GtOujGSQKLmn+hf1izFacLUcVMx7kggbarsPR\nY+6OHoVu6O3UHCHTzndsLYB65ZO1v+6DvKjCkcn2tN4zI0NK/fV7AWclhH9A\nVuu7AD9O3EsBumShkbuC7+qrAFNMZKcFrmXPL/wmLoxBJzpP5LkWccXAyVTt\nBEjM+0NZ0vpHI9/Sisjx5N+GGSqG1eSvCegIobmuZvtNnjw5DhF9f6F5LXS6\nKL4xAeDN0zZEh4FyNqbXjWWPE3em5BPdjJoqzJtEQFGyuVoskBDh2U+wWhmw\nfjZQLkQWplosCsiknZQjMZL0kmJVfk+OXJbWTIBbu1WZMOOdKs/ga0ukb/Xb\nJKuyRMnC9cyMxgov0RH32izCBwSFWwunVtmQLYEiucwDVBFFSm9NdrtJdX4A\nRfVJtQiPUqc6Swqnnfn2QhpefLmLF0Evkw5c2QsyCYiaZ6RM8z7wcZ8PEh9g\ndNw1MCF0R0bIfJou8grUmdqsOKc7MDryVj2IoMk5QJKY7F/IOr2QVYDE9sZJ\nTWLqjXgchreKs51AnK9P47UONYekeKi84htSBkwferx0HqCZ/C+qbbY0v1qI\nqtYAmiiNIyWepZMEJwxP617ul6X81Hajetb38E2M/OqI0dEbHDFM3YG1zn7A\n9Vgc\r\n=mwWj\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 line-ripple component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/base":"^0.39.0","@material/theme":"^0.40.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.40.0_1537819248071_0.18354244432849853","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/line-ripple","version":"0.40.1","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b31193544348c8dbc698a75f62a84630557ac093","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.40.1.tgz","fileCount":13,"integrity":"sha512-S4Iq9qtxAF0ViwGfl+Dkb/dDd9EdJx/MpzA0/Lq51XvxWoJJvLfEEvX9j+V41ZhPd9FzqocTtUCCAw7Cov5mEw==","signatures":[{"sig":"MEQCIEaKJ88FE0art+JmABhjOPe++3OzXCGo/Vkb5VAWFUdVAiBzQIcjazFVqUgYSaW8K9HN+t8aZqFm4viy9Vq/ogOkqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62034,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8P5CRA9TVsSAnZWagAA00UP/j0/hBGj2rF8fUKr5lz7\nm7uk5jevCCCaijLpzAzeVws5fMzsQV8GqU88wnto8qhLNhjqPUc8XQPZcFeX\n47iYkaDX19Pe/6IlJ42aYfO4p7UZk+Vgk2rZmz5UutvAF8woeLu7AN/TZtbs\njZxfq6qX+zBKBn1iTJcFp56yanrMQGOlbe1ZxMNI3+iCfg+fbIaTf8VG+NmN\nGM/a5ISlHAG/SrFBNk33FVMbSZSuafXQ3IBnWAwXvczY1rziU9er7+QL8znD\nY5BE+ShTdOUJ/35j6+zhJ/etPGchpi/wbU+Xj09rkQWfHdgpZJfe+NVGhM+u\nxGhZpV73ABlozcx3f0Ej9RijQxtMHNnX03zG5mL1qZHhDDBcCMeXNJRI2CAV\noYT3utmcqeAWZE6ycr280ZE1r8LL2SNtMMQ/Wdi3rmnp2i8MyogWmhRLJnSa\nIpjHaIIS2yZ2drlXE+aKUFL2kFbA2XQVbgJTZnTpcf+kvkWCHDKkW1lphiFK\nYKLs9TiECOW/OMJrv9yhVqLxBBjMDWnsjGj3NuBdkfSTN8EruiO7BbBZvBw/\nT6qpzF8M1aMijNiSWqNGaXCPH9ZhQKw3W0k3FN25TMNKP7CmOp8QwBjOaztB\ncYSFNMFLMmXuwrSd3m24g9Z67tXjcIcPL+4XuwJirAWWH4TuPeLK1ruy88nU\nZNox\r\n=soeq\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 line-ripple component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/base":"^0.40.1","@material/theme":"^0.40.1","@material/animation":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.40.1_1539032057439_0.9935237379935962","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/line-ripple","version":"0.41.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"de499b0d1dc7f60ddbf497bcc49be76475642d1f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.41.0.tgz","fileCount":13,"integrity":"sha512-5DDIoC3d78fCLhNgle7DRFojT3D2SF+XVpUd3g6yLZmybHB7832p4bgl/qGpbIXwk1wAQA1dkUgKH5foxorjNQ==","signatures":[{"sig":"MEQCID475dA0G6kBo/RFzGnGIiMbA4cLI3omIDRE/4Bav2DuAiA9L5r40Y2TPVd9B1Q3yE2N0g4Jn1FCJDruHchk3Bsv/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":62048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12veCRA9TVsSAnZWagAAWHAP/1rQZ3m6xD0wy3myj2QK\nmxZj2g5BvW6/YlrZ6COVy9hrl9BE1faIYIzs27WYU3WZgCEIrNB5rKEKADvz\ns+spJSC0oIsjZ73N4dd+gez2cpaRvTbkQ6yC5qIh8w2Uc2mDvOL64T6lx1Tg\nDzKxvTziLz57mZPqP6QEX8XEuuP8SbxKh6u+jk8e6oLmlsO7Hw9WooTIE9qu\nxZDkUyVzsX8IjIUjsf/n+btPRWY9NuB/UlFQMPKC+WLIv9exa8nMxkKAM3Ud\ng0eNvWFh6crbyx/rQRU2YUXA47cm7kdxDVrTxSSnUoMc5e3AyX1dWITQffGK\nj1O5YzssKdsX2e0qv9mzDPW9oQL9iOagzKOuEGFdWubFHJ+asqOEo7gXgbaW\nl1Gaj34ok4HDskMAnA9LhOYFrl4cheNk8ajz/13QLmOMEZadtvcguVlvNxGz\nww4NyZZZ1cO6QoQS4Xrycw3Xww8KBktY6JVQlWCR6YcOGq16rEZYO+HRf1cA\nTZZpaY5apJhEsb9dPoz4nOwMQz9B5Y6Z5tANjUJvofJHylr8+4IY3T5SQVZd\nJjuUbjHRX7MGHY6HNPGzYsxupmyV9CA6JkdLLqsHPFpeWD/wse7H3Q5WYtSj\nxJJnEe5dmEmheTzjuQ+P1NAoOmEv2ZUu5cjmLiqWgwfku2iBDStyFemLXtIs\npbKn\r\n=I/Bm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.41.0_1540844510038_0.9840837747550799","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/line-ripple","version":"0.43.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6cb530bab53f055f3583646a21ad20c1703f3a83","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-0.43.0.tgz","fileCount":17,"integrity":"sha512-sXZYW4Em5uLEnAuVsQCO+sVHsTg7J2TOTJ0+akwZFMmd2tmNicjarQdlGIE9iU7Wjm51NOoLAu6Mz+8kLg90bQ==","signatures":[{"sig":"MEQCIBnIKhiqVnwYYG/8lBXS/J0l8tmM0jF7RnTvT62b3ECpAiBOM2+b4ZEmrcylOnOjMGsEox5x/EE8ryLcQHDDYjNQJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":159546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60rCRA9TVsSAnZWagAAkowP/3th2nzhr8/BVw5zpPYA\nLjm37hsWMTrJggIWJbx1o3Dbohx7qZfArizywa+npl3gsi7nA2mnoMSXtTTY\nDZgT2jJRJsA4UwnH/zwhf51UhPw9/SxL1dWZjZoM130X756fwvhlp5y/mcqC\nXti9n0El/sM3WbMVbJmJpzfqYlSeqOQz/fPZTggw7nuEzdJLiVL/uA+9lueQ\ngH58plMwiyjFi3o09TmTKM8ueWz691mjnV+16R0owvV2VNIiz+Q2xvNx5Hlj\n3OMT86LqmSAUb7FuR5NOI4jM6r0KeheKOg+pMWPprJnB9P3QfaUEptiBjihd\nJ0T5QGL1NCtVq4IPTkex7RvRF5wUhh6Adell4rN3G4cfXqSzdB9dfQo2sQ5e\nhdrCYOURg1uUes2ji7GEvmTRUC9IN0yTWftyc0gOT8gum9BtnV1Wv5KTD7Oc\noCJGlI57U94FixQwYw2cj9uQ8QpzYlHHpbkuzEqSpzSrj94rox1uWqhzboO9\nA7vBtshNitdVFHdGtfOM6C6wYaapg44oqymsLEY6y4evkAFKhs4r1ey2WZiy\n/zcn+5E/KSE5FS9mkMkhJqNixQMEqecK9TcGF/NdTRNUU5+ZsMWuHJrQikr1\nseCcyjndmbY1FcBj3My3h4OEhVkld4GzHvUxFFoGafYahak1hetDj2FJI8Ai\nA4HZ\r\n=iwWN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/base":"^0.41.0","@material/theme":"^0.43.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_0.43.0_1546890538577_0.004992371760150105","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/line-ripple","version":"1.0.0-0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"11b572b72a2a276e6d58e598ac1ec6a374f251b0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-1.0.0-0.tgz","fileCount":29,"integrity":"sha512-ov25lZTTFD102NvFaZ+GwNTrXrBRGaaGpYZMLex/IkRUIOc9JJmJzlHr+Fn1u7EjePS8Kwz5H8e49zLM5EuPVQ==","signatures":[{"sig":"MEQCIB1p+n1vmWy35hDwX+W3XuII5pfIsIqjDWVI8RUZXjMcAiBNs1ZWw56AJ3zMPvnml6SxoG0a6FZSCyeUSbsECse4uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRaCRA9TVsSAnZWagAAHB0QAId3HYGvLESvpQDR1GXT\nAAQ/PnQpyRcBuDFmQQ2WLqryGTPFTFP70lITsOhMxN/Tdnahl4sdFFko8xAb\ny4l3Ok34OPArTaLbUr6+/2mWk0a/7EgObVglOF3wMwmNzCMvocxQw1Zw4qTN\nmkPscK7/5q4R4d7WyiKf/ANSSXWNEZ+SyRjx9Jg4LZis9vrSx9BPM9dwiQ38\npG1Gk7rsxtvysEHXqg+wW0HUAqOrqDL4qWfGMmVY4wc2KY0pguvqMnYx+N9H\nm/CjXtZekzVyXuRVzAbr62jSJDynSV2E+VStI9YsIT0iFWw8qurPe1Zf+oUT\nSgkfMeBUkIz3J5pRxbURHgeDTWfa2FPGcQmwcdlRYBP5e3bv2lLNWtOzDdQQ\nkisuBLEo9eCpaluZCtvjPl+S+60dd7xhzegIqYJh49kgXCyCXQZvxEb2UXcZ\nB19AGGSgIP9wNzASwdw8/XgqRJy255VHvNX/QuQnuR47FlxGklGInDbGB0nw\nHkm5O6jvcTfaTP5ibEFUB/2AzMxVx1dqpWwWiThIyV4Eaa2kjTobsgTq0unr\nlbrqGUXyyGij5xLbLUoaVDU64f1XIdCQx7jI6X9p9bCrtfmhF4ZmCI62L/zy\nC3IYu7enOeQ7iulZCfiv+ySenfmRsp/7bcjZW/eYsee5CBa3UqUe6fDuzliO\nKbz/\r\n=oDbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-0","@material/theme":"^1.0.0-0","@material/animation":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_1.0.0-0_1551311961627_0.28102158630069085","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/line-ripple","version":"1.0.0-1","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a15a960a2825018a77451007c4a6a6d4b729e6d7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-1.0.0-1.tgz","fileCount":29,"integrity":"sha512-yHT+Gi3invZv3Ya16YWAJZJ/h0cUr83ToO9uDlAnjW8VWaH9q2XEadGNqSNxva5Ucsm25KCGijtlVpnGutL0vg==","signatures":[{"sig":"MEQCIHveWzupiPuY+HwCjMZoTo/xraMk7n8NJnMH3Vod+eZCAiBCKZvMpI5V6cYccG+wK4OqS95evFoRKoQdXHs/3Mf6ZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273535,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW5CRA9TVsSAnZWagAABjgP/iA1HcIqwz2ATAoIQm1i\nL/amiK0qHnB/39NtKziL+jQ+6EdvCiWo2TdODLIYjqkOgx8j/Xp9ay7dNsHX\nwPleQNODNvXwU4njGNXfs9qJpKO9aMrbrCLoTW4bZxUOiJzyVHg1j3dJRY/1\nCev/LwQdP/5rtR9Tebkm6jIveJGiPhzpFowQqAXUL5uJa2cmOZHzFpxS0KTN\nRJL/XuOW80ZRAmC5Vvq7Yk5kB0sJ/VzBIp3aBqDthlTyf/LgeG+HfvpPD2Ty\ndI63r+xOGiz+6OXjMjK8tA8dSb9RWVXyjDrqhZaT9ZtFMSuZtW4OQn04cu3J\nP8+ObDDMK+1TnNciasClPSQw1O9OKTQch7+Cnk6DJJieV5soi4yDH4jxC9aP\n5YNh/QB8mz371m3Vly8IST/kwfojs3UzU3rG+ylvs+kQxABKqJMEN0bAN4OH\nfu5yH8zUU365S5v8f0gGTKuA71Fj0A47UE1RZLSh62mFI9rn8QWQsr0KQrrn\nVpiyMvUiJ7o/7TG12haHuyZgM8SRquG0D+N3hZaoOYGeYVYZRPW1JADXYEkY\n6txIq6RWQI4fYlB8Z7XUVIu4QSLq7b+sgUhe3m4AMHJEnqrea2LCCyosZeLx\nFN5OHJKIt2QSZAIln02WVThq3EGQh7wwnIbgGvQ/tb3pfcpS3GB55favGqwq\nNWp9\r\n=CFAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0-1","@material/theme":"^1.0.0-1","@material/animation":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_1.0.0-1_1551742393217_0.7870868575918504","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/line-ripple","version":"1.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d337880d08a35a3e60c1411be32355d7723ecc65","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-1.0.0.tgz","fileCount":29,"integrity":"sha512-sFFpoFXVnqkknkac5bCrMhKGacay26AWVFfc3acaEGjQgkvF8VBV/bS41+CioACyubpc4JL69PU9Um/t7xAQVw==","signatures":[{"sig":"MEUCIFGvIIROBPGo+eXy3TMDC7JIc19EEA74E/cVI8uZ45adAiEAzM3rMdPNz68k3FUkORkL5MgoC/SLyyav3z1N08+hQco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":273527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDaxCRA9TVsSAnZWagAADPAQAJdfZgAXzu2/yhl8AKur\nX+nLIvWSKFbG4G158ahFSeNK66f93ok57AK4I/18FVWMPmRDGW0WBx8bx5zR\nzA2oh/hT/faO6gGRXtMUOZgE22i42UXARfNIOUN2IqE1Wx2XDteEjHNN2xun\nq+peLhJF2KTwkdvRfTVDb6e1TIrNT8bz2P52K9B6g6cVZtiXCaaePxTZL0Sr\n32zNhED+O5puXp2Y8UPqAWy/L9bKYP7T4u5yCnFiVKAlJPVUBVIwHIDSpM2G\nemcEg7pEB4jdGenmifjimXlzbt8jpg2TQUS8eQiBS0WkHeKyMmyC85A3oWf+\n5HW4XpjfClqdjXYOa2x5DsRkx5d3DbhFlFyzZxX84QaAS0gWzwsjaxV8KFoK\nHmslSWXw87e4Aol9vgIctgsw8XUOGeLk7tc3zXSP7INOvctRFSkMlfiP1z27\nTHVfCmZxjEffWdAIP1tsl/C8T+ZfeZrojPrjn3/SYFZTFDF3H0wpYcMoG6q8\n5pndOygjWQOLMjeQkwFgop9ebEL9KgTYCgOiLJlqK7ZJ0FVvbZLROnEW0k5y\nbLGt/KcroXFnHGktjdlQjbBjPYNw4fC9zPMXs3n39rbURt37BcFbcV/2RFV8\nK1klNbMT5X+EDkfAEjE0BNulIg/ieiL3AG6yGmbEPDZdPyvaMFiTQrL1BCZu\nTWFW\r\n=L4lh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_1.0.0_1551906480487_0.3249461204000539","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/line-ripple","version":"1.1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0fef69c14ddf42877f10eed05c1a2489808f1cf4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-1.1.0.tgz","fileCount":29,"integrity":"sha512-XqCxDNfgkh9zq0IVlTEFVjmQV8hx8m4vxLFM5qwHDDqcKPlX/Lfc8M43fmm9uE1CaJBC6whMGPvOt/dIla+RUg==","signatures":[{"sig":"MEYCIQDaqeHgvooTk2TyUKkA/MxF72PBps2ot+nXVhETImZAEQIhAN76iGq4Na/tJMPmQMMaRnvaFXTHOBUlKj1ZMl/FiXj8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":168696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmny6CRA9TVsSAnZWagAAmYAQAI/HeeGYs3apDX+/YG5O\nmAvTkW5FmCRT8vvmP5rGSddFUdi2NdB6/e6hvL/xC92clLDUCQq1jPr0JJ9p\nqcVbdisg0pyoODR3iG7kHWuqJ3LZUnvTRGYZ5XD3ivLKoGHIEBNbRZNTN/et\n/PoBgxW5P7AoCX6feQ0dtUmCUTDDNfYhn130GwQg0bOpSovQpAQbc9Ep/ZKs\nx5+pLwXMJB5K1D6euomFNt44/qPklR5GY2+6jBJtNpvbxyFI9yicbLzIEYi9\nMmUXYptAu6g4L2foqCZI8vC/FaNJF1xu6cnR6fLPIqaL+su2yq9AQf+A/1yH\nMwhz4r/CaMhbz/SF40tFTyMuMAMn+Qp+nZEdw0FNKIBpoNVx99r/A5DJTMI5\nZ223trxRMkTES5dYlImAjp0wsOoBofj78lBj28keW+6uCrFIP3V6kVoCwCAY\n/8V1BdwusmmrOxXhAXmAJ724bGcja4foN+xbeiRdFBaLRn39aXYdyFhWncLa\nJK4E4/Ufi+cXAUDTjcu0czTn4OQP9xqRZ5UbBXpbUOQi1s/poxo2P8GhKBXG\nSlmRKE4aHOw81sr8/J/TAaLnB4wwDAtcJKFNJkBPSWMpQO3ExvYu1BtXjDHR\nz6QdEn1LKO9LataXIKLPixrXOndqHh1UAoPrbYaAdc6lAK9DzyhBXGRdyTpL\n2Yi1\r\n=EhWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_1.1.0_1553628346202_0.9722883620755418","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/line-ripple","version":"2.3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e7d876f1dad0a7e418ccfefed875443fc1f303a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-2.3.0.tgz","fileCount":29,"integrity":"sha512-gDjUlrM6P182ldY4CYiBMcdcUtch1DWd1osgp5STJXxth6ukRCNIdDigrKCHtyJKB8eXeNORwWs39xWZOGihbA==","signatures":[{"sig":"MEUCIQC8rP3cGgUkxZVi55RUhPx2xIMLMuzcs7N5TV0kN6hmagIgSP6O1tQLq6Ss9h9gJqgglI2Fwvj54bCPfbeGPxLgfjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":187993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7abXCRA9TVsSAnZWagAADFgP/21I0FbnujDCAX32hLrt\n3y2U6FXogc17xzinxRjxMU2W+pYSH9jnxecchb4dVR6wvj3sXAsmk8DpvYu3\nRAP8wbS8Cggrw6COi2wiX9k4lA2mRGgAKo2Ts0Ivcs2x6j9t9vH3H377j3mT\nWl6CCZcrXddqGhDA0lvuaETYKFQrUHbEPQbR5eW+NZwcGkIef7R30H7OW8G0\nyWjZ++dT69sAMVUjp6vrJmjd5WS8euR3A/qfYo6y2mvoXNWDkNB7Y5jd4Smx\nmG4GzhZ5LfzAMCJjcT9o4wWtobvKa37LMxqyL1SUb/aN/GHVjT0WzUoAxo6k\nt/7yl0l7RENk9n4tefIp+HKoquuXzwsK79pLiLaqjrDYDAxbB1ZXTR0YzbJh\n8C+b6sx311gkrJKGlEOeeL+If/+L23Hh5HToYH9AoOJ2klD5OeUrgXyKwq7G\nek8e9A7cuXq9eu0WE2kkqDxvmzAZS0TJ1M9XUHEu8s5oB2JY6yPRXRFDnQlf\nHvHNQZPOCXaOBHdnG6ugPLaX/zNrm/4uMAXyueysDs8lPrPj/byPY0aJBWKD\nycSItEVRkd1i2bzJhJ+8cTar/r5GQ5ZlvZ3xxV/Mt++aie6kMuwfieqShNIP\nXq7TlrtUWYu/Z5XfelMQ+bs2sxeh7TWNI9ZsC1bdsjOvZYIycoNuTLkZ2TUO\nnwEp\r\n=kfL5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^1.1.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_2.3.0_1559078614774_0.9846361482750463","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/line-ripple","version":"3.0.0-alpha.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5ad9fb3051848fb8eed96720dc5a7bf8ee44f51b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-uSdNjv2qEG1pz7V5svQ4UvRUIriHI5ultS7oess74T2ZdhMc/bkxJYgI2ufsgNcKFPD6EU29V+hFwdyYjz0bVg==","signatures":[{"sig":"MEYCIQDwFz68hn/IW1wCIyKwyW7YQeiRggFxyyxxaAe4cRm2UQIhALiLHnduN8DXEQIweL2J5eoGWXuByGilMsnUtLYow9jB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpVCRA9TVsSAnZWagAAVIIQAI8NG8m8z57rMDsBUvnK\nz0GsyMNJB2IeNjEqghu3F6n8PSVWkuf+nKy+APGAd0bjlg3dk7X4WbDtutNQ\nWZsypXHyJ6pSjHwupsstc6EINxjXKZTqqGYg6ApQHwE8Z+Fi7dPmwTrYaFKg\nJ1xXFtgAUdc2fo/U/W0t34HBcRK86SZqnurTyyN5ND0dphL9tSD+3DJISTrU\nQpX3Zra3LQ861ny6HiuIvS+qjx9Hw11IAOrYhELV1SM2cv9/BGQZAEALwp2N\nILxFhaQdOVQSY3x61xRWfkk12zmE/pDMSeQMmN3pIyioQNCxAJB5i+sZSDJc\nCRnkoBoiky7xvYT0e4rkRCVgmgFV+gPDC+ZKEzuAny8y690Ro2DqYBqsGOhK\n+kCemIQyM35ULU1f1xibIgCoghfRB+yDHOrkIThDyMRPVgE95G6ah5L/Sb76\nwPJ/iQU4G0npILwEdUWpGyX0QyJeUF1uQEMh+cbsacVxV805pgK3EGvmlqkb\niZyJgsoeI49HICCF0gEsajEfbAIq/fp4RqqhH+dxReQYNYgsVYHi+iuShE0O\nszajh7pR2VzKAxQZAax2B/I5/Lz4t1OBXOo5y/S7K7XpzohW1FdEjDSRKcJO\nZGpK+9XArcHxTAj9AijorQvVKLgt6PIi3dIkK9vxZbycJFoB45zoHepn7JQS\nGGWI\r\n=r7iG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_3.0.0-alpha.0_1560312404942_0.13736781965131128","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/line-ripple","version":"3.0.0-alpha.1","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"16f9f196d1ed6f08786f9e012ed5b537d5fc44d6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.0.0-alpha.1.tgz","fileCount":30,"integrity":"sha512-z/yP6OVXUq/q9QdWZv7HjLfz8rRrlBDZGNraU1H25zVK6Vg39+GmG7fMz5i2dEGmRkTSE1Ox79++U9kR/8qH4A==","signatures":[{"sig":"MEYCIQCzkvtGv65ugNbG2+85K+6Bx4aUXCyOKv8NSEDzjqKTIwIhAPz7ovwGACc47BOjmh+mbCKror6eq/gicwtyzscMMB5S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":189144,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwqCRA9TVsSAnZWagAAy90P/itBw5AMnTRQR0r9PQDi\n5Jfilt8JSpT/shOeiH7ZAiQMPw8ITxNOrxJV/Vp2wBpxzKcm4XOHi7mQ96Zu\n7AniYYFtmCF4pcdEJrOS7pQM1Fv45GEM2A/tRiB4xhpH/DlMpyPiL2Www/cM\nmyoHoZ8dm4RHG6W3QWjSUINid5G3hnbok2RkEDqORQ02fOcyEgGGW0cLM/rE\ng/UEKJ01UdMP8SbYGOQrJxEsiAK/5WkzO1OI2BnkTbMH1DIcxEl1/NntXozT\nWEHI5ZvZGOAw+IEqMeOfAElQiDlGX/0hiQavmvuscdZoQdY5jfv3rWcjJlN5\nZ+sj/6ApgaxGmDUlUnrlVosy2oe2m9xapG/Lcagn0BhoCUJ59YY0aycZv32E\nlVYv5FTOZgOL4Qqt7H7jwQ2IVQXJVil8xwTOKuKdmP3phFwf2vazZaG9id5s\n0sZF+GEbzFSVkCnMglWkGEQmcYnlcnSxa7RtJDOKDT5fxUndZAjZ03FgNv3M\n7IzNXLifNNKdCMgKJKaFfkoXiIrolRgQNXR9wfV5Y/9+cDvJsy7BGLcZ3J6f\n9Hkt1hJLMwquLKAlTr5HWs6lTwA5/ZNeg524lcEQg0Pb5Tl1Bz9vs5X5bHaN\nzb8ue0AAhEYl5JsqZzbJ3mAvJQJBMJ1YLW8LJ35XreylqVtCaMr2ZftMbEjn\nWfWx\r\n=8IrG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/base":"^1.0.0","@material/theme":"^3.0.0-alpha.1","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_3.0.0-alpha.1_1560366122183_0.12142092365293466","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/line-ripple","version":"3.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1ac139b2f887ae7771594fb6b112d070f6aa0368","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.0.0.tgz","fileCount":31,"integrity":"sha512-422oNDr441kfFSXkHweDKFxo6dKecUfWST7TKAgi8pdKEJJqa3YeTEFe11cZhkQHjLDVnR9DIfHT6ZIyzAo+aw==","signatures":[{"sig":"MEUCIHb+EoxF5tV3HGuPRgy8emBt+wOGPQdtIIOHj+s4Fe7lAiEA9sy2Q6WmgdEG0P0PKSaiGg3sY4jtQaSGKxsb1tUleNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":190284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/nCRA9TVsSAnZWagAA4YkP/3BCFtyio7CU+N8srnSX\na/oOnFfyL/pOmm7RqODw0H4cDioO72+xZNVsL1wRNMGQbwTbp2XGq3b2WlPB\njXM+nW1smHG1o4ACH5xkPCOTUt85VT2tBDXCT92sZFTJVu6TOZAbWzzG0UiH\nDHmTrR8TrNExEL3EcMV2Tq2aC+Rl2Qq7vw1JxVVsQBI7mY3a6jaHOaDpNsir\nj/V6XnM1mH5s2Wk1rBdF6jSmiVxHyy3pRkP20RE7DeLXEXL6e+Fd2EKk50Km\nXpbcKMaeobQxndpWOvMc1iIMgzIoqnFbPuWyQdPI7GCJhYBqghSKp20HVgEo\nGeBahcUxKbzjjH0mLOZhwntOEcedYw5D+GOEjP+Z8TLQsWn3Lidk96zyXU/Z\nTWx7Un5RUXySuYxnE0gx5ibLXFoIW3loxT6FXWpoD8hUW5v8YBlDClcjRNeR\nJH6/DSnj9YLZ45ZSYthQFfPCbZ5kgE2NCCxhP50U3kYcS9hi/fbgQILRnkza\ncNm9gcRhGH7xshM0PPXq9a0gv/6TGFwisZWkanM4CUGGyBae/yrzVV2+nUbE\naBZWBjnoEm3JKTKZ7mzeihBiJWgaR2qqW/X84TyC9XWKQfFM0G25CRNzZqKD\nnUm4E+tkdq3H7X8hwE10D/XABBd1ij8xRlu3PJefwXftfbYLbloR/fkfec0N\n2EqH\r\n=z1Si\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.0.0","@material/animation":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_3.0.0_1561501671034_0.08585982526796454","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/line-ripple","version":"3.1.0-alpha.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"deb61b45c0f0769ad5d24149380d6fb2fa24240c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.1.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-l5L503zCIjDgjRjdtBnsO/q/cJ5iKni3wnPRtkA32a+Vv2rtLHpI5goCc+8xx70Vv+yDZc3WutMI8Qmul5+8eA==","signatures":[{"sig":"MEUCIFNgn6Gj6lFgX/LGE58ZNuG8bfoW15jj8cDyD28WBggSAiEAjWYNxjLC7mDIpFzT+3a5o8lulVlIpGfQMxJDL/Ae5KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEhCRA9TVsSAnZWagAAhacQAKOfMCnfB6Ug7IIEx4q4\nAdkqye4M7CMZgdLRwDkEexD0U4JNn8g2xTuZ8zzx7VsDj+JLefeXkYt7Lu6U\ndSxpxuDOdmrVLswMbW4Z1WXY3ONJ25PBIOvv2+jKB9drpFfQmvsduXcO4rKL\nmETx3UZ82sKCgXF+MDV9iPpoqyuH11/gCUo/uZsg0M0yGKCUOV7jaQtpmSqN\nUbUHkB+8tIu2RCFoyeIhaf9pBd81/SUe6Z3ZnfadSe7D7MqO3cmJx6i//JeT\nWauoX8wolhB9E/5wv+vjDC2ynKPt9hwWDcS3l+huMBv+QYeRzUHoTLM5Rv1V\nNRkunmjJWGUblpvHnjRtVT8ttMlVxHRvak1N3PinS5Nfep3ia54Hdfgy/TY2\nRpL8pppEwPJlNF1LG/lBAGAVAWyAg5D71du3fg/+S27r+h3QgDSD6G8ZFzrI\nMXoC8f6ulwTH8DfEibm8AetSwT9KrHYIj5eOuRr5XGvdZtmAEk475koOdylJ\nVKgThzvWryUfLl8JQ51k1W51Dl6sm7UNUtdFgiV4mqs4GnxOx5VFxiR2DuJJ\nzInFNPiiuwRXIUUuQ8wcUHt4zcnEP5eVU04sv5mhOpjnTzqrNLaXrq+F8Wpm\nyM8rkwegmqhshh04cu2QE/fKD19gaXrrkZk4oFygBtCZsgNes92zjTwUtoDB\nAfIv\r\n=f7xC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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 line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/animation":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_3.1.0-alpha.0_1563283744374_0.028283335781898122","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/line-ripple","version":"3.1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"63a4f41f2a2a5df01c2e229a76fc2b0735cd62c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-3.1.0.tgz","fileCount":30,"integrity":"sha512-o6E6wrDqoOK4esCnM1MQ9t7DC/JQrzSrwYsYdqtOpGnr3G5Jx7WWVt6GEVh2eNXy8OnVYkJdQbMjyPVEVJb/Dg==","signatures":[{"sig":"MEQCIEDp2yZmex9bTWU49jbd0IMpp8XARBx2XreAXS226OBUAiAgptjM4Xlxurib/BQJXyhLlP56t49dWiaf6WyFjeZjSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ1CRA9TVsSAnZWagAAMd4QAI+FhtXHxsxvPCCA71A0\nSVA5C2J0YXHr8B9fOboL19IrNS1yRLaYElxUHVKoSPmk28TSA+216FwMbn4J\nJOg1mQbScp6FnS7VOQiAIdm894/8XtefCQMhlbBukq9BF0/2bLCxmYOD1cjd\nvtFfXAnUYg1MnFoW9XpbE1Fp/FFniyVd6PmmvkZjCjBKrljbPUiC9b09/7Tb\nEUpgMbOM13+r4CVozKPNZ2+nxQo/y/Li1yEw2KFPcOSgCAwpvwFlD+ZtqI+L\nb7++zglw+2y9NLg5XUiW1sw2KABOWaH+TZjY4C9jWxgXlhZPVrK0GgO+6G0h\n7sOsWeUomODOEF/cu4wSKzhurZeU19DR8IPmVDDiwYhS+uVum7k0em7Ms7Hl\nvQsjTx3YMloghqe4OtLRUyT941eo52tVjmatdYTGcScB87Bq5Wjt+Xo6pysZ\nO4TLLzrjUwWjNXFhh0kI3hfLvtaY26E8zAm9xN7kAM8IkU9qf8mlROSO2ySK\nhV3DflHfAsUtLYw30EsV3FA8OCiNwQzfah2y2tWsD5E1DBbPz3xK4tnLy9KA\niATGkRollKTEfaYfWL8uCXvGVJN2OFZvPIexICr4h8VYV0Bf1+7V4VZNNU6z\nxpO3ux7CtLZ/0cT1r8uCTTfgsM8l4xNoC+FS1TY3NVDVYYKORxJ8t24gBHAY\n0nUy\r\n=Jz06\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^3.1.0","@material/theme":"^3.1.0","@material/animation":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_3.1.0_1563832948646_0.7289978838323974","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/line-ripple","version":"4.0.0-alpha.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a84ed63eab365797b99587ee6b0817cc3fa30397","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-alpha.0.tgz","fileCount":30,"integrity":"sha512-tQpSuOF2PEEsXykJMnAaQsRIOmQ+qkTbahnxsdlo6KRfRsIE33Z9pafu6ZNbbrnykKpcqTqh4NIODk3CVLSctg==","signatures":[{"sig":"MEYCIQDmitm4BAhO+BB6RZQDEeLtWbGQI2O1zoHUM0lC8UZVBgIhAPunJxAKt6g/pAPsM1hxtqEb1ndsH0BWJXu7U8+uSsfW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":114135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz36CRA9TVsSAnZWagAA5cAP/i6G/bmMBYEsFQW2gea2\n23A31toSsEz/ttztv3xjyq53/UC+w8ULyenvmJqs9LzR2NLywXwG0Zqb7KPr\ntHSR37LjOuExL4thkOyp+mZoSUnq6jwIxQrEcs6GmVQ6Vg1BUJnVffqyMZgG\n71PfhL39HDBamKsZsEsimhHtgYlUSLI3OCa1yUAhWX+bg/D3xeHdEUh8c78q\n54qVtGOzosgC/lrzN8yKauqP4ty0gOEa3rZo8mK6wwaCOXF/o1+iXHrA17d3\noOPw0ZLRGnGPTfrfnRTrraML6ivTFeLMqehemTzLumoDZ67wdlqjd+gM642n\n1CIruCPPtiwRjckEkD4S4w7VueQkqK1qKV+H9/zhl4u9PsMlH7HPau3AWznT\n8micPLweV6xPJj5a1mGw7F+AgZheT9/ZlNJ7B5Qg0iv5bpyxGCdvmYizs1kF\nMjaoaRNkFjpTj3i7fw+cipb4+CsG5Q5cXXrMVCZbuZ/b8pIyjTeBKUnMGJhP\niSgvVzeYrJJZXhDABNqwEvRapvwgg1YiSq9LpUZfEggFKnQzO1eNDr6KnCl1\nMgAALe9TUgxJOZNvLOi4qeAyY3P7TsDKcD1GGJ/RBlAKLYXhwYXzarEubNNN\nu5+c+AYeb7wkAuKYjt4U8pcnAzWFpKA8SiH9rVVjDyeNpRircSwp8XUXN+go\nfQ2K\r\n=cNAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-alpha.0_1565212153824_0.7340961127229284","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/line-ripple","version":"4.0.0-canary.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4f5f09fd19dab055b5f04f65a5e74aaa3079444d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.0.tgz","fileCount":30,"integrity":"sha512-cU2b544jalYify8Krxf7pzqdN5WC02osBUXAaV4C3Iso1Zeh0tbkxxK3Po8h0/IYuXoo85sehXDG41ov3hdfIQ==","signatures":[{"sig":"MEUCIQCqWy0O8NHy4zgLuYsrPQyE8dI4UvqdRVOxAxFiAwAESgIgRE0sjUi2Shzi9XA5AElSguhaodWHsy0YBdDWWjcGZ5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEZCRA9TVsSAnZWagAAV/QP/RiwL/n3uXPcKhFnvu9G\nk+jnuc6c/RLOoy8K9RfZj45QrP7KgkIukw9II0b2g3TKIaQNo9vdGVzoM/0k\nErO7KdnyHpVRcG+tGx6rLPLLt30oo23y/riK0ijtnHG24E05/Mfpy6QJt/+E\nnX2E3AVy1hOSp/NYvBAAnQHtghM6BrimyErFTF2DYmmrrgWUASMF1poVIG3B\nYDvs03pUeiQSvyvhnuUWFiVnSMJfO9k7dOaosGPHdaMoSJraRgojfeEzN13s\n2BFpdjLPl5e6NG9v8R++j0oUADrBFCkEnhXO5g7rNMzsdBPGxX/sUd8soKXX\nBqDXZi0be6tAlJ/u8kfPC0e3T+jBk8lzjJJdArcQBUVrtrEi/+6IE6pPRmJ2\ncE+ErC3SPzPZeWMRnp7nCiUISjUXiXw5PMhOhljmywcuB/iYUP26j33CD9g0\nR+5/c5ttXNFTzPhHjwTAVbd6tMYlV+EiFY+ttqY2m4IdqcfgRGREczqnFMJC\nkkDhK4RzPB0Wg76SJ6hwfFxEjCFzx9orD3K8xUWicxDEdNU66b+E2vF+PMUe\npPUicmtFeX/Z9mejrAGqKBYanebcPilGjzgQFn/FEGUERobadVynPP+QAIDe\nUTXVSkS3bhmgvldPZcwD+m+28J94CeYEuwNotbr5IBsWxenALjoJJ1YxeK3s\nB7Dc\r\n=g8Kf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.0_1567658264826_0.05426991756107147","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/line-ripple","version":"4.0.0-canary.1","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a0500f7b06de226ff8d467b8d1522ca3fc77fa1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.1.tgz","fileCount":30,"integrity":"sha512-xAbj97Ll2GENc72QR74MMxK+wc/HYwyY/wfeyhmpkVOCR3zkSleA2Y4HpG5h2w1Ek0RA8HMgV03HPYTQ46czeg==","signatures":[{"sig":"MEQCIFRgxY81usX9ih1c9DhtV9vPCKDkA3CN4abjLLmJXs6fAiAYx2Mw+7IvHU2qVBPBzqR26/SeqrkVB0fMgPyiTB3GhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQUCRA9TVsSAnZWagAAyA8P/joBmnGUumjjG35h/0t3\n+tSj9CtYw4Z0JDsggyejJocrIXJ2LwZvvYgzLHjZ36BoMITt+GgAYFODa7au\ntWvtPlydbDBwjichNgKNWrk/+W1X+3noUS/bKdz+E9rMSl4v1F9/15IhnMCr\nvF6H+XzxjtP87B2h+bIa+E1ZEg4+E1u5xesnmzlJpbScEw2JgiIfzwHNsNMs\nsuNPaC37u23ErYeP5TVQBVB7zJ0U6nElyfacGl0Xcg8ojx74jGbHUC6fcZQW\nVNOxZSC0QsV5LrS+qvyHbG+dRQaTCVVvqTJpY/iyizeR69NCwqbDwQhaNLWX\nLIZqKfiM3PIfNK+3lsPCIuBKx3Prip9LP8/LjRA37m6oah+Mly+8DEYlMQJn\nzUz83m5BQd+mRVNYeSAcE/Nj9VJOet7N52weYaEHaa0DvMDxsUwjYqIbps8+\ntZi1Dk5ZfNtvH16EkpT5AYJrLLCEYm592CWOG5YAUPcXEcQnFgFo038jrRaF\nJPFzgjSfBecAn67mp/s0x/GeQpxpeqNK0ICRy22FGSeykIfPpeCoRv2/2NYv\nMMlZovEQptazBo74sgqaeQOQgyOlGkjpk21qO/zR+/UQGryzvantt7K36Drg\nqjaK31754WUMEVgAJyuskjYh3//VWcUA7cZA6CtNObU708aPFrUzLLSESrJy\nKL3n\r\n=IEdg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.1_1568060436070_0.04363837674404869","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/line-ripple","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d27c30bea9221ea450eaec39488ac91a4a43740c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.79d881baf.0.tgz","fileCount":30,"integrity":"sha512-DtzM133bGyGLAdxp1oovdRPis3PfvWm9NIbhqUG9a119TspXpWu7cCkUcSEo5ifzqIgrci48r/LNIV1SGFhhkA==","signatures":[{"sig":"MEQCIFRlRuovgTe8sh0Dtk/Khxg9GgMRIIVkLhWRJ7WTYoM0AiAcaF9EFJjz/v6lCEarvDByPLcPIResaWKrZskhQKSL4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":116856,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0nCRA9TVsSAnZWagAAmFQP/35fL2iMCUUFlilbkAKp\n/jLddd8ihgPKOhXZE7nIU+rxv4yKNmSlimCdqHYHsjxBOWBxSOC3nC13TJLQ\nqiGHpUDfGXuvR9pC8uP6xUKHmMxsK/ykWMUzkecXRlLi+paLewAAhXAzz3uZ\n2vgj5U0gbotYNa98paGYy8CnP/xHhT1ZeQ1tTrtbcqgHOsMcKOLE4a4h8Jnz\nPH3tQdu8kroa7OOgmDWGcc6nO7XdrMRIO/1AYnl4NX7egYxwuo7Oq9DmAmvL\nWi2iwfAIt0fPVchIib+2CHotSdkElBn4BIyTcfHCSIdvVp2Gcv9ZX4p8nhaG\nE87wNOsiwT0q4/RLWEzxZceKv8OXuH+3I0wykqXEF39YknV+loqJZOeWiugu\nvF/NV8yrNaIm1jW/bXNbFYNfr4U6Ajo/+uqJiMvqXxgSy3LFhjw4RKE6/tdh\nBraVKZFxzE1jUvhz9LaR1uAPtZeJe09Itrp8LWutciXQmUQUJNsABm4VzNrL\nxz7KTK5vNXxDYHIG5ToKKGTChXW8xqcRzvPaTAcinEU5WkJ4ImlmPUjoFTBF\nX+6Cm9TyJBFHYyEVb3JR06LjgIFVXqv7kjdVnHrP81rZuH+/tbE06PuzR5EQ\nkFjD5UJQKmZpEc8g+QcyAVmVoeqnu4y5QaikRBr9xcx7Mhxy/CzWESfiz5r+\nAsLO\r\n=q9HS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.79d881baf.0_1568341286550_0.32556236918307024","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/line-ripple","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1046be11bcae851b4bb57cc6528f5e72da331680","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.e851d4f40.0.tgz","fileCount":30,"integrity":"sha512-yd5IuKH1zDIMQHiYa9T6viv0Wq3XiWI7oHbpKCH8GP41Mz1yoZO7S1lEUsCTUgQGnQMh6pq/IiEgssbg3VllAQ==","signatures":[{"sig":"MEQCIGDklfEKzV3tZqmIeNuK139xJNeCS5yTrR5zGu8BnX3mAiAnUhp3m2gRGEUdXYyW7n919YAdxXAtwCZqmeBbq8FDPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexXwCRA9TVsSAnZWagAAkgMP/3MbJSAWlJxtTgrPwsTe\nIlJQDVp5XHrAqmedy3qdyG2zq9IN3aOt6LGu1NOBtYj/Q3YNr6F47yriv0i5\nkZMZawtSAIoffGgi+z2D96oU2kqTygsPdiAC+/7fPivvRxVLXpQTnvNsBtQj\neLJmlMLBcgeJZGbRSZyd311iXJu3G7BFOZXDMWAy4K0tgPKkPo4wdPTwcvM6\na1zC175E9+6oAdniojh1G+Befgt7aKUxwa+bm+O1TuFi7w5poRvLJVSL05+p\nuvqK5gd/4QLW8TknbI+BVL+KvInIMnQQsAfuEBLs1ULfa60KDDQ7A0uepWpK\n3zAD09FwxIJmrdWbR+D3RZ0Ek01TYyRIThFwDKxQzLFlhYFotidWC9HlydOR\nsLWRYhuEQflV3s00dZ3xalkiFuhuhXEgkIytSLMA10RxwFysKRUFHJBFgKyO\njWnzrCvxY9scdQn2fFryZQFR1EqpGoW+SrvZfe0dE4qmmusiZlms9qq9wPdL\nnHp9THXFC9TiwDLhhuoIYNZr8bg96AOwrc2fdhWsK+HRwXSuKQ4spprqnE0C\nJIDVy8B0AiGYHBJMwqOVDQinnI6ZlSpYXNBGdlCOiV36yqMjxALDxCs/4a7h\namPN30zh+3+oQOpa4KziSCSSzzaervwv/TDuWpiKKiRnlFMLSo1kMo07yDRj\nkyGg\r\n=6Cem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.e851d4f40.0_1568347632182_0.27243688496483176","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/line-ripple","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a953c5cc814e09c7eddbaeaddde68449b5c34b23","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.905884690.0.tgz","fileCount":30,"integrity":"sha512-695+uGKpCbNVzq7aCUQt4KnCv4drcqRkbFh6dSOs+0npcauqt7l5x1PV6Ptz2bSpzuz/fcmDWG7J+cSpHB/rEw==","signatures":[{"sig":"MEUCIQDvcPcnYZyKmXVQVwiHE+7bZp+vMBT5S8+ivT2qtRo84wIgR4FZupoX39kEM2W47kNn0zylScTAUirAwUObBZ5s5UI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB8xCRA9TVsSAnZWagAAMXYQAJRGacspDEohIQqqgeFa\nGl8ksgVXKeZBdu0ikI9jzrZj8f3IJ5knKBBvWsQx4x8L3Ppu8QDkYHSDguwC\nat++Z3rcCXb3RCTiJ2v9Xc9KeDU1lMG7Kk1N9V+XiSLFkD8r3NXr3D9f/f/n\njxt6DEkX4qVRBTUzwdEIZrzhf6pX7RJU0S2O7KWbUYJzPbRF6y8C1LurR7xO\nkK83bZXi3HOstI/ADwUSDio43WAg9XJ2egpQi/SpT33Mv62N+pfjIv3L5KbJ\nemRYEDK4sSRxdB2ks5IpEzCbFoNEKG7Pud4MRSdHz/XgsbLyHPGeflYqQGH5\nbJRglZnT7Dh9x89nxIiZT3z7/uIhdA+LNoiaRRDPS2c21dU6bNrvP11SxCTi\nreIUnBRPIcIi+gcs0fTh0ZqIQQNR1gC4VIKsuvjO3TEUI7glNw/6A5y+zy8x\ncw5Lyc/0ZGH/Rr14gApaIi9x8LFrsiVeGlm4y/Oykvt38zWCA3//q9g4Nb29\nwB4LBspjp8nY0V9l7fHp5zBdpROqZRmkPN/8qD8x7A0KF9lM81J4sC2OUyLf\nuwBNteBXeZ3llBZxmyd+IFNoWvVspiEkCIPj2/xoCSzaM1V/dEnTL/e4nkyG\nJTtaL5xHRcoe0kRlImwDJ7bqd9ls3oS7oq9MQwgSwA0sLCELAGtPfPsQKd7m\nRBXp\r\n=rvt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.905884690.0_1568677681055_0.18621782530573094","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/line-ripple","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b3bc971cae75f9b9c779fd1b8de915805a1bae12","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.199534d61.0.tgz","fileCount":30,"integrity":"sha512-Vrlir0+yvTgr6hvQPKDmwKClsJcjM+/GO/xlDm7IaNqxJ7h7bSqjW8V47M/x/0v0c0uRXEEGYBUNf9SJa4rV2Q==","signatures":[{"sig":"MEUCIQCtObI2POFErwCd5QQLVXPgjmZ1PRg7hCr6i6w6l8zrswIgb9UrJ9Te3hk3tMb8YiL3ntmarCt0QcaoklZG8ItNb3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjluqCRA9TVsSAnZWagAAjUgP/A21yslIMOSwSrAu3jMA\n9AKi0JCj0dYwu6xtJSSVCO/vnmC+Pq70WvXvpVDR3AHD+Kpo7W8/E8WuvDz0\nD/ngWjdukZCXEVa3QWRgmWVAjeN+74PDhLzczAR0DxUM+m3kzSurOoVDp3qt\nH1bdxQzh9QrwneXscR2MMLGNN5gEg+7O3Rtt2UiyR9IcKAdkwEj4HiKb4+5k\nqqy3yWww4USCW2+eqdi0z7O9Dx8SYYRLKbAQhgQ2OcrjQ5WfSnDU7eLuGv/c\n9lCly16M8Vcc+p+2SgMehOyQN4AvDHtQYyG5AaEoWzjui6TfNfOaGqB28OAj\nyIOBJ4ds0bqjLxndMlPWe59CPdfJ1AGfapSJYU0hQ0ehENplZRuwin8FYeLs\nJMmZLpLUy/QZWZwFQ/wpaha6yLuFUySOLvugGI1/LBXr1yYJsE9uoAh18YB8\npJj6Uf3bnUxgiH72bREkIXJebX5+tB9IjOkBviCBsxpLrbc/k6Sa/3EnqX7Q\npoqaxtd91+F2RV65D83hkF3QHZxTZ4x76rhZfcM7D0Z96yyycLbxiT3GB3lF\nHbSOgnmg/OcYWvv4iPTrLAhBkjec/i3GKRuFXmnMk5Y1mmWpcnxI0iQv4Ifj\nz88KIs6gQ0KKWNbs17pohRSPICv78B1iyTYYjUJoVhhRZKAmzwIk/cftv5H1\n5All\r\n=anlu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.199534d61.0_1569610666220_0.270337933249428","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/line-ripple","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a00f33654a312f3cac25fa2d8a51fda36912e564","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":30,"integrity":"sha512-jV+2hjL/VKMceXFXaA+KVRmdPm1xWcf1h7WJr/kRk1wDYJfnLHcK8l52H2g4f4G+Wk0E0DPK/8WuVcWKfLP47A==","signatures":[{"sig":"MEQCICTS8Q2mnxvodsfNJ52ejAGIME8Zd4VWRvWt2IJdn8aqAiB91xTGNQPZQggYqksxrmhBHWvT0fQruMlS7x1kphGTXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaDCRA9TVsSAnZWagAAK8YP/AllON13gNXFFNNCMcRC\n9gIjDghEtdaXd1xtmjlUOJotwg3G34DopXkp1WruwHJcJCGxww+yDADeSsXC\ntWYyXlJPiYa+hG/T3BSgHQDK11I1bOAXxMZ2Oyc4daC38v8aoKfYEipCk46E\nCAFCZbYIpg8wZ9VraSJhyGf0epxbE25Hpy5Mmpa4yn0ByipOKCOvbixJz5T3\ncIsKE/AuN3vYjqMo5FgMKK+q6LJ1/LyS6HGHYeZxwE+dxve4wSCK+YWRd2jA\nwjCpwEX51hTd0lOWLtk9zH3ODQrlyRbgvpEoFPGjng6gdD/z6J4YhgqsWlro\n6QBjTbVxQCnsN6JMEtcQPsX43vAX4kVSHn00/htIqo9gBADlz8tcJb/lgxT7\ng9SpjBQyn7oDfxgl0awPFRkzxL4QBxstsoaXFZJ9yVrurlFfqlt9Q6jPXJ3R\nb+b0SvKVIuLt2kLY+JT9XaEiY+ZtcoKUX6xHKWYpXPNaiUEYvjXWxLlkZhOA\nt45z+RTJHqQB08VRwCu/WdIKmFKF0x0vWim8n39Y3aKYzCmeB2PrtFU8Tvq1\nIXib8GPz5yRXwe3F9FeYjkgDN9PCENrdd0U5APPcaZ936ZRvD32WfsoPjAg4\nZooGjgC0pMForS1CdLpmeizN88AS67CQEk3RbvWku72OJvE/4PD1sfdw/teh\nZ3RH\r\n=SKQs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.22d7ad2fb.0_1571165827010_0.3566810871022661","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/line-ripple","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2d5cf97d4bbb4f8816149493235aa471f3f127a1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.735147131.0.tgz","fileCount":30,"integrity":"sha512-GZdA/tU+wj/6Opq4CeUUOinZFGLVy59uZKqKJMhvUetFy6WYKSQenuA7OY9ecISloE998Z8IXfJVTryT5LzZzg==","signatures":[{"sig":"MEYCIQC0Q7SLQujeSVKDh0tHjY27Xab9YDKyuNlXqQBO7zyDqwIhAP8u8ByzEC+dYoKtxi7fCZsVwQdzI3a1weLC4+IqRJbt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnERCRA9TVsSAnZWagAAVv8P/iMM9j3HMOn/O1sRHYg6\nhKgEKLCcEqb46RkXxyJk6Ud5nl19IK1TXuhVKKIDCB54VUaAES3jF1zHjfzz\nciIHDY/hWKF6/hp5RsDTwW9DQRxa0/QYaXPmSZfnKWh30pH5eb05eUoVXUoy\nRLTiPO/Cg3omUtHPw0d9h2krlC4XvduZ7FwrtZfAdt4DnwsrVcDF1OQVOys2\nby/MEFWv1ji3oQ1ZE1andRmhYbXqISDeAjMUP63neEwOI3EgEAFl/lKH/wMH\nGEjDb8XzTBjTGDrxEKEzHX5eYd99RKH6DbVAEIz49dLArGMTYtx6eKCv4BEf\nYtOYSfF+dbVpYzMaiDWEoGX2aFtXvXhf/mjk1jZdowhz9VcVOWiRwDiLucFz\norrQ+tRrfNc64lRLma9L2iZQPzRov5TdIlYszRQy3k5OlHBuojZPfCKS3nw4\nHreTTyPH92VREWSU64wcqZ7ga9crbISO2MXZ6fw/slbU8rTc2GHi1fHPaT8G\n9eSdWch3AB1dSixkkhA7HR6vFKPqwmiCjrXxK5OCabB4g8Xv5CjmvApuP+0f\nJrtxJcF/qqcziSKYRasIJopteik8fkeuseknfTi8J1lMcruEBi/N38QGuMJa\nMvz36PDssAlmXNOc0a0jXchZJz4ijUDMAJU7rTlAXPMhYaEBYoUuZ0lgM/SE\nVBCB\r\n=UHAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.735147131.0_1571189008840_0.8361174554014945","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/line-ripple","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2a949de4bab6c1b476fb98eeb54b193f99d139ed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.062ade5c0.0.tgz","fileCount":30,"integrity":"sha512-9jBeVhuRCXIaBrH5t9SZ+MoKy7R7wUnIWCdl2ASzTjfdesZLOJOTBY6jcUyT8ctLjn180TJB14CpJNwWLrYEww==","signatures":[{"sig":"MEYCIQDAQB5+pxH6CXYo7LkZ6V2H3ET5pkVqJOZt5ZnnjPqAdwIhAKHarVyzim09nszRWp+JQKmepxpYOeJwg7axA18qoNaZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119891,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71oCRA9TVsSAnZWagAAIjoQAJUauE3VDdkk/oZ1g5Jm\nuVsPgUev+NGgpwvqiuYYTdXxFLAGkZhEKtodoxKW9k8r3Ga8QimiB90le1ZX\npS9H1eHBLojqn7LTiLbo/HfeZjLZt6KIH7AeXa+xHjFmHnP77eaaTvtGyycK\nPf6D3TSz23effTTAr81ekmExBcWvC1t31Z7gJzeG/QySJ402M2P+gn91UcKc\nhtUVO2TsHWj4dw3UhI+ErCBJBs9HAQ50myG5lRm633RzstgoED5R+c+liA/N\npZsRtcVRxF3VB32ZtXaLUFO7J0qhN3cBj+hk66mY/0CPm8WYjz8qixC893Rb\nIYlFmiSfTm6kzbPWgpHY23cumvpV1ZjOeDLdUJkjrDmAwrDw2eRkvzbOChLu\nlZkCku+VlVMiZCfoM7IaBhD5fANAsXnjbBlojYaWQEJuyrE1C2VULy1Tg/h2\nGignqEBwfEvQA8SQsWgyg+TweiuFaf9lVETZV0Ue9W29tLaMWQCSXyBxhzrb\nmY9tjEcEg2UkR0UnXRDSHUzSNevn/9c7dnFLMfbok7djrk9V6WvcUGA2I0RT\nfqGB8tziJTTpUrfsYJatzifPxNYPR8x0iA+LhznjvFrLYI9YbjnJuMfjh3/O\nmhkeGoInolcxlb3dxpwFcUiiVsWjpMBgwbNh1o50JROTo/WsH9/mgDFvxMNd\n93Cj\r\n=WHXH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.062ade5c0.0_1571274087983_0.14621139195647692","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/line-ripple","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0f60cfbeec7fccb303b3d65927e82102fbcf9433","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.774ad4f8.0.tgz","fileCount":30,"integrity":"sha512-Z5L/Dzm76lbiiJJlDSwJhR5SHVsZNneY4ZpkDo2XATnJPjXrIdJ/2ryPjx2zQmxsjXyL+b9DMTCDT/cF4NfuJw==","signatures":[{"sig":"MEQCICXRTVi59q80iuSvvnAsTPBVD8F1p+S69HjWLiVM1gfYAiB1uTOdmuJu+9uIt0aX/z+pXAJm8m0rk5ySZtTKBab2Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hFCRA9TVsSAnZWagAAS2EP/jhtfG3xuJrbncHYa/ai\nU+I0Zu5m3uyysMrUZN2zkAN0ueHFZ4KFaPHwoKklqox2MERNDnynpo0WW/Y2\nDLfbCcT68MlS9TtE8QPMqwTldju3mfxbVgRslJwJxqiZZ5TxI63iPvwW1KYq\nt9QDqj3wc9r30m7pYz4ohFI+7C2wlw3F6NlqfKfnQhr2N6E4Fr2IbOJJ0MXD\n45Mx+1IEr5X3O95EHKaTHNwztC11KQLeXVLRkyOx5TcBijrCCDmypHsFx+ur\nPrE1teVz+SMsnQxthh/9bCsFYFRiygNZV4Dec+s04+Bh+tGpElfBh9aOvOSr\n2+6eMy/SSeql7sQsXCuIUOKT+2C2qS5CW+KKLBTRI13sjVGrrfhbFBKmuHjp\nS31m6Z+5Im64udpg9rx6ywCX7h7WampeN4LrJ6ukxCOI0GjFEuxNWU4eXMVU\nTRtrhmkNiD3ZOzy8VYxgoI8QRE5hZ7E7FXZhr9Bc8a2AiX7z8zJZdPHu3cVC\nDZC8nkc/bw/pJKgftlo3Oz21eUcpFTt1uNFA+xz265fN76oX2iuFXCqQHW2L\npWODyyk5wCjyEc9+P0YXjIXQNkNRWMVs3P3adZyxicp+YEn0R2bnddxAYbb8\nVz0vQL6O7OfvbK63gSK5skfec7Qorkb03MoHIWt7kkLjtmq+zyJsYBdg+8YO\nqo/X\r\n=prHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.774ad4f8.0_1571285060872_0.39121793326337584","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/line-ripple","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c03ff860a99ba441b44e73687bfea74612f16821","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.5916d18c.0.tgz","fileCount":30,"integrity":"sha512-lIl/9jud7YC7C5BjHysLWBMJBEdBi0i2QZa8mD85CXeOcwgxU3XG4TFaoJh8ha5uaQCTdBXHkQiGsWrFSeo6yg==","signatures":[{"sig":"MEYCIQCEAvwEpPgxxRiJP1WyLMQrgp/3P59Cpu1BMAq9G2rE7AIhAJ5gZFo3nomlgmQABmtzHiaBqjPdzKlfTi8ZWnXkGhDJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhu8CRA9TVsSAnZWagAAiYQP/RTyXbLXvS+w/cf2ZQoQ\nPUofWCeBYyIy+XoN5rTy8zAWCWHv+WohgJMwOXccX+QuihyeD6ahe/DlaIDf\nON8ufICmZYW+6D/KGOCnlsroAPPAPXKWh5xcqQIbc5ELTPP+IYHxFl6G1Txc\nqYqGzIdwagGyklrvRjdbwmtkj/JFGqyNMMOwUBY45+DEXkJHI9trcwEafR6f\nmqXvCN4H2kIZF1k/goS3tJPr8lOZ/nzT9INVmkkDAZT3BRCzqGbGMpIDn3AF\n/F53siIMLVXcoFOafm1/oxKsClOBAQAZxbLuCMgoMQS3vTyL1ExNhLM8x7Pa\ncJXSt0i4E1z+i1MJAZnkdoM1u06ovzgcH/95Sda74/MFO8UWgYUs6vCbhoIL\nPpiJ2TklV2s3T9HmeWCsjT/BioQ1/vUcXRLzsNiChg7vE+Dg/V2ImKz5NHpQ\nArmnnbFjCBbXtFkV06+RdmG6HMiDKW7lgPtLiOF+ccFUxboKlF9IDnx6Stkg\nZcd+O2FX8X/u+Qu2aeDpk808QIPy4dPKehsWA94jw7y8aYEVYPzoiX3TlId0\nyd6ckE9+kC4UeZyH4TWL2wV4RqyydjkBSrFfqF3IxGyOAuzB6n/hX35mXZi6\n6sFYqLWHMjJyUoXkJa0Npb/GklOrEDxgTJEge6IHeHHHKAdTruSOwnYK9uuG\ndn4j\r\n=T7VN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.5916d18c.0_1571429308031_0.15002329539617842","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/line-ripple","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5dacc9cecfffdb1e5cd7d69670cc213e8989b664","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.d4141c95.0.tgz","fileCount":30,"integrity":"sha512-VT5qrkYqziYQJ2kZFAI8nSWKE4br6apI5LVPkl8c0y92bIvM99WvFW0GQKbAN2qXWM0v/sYQFVzn2SBmsDlW0A==","signatures":[{"sig":"MEUCIQCr87SC7Yn/QIHPin5kfyFmLn9ywAXJbBT0V8kpOFbv4AIgRwg3FyqW10JUgtA8UT76e47+SHiW+CUR9FKO7C1g8bA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQB/CRA9TVsSAnZWagAAm6wQAJIJ8Kz1Syz+be3mm56/\n8sdwxuqR1RhRnM3pkt1ilRbp4QlaxKNyNJ3043EKosxj0CSl9kCamI08k/bv\nvyDHgiY5jU1MUgtrfLAtyZiIv4/YMo6Om3ntZplp+Qsz4R5z5KYI83MKkXAw\nI50WWe0Rll5V1v0RzRPYPaz/6B7r3WFJ5YZzdM4DVi8V7fy1Ny9Rm817KYHF\nsBO1INUANp0iYVD+d9krB+SPQKlVLbBt84v8K+xb3kqrMjnzp8+CnERO9XxQ\nLn9tu2D7EPC4WLwAg0ofa/p5CPskmA3j0bG5uKrpLIyhvrqAZEOcB2iZoFRm\nzuBswFWfSf6L1Qzue7N6TywPj7pUqceeR9w8nZz0GxkrkgCqAY7Tf6UrzPuP\nLcGHRR6f518xB2B2PNcg+WQXxqpAEnElD8C1JbNREYGx+RTjfsvVOidZQclc\nZTLGyj9ZrXFWzqjowCjIPHQ+qxBuqM4uqRIMUCrsEQh26kVAatrwPXgRaPu3\ndeC5aFnEHmXfQPmskNTfYlwO2tXY4/2hqWFcA4sqn+BPISpoCbIqmJCTdldj\nIPgpnLqbjiiULFqHDy1VaBs9CDIasW/yL314f5YAlnPJXnPrpEe6q20QVhNa\n+zQVzZ8vq8lUQRmc68oax81RHWG/4SsDOzPoyJBLZlHXdk3UKcBY5zxoMCSG\n5MVu\r\n=9Uu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.d4141c95.0_1571881087235_0.9388710780782066","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/line-ripple","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ec87bfbf577a52617384aa1ff68ba566c75e8287","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.2b878b3e.0.tgz","fileCount":30,"integrity":"sha512-miIGIjotzUZvTGa/2b9BeQMppyETORNar6R37EdV6VY3gptdP2GS6rdotcwyVJvQPq+zNHB38y1XMnBvBBFxcA==","signatures":[{"sig":"MEUCIHPVqKsUFC2Xg2Xt8YB/UaN+fTbaD7AtyvIy0XdF4oN7AiEAuYE3+dno7mJDoplQlnQLC4/ISEpiQQe8AAfFr/vwERs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmaCRA9TVsSAnZWagAAjREQAI4PmeFC9jeqBhjCcpso\nrO04eyg3zsVs5PbhBbsclpe+08wlZoRJrqtG1GvOrnDP8dUpuu4+Hm0KqTxo\nSmcWZO7okPTBag1vG/HehfBehtK49lC5Bk94DnI4QpCbqJZEMD9CHN/bBQim\niimFHFmizcBGTnYWW1dj7axXBdejhnQP4BGe2MGY5s30XlXb6piEcTXa5kSU\nhnfdO7i+KD6rCH+El0oJxrcrgDMkgDcLivwN0YcYuWTHf1+lE8cFBSbLb3rR\ngRRCBqFn3Gr42i6qQbwVXuvrpY894v4rbLz/cenvCSPIowwJ9AHM0d2XsqS0\nGJmUVzdGx9fSVdRRCp23I/zAzNYvPR8j8rMNDM24WVh3B62kk9LkyveyNfmg\ntUZZKAJuDHK26AE0kl2v35HEQvKgtvOkkYNQSRh2q4HUgFMQtbM6rpftT+wq\neOUlP8PFXPQy7FJLMmv9p1J5HIIbm4E3CkshDO24N459GPdmaLD0TWoqWkbr\nyhgXJxZWV3vqqCdCdQo67bOuJ6ohT3Z+4hidU4M1Z6Gj7fXmhs7gb1CTJbOU\nvDFTEFfxpGqHucc3Gfv18vrAjPZzLRtJWDgGkX9JT+DHWrI9D0Gac+/xzJmp\naYfUh9Dw+Kqu4CEXdsPGbth/szZi+HVLkuFdYav9SlCaV6vJa4UnkrPcrAwx\nWYEH\r\n=0dth\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.2b878b3e.0_1571969433697_0.8305354034815289","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/line-ripple","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"92001f81167c37f784137943ac63c0da9c85fbd1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.b06c0efe.0.tgz","fileCount":30,"integrity":"sha512-C4TQTC9tEs3z74tVUybyA6R2LvkvpuJkY3hO0ZJpYzUojDpxtruFNOS9W/+MFOFexaWXT0sQCwwu7Sbvp8NySA==","signatures":[{"sig":"MEUCIBC+pkpQ8Q0PvSAPfRl9aYe7XmHQf5/nrxcP7AI6JPFDAiEAqhnWVxDh3mm44au+BTkUy2z5F7an0BSi0JD3UJpF69U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LECRA9TVsSAnZWagAAVxYQAJb6CwON/33OWyxUJowU\nELue3wk9j3bprC6VvTRgT/1SnLPxcqLFoKAEVBoG3qV1wmt8j+we2mvRwIgK\nc4rOEEGz/gQ/mFbjdw1SHLY0mUCpFfi4aWecRJ2U1oXtxODKhvoVzilGPmeZ\nDG1/eeHnasB9W3DQO7HM/OIxjjOeKaSyvNavjXENTtzdEkITkWJKEYu2osdu\nS1b3OkVDnvyDTfg4RNVkBY0IW4XoSk8dFSQJU8C/C4HOziP7oQgCj/37RHTV\nXtRN1RUwKMu8wcX5oI4viRPMgXL0vr7qoX2Pv3oN0xp6HAkxltU20sYJS0Ep\npD6xHMwzSR9Ad/HJbFjJGLVbFOW5FdF6eiSvRu/WDzCym2Fwu9cjJAmuTTNf\nICQ/m+NPRRQpcF0ng4hwvYqMlMJ5WOwPM4bxxLfvi9OEhWn1RGbKJQZiEE41\n4WhWtw9b2JAn9rgkQ6hg9Ztqk6LE5aWkBxBUdl2e35S0AxqAWUgF7saxjPwb\ni0E4crr5sci+mKBRQkjYfpLvRFxY3MzFYN0hPZT7OGJk/j0T1jk5EuwLpNPn\nKRj6lAae0stz3AyqZEXOeoZueZDVPbkbad5JZHYd204BFNFH17FKwE+QeFj/\naxqvCz+/n1tC5XQNkL3t9W7k85VX+6/rxwswrLQ+1EnPSq36rTVBM/X6B3Ot\nxbDa\r\n=AqLS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.b06c0efe.0_1572053700440_0.7478808459746031","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/line-ripple","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"50280650b92a005ab75fa95b2e09996f13e8bc5c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.01628efa.0.tgz","fileCount":30,"integrity":"sha512-JucbV/WqXUZSCJgWK34cKBU7MGkogQeFbCHiEfilqluAPaT4CpCnulP4wzk5vsm9k5zFhC9Akn0oW0pOKu5MGg==","signatures":[{"sig":"MEYCIQC1vYBahzFYcKVhPmlHH/mb7CRSSrTsYsdtWg1hfcDxwwIhANnxG94mbRMptUv/4BshmiEv+iryBumXPKBwZ00RDz0g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4GsCRA9TVsSAnZWagAAUGMP/jRRTcKJJCJAohSm1inl\nMVzSxJLvprkFGEdGfqbd1b3LfaBQLrZ7yEXujuqcyeiIqzRZ9Tg1VLaR+Or5\n2Pq6poNDbf2r0xoj6DvqTm9/FF+Jq2HkQQ4sd8cf07a0gi3qwA12ViLuVrUo\nQbEYiLXxNkViECtRiaRYsorWwGQNIM3tnDozJmLVbWlnCgOfMBLBivxl3G/Y\nPZJ1bIA/EW9Sym3CstwbdbmWH2qF/Os8KTdta5mtUlbPayCU8hcuJFo3mMrM\nv2998QLj+GSpOy//i1PtSfUTVdrQuKPK5PsWg9eKD7ILIeylsVyallwKmI/u\n6bH/NHC4p1QpHiGw+kggD2mTsENI1/gWFTtF4UorELt/JH5PDbu40XTxpZ/j\nEeoyL1sCA/UYgtDpb/iY0tpzAwPUPQhJdCFkdpsAzv6lnS2CwcK97OfI0MSt\nh8OVAqbUaacWmcJoNPYcGdNob1bI/VA6AfLvz1+ucsO0nkNBf0bAPEz8wYea\nh08t/bGEjPES1r2ySu7UuhjUx/iQsmbnrcoWOHPdfU2Da+Dw9TNg59ZDXeHc\nzZURD1l0g4MJdTid7LMDjj81hd36NId3beGWyaKVSsJ/MR5maRQM/G1HRw/T\nGVrdMpOe5AL8/IAZSLmsw3pna06VyDpIjRv0PqzcxXLbRGRG6uD1czFJF++C\njoPL\r\n=KhLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.01628efa.0_1572307371687_0.7852031002449469","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/line-ripple","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c5b9f18bd8b4a63a75fb048426158be325ee2aa0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.b5c6d66b.0.tgz","fileCount":30,"integrity":"sha512-JUwY3mBI5qc7iwHzvie8GBUEQ15qkcT26oEaUmk7p4ieDUEP+5XsMhwZi3BRxn2k3kXwA8zvDJ5uYOkqcc72aA==","signatures":[{"sig":"MEUCIHsEkT0bG+PHhwsg08UZHRtsKv7lfVBr41IudphA5ZF9AiEAqhcJygWe0/BKb5su4wMt76n2cQcTojCkYoYpRw33KjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1UCRA9TVsSAnZWagAAncYP+wdlXt9ZpHzQ9fK/hreu\nhN2f6BgGmQL0fZK0IsbrvhsDmGeJw4AaDaXb+tHaJg9Lw/M0g+bBJ2TNr1Ci\nCpLBFBnLvd3tfsXL63nnILLcajaIspGVUsIR1JYF2o1qPRCIRV7MTDGcKnCy\nh9FgTBw96gRHYLdpVWAYndIn734vXqKwrfcaYf0W6ixkGLfox7xwp2goOe+o\nx+1hrxbix2oUeFZx9mJbAE2hscnqZXU45YZw9xns3fOqPnNJnVTLHMZG6aRw\ni32QNFf0CEY34l8hIqHUUtm2a3lDD/FvbeKTY501JrjCiAhTpcC3g+80MGoJ\nug4MGkFySZSd5GfoEcs0qsYIDwPdSKVBh0B/MYQAWmfCDmwGAH4/1pDI4RBy\nLaRVt1XqYXzl1vq9Bfj45coCalNUE9jaoHdtsws9nhw4Jk2LeM/zWTvXCOeS\n1vwA+52yENO+42LgMYMKkjUcCE23N0MBl56AJE6+GU30ydz4OwaSiAHPtygY\n+YmGkhoFHSyVs1pwwOXICtkv67ZprlfLcx+S2nkQNXzl8F39P7p8LMfaekHp\n+RNEFKx6/VlBk7l9mbIa+rSxEo8TLaANWAAafU6u3crkvO2XkkuHIROiuEq0\nbW1e0Y5/z7i48S/RrapA4CZ+zAN/Y85R2yI4uMfKUDLq5oFQtGBMVwe6s/Rq\nTHmo\r\n=R2Me\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.b5c6d66b.0_1572371795719_0.35626930322937467","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/line-ripple","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c2b2cd682c9731b9aa5db031b21c53b8cad0feb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.cdf858ea.0.tgz","fileCount":30,"integrity":"sha512-67eEfpWb1pqvEhSsibRT4GdoA4hNeMcwJoiBbiHoLY54O6czASe+CAwn93aCKRtnmmCiRrO2BT/DtGO9TR4T3A==","signatures":[{"sig":"MEUCIQDznL4rWhCKCGWWZmcdqB0oZyPbxNJeaw/Gn+dEKtGiVQIgVJOSUxZYb6XBhFHVBuQyVP0ssT6psa69iFOEdQZu3AE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJTCRA9TVsSAnZWagAAt/wP/3eN8SepNE5pT4DDQdJA\n3MLSB8ErHyriAxFcdJwqeHrrYz4CrzZnTsd3mkOpy2d0AyCIHQMRIRyoex/5\nkwbTTRII323sEE7cFE3SPBD5D2BLOzsXznQ35T9eKlYyaC6DBRmChQnH/A1J\ni06J0kCfI9tEKE8lMrXbrLulWcMQ15wzhv+eondfh6jKsZ2Lf+UHHXzH4YCA\nvhAt2cHKYC75s5jZXzwt/oKqKvY4AgmE68jDGmLkKwlNJlbJHY6DL8mrOlK+\n103n5y5EXnh37wqgOEGy2D2meupIl259eyN+3QUefWSfzSL47Bc3EslPD8gY\nblKs7Wq9Kqn3NnmVu037XGsUI35fP4+3FOXBvs9zfui62usM/T0MTNu7UuWs\nVK8FlqqODIcGPzp+pGLvaYPlybvyLlZPgKu/M1CaC79Hw+ZNh76Djkmfouhl\nJA1MZ+pi0ESdk1sJreZcsE9/m0vNIqyWnyJ8HD9ZkMXVVMeOaEhYjJAIltTW\nYhxYNQ5auZmb2T/cBfLgjgWo7+yjfyqlKX2Li+ZT5gSEQrw5KSjhjBOw+c76\n/qCfqmxATV9iol2eAFbINKTWfPP+GuFKntZZcfLp5nqST3ucehPw9uj3RQXL\nVbzsr0tXbP+ILB7c2BgbmAIyEFgsmLQP/PXq37/V0xmFP3h+LMKPSGnbzrZ1\n62Nn\r\n=1HlI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.cdf858ea.0_1572631123333_0.9834899706000997","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/line-ripple","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"253195738b904f4abd9ffb4b0067e14f26220a45","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.719b57e1.0.tgz","fileCount":30,"integrity":"sha512-OUhtMaX5gPHmqbdGQRvjflLYwoQc3FUE21J41q9pX6Z/pci3j7+ACtTNVCzqmQmgHwajNO/pBrDh4rWm2sraaA==","signatures":[{"sig":"MEQCIA7DOTL7ZZFWErhOft44b3JzqydaNIJExqlaYB0hwXRCAiBhYaL6nc+ovkX2enMPJBrAydFEqTJk+zFksIrJAKWR0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8VCRA9TVsSAnZWagAAf6AQAKUmtjQyhHdSC4hB+l4f\n5vSNZMgZb7z+RDF3bBRUolH1MAxnKtRTMgIqCML0jRnnKLKB8PP7EhTKuy12\nu340asRS0B56Vg7fQh9g8qW/rZtTfKwv0FE0FvoY2LaK6dtrAcmBzj7sza4m\nQIVIvjDn03L9a0zwPan/J6xuwEg0n1UK5BNL8mk8+Qkdy+jsNmOd/tDCD0x0\n6zrCzT51tZY0lN+yrZbKXPHcfRlujDAJtFNRiKsvz/NN9ZnoDboIRj6XZ4el\nzwKHmp+l7VdMuqE9ddGXuhJxQj10l92k5DIhte1dRaSdUKu0zk7noCgOyjm3\nJvWamYDxtLoD8jBQmunDNrlCmNX+Uc/RqkZ3N0Wd/ClAYAGGqlgFEXQGrRQ1\nFnopuREfKVDvonza8ncA5HEphOyON3tZKDNDY4BMiCtAYOSYzjQ6SjCP56t5\nxkB0GQucqJtWp0GhJnNkDeoXjNtst+9c9VQp9rovJzWQDogmsyPBfL8p6CXw\nEXW6Ht2rY58+2aQuBy+troWVbHKkCSf3OBeAToX6vb+EGWC5Wh40ggfEn7dC\nv8S65Uo6XmNhFmIXI1nBBtf7wvOo/bV65uw+tLWaVlqSs1X9TEnSE4Dw7xCm\nbAICCKfoz2f61fTaYKfRdag6OWF75ysThFG07Rit8jj0swixKih5mmIb0XWd\n8s0J\r\n=jCLz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.719b57e1.0_1572638485396_0.8298779651957977","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/line-ripple","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"35a0ed0c4d200306faf9376ed04a6b1dffe03ead","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.97cbbdc2.0.tgz","fileCount":30,"integrity":"sha512-hq1TLfOUP77Cz0YnlmsKGtG8GSZQnWGA2WJVIJ3DKk06St0ZrXiZhXi58AHYu0IB47eWS2Dk7OSpInTygx4Teg==","signatures":[{"sig":"MEQCIExmfwb0USC7R6Sv6BOWA9T8Qjmi4/SJWO2tgfuklS4GAiAOTwD4/3EpSDDfw5FVQE7/AQ3PjyGxzUNmA0Ff291Awg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWOCRA9TVsSAnZWagAAWNwP/3iTmhyGxR3HBBU1wqw9\n0eqBY61UbpFNO8scpg23BcugF6x1MFKDE7ncoqviQ8uEN3OnX6tgbQbSjYnR\nPFUdnOFcPxm6hK2xZRzGOhw6EdkkV2WnBFYQKzXAj7jfzq+ALTBUpH1cCOFW\nHYZcA+3ordgYHr5FibCGE9KQMgcPACC28ngyBAAmsgra+RtEQLeCfiRuUNEq\nG+6xtQI5p/IFRoDIakVtIDm+TfrpGFf1NmE10ZohGslEMvewFUyrYIFA1b0g\nsGKbSKtRW+qE7sUS8v13GwWKxSU22GqqY7G9n4q987/QsPlNTiN+0jop+nsQ\nomVRc9lVENRTQz8DezYZMMInB9JMVSV2q2gqD5PamoxCAmRUY1eT62w+GSnr\nA0Z3Lag+mTh7AoJpN1DICypMhWBFLDpuscX7pcjHduCMdM6LkGn70O6DmdFT\nGzLbjXg1nPEoAX9ikHbLLIa4Fnp19tgXUK6KmYjE8rGKrA3W+J01m/9XAMfV\nw1c2W6TuswdaqPepcFUgEjSOvmWzXrk1PIrLKpc594dYkWTHtb9rJv2ieTqM\naRUal0LyJ7iMTZS4OYgMN8rsQ8oKMM0Q+iB0QLaDpnolgfkcqAi9IRpcI0FT\nLYkLL19rNLN2PIDgnU8oy7QI23IuF13UerSt2pr5YEQaKlDjftR4lFQm5fMD\n05JB\r\n=qd4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.97cbbdc2.0_1572640142585_0.1507218514117148","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/line-ripple","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"06be84d8d719e34f69943ad3a4714f2d60b7bbb2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.8e36b3b7.0.tgz","fileCount":30,"integrity":"sha512-TyfVqBoewArEfrplGM19qV3x8KrcCOYROS5pMMDnWvGwgShi40ZaqBG7rh0rl/RAJkoZNi78c72ntG6VZYvHpQ==","signatures":[{"sig":"MEYCIQC1YUDY8QjemUzfBd8AgHvnHrilto2fY3M/A3ls2Oys6wIhAK3frOTtfieXJkHgaebTNxL86rU0y9uze86GAKdAadjT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0QCRA9TVsSAnZWagAAAQ0P/1zZoHqKBSZXuBtLlmnd\nUwTyC0P4wGxVb8A2I9pfuVc0thjLjw7TvNnFyfRRlqPN9KXA23zze4gR3Fmk\n72+CD2dKwQ+W9bukuMCOMcsMFq7uhLwup5RpRI80Yova0jNeQVqfVxbFQUbQ\nNJFBQmPjBh4KNaf8s1p6W4sIEaucqKusY7tsj1gyTr1ygQJWVE4MloBTssEB\nPvr/M4RhxDuoX//6DZxNbSwUs7q//KBfpvmdus6NrUIFkHR3lMHzsCNKI3Eq\n5B407yenQd4rlo7Uf4D+Hxk0pyPRWzDCZn8bkYNGPkizxMIXuOyjvvgvt0di\n6B3dvHrSKUNmp/WdWhWiLmO5XzghSip/BveVARvPVIrnOONHLpnvaewRqy8Z\n5FpEv7QrJO1IuYro4ESq0DX3L+THSStCBblJ/7ftS9Kpu+xxq1tZ1LEpPQFw\nWG3TmudDyuBh4WEjl8vxzcONXoSQFxeASaRsY2vvs7JN3XPJ/Uk4IOiPIw6m\npnLsBlKSTrAgIgUIom5mHdcc0VYpIOJqp7BCDryFeRDdFUc2XE22sWeQyuWA\nMtR5Gv6INEW4vM+AiI/reEM5hg8bxg9d+kwQODdeHf8WQ2eIwGomB3alnLAO\nxn6xJpGJGbVLmWARfbFc1PEuDFONS2W7dk6ke6wjEhV/va77DoP4JAfjCnIQ\nNGkG\r\n=lpO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.8e36b3b7.0_1572642064493_0.27020603906039353","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/line-ripple","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d0e531de2115b8660a6626fb807edac85d56375d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0-canary.62d3a09b.0.tgz","fileCount":30,"integrity":"sha512-k69wdSTYLcYNvzvDqiXVYsfEXalxeT8HZHdBZGT/mQoY9D00x2K+WwwJ1UV2J6k1dL21SZJgPDkn+mEqJgjT1Q==","signatures":[{"sig":"MEQCIClOuNvaxrRQR/hfbjNDAjRcE95GrVfL+uTdzveq6ilEAiBm8ZFM75bD8gA+S3xEpVyxpza6YR57bgxVnSacTgTVmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113531,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9QCRA9TVsSAnZWagAAnfcP/1N4LOO6mmpLW5q3t4lM\nAb82rvgsc/+EKx6oDcyi3wBIjf72tLzg7FrXp6lpvkGFSB3wcqwnjh2EumDD\nhOYPfF6FZAkqqYBxij85ety8sexE8CORo6K3WY627XEQAZjJCl6eDnjdmcL3\nkxqsAYYGpgyEo5zgqur2KYhCLbtAMcrHh9Qw9/Vbmv2MdNVPufNl1rRPscRL\n15QBrmTDmUV/qUrNGDkC6k4cs2wlCYbmbHFgRG02V7kMd5WTe2diNRz3xNWR\nZRzv1qWVAeZqO+zrlYqoNi+Go+MfEuZTW6rqv0mdU3a4cAq+hV8wnv//94ig\nCksIjZrrb5tIiRv68S7/FWCOBmr9DqZY5QSc/JtMyaPqmWrupAp+gLxlMpwy\nvRM3PxcchJVut/ZzLc28uNZbLqq/BmoxiqlfMiHYBip+hgyRW0CcipD9N/2o\nEnlb00vdsySU20J2clfVSHPH/krR1gRgP2Bl4XbHuLh76t4zPKq8WecxyQXl\nRSx3v6NtF9eq1kRfPz+2cwkMDYUL9h8KqvKvRmsrglRyVKcSEOoJGqWyQYko\ntWx6usbsgl9GYA3kvz2mVc50x1tWNncBVLvEyfACCOZvZg+tJWbJ2y0kRP15\n9JPa0e8Q/Z9FpXfk2Y5nR68LGYK531WW0DCTACMGwmSJ4XQf7EgZmpWnKnMr\nupb4\r\n=nW48\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0-canary.62d3a09b.0_1572642639227_0.1439671028924423","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/line-ripple","version":"4.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e47eb1fe3ce7e28b36e5271c879dc59fee3bd19b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-4.0.0.tgz","fileCount":30,"integrity":"sha512-+vrgKlb2gUBIKxlzVKLn/tX76qJ0Z19RkH2i7mh4IdH8KxeEai8NQQYWqeOOKtyp8JbH0ObGyqJCwPo2VbHDmw==","signatures":[{"sig":"MEUCIHKqmDjHJis0HDa4vhJskHmlduPyY3pABoSnkjw9SIP1AiEA4UvLxP0fKFeaCSIvWTM5EU8LQM2We8nYBCu11mXHR/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":119997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbZCRA9TVsSAnZWagAAJS8QAJS6c4mzY6XlRJ4cW2S/\nJmwVstsP+lMI8XQ2mhp0IJNW67lJodbufB3EYlcc9YGJji8SxXC47joWaZtO\n2BnOIUAZMV1178JaPu06salMUksax+vMhkRiXEKyaz2vCV4SBgknWlEaD9LH\nX4hRuNr/GCE96FPs4TE/ZNnRYKxG29qiGOMEve31jwMGC9wPxgWrCaSpJDTg\n8xJh8L4pQLMbKiQccdSa+8CjP+vrAK73U5bwVbMsy2oRNOez/P2OPYWBSjIP\nOtesYb0rh7dOy53YDcydwznetkdZS4qF46LyhfEojtrEBvtZ1RbHdc0y5Wb9\n7gtSUH+eDxLAPjRjy5TEWlh3YSkEWY9X/yWRnrfd4DdOMwAq16hpu82Zddli\nNGdjbn/UKW1GcZ3fHLhiD3qKni/r7VBDajsYu5HH155cbaNZoJU96AoC9+i0\nlCSmgad9HrAAI6/zSYOUXaxA12oTQLYTP9l9xcWsXb9Xe+d/iyQ4kckyB1li\nFJDh5ldcPscJ6c+mU3soMy+jAHhaX72CMlpvcoumxxXx9JzUjSFiEyr2fS9n\n+N8gJVIJ6AvTgteyKvOa1ZnrQR/uq5DBAbM2+eBZJp2/6nfQVE9uFvc3ssN4\n9giFa5bpfQDH99aBzzpsiisz5+U30oRDGA2TH0M5Y7Zt8w/p7OAxo/cyXcKI\n6ltH\r\n=MT8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"^4.0.0","@material/theme":"^4.0.0","@material/animation":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_4.0.0_1572718297136_0.4213613713747306","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2fd885585d62f751beb5dd25d74f40e3d4a6da6c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b5eb51e94.0.tgz","fileCount":30,"integrity":"sha512-9TC++HD9WOuDk2bQw2NbUdRb8pBxkN4iWgTmWNCMnVmdxfIBB3stKfAEO9Oi/Un2j268yBiE+52wdMxltop+uQ==","signatures":[{"sig":"MEYCIQDpZy5xfSO8h48fHfXaxC+OeeVdisJOe/wJHUr4ML18JQIhAJeIIybEX61hg1dT3x0QKdt9/TAnE2C96wQ+lG/S/zIq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGN/CRA9TVsSAnZWagAAZq0P/3fgGeXJm5Pb5XmjfkVY\nqDvlvviJNHvx90kJAX7Zx1RhNz9KGp+GcdtpniaDhAg8Z1zBtDIxfkscKsje\nlp9JutitNq1N/GSXi4kxJWC1HWv9pcCnrfl7qRoupQa6bOpKv7B4HSt81DEI\na5J+a9KiczHLgUem0zqT1y5LQ8vHZQGJUPH3NarNdtjkQsJcTO/gLLlI615l\nVNx1cGTv9oSqZC54k46fFs3DVtIoen/GZiBviwBu97aJ1x/LMxflki3mp1FY\n9I6fJPa6KzIJdth+opuhC32y44Lqq4xDfRzb52/CBb0QZMA7fq/lP87P91m7\nGh/sZy1JYtSlpOFLJITdkw2oSpeFrMku+rm+GQvbi2f+h6cJaYK8R0MgF4oN\nfSQBnyVjcP1Ykk/YETxvMMPofEBrpJQm12baVhHP5KhFuXZeaUwl/x57DMtY\nTF8cPLnoS0kk6Q6FIgilIiOL9IGe7es73gcaiNXdCcMOWRr3Qz816sNxVmN0\nYhvWAsk92L43Ir2wWLBF4EWwgDCz77qEU3gEqsZxQn8nn4/ISYCPj7IknjCL\nAvCGU+gN5o8ZsmxLlJdxaseMeCt9Ks+7YZyUpzNFn4Ej7bc5vnuJk6a1qDDE\nFzWySIMOXkBmCHJiKLB9ON/O1GYjSBLvz/6Af0hrj/ZIpNGEwzKWrBpn6oBp\nl2MU\r\n=O2pv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.b5eb51e94.0_1573151614293_0.6494117820345864","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9335fcd1ec9b286fd27abee0304a3091aeeb30a3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.58500806e.0.tgz","fileCount":30,"integrity":"sha512-S74haO4FZJf+Lit3F6CIvEQUR4qA5YsAQflYqtpQ3DOJjRXCDRI5DXaDjCqUI74fQEFEoZIyXUHBLU6pNST14g==","signatures":[{"sig":"MEYCIQDBBniqh5WZl51EjuvqBEIkrnI2D+H1LJ5tdlcKjVI9xgIhAIhf5OCDlabQuzXXddHTIo+I7cfdqC/vVaOULu+Fe9KV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtICRA9TVsSAnZWagAAGrsP/135NZWO3Sp3fbLCt8yn\nVOA7S/h1Fyz70DoMunO6J5o6By70cU8XAdUCl7xBY5OD0R1jiC93/d8ZKkgK\nPIptJzsYEDhnPp4CRbV4aaBjSxBhFGVe3rSCP2mCCfCHos3PnvjSfsMaI0tv\nd3HEbJ+0sgxumTaKOZcPPS2KiIw6DiH4dCf3T2A5ELXjRwcTW8p7mD+Qi1UV\nvnD0WSItd7b5NtNCoJNDWwVU+1QnknYLSaqM+VPe2r/ztxhFr5fJBCNYGRQs\n3OECNEv7QpOwh+vjkY6E4+CbstcmYIrbTsXK5qT+vWqGvm3EspXuRPVmwkip\nbTOK46haT/BZcIgXdjBczl4YRm36PG4CgqWYUJB8TDyVS3tHmhPNJyT4qsmg\nY8COFDQG8xesqIdu0rUZK5YuizLDS0oiOGJZMZjpSYUh2u9U0kgX05G25iqO\n4o+4EWCtftQZnRddvegVVfeyU3ewPwGKPqbOdCxbRBjxRIacj19rV6imhHa/\nzqTye56VP5CO9i2k6FdoK88UdMGl3tuwCtiZ/KbNv/I5nIuwnXmRGasPIP69\n7QFK8aIUCh21BzTVURFEfj6kRyzTINsjmKAXjKpKZ4uRt4S+1bJm1RC3nqsp\nLamceM4G932jrGu+Ehb761NP8/D1FrpfUDaNW9lYmDBBF6wQY59Ht+YqJjpr\nWKOQ\r\n=h74A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.58500806e.0_1573227336260_0.3003068459016913","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/line-ripple","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"450dfbcc242cf7ea656f1e16b36b72c6d00ceee1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.66299b646.0.tgz","fileCount":30,"integrity":"sha512-egcuPlfl2zQMuCHEmpTuJ2Y8FoyU4EhX+sNVC+IsHPeTu5/vDPydVCUSteYhda4VfgHL8moB6Kf2NxigeyrXdA==","signatures":[{"sig":"MEYCIQCX00iMC2HNhSEF2nIquKuvmqcenR3MuwYgivu9fV8OkQIhAJc9nlWNvQHLcwmUBR8c4VoLNw8t20T4sTkPCKjhAOpl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEeCRA9TVsSAnZWagAA7dkP/1SZ6xz+DAlNB+q8c3+w\nXhTYINogXMAo5vUjWknWtOCMEDJgm/igls7eK1KLwpj7Ti8/ZV1Kuw9jLk1E\nkck9hlwAhwgPoRB8DWGnALgk+tyPRZsmaWPotsJAGsCobIakdFf7TyeyFmbN\nlZToTl01AtnSd+GOTnZNvb4F1873ivcBZEW9vW37N4WdmS+6OUsoIHZD5XD+\n1/nhlofYWFeIVBnVQjB1CoS0JlHTpsfS9XJNRkw9nLCp7pXR0Xqwyr47gA+9\nDcPIO1wszGhgpZ15rhQygdZ2tQxOfREDZiemu64fMa3A93xlPsXHJyP/PxP1\nvKdJ7eLvpfdJnMBRlXaAa9p16YAi4JG1T5I6wDR7U8oXpzKfFnLtCqQlRX38\n/B9xy/hsX28DfHFISv+lAHk1gDAUJXjU/60Ti525FuFUvo6Uz9Z1D5Rw+Cls\n+SjZQLyPE5pbDGPcJFdhRkg47NEWfotRYcNvSCZ6A3cK5dAViMsQDLw9C5tE\nvzA5GL3bkVNucJ86jrAJzxLfDS1QPsO2L1QL8Ib+h7Lg4wsM7sL9KUN3n5BV\ncn6jAsOtw0j8TlE+RKDuOzu/Iyd8XfahBFTQxsUrAjeZunI/7S2fxVK2p2Ai\nTHIeVNWm+JVtWBfYrbmBClV9gP7e7VUD94KJZUpeA49J3kIlBt8tRVMQsmDn\nYrcw\r\n=uiau\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.66299b646.0_1573245214173_0.838749229933051","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/line-ripple","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f7ceb9e47cd0ba09a9a157b9a7efcc71a92b0254","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.821871e04.0.tgz","fileCount":30,"integrity":"sha512-TpgK92gpBGh1ajTrB5EE4wT1qxjOOk4p/TRYYO3HoTQbDscfwuOdJFt0NF8eKKB2lSwPpaSWHDlgo+bCuccbdQ==","signatures":[{"sig":"MEUCIB7mvg8DNi1xAd+J/VFV16TysRwyiZLtoHRhkfmHn3f9AiEAs33lwqkzZEkKwgZ1baL0hbcPVMSawpafWCJAcjgLrdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3lCRA9TVsSAnZWagAANE4P/jaCANIDuk5SDTLPHK12\nUpK05uzpXbORZYoJ9LJpwwu3lZrx/bi1AmOHp0YV44qdWUnqwt+El8R0K61i\noZVT3GHIfE8qjz9qbaX6oTuovsQ0AE/X2xu3NKxA0dV3mZGNwb5wj2ghO2oT\nYt/VubYLbEPVX62d4SKN5JOOQ/9YpHUVnFkPotHJBHGthodZZe6VEVtHVW/Y\nd5PfH5qWWo3X3hFXb/JZgQogVoh48X8KUI3K/2iPYV8zyovjLbrkjBT/IOyN\n6Iw3O3y/W/nfjRsUas9LmRshSr17dtFjZNmIW8ZbEIsNodKErPPYsLs7KDcJ\nvmKxNiXdiYqQ8lOC7uqqLyWjWTzoHgta8zlYf+AK+oiHr+sCWuXkdVyY4DyJ\nKUcXG/1fG/viByej+Xle+VP+eVnFrWig4F9sQ0vozYAPElxyXVohIGkPimkc\n2dzvVCXOGIv3/ZXFyfTnM6YfXaO5C9+Rf4jF87yg3kSGWx/U0deHXNbP8zHm\nHOeohEXdC5prySpg8SYi1ylqUdu1wy67QVLRsgBzAMT1hIrECH4+BfpZ/VDi\nJfH5WPSsAZPAAXkqlNElmoOQB56VLD91DEzVp5vYQ36Tbcfw3YOSA+zxG64r\naqwvqHO+b28wP0o8FxnldMEjdqrGZPCbV4sPy3FCnBfaSYUm0R73jLW2aiNg\nIBaQ\r\n=01eD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.821871e04.0_1573248484960_0.0783602653343538","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/line-ripple","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cbb08debe31a01735c4079b0346a7d434776aa4a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.491fddc31.0.tgz","fileCount":30,"integrity":"sha512-zbK5F5uzlOT5xO55k0AUKzgmowIVaRXgLfnvKzICDSlD6tXrxjcplbJGfG7Xe8cQNeLo0BJHuHTMH2QqPK7DMg==","signatures":[{"sig":"MEUCIB70ZH5Jejp/er0HBVms9moywKjJiJgUChwljKQpheLYAiEAoXfpUgq60E8JvgKpIF2RfndvkzzkopkiOrpze2fIvhs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecKCRA9TVsSAnZWagAAYF8P/2o0UDtzmns/N/UmkW2k\ndeZIeJIFrTWQXX+VZWC6e2/98pUHpKnxEMGPnmHcj0rynzhPkK5e2kFzacMT\nyFLsJ+Y3L8dlEXlC8qU6WhGAOYVXfLW1nyJD/Q3GL/mKkOwDUB8ZNdB4sZk4\n8Sck4qwq8e+EJcMqVwK4Vxe2JiYlJ+vVnkFWiPAyJnmvm3vhcP6wSJV2NrhJ\n4lxmlbWz3paCToGLhgPl14GI1QcPlsnDk9urOPqN/7DCSsuec3OLyfWeYvKM\n3daCaUrMUFFFLgdyuXPgYwPJ5KLFl/hRFtmhzdxQPSmmMhPa4b4Mfj6GSz95\nypOK1Y7MIkSVuWN0Ean6etVKIfH025SGtu4uly/p0t0ipA/JlwmcxxGmiqxZ\n6XaNF9GmCW8RWDQC5QuxDNdvGLDMRGM/xFc+7xqD6BBqhBtUXVlBZxkR3lZW\ncbfIe7xOTnb5j5n6UpEjibFZYaZ7/UDJ2muteE1cNgQgRqF6hWrt18Cfq25x\nB6BrbFRekRofXY4IHEYNHk/rY7lsDMeEorxrJDK51VChq82uSC7t8ktwYDD2\nRz5LwzL4hjr47DRXHTGwBjoM/j/hfYuczeXl9v/OcATkUjsvY4mV+1P9/PpL\nV3rtn80R6CPjWAl52C7l/kzC3ZZvskh3/hLydiID7V51B+PUpZU/1ozB33pq\n4lnC\r\n=C61q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.491fddc31.0_1573250826112_0.5937660164796603","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf2262963eccd9cd405b90a8a5f2d948bb27c26a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b0cecf145.0.tgz","fileCount":30,"integrity":"sha512-jYjsB/f0h/0VgM953VIeqPPXm2w9dUpq0GPekEgJlQN1Vq7aw3Upk0e6U6IGWoKYKVKKldAnWGQjtbIndn3jrg==","signatures":[{"sig":"MEUCIQC+nBnvvT2OI1YVMqPpEUqsUNmia1r7oaV4jp1VMKnTJgIgdLdRSyBD1McmM1GMWQ2g/M01pU+l0JUxLOcqeYE1haQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiJCRA9TVsSAnZWagAA9CMP/02VsvyU1xR9hceEO8Dp\nBHVL/HFmY74qki8Cv4865vb8ADHPAHpUjivI/ri5VBdmu9FzkKP1EoK3ZsuN\ntgVcTwDYbpPS6WHS1pmAHeUeAnFB9I4RfJEnTTW2adMK+h9AMQhGxo3mWusa\n51XSIFdBeSiFeRPNFaZuSlMiMNpsNum98juvTuNsf2uN6huUZGOLLD0W85MN\nFyGX09md6tX7OlwraIqFxKPTaG/c3LhCuPAJHfqTAyM2oSoJuV59c3YKAZpe\nDVyqTF0s1pRpDdB0+xEvat1N5tor2TI9oybZYfH7bdzhTYuUVtgQaLeVV2tv\nZ2L0Ri9Ske5qhTmlkIiVGZ05hkOh+vrFbIUC8xVavG9nbXY2qxAW3LYhStat\n/KDgx1XddFL9zZdNeX8zXXGnaYTQFth0KP1/kcoVrPZ5Z+lX4Q/znPNYU3wG\n93OrpmkiCZ3C7HzkxYEDgg4yUgZTsR45LCUsuu7xilEP2nCMPww9AWxGXl4n\n6w9X9UKqTeU56/RaxSO0Cnw/+H2T+oyJraKN1BzLpyMJGGuK6s6hMNAAppjj\n7o79xMQrD4w+ati9aOlOeXXi9FKOD6thjkDHI400ooyL3aBZbNwXwDv52FzT\n+xg0RBaT1vm+fufc1Ty44B6JH1dHqv5uibFgL4rd67w+PiP+7ktw3XRRl0HI\nTDAP\r\n=jR7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.b0cecf145.0_1573324936991_0.8075883289069987","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/line-ripple","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da47b7fe082bb345fdccf4182ac9979d81798d78","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":30,"integrity":"sha512-JxKpPjBKLVwTaeqXh9g2UYhrm3mfD2CBejYbr8H+91Aad4Mj/WUS3JzjDuXN458KuIszrp9mMkzwsmStT2Jhmw==","signatures":[{"sig":"MEUCIQDcbHdhanShDzU/wtEbno/UqP7e3VopJATXzy/5hN7PAAIgI/9ppkqiOdtQnvRDnE2JPs4gR8hLT14IPQf4wQSpg0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBACRA9TVsSAnZWagAAYssP/iUDqUNXVW3z6LOJLI+q\nV2MHvWP1mboM6wwYkWUcAm+Y4gSlRJ01+1ckvDlD+Djp9L6Ogq0+UIGfZik3\n2TE3KKIpq9ruqTro25jJz1IZR+hXGUhkEKSZSdk3jCoCzRNOkH0mgWc3d9F9\nsD8TXyUfD3fgLx9SqSRvzoNW2cQ5ic8+nu/DNNoG0QRtESVzQfLEH/DqfXwn\nWJcMjJ1bOT1kFH410nFtr5IfaLk/J0Bu3G+6Ika0zyxzy61yuviol6wBbKMH\nQOSZ4wljyZHsnnoIVHk3IN7IQAN0ksz77PYIH6caCFCTetRBoe+0HMzyf/uI\n30wUEUF1xGzI4X/T4zTT8bmE0CuN0L0mwK0uC8HEklEZ7kUsHNPDkSzhqfyB\nyMNk9lgYn9RsM7eQRP23G/0whWW5UH8Xn8f/QVRRzHmX6QtG2qNeeUt83rHX\nQyjWTXFvWCLLUgOxCijWlAFimNnFZ9ApZvqWPPs9TYARAy1GjJzy6Cw46ghd\n2iAlGCFQD5ECrRzw7d8/zPDVMrPTK/BXGRQaGQM7VHW6r50bqdVc2RVQraSy\nTk3JZ51NKXFcAmLnJH0l4CXacCbelPaRQemfyERuRHFV/S2oH5NT/GDv8Q5h\ntyoSBu2AvtSv+q3CGFeP5+dEWjYBDkZb0jMI3vUVASOFYFlz0wTKadooBUQV\nGoqm\r\n=V7yT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.afe0dd1bc.0_1573486656544_0.7006073327749496","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f0375e012cbe7f032dd1e0526681cfea9cdba475","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":30,"integrity":"sha512-MetnLO+FpSIOEum+gJ144VcLhh0/ZgR6MwZOC82T+as08QTi315eg8TYwHa7Gvneg1odjKSQWCWSqmW2E4uXRA==","signatures":[{"sig":"MEUCIQDgehQ2E04PyX/Ra+itntMC/4FDiTX132A7DuEYl2eK/gIgXvlWcZy+6Toj3Twstis7+bcO3UAPX2oM58vmTsECCD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmiCRA9TVsSAnZWagAA80sP/36Vp4qIcXOQNcSyd6mB\nOKWojhRfeevfhIC2UTzxt5VOSiSANzwugLuHCSSsGYUJ9U0pzBcxFxLUwi8a\nTJtgWUAal8D/TdxKInDM/vM5th+O6hssyse5dl0dgT/Rljaict7VXoFbUBKC\nFGiw+t1Wmj9kWSP9z39YF6jXdiPFk6U8IIYyDTZ43faJRxjMrGK0+WqPW54/\nHo9AAyz3opw42jJqciKhVHIuP3uvT5aD8iYCIL2lwBhEPPNwr5IAbaEw24L8\n8F3F1Q2WVSO2EbRYdQyDMtqCNnakAf6ZOCCAhL+nxOOi7ZEHXuiXZrViUB/x\n+zkK6tVUazqAYIw7CDX3cJXKO2Cg3qCp4czt6NMLt7B9f+c7+MDirK1ayP6t\n32IaWKsnTx4C1TgK2+A/cURlpk2/H1PcEMNmtVDElmt9Bb6ITvWKSrVVoMJi\nexccMq3Hb3j20bQxt92xWxe3u1WJV9imno4k+ozAVOeVbs4y7EEQvJHu5W0S\nODVReTr9Q/hAmlovPJcpnspS6WqbTWnLo5vHcbeZwUl4Yhke5fNeE555gvk9\nr1du4aqy1xWJKjJeyL1+lPmXHdtooAJaQf0ERyjv/j1Od79V7+RqFXcaJJU6\nl5b1aLiBwm+Oarjo2aV99Txha52+3SKmeNz6mJD+x4C+i/9TGM2lzRW5nUxJ\nI9Z3\r\n=4hN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.b4cfdc40b.0_1573747106571_0.40130928347641626","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/line-ripple","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c53995895cd13e4b212d840effd24a19322c21a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.525989b5d.0.tgz","fileCount":30,"integrity":"sha512-zoA2M6yJmbU3ccQJn1Gic0rRw6JAsU5jtxWYSDRYIunRzyl31bJlWFmYrl9iTPB9b6rT406i//PfXDET1FJ9xA==","signatures":[{"sig":"MEUCIG8HwvFTmbKIKxrmKNiSp4RUrpjnfvZTqgZ1Rbu/KaoCAiEA53PXojKB4fpx+/82KMGI27f7VXokudJwEzsSWDLDe5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOjCRA9TVsSAnZWagAACfcP/3IbCPtOVO6D5YspjWfg\nBgn3Dl/mY/SwlDCiBBREdXEP0ZbYAYfOaYFyN8EiYGHmk0l/2xQjw8QbbkoR\n1wpr4Z2xKv3s2+HaAdrEpDKLPn8dmQh5o0xdVIMEnGqOs4yb8HvxK9fjA0F9\nYYNLe77kgh2EI1vCwlddEBFZwNNwPCbGvezQiOHaXbuSaUN6AirL6sQ3KCn9\nJS1jrxyTD0GI/3SijJjdVTfYW0kuYWbYJrsMO9Ul0aW4oPXcokS/hQIYgGeN\nzMkF8hvJZgWzinlTbxP4osV0lUo1JUziETWSMY/gHA86nvzpFADfWAiEQo9i\nc2211NoAXkyteCQXw5379ZS5Kvn+P4oU7YHADPsMn90HmlWcacK+/p4zLlzq\ntGvok3IwPwCZQLR7e1nEWCqNz9FHR+HnIFbZMffXeKvEUVDjYOahV6zocx+f\nt8r5mA8VesjCjfBoaHMOOXT7jgqq9T90dl6OXNHrybXWUZ7TyssacIruJ2ZZ\nT9LjroMl74CllZFTm+HZ5/rWrybRZ6xkwaIZ3fG6RKATTtJYXDJB5TOheQ7C\nNSUMOqpnWOBvKoJRiL2iJgRKqVEpCXLne+R/KNSpsVgMLl9JfXbqAHO0xOOP\nj8zpM8YEpWlskfQfKJiQaFMZ69xlSeq1nqh311mjM73ZfJr57DwDzIydIupK\nkqzS\r\n=/pOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.525989b5d.0_1573774242585_0.6331765688990043","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87cbbea22b5da456296b4f56b90187e127b693c8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7084b403a.0.tgz","fileCount":30,"integrity":"sha512-OcckQRayTVHD5Znd+/EnsKahZV/g2+6M03Gpni2QKpCgVR8GtmaJ0IAo/8Mphre2tI52V9FTUlYW7CBKAvAD3A==","signatures":[{"sig":"MEQCIA9ZY/4lY9whWByHXd64ki+NrzQTjM256T36fEWD3wCjAiBgPlXeUIqxVSVVyeVgolQqGSrz+153Oxmr0bG/dSwwxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfntCRA9TVsSAnZWagAAPxsP/j5YDINJH4Y2pAZDE1/r\njUGpDt/ej2629BtmyOYfXc9MFZeFf8WPxjRpj55n7F99bBNQYcGyql75e3Yv\nMpIak9qjZY1tHuGSF1EX01p203Sq0uOkN8Y5Q1IalgEXadbqf/wz1c/COp/f\npgPY+qZXBv9B3ZzGwc8WWq7xipXNt+gkhUaTyfrHRlyAPn5T/9CF8JkEcjTl\nbANX5JdjIgUckk/k9tW9TATEVWXE2qDR1DkTrci32BikdcrTWmfSNrX9UQ5Q\nkKbpzZ22r7QoFHw2Cwpwj2aQNvU50KgoG9OZgVmc/V2ZcDjRFhI3f8Caabbs\nyW6G3p6poBZM1WYSQ6xKagQJdEG02CxRZFAoXL+Z1eePpyXU9GaKrYSHVTON\nLUPRacreNgf1BZG/9OYCbefNGI/3PjSl63azE+prs4K5+tEdcuD9CLzk8zh0\nJb/W24/L7LuWkF1iC2Pl/ZqEYtdkOlvv8g1pSzCAWqIOx1PpC3ZzlMjnvJyp\noIaQuFKsvKl7TYI4xiOkGJYnzpU5arsa8HJToDRxWcPx8n/pNJeFOr4+RF3C\nwSt1k5REJl6SE4bg/6drluVcPqKBVWWv4ZymYASEBr1HPKk71LJRhLqY9u41\ndoDaQN7+G3/F/HC4ENKU/xCecas37QaDWC7DpZn/N/LxwsoxcS4qYb1IAphi\n6v0z\r\n=US0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.7084b403a.0_1573779948835_0.7090615363325048","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a7f15c20011fbdb40be7496f18e776322b9febb5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3cbee6dac.0.tgz","fileCount":30,"integrity":"sha512-54rT5wgDQGDIn5AYcodN2lco4u9Vl5OCCae9lKJqWEg5zvAF7W6XdtgVXoeLPFNU7VLrgJ21MP6kow2Nfcni7w==","signatures":[{"sig":"MEQCIC6vwuCPpRYD+TyZEVQjlYEOCpaBPweRqt6NHzITmfoxAiAaCm8odqxoSE3Z4CRW93THsBmjmDVuXuaFjgryH7t7ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeJCRA9TVsSAnZWagAAy5wP/Ag96BT4iy/K1ERqbMFz\n6RNaY6ccabL97JtRJpruG1EAW3pPblYn/r70dLKRfJVNoGgT3MyCCyYu7XdH\nNTbMLZmmNC1OANqtFb5/v+0GzVixoV2yk+dwe1Pru2uZJGltVWCQ+jzcT+cO\n2kyCy97sYrZn2WkC5Zf4at9HRCOztg2MkkQ18Jtl8vL+O1qgd4y5/C2yeqOS\nTSSBIRA9BWrJ+filnep3NjdFPO4rRubcZF4FWLKZvgnYABF7+S7eF4rk8V/s\nqnx9eN76JYwXXVtuNTAMfkkCpSC1/tJWjfSB1AXDcj52zSC7mnT0bbONDAHN\nMMNUFTb7+MrO8r1Spoi27BTPm/D1mSPAdOo07qiwHUflQoRG+U+u/8jKYLpJ\nevyuf++vhQoJ+qouxa+SEzs922TY5uFpe/JuW93FoWR9zktswyiLH8a1qkMC\nyG70XOsFuqq7jfT7jAYgoieygf7oTOxo+C7hdQp7cSajyp25Z5kocglR1wFr\n8jBygxHNkWjBaL7RJAd09WqF+bIti+eBEMGcOueN1uucd7Vooid41JOSqSpJ\nteeSsnEY9tFx0b6Y+le6LGZ3W/7yqiXofo3PIcwKR1M3ArHhdXsCJiN15TWD\n7OELSYbRPZZ3nqDYfRvEtT4AUwNiyvNeOrASstXmGMBEm/gpW5TlF4GW7p7A\nUbt3\r\n=17u0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.3cbee6dac.0_1573857160923_0.955470579637127","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/line-ripple","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"54fe522bdb11bdf917bdc2bbf132dbadf3c63143","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.591a6ad44.0.tgz","fileCount":30,"integrity":"sha512-CXfuKjGJpeBNPFF42U9zoykQVe8pybzKEQHcMM/5qShyWa0vCjKpzriiX0pGcuKSveuAc98jy6B2tz+1Jt/eDw==","signatures":[{"sig":"MEQCIBXkNYpatPSsqejKYgzGcYztyCX4sGpSi/fQpzQooqgdAiA27CE+FiXFHcshhNpotJX1UiQOfYgTwgaYDbCEZonHLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3HCRA9TVsSAnZWagAABAwP/0rD/ER05q29Lw9JwXVF\n9oIsEgIvPypiESJ9yj1xWnY47+UcOGuAEqvPG5RJdrhK8rWEKUbw0GE53T0o\naDmtYuWp9xH774Gt3qHECHOkgv4fwYoejjWULaGDlI2l3FLKLPUPHNI2YXK2\nglwF7Z9Byyim5AMZMQoDM3PyF6xqfypTcCg8fhHEZeTOQlo8DfkXVXosWFVz\nt4BDOg1vYNY2LxNr5sCSK1Zo8B+SueLsWw/m8lFb86GoZqVE8wbgD2rw6xM4\nS8SNhGQhrLdbYUNdaIkzwTUP+Kil0jFoEaqxuGbLE1m956WujTc/OY3kKJyt\nJyws2HgLefimKbfP+WI+g6KjxfvVJlz4Faf3VSWkTSWwPaWNMAwFekRO53Fw\nVLkI/rdgjPijqCCGIt9TqBSi7z9CrHIikiJZZn9ZQmzttupmKKwFX8HDqOV7\nPGgOxAq5d7xAS2TTUtaL12aT7ZM6RilzBtHg6lzLUrsXKTsTHj4/0FNvm6cQ\nTQw5Du9UYe1KAAed5SwwiKZCzJll8zoWS1bs1l0x7nIyKuECHbrcPsye7QXs\nghtv9/THQk7RhU0zWp6W9HhtkN2SqKscz4EColQYQmuWfNVixqupiJvQcqkK\nutW3OtWxkYldb3uEgqGWI90ROgQ4RqoQ+Tg6uoSa8bPM5wuyeQ+dWXQSn/cy\nfQ5K\r\n=i7Pf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.591a6ad44.0_1574120902925_0.39578649283837497","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0b39de7e747f814e47ca363107c0f2012648159a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5729943ba.0.tgz","fileCount":30,"integrity":"sha512-YX/bTbVQAozIPWpr5nzVWewbgNl2oKoq8AUzQWDfyxi5n+mJqtImEzFrKkJ1InBH7wbNPq5MIwkC8wfybU14pQ==","signatures":[{"sig":"MEQCIAJHx85StjZq69Pa4MnbQH/dgRGJHXvV8g03dQxCV/arAiBii+H/iKrOzfH2Ff0DXGLsAYxI23pgdEizQTIR58x0jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzVCRA9TVsSAnZWagAAXM8P/3TTxB2AH4mBqJBKdToT\nbb0h3/JYwkfPJQrH2VeYMD1Uq960GprxmX8FFZ0SNYJ7F6aOiJU9MtvJdTgK\nN6rKl+IXj+LrHd/Y90Sx/AmLy3ECgjE+Y0i8reJbnaL6BJPb5iFV65tV3UDh\nLsXFW8KwDKwaUhYQUM94KzVfigjFmuaHtx3Akw26yGojmwRP71uVkZFYlovf\n1/wLkHdt9tU+JurwZBEmsFvksfr+jRKwsq8Q4Rhu0R3NfqWB6xFj7zXEKPu8\nq6XcZ+V4USgetFoqjDzfnaAR63ZXxDA5UB8N8Ur97gebLwKnSyOQ+PDSS9HJ\nw0al3eBnWgqylNX5seBlE6AFCFZc+7PgEz1Gm23C9V5eqpXsn5uurDWIQLY1\n0A7ilHUiJJI++aOYI3kvIMzp9v52UgLtjr56ePX/SYRrZ8YRDEsZSLhDaYAk\nl+suEwk7VO9Cn7R9QcEo+0P49oXdZgVY3XYy9Olu0rthGePmLJSbz5wYw5Qp\nwMoBpaVlU5zAHxmuzLIyvqoExMbVu63rD5hgsI/IDQADGZ/gfK2dGQL+gZ+l\nRT5DrmYBxoL3G9wXSlIG+PnYSjTNjaMPUN2Jpim4iWt5pUBjfkb+fcKZ1xmt\nQ20vd5RmLwm6Y1OpSg/Jrjm8VLUUTUkt2H1+CsR4IieyCOmHNh1LJ20fZDYg\npj+s\r\n=JN/w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.5729943ba.0_1574227156656_0.4131228297307967","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/line-ripple","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"89b1a451aa11e7d08a2322ab59bfa07e1214e150","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.e89750dc7.0.tgz","fileCount":30,"integrity":"sha512-9zmPvNzTxm+5c3N/UjNRJfGbP1rlhKN5nt+cgz8KNLiBS0SK7FUDkV2A2+CioPkLgvgVRi946f01RMyp/ghjdg==","signatures":[{"sig":"MEUCIQCXBTVKdvEE+1bO7GwzfHM99Voo9IKrwJnfUfNdlGFkSAIgXmDEs9XfDEtRJgXsB6eGmQgORnt56wgNu9CLrjtoDoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drjCRA9TVsSAnZWagAA3WQP/jYf4pTl3v4MA867lg/c\ngTu/oPWXhHz4gMKXoCTlekxSm/19M43KJ4SjNKhp6L+MN6yi5ntigljsmeSG\n3qYMV68GWMH/A+Ry2FAT4aqdPRyfNFIrioJ9/b7Rl9F4BYC2QHtvJ9cbAjEN\n/XjkPouN2DSTmD9iMkTnbR3M8Yem1HZM/H6/LpMGOThv4jDzqkvH+thnYoED\nNwg+sTWB2FjzuUuUivlgX5EaQgRpzjLxHcnMYRPENgAlqXCSXLQ8nBmSU07K\np/WwIRlujbE0Nk8dUdDsicyDdxgj+1UabwSdl0uzKNDYqPD64c2cRXUIOMbA\nNbby5BGyyshMhNMs6R4FrlohyWpgbsCYRLOQ+R3GAg9PDrTDqybVcWpKOtYF\nkc72oxOV/fmj8Yv5FV2bjmrHnjdwkKB1QfIIbsBeGNMLLf8QG68JGbH02GH7\nSAGiRkvBkFn08BHYN7+HJcXoBorlLnlnaU1wF4mtqn25hY78PP3Z/w1E+aBs\nBZXk25kaf2SjIXQ0oeFnBxi9NBPCOIHHjHU/ovR4tjgMA3C+N+1IJk0VNICL\nNVMD4Kdnt4oYTh5iIduo8yBWGKuIGla9a2sQxNRqKO4PA7DbiQkF97uOp5dT\nayCnEAg3ofU6BNHf15aXFpz9Awfa9f6J5ugXMTK+QWEuWeAZcbBdkXJK0uAw\n18NN\r\n=gNyE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.e89750dc7.0_1574820578930_0.41165548809353814","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"59ee5d776d45ef7e07630a8308b7e3c8481a249b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3e560b33a.0.tgz","fileCount":30,"integrity":"sha512-xQehsOWkU2M+6NA8iG9iE7m1zHwW4YCil2v/UeiqA6eGb0HrwyHE887LSME5aygLKVIw9UN76CmskSf2vuorew==","signatures":[{"sig":"MEUCIQDRP+yb1Olnwz9kjuLw8Xu2izPLEKLvi+LBbV0Mzc4zywIgLR2WnUKn53mJWRvvf+D1sMKF12+v21IUjqeKxhqqTqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsTCRA9TVsSAnZWagAAR7IP/jGpC5CTbR2GCHghsP58\nUUoJ77+cjwJ7T6asB5qb6B+OfGLvRfsSZOP46meC/zoLevFPWKh2TsUaTQh2\nUsLcdTkz4Zjdon7NTfKW8uw+Pcy4zW7z0abAIpdBJOSmfyTHktXEdh/wMh97\n/H96hseBNgYRT41kPTquCqFaL9XS9VFaQBN9EZ7lMg7tLLT+yhf1KfESjvs0\nYIds8WmsdH54agVV0Af8+uClzO9kcqMHZC2QSLJ/RGiSpGBStTMK3Bx8bpo2\nQ7d9bP0FeHJrVc9VhDDkn0UQk/ou7oKBVcY9d1UD5H9CkeBz4OuO0e+Z2YHG\nJeVKKR06HLPsXbCP8Kro64NjfDTHMCGsD9GQBSxqnkGvp1w6GGKCtdH5QRco\npf5PS8tyWXuKuagyjzVUaaNZVAqqZn6t429vQmTFB9zpN8G5k/pm3aLgTDhk\n9nyjSKri91wzngjP88CIyNVSzDqKk29srFJLu/8ZDzwvbxpoqH8o+pbp/fhf\natVilZx7cHG0XYuwwmE9UHZ0aeburslfWSej9aUAfghu0yWGgbWXDqF7E2mj\na/6uhg0FZGfe4wYq9MD1kX2abZ3ne/TrDSDrrajkUSREEOK4rMwKyL04/6wN\ne9kF8lpLd2Owei47jS14gXbRgEwLHMNmq4fwWhDRP14tuGaLYp60LUD3blK0\n9/66\r\n=n/Kd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.3e560b33a.0_1574820626794_0.6085123662794729","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a258a94c57113d771262ccb86c2851893c86c14a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":30,"integrity":"sha512-z92GK3R03sMm8mhcV7j11yJVOGSqBsc/NqZy8tgaCqh3ID1qPe7kZfLtTvKYaG54kDMNBteWUzer7g642aLgAQ==","signatures":[{"sig":"MEYCIQDMX8oCnBOVoh0V85ToJiID7Z3kC0jeMieE4ThDDk2bQQIhANydBxQxXNS8dKsbgdrVJLHuNokrdX3idNqdAG43Z7Lg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dshCRA9TVsSAnZWagAAMw4P/1E4quHSDc7+BVigXY6N\nFy+vUkRBnrbOaTyDirPmim1eL0ShPSdTGmYAP4z1WOdfea8IsSdGUCpY+WWd\nkXslLv6PWCwkulQjQS/BfBRKfjzQRaf4WTD0DADcsw/IoY0EWKvByjQ+TStD\n6fx3mThjT1Ixsh5GOGDz6+ouDbRc8kRuoJs0nICrjU7nu0tpNGT6zWM4g1TS\nVzG2yFe/MQeQwedc4r/UCUF7znFI0hpoozS+fxsdyQnqBd0AJIEl+uluUBCX\nDR3i8JmFPv0Q7iusJK+RoZSM4mecXRke8FBzg+V3EyKNuvjYe1bm8kJzBcEX\nwTNjZZOYc5FAZosu2X0MUK375HihPwrIN3/k2pTZJueij2WaE6Z6BwyKSvra\nvqVn0ZdjTBh05zozOTJQN6NFttGcQ1jcvhvCOBN9PWPG5cgO8C1jZX+LGpF7\nisgI7bNTOw/CBru9kH6Hz6fj3TWk4nGuFGVtI5p9WKRDdJUMLTFI+Kr1futV\nFWvDZY1wKIePSho9SxoxjiZxjn1BW3ApwNMM13+CyVAmfw4GJEG9MojZFqsl\ngBoeUvmTE6Mum9PCOUIFh6ZTr+PpgYZe8ZCRo1WOLBrmbn0gInURPl+OiWGx\n33ozSzSMnEY4d74pwZ2Q433pQnjuLkdwPjeLhG4VzLlmS7l2ftqCFLWPfvTz\nPcFd\r\n=IFzu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.7fd17ce5e.0_1574820641190_0.4148932872919395","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"46815fc293df6606ffbbb446d4b2a0d010053fcc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ec729683b.0.tgz","fileCount":30,"integrity":"sha512-6vjx8tJm5jq7GaRMXg0DoMh1VTPAs1LnpQ/9TvV00ZLuzUXgP1OQDkbxcHBt3fRK1J67RKbQkh4TnkfkSJcYzQ==","signatures":[{"sig":"MEQCICllkVdoUwREjw4s0B3Tn44v7ael9fszscoscBH+gCG+AiB/nxLY6nwJ982HVdCZ1qpPed69eSHzA1810YNDfGO2aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxGCRA9TVsSAnZWagAARXIP/Rzyz0nBFrFFEH0uOanJ\nF9EisnBs92ywykVThVUbqU4wjzxnOUx3pW+qNVi8byBQ8BgEwHNJrdjwNcXL\nWL0L2Bea2d7o6p73yL8/KaXWhLraBiCYzMEUqDCRFVX8C8NLUdVyHILEn9gY\n3DM6AVF8+GHoFimJtioauN8Ayty7lr/LUnSLsWTaoVm64x5yqLoqZRmvRirZ\noWIBwcnD23DM3gKw294DLiPIWwLEJxhkSBdRrf1fG+PXasQI2WxxB+MNRPCs\n8Rt7qQl+n1uJsKOId+jk36nIOX6Fe/Y6YvUdm1/VCrY7tKez1rC5xYkCqnl/\nIT9Mfha8hi4RHsDCSN5UiTmGg/G3i1mHwrYzyXCy1SikJ6dV3P6LLf1jyb1u\nHfZ93NccJT7NHgnBzzo006vU3nWEoLiTS45p8tGkHvKtlFA601hl2TO4PTeb\nUhzeXf0qqzsimFefmvQd1WOe/rGU7fPeM/GvESn+cthq3JUJvJ8q7oe6ZCUp\nZrNYMIEFZiobiNLouCtEXUa3HeZpu4XCoOa83mQs0C6yGLabLgKMrzNv3t40\nTXIMycT/KNcuog5HOOk9ZtgCFgCOxDPoDnS6/TPE6cjER/HaDQz8zDJvxI7Q\nA/YikmLKjNR7nWpeIWJnRdzludrz3en0W/q8DBTrpRF9c+gHIA/mW7gaSEOW\n+jYw\r\n=4Ng3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.ec729683b.0_1574870086503_0.32711647191947724","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"08911f85d9ea0840ca8a4483cf7b8296269681f7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":30,"integrity":"sha512-vAtpKtjhTQ7gLpAh9wXVz36F7ILDvMgpv/Wtw5lDnV6K/st+Yhg8mrG3FTcZJmK4OopNmuGFA6oPP+jNnm3CmA==","signatures":[{"sig":"MEUCIQC402+oenyHY6rcPcarlK5iy78Y1x0wT+/fPq9vRkERRwIgIh3ALGDYXvA2Yrqlkr78irl76Re0Jr85rhBFlGrVwzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suXCRA9TVsSAnZWagAA9F4QAJXUC0irfBjeDkYxMeCh\nHwt3CGdGts2xt2lzlO0Erkkfq9PZDKBU/KDwp+c6ihcuo4EUOSaJlPmBs0MU\nKUnXnYxv2MoAF4UCRWoh1GMlRnFuBqyolfMCaL1tLkHKD/Jzl0qZ95NRPE3v\nFHL7N/IGyzh59jxJegG1sXERmkMNwW2tjAPzDqrTh/v8FvHWgVZqBGvtt/CY\nd5ee/YzMdJQUuDMrsH8bVODAQKCjU788HW6T5ZWJfjN+TMKEgwjvD3g56Wkg\nM6aCNemSaZrJVhdoCmimpBKAE8XK/mC7e6JiKcag1+LqlEDQmoodUbRjTiBa\nPgPU6RkVAmmXbYTpT59BGwlhfz60YLEyUIcbd6yT/RsUPHO2+WbuP0uIQRBT\nJ8vxt/RIMHvKUoPPeXILzWsfjQTwFdK1UGu3GTFwjRfGb64uoIfGnG+RyhBu\nJ3tV/kOSIxxMjNSIPy+QUbjA1Hs6l7zddAdUegOKx4vWQOZfbN4HEmcXDubE\n5hfVPIULxeAQpq832bsZQjP/EvjwTJBs2XGxIITX48dCIqnEYN+JlUrHNmFD\nJw1RPAOEzW28c6fbhdmm1HGd79oEPK+hsWiqNQKdfuALiWiGhJf6Iif93Fb9\ndufE29oyTsE0VVVdI9KwHiugaZPjXSSpWKtHRlZSRDrTGtreNusaz6c5vHXS\niwAK\r\n=89KS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.b8bc4a26e.0_1574882199121_0.92233432667188","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f0f22fc32722fd38bdabec967eca31cc97c6f00d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f978109c3.0.tgz","fileCount":30,"integrity":"sha512-KZlrk7I1LdIVcDC2PiNlveiXtjOYB8bqKKLEHUtKQ3mvz8ZORvaoCbg47DFnI3ltqG+/D0MwW5WTdS7B+L3gog==","signatures":[{"sig":"MEUCIQDeReDR10ORQEH27tCKBeSjBTe/7eaE/vwEEvrdGfTm9QIgflk96dBQmriuiJMZIxsEQH/NnXIhKLDHJQk5g74fJDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTCCRA9TVsSAnZWagAAWwcP/1AsbcZaNg3CGqwSXyoK\n8nFseI2P4G77IAvhcdX9ks36+6O1IGKxTr2ZBnhK2nOluKdUsb6FboxUCEcH\nu0zQagc+GCK6hrSNPp5zzbUr8mM9Wdr2oe+Ozs11dVbHPvaoqNam01TYH3uR\n9OCeJpw+SS+Ddd7Iz/l+/2sMbHwb5brJxt3fRue3I95yWydkVtNL5ArxOhZE\n7lbd1+MMeJcwsdcTM88Nyih3+sWtiAelWjJdhdlPgTp28qnu9RSpBDbcmyiK\n6BI+wrRw3QDAg4B/yV9o6lpRQ2jnyxI5MWnTn807YCjAofyMR1w4s6q/aHie\nQWo2XLAaE8V933kOO2GV0QcL76TpgDfzCmuDU+IykUkECcUUpJ5VL9tpJFW+\nf9anOHjcBGx5DOHtH1LdFHRanGGn/XzId6vGdSJEJlyGWNTrJupvN+KDs0ei\ndjViG40MEZGBY6NlOIVOVOlQfHuvyFQ0GOZJ0Vp1wMhu8i/AENKqUZ+6+sdY\nh1J/kSWKYhQpKHGfTRDeYOXBhNkoauKPhEgaVg2IkTmnNXhkMUkklcBzAEQ2\np7zSJ2nBSaefI37ETvAbnzlifEKDI93g/bV+ao9VR68tDzmHQruWHNSQN2e3\nhrt3gDJSKttMg4MCVsvk7Yr+TGTHC82BGVRU0UiUSiOswnAUNRDSAVZdJq9A\nMiSP\r\n=YQJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.f978109c3.0_1575306434401_0.8703473310049972","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a59be1c4a0fad35439d08a633d7340b840c0125c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ad9dfe706.0.tgz","fileCount":30,"integrity":"sha512-8RFYCdcpTkBhOergB+38+/WPv65cNYcAWxATO0tp1xnhLLcOIRyQkqm6EGPW64tZWNVASpNvP4xsM+160epu5Q==","signatures":[{"sig":"MEYCIQDYUfhXLKSHAVcBHqoVwamfc6KzWPhHxMJgvJQU23A0mgIhAIcS3owM40LzyCGwzi231AhnCPhXmN6Bi044TIptDpVq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0jCRA9TVsSAnZWagAATfYP/jQNJ2Ah+LqHDVXwacX8\n3+01sRAD/daG1eqWPWbZak9uST+xU3108Okn8LQBW2bmy405hHS60mvuZExu\n+mB8NaJ0OnMsQF9ao8cjzuqTFROO0SE80SNCRlvSIWvXI0Wr+nZ4qqlSk4Mk\nhYUgnqL3mJipD1Fx+VdrsVOxBI0flhQgsqftoTs6rc1qFPEiLb8JoxQm4wDd\nisbepyb6PBSJZXxgM9/6IRRQuAd7znlsjGSUrfB7vmyO2hlFWwmTAGePrrm0\n0cVqymLrW/FkgozN4HU6GICHQaRiYrpADM/5mGrLf4BzlXte1bff2hUIPovY\nLngZtN7WIeTfbW0MSvrljfmQyIySK/AHEm1TG20U7i+aP+zTbIKe8XxNPMW5\nYL9MjoUliBloWVsB5Nn1ZQ55rM4bmy0ujNoyCpsAC0Gcje6YyqFfzPXF/G8C\nhiIj9ZqCurLbHC9O8vB+L6XU5aBhfTZpD7mvGC3qUjWwhASWu6kqkzznX9rF\nZHZ+PFepsWPRNofV2xuWMj+tpJ88YV1CLul2o52T4fOzwWxEm5RgjbmgzJ0w\n+ZUxorClxC61WsywU//15/GLc2iaM2MaszJM6bMkKbLfHyLWnK6O6r+WfK9B\n7cG9xWQgK3vQAJCc7U3XwwlJUApUYtFccxI+ok+1OpTijQwK815xCX4Eljie\nd0ZS\r\n=639e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.ad9dfe706.0_1575415074540_0.971784245793093","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b70575e6ca52b01369cf2da3176e11f113802e10","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5e45d77f3.0.tgz","fileCount":30,"integrity":"sha512-aLN0PjoByEDphDxhifJS9jo94bS2jsq28x0yunSq6+bhiA3BfurCXZ9IqPC3QkLM2dwvX5oLiPVCrsmDwgDMVw==","signatures":[{"sig":"MEYCIQCqPhcw0NQAP6h70XfiVoeCvALFoUsRv4zON9eejLgkTAIhALZkyotDNa9BS2eoIRtPsa2zByxt0A5aijzkfZCv5zK3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1qCRA9TVsSAnZWagAA1EUP/0k9g/GYITy+Sh6vpSAG\nq5O7V/tDQcIbe6rSd1EbhBddjvLDkkDkAamP4cXBRdWLJQTLAfNl0HoAacp2\nxpE4gSLm3rlM1vs+FifB0yr4y2MvqhiN4dvvelvXoAnIAewK6kwsCm3oCNrW\n/09x1jOumEi59fmW+AaZsRXy++9NcWrXz5FAgKmahpurYNwHNiy6H1FyV4gT\nPBCoY22n4h71xF4kC+izyPPcPooBjP1O1Vgwb5J91wZjSwisjk3lY/tGATz7\nMLqbLqf72BOVegHHaf5pDpmoDtOZOnv5KFh9gizVHK5DctPpSb95RZU2R3eK\n9RvOmVv4CNflPzJuYXiGBmJKhq1wvGnuccRbTYeOx9OxrWLN6Ir/SC6Fl0Tt\n8GIH3Innqn+McQ+Lj+acGbGYOXzApQt/8dRostbfwVX8HJPNtDLfAToRxDUr\n2Fd9vDyfICSldlGvlU6kxL2Bf8B4PYgZGktmXuLJTdOTX6Tn4a9WRGTRelun\nRaOWXMq2Ybu3t+uDVWukKTz/1GgZeTGzFS3pZaA1CnMhCwdKWDjP0Vh/sO7i\nv8k7aEC9nvIzztwlxiSdfmp4u/pQx7OOwItWX6jl0tIb2e0HULPGpT3/5SJf\nWA34Y3we9aU783duBWw8fhJUpBYo8mk8StVoxXShjC1ZbFgfTsK2GxCZL5p3\ndWoY\r\n=+OFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.5e45d77f3.0_1575415146135_0.7838966775524183","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"620a028a2df912baf97a485e91a9dda0329500b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":30,"integrity":"sha512-H11A+qfxdC1axuizsJ/B81gIXvomtBG+k6ysCcTWKaD5xU+gwcfdzgIj3nO9so/vlkVM2U+1RgPvZfhbAOYgRg==","signatures":[{"sig":"MEQCIC7XxKYcSjAX7pv5DxIKrrlOpOaUc3/mvHTN/VbryBA3AiAYfqkiFxKMOGjVuP2hT3QP31JF2pm/ZdPkSivHr4TrJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u2mCRA9TVsSAnZWagAAe7kP+wV4BOm8lAecWH4vDtsZ\nsQpcdt9TZIjuE/vSrbfwbSgJOGXUQO6wTPLbAbDX0I0urLnSxGkw0skvDDVX\n0NqavasfjrigO+qbu9i8YdfEgrEkqinn4GYEDTsVea9TBTwk7kG5aDj59Rbb\nuZqok8IN2rsoreC8/P/oMNADGezNa0KnmtYaAtFLx4hYSA12HTAwt60J4PuT\n7C1KmYqBOCNQJJQZWAFwncOmtrhW14KyZKzc4rxbyvyTqMwJSnrA1jwIdsSB\ntMwKbROYZQkX2dXYf/tLZFCC+ypL6EZvGDZU34lMObwvwy9zRXBlace4BIZD\nLjK/c/IUxxXJZ4QRfgoZ2403YyWVeMazDYo1SfgeXjMcbxvfRAvJ5cxndpEk\nJqB2qAHTcePzkywcipwIQeR4Kae447RpzMB/csZtDaioUoG1/K4DqdtDG6vl\nl4FSm4HtjpGOCrNHJMSdhPIwzm9F2zdsdWQuEa3X9PJeNoeQpPCqrvuchH3c\nr6kZFqNZq7CO8X3UgkAxKgKdmGo20z2X++0h5oe84aw9DS12iWOYdHPZybtV\ndWLtQu6hW+g48FC27VjdcSIWDMENOpZ/nPSbg3PmL14SEBeN3tf3Dk47FYy0\n17PVr5vz7VeOHktlRuDOKUT+MKXd7TZUH5ACEG2p0n2Qp3YD/+M/IICVsn1C\n75RR\r\n=FPir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.d10e8cdf3.0_1575415205579_0.018313920545954154","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f8d73ce58c965fb0892d866b2dc5b7b192b15199","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":30,"integrity":"sha512-z5hP8t3doV7mBEj8ZRYqcXTWQkl/wabQ7PDLa+VlB7PT5LxDcoLygPVhd0CdSdGMsRtYTfaLfb4P6lOJIqhDGw==","signatures":[{"sig":"MEUCIQDzwR11Azp9v8B8JrIHD/9hnDwGuEFlXDZrSt5msYUYdgIgNUqCXfI377RbbgrlhO9mJqOzPk6Wjg4SiPhxoSr7h94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXPCRA9TVsSAnZWagAAooAP/RebqTHisOH4mBlzRciL\n1UEGAPybYINA8WiszScijpAZQsvBo0nY6O5ZSLySJo1Wcz0HUgRHyw0LtBdH\njZRBzW9BcxsKujuleJfCYk4u5HeRHFU3Zjs3qv90AEUCe/ThyGCTNoJIzlZk\nZ4I5i2trGeBn/0SDiW8WLRv5qhTQLsZfP0mf8PZ/QKu03kGEy2K+q7eyJkrr\ndYcOge12Oyd+Mtt7aT8MDCrLfD//NsC539Gp2InI8FR9W8ZhjbRenfegmgJn\nlgXjNCZYknDhwuDvqA/I29GoFo6IQsSPzVxj6tHKPxJ7fLSqLD961PGLaEOD\nPbUXdjp28ioaPoWSoq97wHi5w6BXZbbDCvbJoGN8Wzgm0Pa2lERqG5G6OtI2\nmpTNeTCv8aei4+0KyQiwFk/bfEYSes4wOfEXkos6PMCx9b84+yV+sy/CHDeA\nZeyFc4RPQQPIEOYq0ThsovyoMLmDl4uz1a2hUxlmkAGOkIGzUuWkSZfUREUh\n6wUTAq08xT8bmFlD+Cn9WWHApaxrSwAPmzpNQpoUwWYDNW7qYZcKvDeZMt5P\nxdCPw+aeWeJdo5JRhswm4AKc6sieb5wPS06xxCRR1wQG2NHd9bEteeYgXIJg\njY6VLok4Ej3Paa6j59Zb9xFD0e1R5QWgR+45VUmjYtuS8DongZSQEkO9Qgns\nmJbZ\r\n=w/9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.a5dbd8a2a.0_1575417294801_0.176586222610845","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f895a6e2df0e1c144a612212dc868211163db406","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ba879b68b.0.tgz","fileCount":30,"integrity":"sha512-yNCmGRGyZJ3PepN8dk1vR0mEVqmZb3dO6wgAvao+FvGlXTyuFShEI75YCqFIdvCyHKA+CW4d1riTCFX7MDeKag==","signatures":[{"sig":"MEQCIC2p86mDHAMYMAhCKk/Q93pykyU5vlYoZubNbDjjVsNLAiB0xBs+DiaojZ//gK8YymXDg4BZsizAVKHpnei12MEimA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWLCRA9TVsSAnZWagAAJY4QAJmKqqAiOCoSW4EIprAJ\nneDLw7ZMQZN0Iq/jqiWhtmJHhCNWTqTyOgJq6U5IZjUtf/4vBZu/lI/q9sWU\nxZLr8/V+fCQpWxmUI6iXIZ+aPPYM9PSDZeuYelwComiJdoPT5L+hDIOL2b7a\nFfT0moHegWk7YkE1SQYG9e/adxHmbdItpuKsxztLE/keGgw/o2n5StRjVExt\nK1K33Rt2FxhrjFLuSsU8vM/+VHXyWuMQWjLyg1mCMJCsYM7QGrkJvOhQmYuP\niEF3fA16MAgjm/6zP7SLrnwFdpSi5CM9PC9BRM8Opx+OTx3GnD9O6gSEMrWP\n6dIvr2g0QhWHBEEAYo5xY+WjPP/jZrwmgMGufTFHWZdrC2uZRHbROQ6PNOw4\n/aGRqc9S9MkzU1f/89JtiTT/Bhod0Ifrstc8SM9EbsbUqzloyUl8xO+5JV8v\n108vhtJN2p/MlMYl30qMmXjVV9SC06zoBLd+zaMG8zKMQWk0xcj1/FR6ZYaY\nVmiqZUELynHG7BFWCTvo0MJyCX/7ByfTjHK+3Uuu7b85wtVqRghLgY7wXuci\nnniYEpktx4DyQ9cVTz5iqECxjWJrsuNNNyQwcHHLdjuKyy3ojs47uRR4in52\nTCQNCnTNYBSsOPvGRbDp1HKUswo+qkG7Nl5IZJHGrsc6QLTBLCviPfyIZEOd\nStt/\r\n=nDxg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.ba879b68b.0_1575490955326_0.7156818167280152","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/line-ripple","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2538b84a6f883447c77548436c6bd36d0e5f3de8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.aa0eba489.0.tgz","fileCount":30,"integrity":"sha512-nOxs50D3AICNZVuAkXCYco4TUYBLyz48gCV04xEMoU4PkXNSk1HzQMXIMPH4xQC3lDU7zlUpomCeoRpaB62GPQ==","signatures":[{"sig":"MEUCIQDSUL+kJ+X2Q4NUXWlPYpbzh6fhh8dl6pXq4AS/GBv69QIgTz5gGTEmH0fHWWRBBLFwvdmN+mfUesv90V3Fz3Yi2Sg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXlCRA9TVsSAnZWagAAthYQAILqDVI9YDCHuLOVGZJ1\nTKxtpqJUraXl0HMuJ+9oMjINbA9zEgXboVNlT/1fP5sNVEaBaJ4XCG1kvWms\nIiyDtQH44ipQWIlh/hjvKoZCRTXxKc8fas+yPrxpiPYt9i73lFw5Oq7TO8LX\nD/4DdxJis1olZY5eWiF9ImGPdCfIQehpVALEM4BuHDZmIZKNj48NKNNlo+EN\nBi+7jlu2GwF24plwmzTMOGVP/565LC4C/Ip9EjEx745QVXw8nGvCyZoLkGw1\nJu9ymsEcW1Ccc//q/VM2mht77mPcLrQOMOpcjM+kTh2IltVTaHYVpsBF40zN\ns+zCjGTSzAFAlVpzjqB0WRtXhEq3rxS052lT/FRC2YyFUg0jP2d5fnlLSEsz\nGdBkSi97tk5mdVKbMHtrDqc2lpxa6zm4n7z03mS4tgh3PTsNjk/QgVa40fwu\nxKWUiEcixrN8dRMQYAcrX6DYGCEJn/wdlXz1aRu1TJy37G8QTggg1zHK5OQa\ndZM9dGimTqgW08/YblODrmMkDXPpebPjJEpHAzGL1FHEOefQi7XL74lAfvBD\nB3Al+xqwwhDxni3YHtYHwOIS7PjkOicpiTs+lybRNYW5PYPSmHxeBYQY+MH4\nVK2i6JX6G41d3ulF1nBHPRO0vYqchlcq9Gn6IHJoLUQyDeg9ua6ZksumG4OP\n0w2m\r\n=X9cL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.aa0eba489.0_1575597541135_0.9388145288884968","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/line-ripple","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7252d79adca2aa6a79735572f9205e0c8a271cb5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.cb7b71a86.0.tgz","fileCount":30,"integrity":"sha512-0ra84kgvr0QiITH2rqLYc2C8qThh9ud1OR4QHCAAM3+H+uwbVLfKDX2yRwDwKAcmZmKtJxbWtDvVawWFhknI1A==","signatures":[{"sig":"MEQCIGNaNgvMctNOnqEUmeHO1FyAm/jn6HBryYEzfZrb78H1AiB+ekPTAQCfb2AopT/Ud6jC9nRrgtdxVHIgreFNGp+nDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqDCRA9TVsSAnZWagAAI+UP/jt/31a//Qqdaq8hHY+Y\nHcoAzim8uJsDDUb8/XsPTElWGZ5qL/sOPNZRSplQoie+zU20yRZsY8kkb2iE\nmV8kKzJ0NLCFql9sJ6HS+G67+NDl1iiyR4TwSrCMzyQdeq9D7p5S6Z88QWpl\nf96xPPPj8E4Er77HEPBU1zoBoVqp3qr0xhMfNLctv0D/VC1IiXdC4bzYlvm8\nzR4VIejUWjtx8CWRDwqa3PPbaf8OwglrlwzEiIzwMWDh8mBkXuXoK1YJXawF\nwtfrqJdkwu71QQkWcsIRLxJuStOKabSjZgoVir/bGqGiggN2ougLz/SAzYbI\n6xLtWtR9/Aymh7bLYZuMHdLZyBEbiEqcG1pnkbj2b63Yj1OdI0WeFb+JuXaD\ndICY/d5N05AZw4ZRINbqH9CQ0+JTna0Vm6/ikuBxJrBvIy7reYZoCHHNarj1\npobkpsuMHCH5RgMA9KcDoDYwpRvizeWfLQM2YaxezMCL3QaFzjFHLyCIuBU4\nor2UwURdtcwqomOmu9E5s/XZ/6MvLJKbuD/CfJ532BVPz7AxHNG8TrjnBtRJ\n+jLutb2TJGhwH3X+eOcyKgz94po3IDSfHf8ZcCU9GFFDCg1tcE1IU3L+zNLd\nCUMBiXlYl8Z05obvxF4TyM0uLO52ErSNJQq2Puu5yeRuC9xRVI24JypZrggx\nysAN\r\n=zSvR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.cb7b71a86.0_1575676547033_0.17521509841454086","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"46162b98926f7c48833a3060cc7ea3ded9f64159","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.50f110a6c.0.tgz","fileCount":30,"integrity":"sha512-qrI1/pWemLrUCOZS24/ltGdYDsTdxqzd2MmNA68Zpqp8uXkYOeKzbdYvBgDsm7iqBp90dQhoYSuRHLm0I/nrwA==","signatures":[{"sig":"MEYCIQDDQxuNNZ7YxaSnZfoUtPiW0zSRb7/un949PMIcv4kcUgIhAJvIuClqOfRD9TusDOldsilWC3aPMp3Iqd8SZkIWx5/+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd787xCRA9TVsSAnZWagAAaSAQAIwb5kWr3W89dUOnaHiG\nVl/RnCpC984UYeJjZmM8K0xmmXRvn43zEMR+wf+7Ph6KqKA5qVnBji02RSk1\ny9WU3mnpYupSeQqzaBzb9nT26R5JFHZSwaMe04n8RVRj52b6dHxUgoVJOhmn\nyqCV/O+b3jJt++Li6kVlq4JNJ5xgS4Vlfgo34zhk4U+FMmEmJoMpSSOuFmSK\nMFmcGnKEvxspYKXzoAmxux+xqCBHdBCQUyjjTTi4kF2VtM4y3ht8WaGlY1y7\ntwK2JUGjCHd6WQgk4jQHW0H4Xudm8Gi5sctWflrGJR4ldbaohRPbJWgCIbdX\nm5JdeXQzFjTl/ik/NqdAMWBxcFAjk8v2Y1UBqnbd22KkQRh75d+/At/9UAUW\nka6M73sLU1LED9/aAN2e0tSDwZAhaLCWH0iWYlUfeQkChCvFUfDDtKecmvWl\npfRiAuCU1Wd6Yv1/CsyMDXkyznIWJTujDw0gqTOLbT8Uw49snfRW9eTC+ob+\n+bmMHMUdCi0s/4EarmuROGW/GGY2pwn/aW88lfh6qIwpp5y5WIOgmChHkNWj\nreuQl4x32C23CXN6yx96xQLemNIynd0WlouSLxilJwJowrUz5o2p3tUKL88M\nCiHLy6ROgMXLQXMsw9NmT9l7aHigeuo4LMDEwheBa4pHocUc9Peeb/W/a+7q\nsbJv\r\n=mSe6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.50f110a6c.0_1575997168987_0.401766380929129","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e6a1bd54c80c010b6a6def35ced0bd3f5e59be4f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.878a08b7c.0.tgz","fileCount":30,"integrity":"sha512-zViGjhy6FmOce1ikQQXx8+zZCDKD1rNwhsIhEHumHA93bE5awYALPisRbYB2acfFAjYGhuFEkoQktOm6RPqLBA==","signatures":[{"sig":"MEQCIHdx4/Jb32x7f1B/czO+CVBq1WvfAiy6pJEX+QFI+tFgAiAYCS1ip9P3zzP/qNd1Z8ySm8OI7ykGSeSx506xPCi7Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6OCRA9TVsSAnZWagAAA7gP/RSk34lLsqYHNbLhSJ/B\nsFWT7WzEugHJMOUu2TDJwe2mYWpZC2f/5y7lP+2hYd+JKlKLD0FI7Sr+La24\nfF4jKisx7r4HhHIgtxWzDq6Dl6z0qVQbR13da2WpmOLBIz8izYyYCmGRUXbg\npiP6/vUKGDK4imKdMqrDSFNNEAd68kX6uwqEYKqM7aTdRi3AFqIitiq4czfY\naeVh3ScOUPa8LxQmQPw7msL+1v9wOjDYj8xJmBJ4z2u5LG/cE4rRAAzR4eig\nws9q3Wggk6JBr7mzj33A2VBcyV5a89Vz73KVZQwKdNMeUUnu6fV8IA+SiHAc\nMg1SXhH6l9NreDpxqzQC3WXLguQ5oes8Gc8TtUfJUoxwblE6pNCrN6nFGzyA\nK1Cx11pBLDNMlAGqKJbMsbyd9MbMEKE7RbjwZCVYiwzxn1NSYAzMeGn2kxA8\n2XjPlC3RRf22DN15AqfxAuW6iit46i2ETV6bUWfcqG/Dt18SE3fuv+w2ejeW\nDRiEB/h7K/8s6H36oBGIZZej4p47Z+kRSlnz82DoPL2F6LbTxziJWyO20Je3\n/Fou4v5igL40XGIurwe/azxgE51KyhmvkbXWc406W7q3WxoeFPce7JBjVu1v\nHANu8r2+EFgKayfvwcRM0akZXObhEYnWhd8kGG6KwMtS7CBNwQ6O+K7+opXc\nvv5b\r\n=DJHz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.878a08b7c.0_1576095373995_0.9145988915018475","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e3be8b12d4452f17f0e6a45bc1c41af7d2f0b994","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.397905b4e.0.tgz","fileCount":30,"integrity":"sha512-xEj3el+cHzgnwYitJpvwVJ12XjkLSd4NQFJS14BgH+BUIgpwMk+Ez0+4xqCUcD0pOzrAil6uU+4EApopt5N3dg==","signatures":[{"sig":"MEUCIQCZCvDdtwpkxeJEYQAAG++BT7jKvUtRGZljs3DLlGbxyAIgAbxt4AX7/ON4HRCQ+2tvaWF4iBy+5lckg+35mLYpivc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8aouCRA9TVsSAnZWagAAM80P/0PxjXxqzd4jd5Qh8pxc\nijiEi1QtoSET0sk0r5sMYFh27HYyF0hn4L44T0+HOqLbQkxfrWWIaEadW1W9\nMZda1W4Z20yQUFjFZAgMvAAHwbMwqh72NRWSo3cpmg58puOOY5Bix/uyJf+t\nBEqUOa7bKtTrCH9PIkgKkv+LlIyRk8iUvH8BLMvFy4imDPjcUUuQMQTTVhc0\nMuNW1OwQjtVf/XKjX6pdVUynaRY9CsiMDk3H51kVInKjbSeKEHJIfSZeNPqJ\n7mDKmOzQXJuj2Ywa0sTrut3ugAQUxdNEWwnFfskSv+9F1GI7Ap77pOseHe78\ne5jRWMi0VnU4vAdyP6Qo6nDU3n0OWBf15JMvg3X0ZDp1141fXFYbWqqi/SR0\nVoQRg8I1u+1IPDdn4PP5nOKdAFkigo7j8DjThs9f6iDylWnHCmJfjEUba+47\n55zkOyAIG3MEM9gb4RadbD9l8fgzYuhmD/hFTjuJwJ02jOI1F5cO2piUnykY\nI7Z2e/LzUO8+v5MIuVkUGlGm6mOhBT2OQCyMjm7eq4Bsm6sqtwJ4VNKFLPzS\nJjBxytWQoEV7l+UfJ+nlwdCLqRrgc6vbg0A2UrdMLgSaI78LeIkdbw1K5KHm\n77Z327PKEEMl5GHm/yfnE5pTo6NiEeIkbdbTLG311kpJfJGZhy3gCzTc7jnv\nnggC\r\n=GzOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.397905b4e.0_1576118830273_0.45986082069367185","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"842585f2093dcd47173c24ffce9fc3ecec5bf0ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":30,"integrity":"sha512-pMPLEl68ho3ZMdIfqSDQlGpZ9/NCzCwxkvRjKeIOxGCW3SsjJVSDMm87CkAi1N6YBBzsx76KwlKf7aJve55F0g==","signatures":[{"sig":"MEUCIQCKXyx2XPVkzzWq+TAE35eH/226WJcAW1HvkYw8w+7YPQIgWbNBnlAjn67o9OfHT4pK3dq6nshSY6Eq8idoeeSjIq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o39CRA9TVsSAnZWagAAtNEP/RpUjsTXxsOzJCJE0/jV\nf6gmcvkL2WtMk0GRCrPjGm3F3evVUKrv3ubAX+mhr5y/Ur6MMw2B+fpzbwLD\nBt4dqmfL0M0yeOxjHHz1CxcjZ8p1ekO28dw2yImBVUbGUOEKcxXjsqawOH1X\nPz/rHpmT3m99gB4SKFey8rKDH40osOGQ5wXKb+7Q3mX9pAyTIEsUi9t5Ar0X\nQB0A7eqPiU+b3vdlZbbJjyZ9c9TmVhona58vUnp5Vc+zxbfXbJ1QRrz86vej\nrOVXdNPd+yfALqd9DDyiZjSubL0XBaMoFDse14yCpnn7AnvsAxFAbiv+s1Q/\nlsStU43+HEgb2R8szFpAOFvUu+TkQa2UUAcgpPl9Xn7sCMMrEO+BunfdsNTD\nLgElmdAGOKMMLbeBGWnZSBcIMoJvKfUB/v/RPXRw8GySXP+Fx0UCw5mwBukJ\nfd8yEYHUwiml2Y/OZG4dlaxc6knEv0izeD38eOHUf1DmhNokrc6HA3VNhmK4\nYwAAABHomdw67ZIjcjPnAKI+49T+3UVkLzUQYeGDLl4eCt4GhuHMQohecZSr\nuR5fy3N/DioYeRGQlBue2WLLNylDpf2tHbETv98m1sVfjRh5CTjuLQ3vTCS1\noDce3elV8Bn0wmLUMjFN+d2JNMVRKGVk+7QC1SQ0JiFFM1xkSoruct419iZC\nn2a/\r\n=ggZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.1fbf5bd1d.0_1576177149204_0.3283020028089292","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"908c48eeaabc02d0b86d3688cd7d89bbac3bc080","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b723dfa78.0.tgz","fileCount":30,"integrity":"sha512-NjkyJZmsXRbFAnvCv6StYypa4jQ8dD7KlnTkND82hkwHTACbYi4m86vuxH//VjIswAXid0380WGiLo0CQIxf0g==","signatures":[{"sig":"MEYCIQDTpt8UNtHZS4oBP0lGUeWypNXXfwiXfA6grJZCWf0c6QIhAPp2Ap0jocdcHNyHHjSp0XmmEmg/fmH7cy3EhJ0UUkOW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6DCRA9TVsSAnZWagAAErwP/3QQx204O5PabEeZLXXo\ng+Mh7vqdNw9bfVFG3HnCdOZbybIIhrzw+hxTVST0N8mvDocM53HpQe8wo35w\nskV4q//jXwlwaLdECNAlP/Em+9EwQ2Tpk8vIJGv7uySvokfqTyYcO34ErDSm\nxzOO5DwxlACm/pHAHQB/+JrRYR2/9n/kVL1FzX/w7DxM2SBacyAJHFLtHh+o\nmVHNTzxZazSA6nTsvcYoC4MN77wO9wKDUl8sMOY83BnxoWIxpcWaQHXW8DiP\nKwu8Awfyc5VaQUqjFykAfxMVOAZ7vxB38SZh+EWLMLmqrZqFOE85zypc1fUm\nVsRy0o6A00iAfs5haeeVLcHfmwlGfUFRchKl9MwbW10INxjlTbqFEpVqWycn\nMJzdY8G/6RfT8iTQ+mLydZhbPwwntSrud6q2eXuquFVY5VZTb3OiFRdSs1UG\nJyVrjrSUG87f6xBggiid+VNfHvPlmxLg84OufqYRJe2FYEmjXws5aM7+TsoU\nhpYeGRYlOt0wxMZwQo3Y+PsliccFZr9DWz7VGonMqXL5JjMj5l/Bw/EGJmFW\nJyhomxLvybTs8droc1vfBE+V+UfR6OdwUGZ4uI5xMpubyBp/IWbEuXlFOiI3\neNtPBoWtzrrCdYjf8Cma9llYpJqagv8AUrlnHvFHE3kS7nSJ2t4jzWt3vZ0w\nHStE\r\n=tuLx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.b723dfa78.0_1576181379565_0.6135142461053935","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8533f51ece3abd387e1060aff4f4bf8b22fb3f96","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1c494e567.0.tgz","fileCount":30,"integrity":"sha512-N524EWLkEEcxbh7qAyVxJDjWhYkqKkcovK3KvcvGZk+XfHwAHgkzT/iPGLot6LAo5IwdXei/E4ZOjsGpOUpwQQ==","signatures":[{"sig":"MEQCIBX8wkXdYI5P6+PsNLFc6kwmMnDyhfUAaCfgvwrXfk/wAiAJztl/JysddzF3pUTXwXc6I5o162uiv3danF+E/747Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8FCRA9TVsSAnZWagAASrcP/2TLVsd1ARJaITXZ3sMl\nuq1yPl3HxfyWcPu5lVxy6NXMvLK4nidw7A+CABlXRvBC8zOn+aaMnBtRs6nC\n2T37P65blL3aMQZkwWxfdwCBCbI6XWHyo8UwIEO7NcMBLl2yWpTLnm19dKSf\nSxI+XBpeT9eq5Ba5oCtom1JXjQNhSGM252ZDc8If+d8eRrcHoQ8eQlMIK/yw\nBsrrZLUK0xmQMDWIb9X6T7gU1EagG5MPkgC2o4xpiHlcOQcvv6GaHURCW4vd\nhRf5Ei4Ch5CY9QY8WZQCmUpRChIHqFpm6bGTHPCoBIlbMlVy4HLFKxUGU3hv\ny1uYACXl1NsxtmcAXxZbs6CCKkJsrp3qgaqkckOcrDlPn6NMJSNAck6A2m35\nDjH1pXWCcty12n2cgG9BJ3yygRmzNQxQqsImiSxvLz6NJ+plKCCC9CYfWJx5\n7ctmoF82IEpSjbZhXIiDFIgfsU8upQzyrARgtXe/XDaE3oAYUcTl28MH3DL7\niZwUfeNmL8DPyxGQVMFs1HwYsbvMOaxFADvFZP8Zrl/fxR7moIFpZwwybxpT\nf60DHaVxeihN8uPkbL+UQC/8P8zFMgZwMeWWCuzIb8zplzqhfYh3t0ZfNYEB\n6PaUyX9mr4DnJrN1GyW88/oXhIuRO9hSzkQVTCwsUU3VnuEjhnSZeY7P1Sg4\nX7T6\r\n=eorQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.1c494e567.0_1576193796677_0.02828039131466209","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d9d8da69171718fdb490a09869b56cedb189e2fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c9e98a125.0.tgz","fileCount":30,"integrity":"sha512-ASipGYNNvqJfQBJ/QUj5X/mdzMV5MkaozV7rmHo/w5VIdoBtNPBLzdCP8uznnBV0GTt+/RRK0gD2H5qYkrFbSg==","signatures":[{"sig":"MEYCIQDTkJs8eodCdEnBFz7lniTJsISbO3g1/Tr30QtMb6EllgIhALNXWwjBLhPv72eRdrMxVfHS1dK4dQMPeSCsMNR8t2P+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RngCRA9TVsSAnZWagAAsj4P/ArBgRMtaB2WoEXfcE+6\nFm02IqA0lO55V0H+qR9TE22zLhTAMxNYUu4LQJYAVTbmNRp384dDkGnK4QbS\nV8z5SLvNRr45JQSI7MPb6VVEZXzSCZ8FG52+8wZlzZmXx15+A4DaDmAWTmsf\n/kCA7oFO+GmnR6bDi9fQqxtH9/SopCBGyqW6ApikcwkUHN8vrhxiivbQHT+w\nohoLRuq/Qii0kM24Acso+Yy34cOyzXbqZOWMQ3RN/196DfRBeY7YPxk+iEcW\n+HOO3YccG13ADYTY/RO86d0dezhr2OOOPprBjShAitfrhw+MwqxR1iqvEii0\nwMTQBvuiZtq/9Ydx6lOrNjpZ2pPKfAy67HLo+DWRc6l8zB2oku0teNeDBxBg\n3hflEGJV/WZwTGMsJTXcxp0XyPylOH25uJ+cVf8WZPa7oebm15SPqPJZ9ZNW\nYPGx4x8OqYAH+bWFY3m4DpdcZJrVZ2sbWo1QZ3bzsZGe6nNHNMuA2dyRpH8j\nUAZoains5+WrQNdDxy7hLNpQ/cAkP6B336Yt5naDPBqswlJMpDiflFL+FWxR\nIYxRn0NfNmVvD8MJabAr6CEy7/I1eatyvbb8LdVvCaWhlnatxvvCmS2lbwkR\neEqHl/C8P2SFYbP8PZ3FGbhFW7pqmrEfYPwIsq293DUcHKctgppyQFrnRxCO\n/6n9\r\n=prFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.c9e98a125.0_1576606175706_0.2703245434528787","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03a0e2ef4ff84803c6c861587a8726c1bc4159f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":30,"integrity":"sha512-7Vrlnx3gfFS3kO8PmaIpj5oO35yYrWQf/Zmocqy7d01I5/OyliUBY6e34whNZiX1Xx3kJVPSbj+IMI6oz9XGNw==","signatures":[{"sig":"MEYCIQDiUZdIBpSLO8eItuovOL0YGR66FJSvqyJxEd/zlTbwPQIhAKWhEvtqrJMhG2qYKh5HfOiJLIQqHL8ZEVqVnww6Q9gf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VeoCRA9TVsSAnZWagAAOSsQAI/9Tz7cJbHDGy3o17W0\ngBJkvpxb2b+fcCysxXwDzgvDv74aYTHCSkSqSte/W5/PAfwxOzpqxLmrWp0O\nLuCL8XWnL4S6g7KP8ZuAOfM6D+kvXIlqXoGQNf06n3hJ2a8KL8c8MDo+bt/Q\nDRbFjVexjE1EKGv51zEg6BRo3n2cHx9Jm8HHRNj/BjtrZYiuDyExqw8d0bv5\nmgm1+MjTaP2MqkEgTJP45SwV+ukKcwW2AGsNYqvFUrK7LMbYXiS7SfgckyAQ\nuRTYGLZSk3vFB2JJ9GlMgepaqjgdLZWpMyhsSQmTKUf7xLISu7QuEiUDwxKQ\nNKtq4RCHcWqtm5dYOKfHiQVv3JIdHovdpvQ8vQu+tJQ5LTUG9rzqTvDvBQtp\n1JsVs+ddTNiG/9F1bC5CtXmxN/OmPfMq482slbUbvSgDY+Q9dBTaeDIkiV2d\nHEnhw033qVoXa+MpkTFcZmD2h9Z2/lZ5Kj6H9HvS+a2IYmuTHYOq/CLZ0+wJ\n4uW4pJBcom5tKRQtn1BfALsIRRy1b3t9OkCUephJU0w3B6++Z1p8N06/9X7D\nkFAZo1yMmstj8Ojc7l76vbAfI2FRCiOgs8H/3VOzn+7+BSWwyhLzkzcKw4k0\naeYveZE8My2heMTN1Fgvm0UEFv2poNrPNYldhGghATtyRiLrAkQtxs26PZMb\nSQbq\r\n=TDAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.5ffe8f7e3.0_1576621991646_0.23588023520108492","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"13f71f5a372389aa010d51d695a0ec39e78aa0dd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.47949b08e.0.tgz","fileCount":30,"integrity":"sha512-4uDJyb0Q6isZSwBjgXoujNSdK1YCSvY0SKdRhjLN0RbwFbzWdIQ+mDgKGkJlYHTgHGRGf4ymtbCxoterxtmI3Q==","signatures":[{"sig":"MEYCIQDqiZn0CT5hq8wEA/hWIvwRRWnSOnXKT16lb4nC5+FXXgIhAKQgEKpZTRro9UKRTmEWHltr7vxddLGVthnRDFiuK+3m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":113645,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSMCRA9TVsSAnZWagAAF74P/idKN0I+3qG2qh+lp344\nvmr91yweLoMa1vPsNp56Ra3RpMKslkHzvKqIImdMKqTA/X2EigFq0S/kheYo\nesCCcWLVaenZ/OnV6/oza5mRvDU4RID3YOm5bRQBMkq7YgBzv0qDw97NGC1M\n0t4Yg7EbbyxaQE2e8uSSFQlpayJIJXBiXuE1puT+IC9gunNhAI7dRhUCcJd/\nHVKAvpB6TVyEWeZaomwMcp1bpxOjMMSWS71bASrcmQgCLCdkaiKMi6wcSAPR\nehBG93nuOllyR52i+wef5nayea7xeQ4qYjW6UFYssmjPeRgzmB0utLaO6nOP\n+yl3atZ8voDW3g1Umu98xPdQEbXehI/0rhN+GKw++TE6/j2wr4brCNGV3CRy\nJQOO9w3rA7ZeIwJQ5r/yTYFEezGqwsVuNF3GDk/2FeaiWWePo2kHZUMBx2Mv\nAsDBRGoKPwnFsZUV+5r1zP0CFinTe9YXJv2HkkCSAh/++F5nF6IGPchLhu0x\nQTr/TdRhw7kTZAVboDy5hORvyCYMW/bhu9hLefsWEidgdZogO6EcQIWmRsPK\nZfVLM5noZhB9gOPVGKCeRfUkByxnnumoF9JbREkP28o+4EcDw0dWD43M7CnW\nQDaFs2D8t+IMW+VVZLWGtaXsK9o/a9BiYNmNfZv6+A/05gYusNysb8OfnheT\nl04j\r\n=9UzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.47949b08e.0_1576690828358_0.8961501392433486","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2a895e296dbd34cb26e2f9fdd3b182167744524d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b240bcc1b.0.tgz","fileCount":30,"integrity":"sha512-EvdQXYk0qlB8NesetZFD+MLFfxyWmC1yjJET7LdZyAQSvhq46I7t0Gx/T0L+vgftIUyubukITJ1lqYjBCUr/kw==","signatures":[{"sig":"MEYCIQCm1l5ih+UP3r6GEaxZS3I1jJxh6uByOJeUU4Q5t3zv4gIhAJHmzmOkyVL/tx3CEhRwymrswYBEZ5rTUjGotVZ2Ej5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsVCRA9TVsSAnZWagAAAqgQAIbPgXD0/JA5twekglIE\nXw1glxbarP38fFaNL/cR0aDsfrw4AEsF/QUPBsIcT8+UFSub5YBsRv76aMha\nz5pK9CbHfdCgCwPIlvIeMmPsyP5gTsYN7A0J5HG9CQMxoPwPvC7B8lVeMl8S\nlwD4lrqTDIvBuijcWrPPEQUTTMvKUmeOUF0qEMFZE2MHiliOd0sHmC00C18g\nuWwqponRLLRlcjNMIKXJutaWlTwcXt+VjQ4Y51rGD8CW97hDLa0N/IoQLqmd\nxN0NBo7SWIynIRLc+ligRtHv7K1nykFYdA8NJTdKmR9csxNgVry9dKHNPSRK\nVKfE71VWCaNppMXnlDB/3Jsv3suQzipd499WvBXbPi8iV8rgAp754QLursWC\nfn0SS6SwfRU4m4LotRIayHytMjNtwc4mlYTFKp6FT0LbL81gcQpUKlDsBhHV\neo12148yhan0shnzLHk5pQd4/Zwle5CNbN+x5kylUpCUVzhWDvC7tSo8kgna\nSmlbamVrUzzzqBWlKxMtm4EaMcP77xNqs79Lk0L+jv++eA6rFDW1cpspuByE\nMgoI/GaCYWX+I+tXQzkuTN470F7+YONQKvCyyEwIQ1PPIkl2sqe1FfMxboKm\n2zawdpBAVB+3y5apXEQlmj3A+hkwmJKyNBPp5UtTgOZnPflC/EzTciu65QYB\nFnSp\r\n=Xvqa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b240bcc1b.0","@material/theme":"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/line-ripple_5.0.0-canary.b240bcc1b.0_1576696597188_0.07425061634746077","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/line-ripple","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1bdcc4023ec7c062f89058a895b4460b9294739a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.391674a26.0.tgz","fileCount":30,"integrity":"sha512-zVXX/9ZKKZWzyBUIqXJFvpRAckJH91UIMp01lCKITqNtieRqFe7jI6H5z3V8Q/xprZPBpM0equTeMavddCejrQ==","signatures":[{"sig":"MEUCIGMu1Fhk3ZYZQoyIYWJsoeuL6zWMNZAwv416rj7OkU1GAiEAwrKVsJJoam28I21zj1xQaCJloC7inxfecJIhtq8+gkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nslCRA9TVsSAnZWagAAbwYQAIidNee0WGSm/CVmqYaP\n7wILGp/rNPSugG+xQyioh0iIyQFNw0gI3pgb1+4ksMYjkENnkhcIK7f4owGC\nFKncBnFgFrLWMUfr0wHabBL8xLgis9ajn7j+Lji7N73YjTS6GH6h+lm/ydnk\nQmLJSmPurk27BzTPCSWSJVxmDhl8w2K9TdNShvGPCC4t2wcfvNTCTikxxjVC\nMRnpWFocTv6AFUKSsvZvnHGwAr079qTdzdVdC9W3rMFXVk0IvdWCiSWGVyTX\nPXHlG7CesTf+LS164fxZRcLWNwJmnT77Nb1xlvSOPO4I0nELoIhaOL0QTpho\nBJnmgDZcvnY5YlLMdGWIXrWw2n2tcP7cyUagK/4EnHkY/u5tpSTcotU8luoW\nmFgAnl0LnBkdrN1KcZZJwWYPRy2+z9c0ViZqiwC5YBE9s7ZPv4c+edjNz9G6\n/+zntPyma5elhRECThZxHAncBVTa4PVua+kj9DGCPnx4KMu1by3w+B6zd3H3\nLufE7RtX/9XvMIdJRvnUKVTIUuCTc3opW3jWD+I2t66Zu/UrCckqac9kOoQd\n3iVpjjE/d38CJb0d9nGPbYUJTt+I34mJFiUfQ/QAj9n/or1nRaftnbVCxf6E\nnjdQwmHZDg2Kz2vijk0/cZ6GoS1+TKAZ4vGFL3zvB1iYJ74xPeHCHDZOfKLS\nyUbb\r\n=u4/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.391674a26.0","@material/theme":"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/line-ripple_5.0.0-canary.391674a26.0_1576696612419_0.07289046517467934","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7258ac5c6b29247c767fe19fd43ef14beb7a31df","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c4837746c.0.tgz","fileCount":30,"integrity":"sha512-h6SmLHfJVhq3RvoN6GA4ELGKSVRVtkDk3kMeN1/ivtHJewdSFokDogwFil+AzngtFCWrRZvYVDJEttbtqmy8Fw==","signatures":[{"sig":"MEUCIEZfEao8wtSKxfbexo/CpQHlF2Mc3Cf2JJQeZS8NyhCHAiEAiBGaTfwA5j4llD0A70T6jhpK1fFpaX4Oo8/NdftXoV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9VCRA9TVsSAnZWagAAHvYP/i2tMgyVZYDtCBwfa+CM\ngOb0lxPL5uVWZ+dOoGSe1ktXHGojIaj/ZIiJ39Fsq3YC1K5iXV/we99obVqE\nrcM/DAFxy+3l0egiFdeDigIdwCz7/KeolPM+h8gbQak/vzNZEtOO0D0nTt43\nRIx38UHqUWn3mn1rUhWOLXSP9YJ7ZtdE35r+0Ni3doZYzF7ljUGHleBi3qzd\nLV0fGF8zs+4S1WSb9nQW1NOhG8ekL5k9SbxD+s1KmIO0yQJITYbcF8zbDXfT\nG22r73TycAB0ilUwvs1M5796DxHuHN15vdewfL5dNu2QWztjdQP3sGL7X7rb\n8/fZfD7XsBQoH92SqfITP5Mp5tQoidoYefbecfR9LrQPHiS+RO/VVQLw1k2B\noN1HNuvYwgPjwu76CuiBm3R9X3R7zB1+lHID/uZ6EYL+dD6qf0lqa89c7iTK\nnkw1nWnUO5DRD/dUXxc9KwxHDl7OPWvp+k0B2oBInQtTK1+QQOCjBw2TYERr\nl+W5teD0dw3yjdutht+nrH5mitUiI2GiNdZ5p+5CN9tFfmRFHdVH/VtFNbTt\nPByIwx+TZyggWyR7H0/MLRldOJ/Q9N3D3l4wA0KLyNSnzUIQn+L05dGgnJGK\nsCXc1qrFYBXB52KmOYwk/+ihNkEmA2y0s6OuFxEmt5io37XRXuurH07wBq7W\n2FtF\r\n=20yi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c4837746c.0","@material/theme":"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/line-ripple_5.0.0-canary.c4837746c.0_1576697685378_0.4664361392834271","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/line-ripple","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c6e4edbd205aad83ee2beb9bac1448d6c873de62","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.e41a70425.0.tgz","fileCount":30,"integrity":"sha512-curIXdqwvTgTSrK6pDOh9LMJQ/lbDRJWlYnCggJiclISr/V2EGNiWcGORgsIgDGKGGk/azC6Ka60gsKMa8eWCA==","signatures":[{"sig":"MEUCIQDGSNQjHGdYRMY+7mGZ47zY+bSn1mP4MeOIU0L3m5gCNwIgdkoKSkS59Pav5WRIAq9jJAMMmMlZG29kdjgxA2moCqA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQhCRA9TVsSAnZWagAAv60QAJvYMwH59mnuAq3NlWZ0\nflCOhqnHeS5CGp2fjnBFb8bef7H0qPNo2XW3umf3HHGGiQyYdMLtfhjG8aCb\nkM5O9giuffIR6Y5mLaDuHkvIxevYuJwDMSBH/uWhm23bcsPMoDmJJOCdOzsD\nTKB8FRyEeAXWuX41KncFhHtGjLkwOUdNpWmLUhQqM3C7DU89sWHAguxtqPfP\nBgd85cyrIFYqtVxyag59gSH2NZBakvhBK5SvMOttaSQBnL9AJ1uszWU52vTJ\ntLVzRHsJZkYcZ/in1er8K86a6wESEhN7znF1zT+YGr8GimztB+LU2DqCyjmz\nnooU9XHlLv5XjqKms0jgpPqEL4ddvGlBeSR21j0HUGAebhAUmRbjmBj4GbJc\ncxPRjAmgXdhXUmyUPVZKVAeqkELrcMno5bJHnYj5SjKjozfekHveE195drnl\nvIhrfhbTs5yW+BBertI59By0sCj0mmsD915pjUdPjTeACs65XFPC6zySfivl\nXti4N32JXudoC7b++dnyGgjgREEqIaxFz/VToEDinpkKgEqJw2TgolDokqEf\nz2hYiVYBU/ovTEy8qOLNAGMupaCUA6rxNVnUPrT3SdkQStR2KuMZ2X47RkdW\nEGCm91CLFNXTIOqpFatR64Kv2Uz80FIqT3i9H9iWn204cDVHATl3dMOZmXTf\ndP5S\r\n=P1l4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e41a70425.0","@material/theme":"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/line-ripple_5.0.0-canary.e41a70425.0_1576711201122_0.9800707407746494","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/line-ripple","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1ee2172f0a7d44cb9b376e092ac6073778d7a45c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.bac43eb43.0.tgz","fileCount":30,"integrity":"sha512-/VkIWiq1O0Bw7BMDm/wE7V5R8WO6tlzzS9ZHLTfBmyRSGo0yaAWDfjkIAEUAdp2MCKL6gXhCvH7HW/CSfDDSxw==","signatures":[{"sig":"MEUCIQDAwJYpDksDYavVmsbQA8Unpq3zi2KOMauzqlX42p8rCAIgJ+Rpa9v4r3xaN2g7tb2lifwXlCKiwVFp0SUh8pPhR/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUJCRA9TVsSAnZWagAAMTwP/1b1SbMiwHstFbP4qCNf\nnFQHsJftRH5VLQUvLa/yVJw+utCVjaFzvVoD0F9S59WaVP6BUE+93+l/sPLn\nyRfeUdDIPg3lo4XuP+MRS4gT6R4L19WPUDtcMXU/Rt+zUIe9NIcHlBklele0\n03sjRYEKqZwcSr07ppToCbiQhZOnUI+BOrxTdtGHJwYMAf4bfxlWaUfSXJmM\n6nIDbK9xJFj5MJSvYZXxuBs3GgbbyDtc1vkZXuFOmtxrIlChWqA8cP4nL5QO\nVF7LPxoMZ0FiOI1DokN7dX3Ss10JsCT71BiPn6A/ZGJ3LZkJNnee6RsiMvjX\nvI64pgTGQv26IKQ2EixzxDiONAFc9QYTg/t9VMEcfIKYgy/afYRETpnG2tnz\nx7zhQXvNfRe0YVwiBHdBJLuRuwrrRNCrosvy4RPar/SZhcO0PeIGxwJB6KpJ\nkGOD/YWj0DlUMQK9ZPEhBlEvLbwMFmcIsxzBM+pJRmxNZ/sTKhdjeUCRkFoh\nVvoqQx3d6EH2zhqDmCNgKZjpfE0w6OcrwzhRtB1nhvSH0EIYTRcWY8QxS0CD\nJK1+MAgpLUAQnF+kEWIL32BKSSpnXv9sJ6iUFfeD8AtHw1MwNTkwQqtWQ/+w\nwu3F98WNmErOeAirgbJqyanjnZII1kj2Geg04hMTkdMhmCutLRLg2DEpsMmk\n5zxF\r\n=A43/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bac43eb43.0","@material/theme":"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/line-ripple_5.0.0-canary.bac43eb43.0_1576711432821_0.5065503383718744","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/line-ripple","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c3932a1dd82a38dd77e995146e70a540e83dadfb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.2e491de55.0.tgz","fileCount":30,"integrity":"sha512-HQg9JZUbiPAYsuUeOzIrIwspepwh3rvS0v6zYTHx/RLXQdkXkZF2nm0wvv51gFrpwI0LwupG18LOGJUy5Xpazw==","signatures":[{"sig":"MEYCIQDcEIDi6fmusnhELD/cbHgqlRr3sjgYyakEAogyzrx7EQIhAIIl7UYoM0+oKO6HaKD0/wXrzmsDqP25l1MBqN/tLusT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XCCRA9TVsSAnZWagAAfxgP/iCoAdlGuyEUlKXHmVS3\n5UEd6xS4NQQ8W8/+ccKN/lrU9qLycEPQ5xCbflxEDkqQuM09xsSNa2yw84bm\nxOMGtUhm2Xtp19I/C+O9P/dCKdoy3YvchY8mEwFqlku1Tk5iFFmej47MjiNi\ncrLbLHYG/NMM/94BBycftyrAxnARA7MFRWzEaREOlbIMj5MSQVtykzHXNX9J\n2/Uessd0GjMCYS2fzoX5T7OrISnAjRHqG9/Yb4k0EIQFcvh805ksBSh22xD0\nH+DtGLTRmrl90DQ8CmpRSEoMCOcHUM1ij+RIP4lxIa4GTl0IevnrHsfiFtjg\nLJ8WVfJKRrTWxWpdV9TyXtuF/6vWtm4w/5pfOcwqLll8nxwuShnBrf2cAxQm\noBuVsssug2yUb1v/RfdFwojFLOOopWO/85hlzKoKGt5+YscG4wdWIK9BkEAb\n3QDxQ/kl09Pit/zrA/7ICAn8w42DfrTuaErWGgBh4IstxJdpNov83+Z5HYeI\nb7P3wbgCr4hZob2N+Wxpvrw9QWNlcwgIEiQFiEfVXv0b/g9l7Sn/960O2lo6\n0+PC0uHTlHlXeOYzIgFXuzAa0Nx+zxHADGgJJ0Fj8Aah1L8Oi7rpWClczZ0o\n6aJF531wMn4h0ZoO3W33YqopO1qnjrl6cxsKKcSbs61VkPcv8LRa8ebFaQqA\nzHL/\r\n=DUbi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2e491de55.0","@material/theme":"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/line-ripple_5.0.0-canary.2e491de55.0_1576752578110_0.08235197909056402","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c226076b1cb3fb27aa9595e794e4a7c33ef4967","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ae101c144.0.tgz","fileCount":30,"integrity":"sha512-G5hqcsOzoAV8yv2M04aYEugjcLx+hpxaMtRiPQ4dN2HdStdLyd33YcjoInVk6aU+shW5UKJ6SsPcEOS5WOSgWw==","signatures":[{"sig":"MEUCIAav40r6jBw+7NrwINCXQu/RAfWsGKFWujS6A8As6iz/AiEA+J3oj/eVe2BoL33hcjIcaN2174paQoebFsiBFyRvPN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RICRA9TVsSAnZWagAA5oEP/jRbdUMzZ15GXghMyIsy\n48fuJBcukNQYF8R+E1Wo8az2Ygryvr/8AlDnCQrjRJ1ntkmxxV2dAz7wl+0z\nGRx3Sb/daL9UMGMkecwp89BEYr3qcaNZuNomT4gWvnDRAmVHniUnE9rQCH6R\nPxoL8PB5sINvjeXbkbSdPTp7zmWpqGYZxvrY/ZRzO0bced2/hW828lP19O2e\ng6jnTo7RRy+ZL+HqFWq8s7uMoxXD3PLO0Tpc/EVejJXlnF1CBfc1cNhQJlgq\nFdfRWWNU9xdvji+Ma/CUOyt4+ApELMOB2thlDmHSyKqFEoj7xdrqYTriuotM\n6e3evZkNDLhs80gdxbt6QgSykL+0CefeBab4jmp8GoTTFggtjywZKuXNLdow\n40vC54icmDOQZxS+DbGZmTFmXSBttNwe94jdyloi9o+auEunNQu+F5P1kheR\nxYE/i8IKH0P/L1Atdn3FunHgXssWFWC7PKI04YxWgZQQQVEZl5/P+3+yG6AD\n8IP4l2c5lVrJSA6PxsJwLz1Xs3/COj/Y/wT05Zp6uihh+lRoSXCcIAKck+/I\nf2Gj0BTM9M+Cnyf7TMAL+2OAXdi0zGhTLz0fTJDknJCM5O5udkOYRSdTe5vr\nFX7hBu0a9HKekMYlERBsjnELpr8K1wqfQJkYjYc9XVOKFKPk1lFgkwTmmGM9\nltD2\r\n=DSGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ae101c144.0","@material/theme":"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/line-ripple_5.0.0-canary.ae101c144.0_1576772680464_0.7325729596822506","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b4ad811cf071a56a9c946e626172801c9601353f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a51c31f26.0.tgz","fileCount":30,"integrity":"sha512-8a1O1lhy8JGaTu/vs7vQe1tgqnCeFxAh+WovdsGwT9jpRH1DwDqd7niIs++9NQfZ1Ce4BZtmDINGM+8M23DEzA==","signatures":[{"sig":"MEUCIBqW+Uv2EoN0XDczFUgZnrW/m7mUIgG+ynrkzwGSHt9iAiEAiPdSHHeclV+B0rjQW2pq+fvWOjfyTlKAf2WZK40UEI0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/gCRA9TVsSAnZWagAA/Q0QAIsAIOsd2s9Z+XfyV2I7\ncsbL/4qmqJs2tMQ1zzJA0ZoH3yWxa9BMDJ12ruhOJUEMOJUIhp5tKlLnUGV5\nuXC9GXfBA/oR2XdYT79EALY2H2oJm/6wb0KFcrbJroVyIrHfn8zeRk26nEX2\nPwoXOpanqjg8HmpIgYPpj2O1ck98AdF0m8cVwJmfg523rS6KXJhf9LDi4ekA\nroiwb74CE2aFumAQV+NEBNBA2fOc767Crnt7ZvJImpZhvFc1EqIHxs6K/AbX\nz7PyYlzbp70zqVRhAzn3TajLBiDyrvJ1r5HI4VIy8bLMrzOd92ijzr753Vwt\nZLsW4B6c4NpWvw6YeCuM+CLV0EKBFrja/Favl26tNDmzElMqag9xQhG8ANg5\n7H6AMfOdqFe2GonIl83T4I+OPtW0vEpxxQ3KOl6dTDRSNPFg3EaQ+ycF0a43\nQ/eM28XNfNQ7IyNRDajMxqevjFgZ3h9i5/upPaEQLZpN1f2D2AErUhyF45Hr\nebCdK/zDCfX2XJ0l3R+2tSfEoAmzbfNpLtvCSzO3Dd+eoGNdws8+N4lqnsz6\nk92DKgHEbW2kO3qHx8yL9okj0X6NcJq/XDsod1bNG3cr3dYwyr5uq7RFGdDV\nLQqxnpJ95epimCzDjlHQE01bhazBx5T8f661aPBlkfflD4FgDpyZL3m7l8Zs\nSeAb\r\n=WxSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a51c31f26.0","@material/theme":"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/line-ripple_5.0.0-canary.a51c31f26.0_1576775648034_0.9873782657223829","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2257d4b97316a9184ab4564bbdc16202a2b865b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.21fc4e13b.0.tgz","fileCount":30,"integrity":"sha512-pTmtUC5OBajE3k31T+w9XMTt8ox9AcRlpx+boT5Bge9q6Eoj8eNLKM0Gvc12jpH1gOOBjtLDGANxhLhNRq9nuw==","signatures":[{"sig":"MEUCIQDdawxyO6fQG3/GpfUkjX70gN6OFI9zufty/X018PiSYAIgRz3IzL+9bpquhkdO3REC7SQivjzeMzff7yaCyrjL1DA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++skCRA9TVsSAnZWagAAHIgP/A2CS5rwTrkfUmOUBd6S\n57a9VgpCYEymxjaiZutbH6UbcSJ02fY339aHNueserSZg7LEidzvk0vZSPiL\nsAuodzSs7sXSKrly0wt7BHkihYAOkHtjV22bLy6YDYV22USAc88L/iVv/6w2\naEGbMysK0G3fX4XbVmVYVkEyauQHc0rIlZK1k3r0iSD6TA/C7b4lqNmwbAcY\neLLce6IP3zuPGNUakiOtfpU+wztmGpg+/fdASQFycGtMK18gbNmCQu/foCEP\n9Jn3ITR7qbHTHS8P3FLZu8DaOb1gTt79ot0BYxnNas98Fk+dMpH42hp001u9\nQ8Gy52BCnPGAQgXd2qgMWGN9MkHiB/rsEqFmr/Wi9DM6gkq/WYxX+M+9Znj4\nQKZwpr6LoHl5Z0lraPI9s9pKJEa0pNOmLhxPjHPmyiQT8ycOpM5MUoDs7D+3\nsEZTDbX7UCVbGcdMHqH3sFLr1IlU25xjBMai1sLoDP8iLVqJltp5g1s/SETT\ni6o4pnvHOIMSsSDRPFLETdJAeRwHBb7Y8QhEnmgDNQ1yOtYCX/8C89IeRdhg\nZ3DlPyWsCnU5h9l9MNFtQj9ddsE0tpSofFZyBizqXlkNhuOSyrg0hSYEoEQT\nSZLD36sn1pfijPuv2Of8hUfBeTEKle7X65sPcVlq8fU8uKNdDqPpnoTkso2/\ngD03\r\n=gLZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.21fc4e13b.0","@material/theme":"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/line-ripple_5.0.0-canary.21fc4e13b.0_1576790819681_0.5922953496666494","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f1016342080e3e572e74ad376981d1865e706762","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":30,"integrity":"sha512-dJmAwvA9TRdmW9QPuJVTrxZBB5hMxAx9Xa37eP+aFYmd4GBjwr/0UZB1q3lYwOhcQIAE3E7WdCCqc+9XaiYySw==","signatures":[{"sig":"MEYCIQCZQIKIzbaCzzUh/IarYR7EHUCEWV/Ssd++rXGi3bWD4QIhAL2QH5o4W6zI9TXYo7eFOmLlkeBjg2iFKyVXyRdH//r4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iCCRA9TVsSAnZWagAAE6sP/2IBiN8WXRgWUP0AZ0z8\nYMBWRd8nnDNIwKguPO1goz4JznplJh8LkvlUv9dMXeu+3w88bIDYlCGcVW9t\nv9fczNrINqdiCc+eNi9IVxDgYlZikVO+QLZWX31Yc7BryYnag4Zag12H+oEP\nUjWTQTQVDSNvci4GEpJd/2SOrgTKfJDNaKshTXBYAM3Sjz1tUgZYtJrXqCpA\nP6SQ3Bubs/I4mdlHY1YstaQDUbQ2fRr8910uaCeR+6FDQyzFoD04NivOxk0l\nhV2Zn70aM6kMqliZRVxbO6yKv8g2UOVEHo/MGvo1NYHgF8/ryeh24/J7JDEQ\ngRhkCov5gl0oNLhJnUrHJ9oioY90n6/R67aufT68L4bampB1hrCjB7ZgCDZz\nCpWuVmlXk2tnHKNhDwAaH95wNzfAnUn4ID9884V0+8MdhUz+ut34XyD3l0Rp\n/fWBCxVLn/gOJ36tOM4ApGSR+BNWOVqwND/V2nDIlF+P4zus8UXlj+LEsyjf\nRAFrQLRFWyylCIsIq5RNddzK46beWF9vYZkqf0AOa6eVlvemg1m11n1j+sLa\nGjnCFTINazMPHpEfTEJbFfJ5XALh9t8V+3KMeDIHp9Z5zCU3vhJIclSip6V2\nRx39ssb0onhFmtHHNP+yv3g+SqxCsayQiu3MhxsAfJfSXyyZqIFY5N7ifcI/\nvrY/\r\n=h131\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/theme":"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/line-ripple_5.0.0-canary.d2ae6e17d.0_1576794242305_0.9979757452252505","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"56e3c7c3e9149008f685dacceae39c78481c2820","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ba30399ad.0.tgz","fileCount":30,"integrity":"sha512-nHmmTlBMvauwGbrLjyjXeuzfbvr1f2nW/7gx4VfWDjd+ogbZw9on+5qkDtMaQ7QK666jNe92VKCq7cjFqav24Q==","signatures":[{"sig":"MEUCIBxPcq4us3ASE22vkRwazCzpbvCCyoqM8q9Qtaf9twXvAiEAxnuHKhbnXN0fN41yyx9KaxoPZuRpJjZxVNmaMPq0DvU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9MCRA9TVsSAnZWagAAYdcQAI6vccrQyZjItiTudgea\neIC/fuj67GRPVNFdY1nfehMtB+SXK6m+DdIF1hP3CJ01bvF/FhyO0wuC84Xl\nTR6yegrZlDULUbXfuY79JukugkTRevrc21HacwW9cUFwXcJyn8LAoVKbriuw\nCnhlBW5en+Ybn2S12jZCLzj/VHNdlmyQwmXqt5J3npGcnvn/gGd+ltcUyeum\nGyJdps4JS8XzzpDA6eXi/aB2lulgX8deRjYFlVR4SyYPWTYKNgC0LUnPG2Xj\nt+b/3XDCSlouQHOaKzwQMeTwrQkQ5YpLK846JH5N3rwTMDdY33AkHDUnKnb6\nqiz50dVIGXzxjAjcKg34QY9msvvZCY9CLnmwKDba5LRj63U4D+t2/+o2qdtc\nULRE4F9hgVyPrgSedDpuzhfaUR4nYmyTj/VPkJ2TinEq426cAOXpgHr1WmFF\nuV7aVM+1wgyLrUoBJFFGjMoR+OBiTq0LFa4YB3wwt5ro86YAbaHvEauRynry\nIhJOLN81KXvbEMyV6K+iA2QsBVbrYhLgQ+ayh7G9VXI3lGD3yEeQY0mBsvs0\nmzfpe935EJv5QzbYe4vOEEVjFFVWvQhuKfBaeVy9CEsxCOEDsH5DPqQtNz0o\nOQYUa9S9/rHHVtninnkoxHk/jIIms+jqpiRcqW5kZApFV+FMerGQFEE6+vZr\ngshY\r\n=u0W5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ba30399ad.0","@material/theme":"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/line-ripple_5.0.0-canary.ba30399ad.0_1576804171889_0.8286137833705243","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f766d48db150a784609c29bcc387283f2ed75418","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a08ccec35.0.tgz","fileCount":30,"integrity":"sha512-li4VocCOKvOZVAYV6vGCIb/mEUpMwzeZHyKaGlNPIHcfMR8ku2poyU+UuWGGmCHPy26kbodWvZ2McusIQLC1Fg==","signatures":[{"sig":"MEUCIQC5JjVhnXHZkmeRUFFsOI+3RCCxBTuNXcKFSow1gQUZXQIgK/y1Hmdk/iqyUnAVTNamU/kWW3Yo8GifOieZaqbgLw0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/ViwCRA9TVsSAnZWagAA5y8P/2kehZAYvAXB7RaC9fW8\nrAcaGN15mho2mENPjJNqmACWDtkfEfJQDbrvXODTH1yE0GAs2ZYOIsgjYMTj\n+4rBkMPW6nJDWC5qD2wD9ruiSH7VhuFuv6xqu1UFwccAv6hpfCkUC7Zw2HnS\n2YW1DIiMKGAkF5koqtr0Cuw65YPgtijDWegyXUnzlaO2sMd7nDssX/3lBY8D\n7eTvoKGEDbp7AhkYFMQDDxW9o++lDuJdyy3uIqJ+T7aT0EjdpyjInnqxhZ89\nBC8VRT5ZmCYCCv8nUXItbf4wJCH9VBjxwLZTkEVHL3FaHtmMvwu61xETnW2i\nMJUWkV+kCMn6qGKZW/aMhN1bve1xm0BDcGgWwlf833i3TWelIpbaSeoKYHtC\nn/aAEkkrR43q9aRnsFvu06gHwde86V2GOr/cCEQr/XY9RpaBAIx4SbdB8xD/\n0uEbdm+qkTdMPK2CYRCbvcM8uDDfG7yroPJ0qvMntw9eha17KTy0MgI33fyA\nZcbYherqnR06fgnVhdoATRb+b8VxZmazjpJJP2WL4K/qE7dkm1Y8RvLIdy7d\nN14E+j4rgnDcEByUCbwNjnnmUpNnMpKLWMYxTk6BudJcoieDZCgPznD19dqv\nJWo/tS143F1CUAiDXC/XRmMz0ntBIJ0UDZKuQrpKuA3MmGb/9uIuXUpZQswW\n43Bw\r\n=znhG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a08ccec35.0","@material/theme":"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/line-ripple_5.0.0-canary.a08ccec35.0_1576884399742_0.5144288229934906","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fb21c6b924b1c58b81b5afd9e1e8660f906eea3e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a2f75105e.0.tgz","fileCount":30,"integrity":"sha512-Gu7kvgDXEjMv7uyU8GfxANkwb8TbcAVb0VHCpb9h02D6yUORI1SWCj+twYevAJSGr1jq8JBgEn0XLvoKGnv2FQ==","signatures":[{"sig":"MEYCIQCDaJH1vtrHrll9biNTkTnS7UfHmSprgXZu1CYUr4dBrAIhAIYAnjCcaYrh31MHgabW5/amVf/67MvpefjPEACHrkuO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARnQCRA9TVsSAnZWagAAQIAP/13Oq6ooFZWsZTP8JKuw\nyfT6BePA0V6MpESE2y+Gmitx2HcO1uaEf9uMoUj0mUFqCjRHE6q9+Zkr36pc\nINDh7KBRrEo9jX0xSo+EG6JfE2Qh7Un44zEzW2zHeO1C8qsG+7+aUvvJFluW\nsmq+M6SjkLglmqCtTigFcl8gA9yDg501g3fdLgh9oje/IMkTBhu8FPTpSDa5\n4FUS26pmsN1RkTM3jhHlRan1lQIgdLuWkXFpbtQvj9pIpE8lPBKcYnJwg05v\nwmAe6y7MkmkpeOt8H924HnNHq7Fg+wGW4HO31YDzQrC9AeYnsZKLv0TUD3ID\n19UkerX1vEntga4O6oWl/3gGYv7EBjBEr1g2NPr7EnAOkDhQqQbhnuhIEo8S\nzlTGWy4AFVYbNAYCpio4UYgKKmSx78B6CyaMMcXTHma7awJPuXaHvY20SOMZ\noZZPB7bNNLs7tcve4TYPhxjbtnR9wX+pnp0pbXnURnfhbFtfvZuoJpihpu/5\nJ4hEai3uV+sRDlJ2CHH3/GWkoo1m4qCWT6tcNNM9dQspH+s3Q12g9Sjsx0Fl\nuENNXcy0HJrVb/vHzbyiVIdGkuptZV8Ro2nfLlvXmiYPBE/h6fuR9K4SeDOH\nELKApA0FHfoWgdCgKpBB2rvDsmWOQYfI/ODYZKEsro6I0CLk6MtSvp22d4CH\nUBj4\r\n=l65a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a2f75105e.0","@material/theme":"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/line-ripple_5.0.0-canary.a2f75105e.0_1577130448345_0.9686675681931791","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5fbd623ea0143847f8c76caf0b0a57f2cff7bf8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c054a24c7.0.tgz","fileCount":30,"integrity":"sha512-WKEM+5GNSe5Ta8uofXSiQZTdHawvekmzZb75uLpVIxLs4r6ORGnZ1XqXBBTStumAgbOa5vDTcQs9z/P+w+O7WA==","signatures":[{"sig":"MEYCIQCFsZJwtMxw7yqYswm2YxH1a5uetrFr5H/bLwdPnq/FPwIhAKlsnUSw+t9uiC4LsUjTlIQdcOrH0UZcQ3MP3lsqHLdz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATZ+CRA9TVsSAnZWagAA6VYP/08KVfm4Ig/tPZiZ0V3h\nSvMgHpJgvFW+gipv2qhNv8AjvH1KDEOX/Pf3Nf8/+H46+Y1/soFss67kdZkp\n3HRnpxjD3mDAwch8W2aJjlV5IUAobHOBvzsXLkUYXuEFSwp8GNEWwI+un/bE\nGCvk4HROdLF9LEO7Y8e/J7MwtkjBO/B+49i6tvkDcaKzGndtHhypqfwgqsRr\nZx383fPzfWnLjonaJFs2DQrfZDf58oYyu+XYzQhQURuRSj0jnyFTBrsRaSgK\nUuxq9JExcMa3JIFFwMPEapceTyi0ecxjgb8duAOefejwexIXOR1yMMk3jo7O\nfypV4YP04gCyPxE2bC9DRlxBAfke4KllxcWHLPrdzWxdB1Dyj/fESywEuRbE\nZ1pI7HQUcAlrokPAAVQmDCk2ANMQjLk08zqOKtE3IvaEG6AZmXTU7yCvRBaF\nDFlY+lq8y7OzGVKCFd1gN1H81xbdC7k2vVKiFBVN3/hFFG0CWFDVsgS/rCAe\neowTi90y+DZXfB/T9SOV0a189eZKPvcO2009mZR7kkm4JWg3r1uwq3YBH12X\nR908MKS/vPRr2W1L35UTyUC0IqYRte1OcVAg9/XjDgikf0lZb+lYWUjalk02\nLczwQQsopWSSrBmBGaGXLGm/JylK/REKLc8KpzbCeN/A7DDGKn93ZoFDWD0o\nodHt\r\n=rTwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c054a24c7.0","@material/theme":"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/line-ripple_5.0.0-canary.c054a24c7.0_1577137789959_0.7996041130028042","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a6a3f88bc09f8fb64d53062a53497e2a7c02a277","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c6808c51c.0.tgz","fileCount":30,"integrity":"sha512-+qN7IN4E1bY7ag5kgr4bFYohfc7FxxToqjA0YaEf0W/emmIOKbx7P3JPcVC+g2bJ8FVr1ppsgQL40Mz+Ilyxsg==","signatures":[{"sig":"MEYCIQCW/JmgS/ZHBC2GiKRbKZYW1UXvc01M1xC4Wg+GbaJNdwIhALo+T3PTADr6LZ1fBIDuOwXGkfDWD7ohb+aJCAwFXRhO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATeXCRA9TVsSAnZWagAAnnUP/jmZL++90lGQ4SajPzIq\nMfDQlVrXbmDLvgzbXWEDokWk2H3F7XoOslp9A1nUuxwbjYVU8I8F2lCwemgy\nQHB6VMlnltY0pxu5Q9G6bW13KoNJeG8xZMGVRGxEaVBt/KbV36vJ064QF6Xm\n2CK8LmNm6/VCamdevImgz1JFE68WP+x2U2rYzRg1LZwz+xdlgR1a6Ge9FjcG\nZVj39k91OKI7bg3Y3aq+v4ixdG6r0Wq7y0WmPehQ7xzePdhppHSvVAkz3xaw\n8ioPfeJLIYb3cvTgo12k7EiYbMwt8kDofPozs1727Sa79b3LGSQDhRwbwDcN\nXCH5oDcWXQ2YWA9kwHbE5d48CnJNXDbIDcm+UWl118pyAl63uVZitvPYrpej\nUyUuz2Gy+29iEca1JlrsDR48r0N8p9mQVcwUS6Vm3vYBgdk2ZAbX+TGKbgoY\nmShWj+5n6bFWZArjUflSPmAKNMKqEGoVksXNIlDiqM3QhIIxOco45OpknOjN\n3GBsuSuVKgS4PxeLPgc37PWTs0uOI/yu1XGbL4OtSc5Zy535tGdg2hGbxtoR\nFaUaqZB9CDsjswCZTaAcpnHk1Jrcgk9LOdo5KcjNofsA+scqMH3LLLtgf1Ri\nDv4auI8VWh8YvCvI570rtdB/1B2pD3WPnlueDKiWYLrhY2yOUxctEKZ0V+az\n4PQa\r\n=UujV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c6808c51c.0","@material/theme":"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/line-ripple_5.0.0-canary.c6808c51c.0_1577138071326_0.5996465972047371","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b5f25064250036ac58c96a90dffcff6db137816","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7bce9cf77.0.tgz","fileCount":30,"integrity":"sha512-VLB5TH+uIMtdZNMCQ804Qu5gK5SQHaiiWhKtZ2atbX0jmc4OoommYH+Xyvs+RtjMRR+uMKescmZvBDVfJwTsgA==","signatures":[{"sig":"MEQCIFSafpR/R8mGgTETRlJBjAOTJwHSja9ETavlx/hyOEqSAiAvM05snELeqRo/pM/yNG0nxUCgnQD8gGOM8VHsjxO01Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/FCRA9TVsSAnZWagAAFWIP/053t0EB18cjLfz6gUq/\nWvO/Dcwh3yLr084lsxhH1HE7XQNY6xzrMZd/BF85ni9O8jDDJMdDFVjI2M9n\n2EcOqKUZMg5GTFge8w8rrnWm9leZsWMdsns1/l5MU+qbM3GDyMpefIQTGP84\nt6LVNCEbqqYC5/zymtO6gpWsLdrGx38ejA5lLD6vZYd128P8RmjO0mEdW3Wa\nAlBMPtj04bOwsiukoxihMzLs9Cz94nzojLRmznjaZtTICLED/MPYHoNvNXjR\nMvSSeaVGmT2VF+qbONSAzl8aILAUiUjGk/pCi9UICnW0QHu5IYjcVNMlO6CQ\nqYP62+MSSXoYfuXxonkX0W3MiiGslh6brxVo3tKn96n1UhqQraJdPSiiVDHk\nWmVw7XLAFFCGRCo6FJf3dV5hnj5vqV+d9BeyOyfwgRK6d1Cq16NgMmRcoHne\ntJWsp+SPnJbCGMSk9sYFDQJ2oXUbIpBOZhQnF1uD0TV6GE4tJNdxBdQQWxo6\nEYwIZwr4idN2v6bNij8PnYrKr4c3ZNKrNPtaBxVPHja+gYcOrbVBpQ88yGRy\nHfRwdl+iZ3ZKk5mZwGlRhunPp/HPkSXw/Ol0L05OMQ1fs9VYC5sje8KFnzOO\nihZs7JwSpciffg18d+gEaSPTp1gxex9Pwd4EibQ3gfjcd7hNceEcKpu9/w0G\nQovT\r\n=w4Cj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7bce9cf77.0","@material/theme":"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/line-ripple_5.0.0-canary.7bce9cf77.0_1577385924738_0.375749812968063","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6d2d539b3242813fd3ae53753b4d0814fc9c4154","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c92f038c3.0.tgz","fileCount":30,"integrity":"sha512-UYy//QrwANucmp6lubrQyIk91rGrWsu4yq3FYhckPwU98fBS7yrZdnAfigkbTfKPtTyiOVWO6cCzvhhZw9VzuA==","signatures":[{"sig":"MEQCIHPogB+9z0gRHnT2JsE32YmzVqqix0m/0HU5GhgFKjbGAiBZXVYJMQRaKLJHu5MsOkJdvKHag1bdWcFUJrg2fWwIkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQPCRA9TVsSAnZWagAA5DgP/3BFIAFZ3Zx9Z4vLaBxL\nPnEPD4Roj0tD9+f9nmL9ZvjQI3YQOmhMCzxZCZUEM7L8MiUO4eSqPUO5/Dil\n09O+X1Lh3m5nsazycLUu02tn7c+YL/SFI7mDNcPC42JwF0RPXKMFywHc18tl\nAc8jeCvjZ1+uyt3uWmsBn0P9K+xp8nLa2cAvovH0a6qqMPyrrThrZD+1ZCZl\nYRADlrQWYuLUE2XdE9oEQU2dFpxxUCmA9/D0hCWa/leI99AKGrSEmyxT/mnf\nrImdjscPuclE3KQIorU5eK+In0bEN37qX58v1wNR4BR3bCCOLq5WUKts5zeV\nhuoOO8jn2qXGUUgwWbrqSNy6Mgvofns8X2HVfmxf7ktEZRy0cKaei2HlV6Ia\nXNuuiNid1JeL7eqdZlU29DOaco6651wEqYnbxM2XZyLpkUgxeq+u7QHx3Z1Y\nSC1R/9Px7WGlLVcXUCao3TZ8eNj5J9qYnTlMmCKpx/3Ejgdl7SnwzZxpfR/q\nm95AJ3OadLfV/xKPCts3H/FGtA+uL9qaUxn05TBWJla4ekIiatPk3F3WQxlG\nTnkGJ8rkKBI078VJwFCep3Eo85r7j39X6zIOxXe8sfSmULK9AgOcElqtIO7K\n20qBby3wHkmb+Wu2N+uvVIL9RPAPGmi/iD3IhBteycnarWkc3wdp036NOOvv\nYZzv\r\n=d8UD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c92f038c3.0","@material/theme":"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/line-ripple_5.0.0-canary.c92f038c3.0_1577743374874_0.6137973557292506","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"109c76749fa0dc3363c2de768216f290969c6ec7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1f1ac7558.0.tgz","fileCount":30,"integrity":"sha512-4a42Z5C/2pcCbaiSs4iV9u9eDj72wgPl41hmu5IstARXC7Rbq7P9sGySqjWKqPLNLHlDtdywi2E/0UWcidSXPg==","signatures":[{"sig":"MEUCIEIpxaoRZ6nx06tafi1U4DoGbmJyKMZAym5/PmTjGN14AiEAoXg1OeI53kiHju7Jjc3DC7Bl8lfqkuu6knq6JRwf8HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhlCRA9TVsSAnZWagAAQHoQAKHBfAEY0jz9kUcCIAmJ\nXOHQtOSFKi4/cRzgzN8mGVkgRt36ARa84rUNwdd/AeJOsc3n17Sl1XZxHzYq\nofbBm5SGnbPjRPVp2F5KBJfPLDvRcYh45Mi9Fxs6Uptd8YHFNTFK0J+jgphT\nauof4KMK+2U0Hh6v6KXGuzJWikU95NumI67Vq3uJRrXriBFnyaRhfduClnqh\nKFGj7qCDElrQWKptUyNwdyXm3bosYXGKZXF2LJZtcqtGCG3PmOXMql1gp6h/\nZC/YlV6lHFTCiKLCDeMKCns1SrUQW2XqqjjHqzaeRizA+qBlM8N2YHkVmfhK\niQxUtNPp2r3wQi34oRkhpmzYl4tnEzGnu9E/T9ERU2x1G5mfF7kmwOCJmFe6\n4ioL/VxLiBp6UwrE758Kc3Z9ymLic9ANS2naUmIFQOs0HxRxB5mCsmh/Zkte\nO23D6SrLnbhFFfJkd9HaFooGLy58mh30aax3W8K1pworPQ2DFzf248qSo1JV\nL1FfPyAZqdFBo1mLiz1SavsVnsAeX/a8farFVV9m//DDepi3RhX1X/lYiYsp\n4iRiTxHmA10pxuC1v3IuYJ/gp5luPYDBPyPkY1io9OSPHupUimFiYCMxJ3d2\nl0X2OAE1HqjrQe78hxVifIMxKmMg6aNv8G0+K5IgINSxcB6QVpyPCN1QA2Yx\n5wV+\r\n=lalU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1f1ac7558.0","@material/theme":"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/line-ripple_5.0.0-canary.1f1ac7558.0_1577998437530_0.5701344471418559","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"075c44bace7f374be265fead0ccf66ebc71ab528","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ec26e799c.0.tgz","fileCount":30,"integrity":"sha512-EK67HJ/sCn3J24FMO52rO8HzMfvqezzoTd64fkG6+eI7LwoIS4OoQrJi9vTdO7TUa3MLSpvWXohL0VRWvGra1A==","signatures":[{"sig":"MEYCIQCU7sHI9TNsWYGaH1op6TyPpdr6wuWC90mU32L6Evck3wIhAOEI1EMW3c3ZTopCVsYv9e0AyMnMwQbq9XNl9Pni6wOS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmO2CRA9TVsSAnZWagAAiXcP/ivY+/QIhj7jcrjB5J6Q\nDffDl5rt3bPfvVau4u/s3OLmVNTWjVcGnxcPnEbDwyyi/B41IXWlfQiMTNE7\np5kgazjBLkD2nuqI6knfh81HQBXc0kotI7NwYPCfNBNVg7c9YXB8QSrDGfdy\n7CFdBO6Ra6tNF86aaIfXlYOhcFiIW8ydGgQI3JXAJ2WCTZfm5nAo9HY0y9aK\naGxohYmjm2AWfK6tffhDOuGWXV6aszobo+L5I4O3IX62r0Lgde2ut+G2TC8A\njtqu9+lAqYcQ/ML7ekBoi3MUBirHMdaQlgRNwwbTKadHuq+XC5WOSb7M7VS6\nJu0kBW0lqhj1wrJ5yIfvW0MyfrdafTG0djr8SeMS8us79KNRAR5ux0L2vWQc\n1Kf/i5+GyhZreP0Ac8J9eg05zH+hZdpULEPuKZmVfVqkDDvhY7tErw/PdzN8\n/Yd1IncOipTw23WNuYYEd1tH7nfCcbnlxGdb9mnqCq6E6XR3dTVCZkR8o39A\nu9zFi0iJXsJ8Ojk5IYttessstSrob5dpTEPt0BAsBxyjjftGff2t2PfIlqGp\nhcYl6kaBdtxDMNB3j0osFG+e0c2n+XbSUucV8AXl8Jb+7Uwtho9U3VPm9yCG\nfCDVTDO8KyqS4KM5wVCXmPoL14dReNSxj1C8zYELHuafx2wm+7GtDocbOzg1\nytRa\r\n=sjvB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec26e799c.0","@material/theme":"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/line-ripple_5.0.0-canary.ec26e799c.0_1578001333722_0.8892334798016814","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/line-ripple","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0f2be11a8ef2b9d3b92bea0bac576d9945c56c6d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.0a40ced40.0.tgz","fileCount":30,"integrity":"sha512-7b9gP9ehBfjnTJcv78EwMsVHhMDAyKQaLNucTu3Szpa5wq2Hw+QgSMtMmSmsEOTCypqlt6HzwV84qgju1dCxlw==","signatures":[{"sig":"MEUCIGPeHOQcfn20fH4BUl8gvjxkrSfWQZpu1PqR3baTRASWAiEAyqQvYjAPu4VZ3jh17Wayaw1mixlhVxgDE7Lb8fcCJmA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3U6CRA9TVsSAnZWagAAmVcP/RIwEUH42/GKFPbAbbHD\n6WciHCmi/Zb0df8h2zh+0yMtMZTGKxnrWeQYE3/Qea9QxQ8qzMi9tUEizQC4\njIXJDFJnZ7Rn8Yoh6LBR11iBn6M0sALTqA/tQkAf4jcAjL021S8p02nGeogs\nXNa10NkYhz90NlwzFPj67utMo9dnvvv31jk823o3Kegx9PR0JfOTy9W+LM5e\n+EuxABbfk7qy9KQiXqy7qZUhhjOHa4ixf5yqOH+7G1zKWfUq+ssiEy2M0fll\nbAB2dBhsEms2/MY7UqIKAedhbGYHg/qmfdusmEi5V34eDVLQVtC5csKh2tTE\nYCh77VvX/f8b7jTz03FAvPBOETil5Zbc3DD8VYuxE4bis5CabSSeZXV6QEh8\nNDpYpwXqOFrWsYO1Khiofx2Kx8iYA1NL5bgjjnMGR6Mk4TcvKRLpuYoIpwg1\nTnK99qw4TsFmwkrBr4x/AxqDmkR/O63uJ7kv7uBG9q2acEqE3Zemda3RHWYY\n5Ga5PKAGUD3jh4MIxelCmdTQHh2axfHcQCVC2auTdtMWN8xE1DQ1erTcfGfa\nxdh7cB2m1Bgg2E9nHqyo+xbkEK2RvQSGXKFIdE7JOhuhxJbS5KAjkaSMgKfX\ntY/hmhTpfPeg3wJewxxA/o+hO/44qe8V8LD0YITIrTNohc2OX1SsVag8R3Ki\nlgVK\r\n=sISB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0a40ced40.0","@material/theme":"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/line-ripple_5.0.0-canary.0a40ced40.0_1578071354499_0.6110485099323524","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"57e1937b707f32f9c99b49bf195ff59939dd1916","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3adf84899.0.tgz","fileCount":30,"integrity":"sha512-i3wDbj6o2Qhpty2XZLqLD0QJ1hsGJJbyJ1U+HpAGduZcrGHBukUgFRlhLMpzWQpqwM5Ys7tjAa3mgivOXu7oBA==","signatures":[{"sig":"MEUCIQCWL8t/KPVjaM2rsmhMKsfPc3Fjhpaz0SB2Lz/UTu3wCwIgPqa2YjsPu5wLfi3VfHcoGoOh4Yx97XSJ62Di0+a0btc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZYCRA9TVsSAnZWagAAF4AQAKQ+UOa8I07tt6vy+lVb\nAJ8sAE5KE/UIvDcXyGNwGaCtnAIto57lil7G40hm0zWGMxbyD+Hfn+CoTmzv\nojuhaPNA+VjPneYmTW+11BjUYFk/fIqeCDOeO1Fj4UmgG7sSvTh894ZYcxi/\nH8XlB4X67ReuWO5UxKnuVK5nsyLY9qH3YYBjLAN6DEGxSogUtVe5wHpqHq8z\nA3S7/4jYP2O2a64dyGn3YOLlXYtUTEe+624PlRlDKAIxKhKtmpqNy84nJIp5\n19x+EGCE3ewCKR+Kp+cjpHtvV+v2P+AgJfoCnx/4PMXq3n4wtOTWDxMEV6TF\nQdg9bFO92/6e8p2/44R1dzJUFjGEKg/NEs0tpMqt3XJ7eDS9vnThv1s8XkL0\nz/xChX9CEjXtGPojjRvEeq7wJakQke2v5Di9A7MnNW+rAfuQLqkeyjA6kvvv\nR40uFV8ZUtenkpKQzPCvy0gmfS8S3rfC68t4u48m1TqNIYKDa9DEr/Plou+j\nQ4Ya2znSfTYTPEUBruyodhoIEGpbb3gE12pwXeBzyt/A+YmKvNTLhNv1EWxZ\nQR/GAPZ3RHcAa5Tj9AjeeJpcOSIt4/AFeEeM1UiEGmXQ3iPez6b9iR9NaWyz\nbe2v3BJJ1nl6IAafIrjYUlH8z++PJlv3l3hPXiZYBOmN5S/dCsTVlTZs3G4G\nJN8Z\r\n=TJrc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3adf84899.0","@material/theme":"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/line-ripple_5.0.0-canary.3adf84899.0_1578075735744_0.16876951247105243","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/line-ripple","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f8a039b4e78269399e821720fdeb826c2bd2409","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.0d42ee650.0.tgz","fileCount":30,"integrity":"sha512-3iNPr0So/M4SZYDvshe9DxyL+Fcl3XIGo6Zj2IQvD56eURa9ujh0f2QlJmVR8iXAw17+0CRbQvppiEQuPidlMA==","signatures":[{"sig":"MEUCIQDsy/UK+kn/7LgLvS75MeD+gB9mWR4pYX9lico4Wtl64wIgFZd/W9gM9j8S2R36RhFc/YwpjKdcrWg2OuGx31Bxp38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7P0CRA9TVsSAnZWagAAsOUP/2PsInk5TzJaJCl/4Wbw\n+Rf9BMC+O3DxbCjBuV+DXQuSFenHL49Yx+8BdVow/kYGNeldjvyX5pAV3fAk\n5m/Zc+TS4cdO3ULtXduhRkkc8MIZQYbY+bCUoQ7c9Tb6FSZ3bY8oFlKSL+Od\ne829nlWeTxsQyoyiVphd72RlamVt1GLLLP3CCXMebuwQAZHLFQagZBKngy8k\n05A9cQLsPfumQ9CanxaLCDCiPmY0w4WvJSiLdloRbQlWDvVnCmdGlvLIb7bs\nDO7uNNwvwDXucwF+iGT1ZQxziVCdvzJaF9DdF3+Pvu3CAvJ91JbM5n3ijEPd\n+O8cg2lr7L7W0PLp7AZ181xDtlbclwbv1HqK00p/MU4KH7Z1qGf6HPhxxukF\nvQlywu+1sS7E0q9jAmodt3/GxB2wtQ1RH4M8EnnJHiSo345f5NPMoBcqeql6\nUSR11oUj+gbixT8BjBXwsMKRjzR1BiL2u1fk+xjEoZTz2aZi+keZiQonw8eP\nCr8s2zwLGWUF/n4TI4eaRDUiaG/oNRbd9PxzalHZo7c8/E/8df7HiDIXC9BR\n+PfxQzhIOCBVl5yqG5DkW4GB4iWc+cIl212UvN1udDrh8X1/C9GfFu7mw2mE\nFVRN25Rk1v4Ja9NndpveMBBmTlP8A/NpM/yURDNJogVwq0QHXzUQQhf/4Fvl\nYZVe\r\n=hJ4q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.0d42ee650.0","@material/theme":"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/line-ripple_5.0.0-canary.0d42ee650.0_1578087412270_0.42021746099748203","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/line-ripple","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"73b0ffe56d09c106f0d2331489c0e461d94d6c59","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.847dd1ada.0.tgz","fileCount":30,"integrity":"sha512-AvyLmMxwaRRkkFW0TCcdHxUE0blIBU72n4ElsYQMY/BGHVgywL1SbNw/v5VLmc84R3hcuapz9UrObjmeD+/lFg==","signatures":[{"sig":"MEQCIByhj3BuaxcBabbr+XLedEZGdX6uQV/WThzbL3kaM7z+AiB1PMqgYRGGkB4iA6PxCUPbiuguQXO70tDci7HPjoWYBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4nPCRA9TVsSAnZWagAAZeIQAIv++nBXgJUeuw2lfZ7v\n7Almizr1BU2cS7GXJEW/twxZzTiIab2JOICZPiv/c0dczfoD/5XyaHUrI3f4\nKsA0n/SsWR3tXl00VHZ9R/oYad6X5DbAqLX7eijbbTqixg91KsGdRu5buPlp\ncuvB5PuPnY/U61H4tELwE9zAQDlMkifQ3LblaahWCZr0O6UwUkrztZ/gVaAu\n3ou8LBEmf4I92Eibfve6EjJIDpz9RVk54EOXv7m1Ri5pJdifRVRMecP4SevX\nGcsF6XUB+8HcfamqYA6qYwuGN2/R4AXVGX7eFvUqyIJwkY1Dn+3A86Y76jRD\nGzWo4M2R5V2UmEmRuVuOIwAdRVJYVVq8/msskGVbXLQwpiMM02wTNUfyI1OS\nlNoARV7uBAmxYcSnF7Z5a8JZSQWhMR57myjotnHIDXu1XOOFmezPd8Dby0IX\ndQS572c4Y3OsnxtXJJ++5GlcoPgL5CLcW/DwokIinTZP3KGMRFA20YK8gV6C\n5glaS59NiYl1T4mSiZFHVNwq3OZZkRKh4JsmCGja+VZfIhz5G7ZnOEA9enGO\nyb8dHDgzw11X/xu/7DF8Mmzj/B7jvMk9xxgM0w1Uvbyz32mzrV5USljpwWMc\nNKhv0Ia0368guPX/EnWpo6E9Y9HGGEcX/RhtMKQhxlyV1cbdZgYv7bbBZOcd\nn/q2\r\n=e1ud\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.847dd1ada.0","@material/theme":"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/line-ripple_5.0.0-canary.847dd1ada.0_1578338767372_0.41439535868409205","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/line-ripple","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ea1a4f7d104e5cfa2f0f633c824ea7eeb5360a73","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.39df7e5df.0.tgz","fileCount":30,"integrity":"sha512-iLy1XovsyV2qh6/Drk67K61oerva/8jdsN8iDxL+dmJA9JxOwX2EfYIBEUP+qslhn3DfYin8lkY7+NfTKksxFw==","signatures":[{"sig":"MEYCIQDN89JM4waEOwupbXjhT0WLyupbhysAyK29rceKQ3hIFQIhAOPyUoF3v9JjCTgrUag9n+d9azNIUSwjM27azTj6jJZk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9b2CRA9TVsSAnZWagAAMd8P/0LaYHP2yARd/7nFtWsn\nqYIHbKkyXAOc1RGt384BbavI/dLIsnI2/Ng9xKhsQG4wHWMCTm5LO9hfajBE\nAUF9ZQLKHUAcSIDHpbN5RsxVIT3nPWlo6hcBKoHwdxQ7txwRsBRqlWzC2t9c\noljDNeFeQaFqjuNFuCZIK3Q1T0JRZP9LOPebNzGU+OgqN9ilbBBmbe2teH7K\nMnfHF+7Y60kIFLxIXi9zJFZDviNMfdb1efBKc44m49qefwZcc6guP9zGnWl0\n+AVAb7jdxnh7BBSGC3QGi3+h3WeColYJ5/hWJuTO8/KBmDzCVP14jubu5Wt/\nZxZfrtX+f96tINYn4YefGmgSV9fbc+QpvEvUTlwfZPbU2Pptt2VyRWm+mAqj\ny6qds2mhN2JSRnALL/x/4dLxUU4WXfRW9P4uQuoMaH8NwF4q18kHaKDL5oTx\nB0PSxNjl8Ux1cwsaHKulPtOAPyKzsPdQSr9dvaFADLk1NKg3u2SlpX2hLZ2n\n0rQSSYKWDo2Rk1SAOS5He+9EYyqHSSv/MVI6JRCAUUoukg5ZAV7l/FPlyl6b\nFyJQvnuhImzHK2BAcEMpW4umqZlxm7oIgd1cAD5efmiWcDX0ghCJmqqOcNFr\nU6mg71QWlZFIAx3LN+gUJXuUs9IHmVs8ywek6vbVndkJ7IvDyJwRFnm0dPy8\n4IvW\r\n=Zs0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.39df7e5df.0","@material/theme":"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/line-ripple_5.0.0-canary.39df7e5df.0_1578358518575_0.16688665792081192","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5cee718bfe98ae00346f8c74cc8f64f9608e3f38","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f1a2581ab.0.tgz","fileCount":30,"integrity":"sha512-S5eZBnGfInSvFIRTeaIttYboHaiMjATOcrjpDa1pXt2IGmuUSDW1WDvxOG5eiag4cxePHwgEI0R2hpBiDjHQLQ==","signatures":[{"sig":"MEUCIQDWuQ+7Mbr+x20oBT/h5za0rQ10xS6ye7JXyVI4b9FDdAIgNE/QHvmmWLnZkVyroOM9xM1SE0LnZjnU8/XU+RNRhIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJzKCRA9TVsSAnZWagAAAasQAIIiHzesUnYMV63/nZD9\nVQk+L4LT8hkk+ljVQqBvuprLVvemyaI9Y0M6KJwETFGWuQdivauFICRCyMVG\nOqHjQHBSqZ7T+K8f5vmMZuTWfyS9j/zM5ohnA+7UliEs9yozMPWasz0A2O0/\nl98JWLqUW7s2V7TROd81qoNPWADP8Mma9JxWOeeqoPzjTyerXZX3xlPpuU+d\nMHjnBVuqLN8r2Ox6CoYnvoU8kAfYpxDh/ZSXEYEPpX6sPvT3QcHX4giFS174\nwoQlAjpSikS0PJFfMzkFwDY14QjlcsRp8WHJdOqbrGLwQe9nb9A3r6qZa4yc\nVUDsNVE+oXS4Yu+bq0P5BTuCFrGHlFK3jbURVDFSktlrmuihR5wSJkKooaWi\nGUTVTJ0qS9CGntIvsMPxTWY307cJnlA/6bIK9/cYdsj2klk/GNOesrsr0GCl\nKckvbQ/qPf2bMfVm2s/o/7TZvsb4VfMF71AnMreuuXh6lGDMqAKqbdrDTIh6\nm3oyeGYOqT4sB5Gi6XuFGTPfSjrYdwpE+ye1JgQeuaFCbYj4R/7NFJuhpWVJ\nXSh2KPMBfyopMoVBwka+ofqicoD99mOZr6V1+Y8Qv0k+jJFIQnBzQ/UuE9o+\nLmj4hE86aRYPJ0iuPUUPVYVRA+1qHA1ZhtUnm8i6JlTwIjTKqWiEvR/GGHw6\n77id\r\n=rRS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f1a2581ab.0","@material/theme":"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/line-ripple_5.0.0-canary.f1a2581ab.0_1578409161999_0.10854214108363935","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5744b0c6d493d44f24d0e4aed42d8a0f7454765d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7c7ddf347.0.tgz","fileCount":30,"integrity":"sha512-YjRfnD3TPibFJN0nMvhROAhVGpXVcB7LZfAj2lBtNzSHiPdxRClG0x6Obcg9U8pH2f87ALdTlk5rgN81pyuQUg==","signatures":[{"sig":"MEYCIQDDd+rQICEfSfT+aDo573fjPiKG1mEFp9fQZSvRjD5+fAIhAIbpO8OvY2dVhjvFyBnXQ8Nw7mf3rzlUcICv0yecu+g/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKCaCRA9TVsSAnZWagAAb2IP/iYGIf1fNVWx4Fum5Ufk\nzYkKOSMMqjOO+SUBgEzpmNPUmuGAlb4glKxekOhiQsW7U8KeLCpjOU6v8bvI\n12i5Y0k76P/nnALhOuEApm+SBWLTg7q95ZCrLqNM1nUPdxl+CfgaU9SgCGEb\nVXJUw3oa9CGqs3OTEhYc5UpYKI+q4zEZL+81S7g1boFp6E1wTECuAbpaYM7T\nJidx0WEf5ZtAEJxbGi2Ipdna3UT1XhlohT2/tA2ANOuGmdGAdljfz5Ig7DqA\n7XrldzLp0D0R/mLOjveSEpYRuExjGdV3N1y/fp3qegMz//HJZK+ctn7IN46S\n2BHVThTzywPtV2ieprtODccXlcG1GaSiZIQqdOEv0Jc32rFY+j2cRQUTYqm2\naqAmEoXWjiU2ts//vniQah/8bJ3UA0+fiF84FmSV4Akh1ig0to8UYovi9fVW\na/EQEtZ1+tfpcef7aZmLv8q/QkfxGUObx+IUkTd8IY6Sfhfd+kEEgESD4QZs\nrc9wNIUZvMRwdsGS+gyXxAblzrwbMMXLh5C1nVnQ19tyORtzD30+nJOedELG\nCS6XGsjWzkNqb8objvcdMEdLANYPgwbF6AECWsxILbmnDNx4Dz9d6FmoRZts\nPdkaViVRlXI6femvn4LKRuY/M2PZm72E42CVfhnC3BOYHDBJ/u2wBqpdJKlG\ngU2j\r\n=eLCw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c7ddf347.0","@material/theme":"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/line-ripple_5.0.0-canary.7c7ddf347.0_1578410138263_0.9078646127025922","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2089db09870e864abc7bd4dc6c3ec7a9206df417","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":30,"integrity":"sha512-Vb21W5byXnGRKvzTVHUBprO0ITbyJ0S6AoSU1dVxJf/1/8+u0BLaBXq3s28ja3EHoya7oSPlTUsPv2eF2vO7pQ==","signatures":[{"sig":"MEUCIQDxViMaJxJa+8PkYBSL66qmM/6YlAB+LXtl7RYcA2BHPwIgPL28m9nJBr7Iud+OowbSsKW3URJdZDR0tJyf+ieILn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMlxCRA9TVsSAnZWagAADk8P/25nvdImyRQDtpO9/rLG\n8/Rpa5OfuQvIDWjX6bqivTxQ0KM/FsUkHBj5aE6EmquS+HBLU6vGe4hsRJxE\nyi35bPI9XplRxlLB6CO2UaFX2kT6khl5X7YsTLfynPPEIX/V0fMDsoiOcq3/\n68iC5lpN4iXs/5EPihBVZhrG/xmPNjoCx3XXPAekthpD94LJTeZumaQ8npfW\nGKYVLx6p0fyFoS2o/1VOaTxuRIRQUnIenp54Wzd4rhZghPzejFSIZhzrLk+V\naREsxpM6D4MHF8FNICxWnpC7+yZAlinhngbBFdp90Le0ntBVKcyMphWxJv9x\ntvSkXYp2IgxcA3GEgTv04hBJOy7WlU+lSBirlT5VAwBiTuWLidEsNZNtZJYk\nx/GbmORNdJB6ie9hWuyRmj9xk5udZkumaair5OlvZdNrVTeEYD2ddRDT7Yxj\nDh6pQ9Xch89MHvQI43NBIxUZsspSDqH6UNkQ8hRoTNbLzohlvVI5x7xYV6z5\niK7R5vz2B/tHbdOzOYyDQUsFy8lJTlYgJR+tBdbqStMZrScliS1yMPYN+7Jz\nb+e52JmSQ9AFJd9EzCRtUtnDUzuOdRTufoW7KYnOHkMYveQbsln6bE97cw6b\n7RrpuNUDh0uN+uAGmj0/5ytpw0p2XtYAuPli3YSN1EpC779UEqcmbHhQybRv\neFbW\r\n=kMBR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/theme":"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/line-ripple_5.0.0-canary.a1c84d4b5.0_1578420592659_0.8232098917468365","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4ef8af5adf74a149f1269d2f98902151a4111570","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ec9f16578.0.tgz","fileCount":30,"integrity":"sha512-Jn8oKshsGwFaOYqYY5mgD/rksRmhYdFdiFbk5Yzc8ZTlS/9OHkdwJJMO40JKPE/bv55F8wy7rPuufBsxjwtGGA==","signatures":[{"sig":"MEYCIQDVq8lbjEC3YkDVo8FX2DMj1lOP7M+Y84YJ2nh6VvZydQIhAP0e/wdavCKBfpX5WAEsMaRUnruE3LMZDuyTaS4LkWKw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5pCRA9TVsSAnZWagAAHJcP/A5I0vw0//1NF6XjgDqM\ntcQo2Z0j9sKXRSScWYV+/bBxy+n27V5+OjZFO6dUjEUWeDaJrEBpltMsSqAZ\nzsGQ5LoaHun+TWptg7oEM/AbwPB0Y06DvoBtUk8a8vOrvkgSmnMvsHp8Dg4S\nKUFKWUmhCjJ2zJm4qfGIdi4HSqe2rvr48/0whtrm8RSd4T5ok1upYgQcxZtu\nHsnoiztM00nr+p9HLV24m+bTzcrolj6cy8G2NFPVhS+iCx0MD+953I1Wx+xi\nKi7dnXtObndUR3LcVHjTeGdvLQg/KIhhOIuOqUpPD3+uMY22SRz3d+dKVvOn\nbMGXW0etNQC6munAfc5lfrqpFpzcGUaFra1yrizG96yat7ElGswYW8VyGJN9\nuihZzrGyGlM5ans+1GBVmVfW1NEb321oiD9CMbjgzM+sUBGqa7e+NPY0EEJX\n+hs5tOgvpurVQMgnPVRoYOzCCBrXmfuitIY2a1GDRE992G6SL3BZWzZ5GoVK\nqlqMsD/nEFYWxGgQuiqsz90u+40QR/tkiW0efZ51Hu5WBN0KFWa+Ehh6h0u1\nqSQ/mn1TLLkf6Eq6Nq9eAOExOp3tZL6XW1VjkmQvF3zncfhrARQ19HBA+bsK\ndgbTuROD9rZVgD/JeaVZs6m3WytxT6TYYmKotWQdI+T6Iqi5WAEW+9b4h5IL\niXqF\r\n=sauy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ec9f16578.0","@material/theme":"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/line-ripple_5.0.0-canary.ec9f16578.0_1578425961380_0.8315939183034333","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"84a2023dd948105e0f65c07b27dfeb386ec0cc52","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b602226ce.0.tgz","fileCount":30,"integrity":"sha512-+ZbLanjgSGVt2VOv4SK/rkxiv1ebfUTk76IG8dXllgyMUkps3ILDyfPM9Mz2tiNATCaNirVAGDqxSKS8rlUocw==","signatures":[{"sig":"MEUCIEWZ1818gTTeIH/ewexLYeIBuQbSJIDmR1ySnlYBcEP3AiEA2PDOSL9AXxWMlYUIvYCy/TKr5YxNmNJdS7maO29ME/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObICRA9TVsSAnZWagAASlUP/199x6Ajwj8HKORZS7/y\nonVa0YwCHhyh+ca/qLtO5bjjQ2F7BSqILuLThcTJkCbU7Xk2ZOCsqgLIZwI7\nrRKN92TUxmfOtZhHbYx9fXEZTUNPKaJwLvYMxVL1sWphZF9tr6rSAD9sH4bh\nEsEJXLfPPkk9RWCpLHK1h7NsiTbftwAYoXsb9ps9VQM8Uw6YN9vJjzthpfxZ\nFzgDOpWxrrQvSyzfVcwNZIo7gyiJ0B7U2vPLxXAnbiDsHZwWCYTlEd6/UEnE\n4uMQtdHlAtk/QwndzZZ0vWbXrDHQm5du/v2hcrYTPQx46HNyGREb4yfzZdjQ\nxLpVx7EE8t+ym04tB9GF21cYOMRdW7MZGkMwTxQFocus9Aa2qLBJvxPvOAJx\nzzB2HrH9IH9DvwAnja6QysF9E6KUtDBZXnq7gDjFGXY+4u7dZYKlIYFJ2z6T\nzjoDgBIyrkYhqlfVNYg3vqYFviToSKkwOY0UO6kIs5AGu6NBG3Cd7BIBAgsz\neAfctv8w//rcF2kq3+z4Lt1aNtgvj4kQsPFmmGJihJYwdoADQ16VxVRWyzM2\nUkuqXaKp3negajMzqmU/Yuecjx9W8y8klvdwfHkiYkEJpB3zXsqLJfHRj+yg\n1t/Y6qY5Bqs31nF7OoXrl7jAG7GNQl6v7OCW42nBlJBsvRPv0g9q6AlgNEWZ\neRRu\r\n=wfFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b602226ce.0","@material/theme":"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/line-ripple_5.0.0-canary.b602226ce.0_1578428104541_0.7253734393814222","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"317dc8391b335d542296acaffe25f815f7a4757b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":30,"integrity":"sha512-t6svl1sA18UtOuhkMuhQgy2/rlZmz/6PF0DlyRsOUGr8aDltju34LQG6+7eraNvlSrDZrEI7qu6EAx4Zj1SvTw==","signatures":[{"sig":"MEUCICrwkofcq52FpmDIn4KI3WRp0W60qGd2cseHwdjQnAHvAiEA/8LJCTXMN4IW0OECe1WJNeHMa8WgIuqED6KyJwp7cAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdcCRA9TVsSAnZWagAAwFsP/3yP7Mzu8CT9vus8kMT9\nrSEfWkK8r+m74ugOFMW1PNtqHXToxxfsbxIe4zkyX025rtAVbL3jgnmJ2M6/\nAManSC7tQZtcjc0NPyzAzdsMquLHl5dbJMubevGuB1YvVm4mPJmqY/OKTXz0\nQ0IxJ68PFHnrxpUGzrqIHUa3587pzTnUlvlsL0rWvzAa5zDfei9zoRUYZFo9\nS2XEtPK6AhDaejtWcV+XZkNjEsf/nSD8ryKz9HIBs7JGT4l35bkgX254EEAl\n1WRCd2+ujE1ee8nOd/bKn9kSQ/sBdNnxAyjx02opgxHcuxN+mDZ3dGUkESah\nsRtQEG67o0xgjkKPBOHz7kiPTFc0CbirlSHdAJZRaWHbCHzNIdk5mUKh8p1r\n6qsU/Hx6Ftg3EAnTdKgJGkxocN/WK2ati9B/arI6NREenh2rcPCVi0hDJTZm\n+nDXoFpC/3uexX9Gzau/l+qXfhtirAmoUj9vLqZ7hBKtDLFZPGN61OigSDoJ\nsCdCDv/y7Q3DXtBxouH8JQZIQvwoqvBgxs/HUlnOqibkVIXfPoFjGwDi48Y9\nTfEG2+lLc6IfWbqxEHwg6csGCuMTdEf5X3laoVMUX0kvgDB6R5+t/AueZcZp\nbDdEU3mxLFqhFef+IrjN9/2G4oSRlJrdRaTJswYHVYmiV4+4VdNoY67yqlKY\nU0sF\r\n=P2cn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/theme":"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/line-ripple_5.0.0-canary.b2d2dc08c.0_1578432348262_0.5984510560351952","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/line-ripple","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9f33438f04f9fb496993cf3b113249a961e17fcb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.61f2d7580.0.tgz","fileCount":30,"integrity":"sha512-DNqoMY6AJvSLRRIdAvieUtK2VmGl1lYF9Fc34p2Muc4mH3QddnTH21JyEZmYQiQt+5jru2klcpyeN8SLh2qDbw==","signatures":[{"sig":"MEUCIQDyMTrYT/ybrJ4MDTXStlbrSesHbuvyQeBtUysAwL25IwIgBiKOONEjCvVbwQFk1AyTaggUPoScmZ4JAS6bKoDqobc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqTCRA9TVsSAnZWagAA0ioP/0BkQ3bbVrYRUj0Jt+72\nxiXXVBpvkzsyZx08Ju69dzYpACrffa4Wt1QEhmVIv27BFUy9mwjryP0B1wqA\nHKzv28m9zFILzEb+pLRQIEA3NoqdbO80uwuuLVmYaiMF9wDMT1SivpKO1zJC\n115PsXT11W7KttxR/WLnQ6Zrf08zyW+6INQzWwI6LGTRAlrlvsFihOZul01k\ngWQXTTsgBB0zI2EeVhrwRAERQu1IfSbTqX1l+Q5pPiVosRy8Wui84fbW8d9A\nigbC3FEftpjk7yACdQYnd/yJMB+udpFcEF33WFslLKJsfGz4ss+YMeCrLhH6\nB0N5y9RaUbLU1c1j38bj1f6qTtN0sm4URlFKnJGqcwjDS4VqHMN2iR3xCYno\nqTt+Q6Gr16aZaWaG8/tL9UUuGTJUJzL3r+zoso5wYAHSAyE6XXXvrD7NzoFn\nkAaPiGS3bEIyrHKkmH4CXkAyn7Ex5bAUDzmPAMojKipgzyE/EzOJa2Z8O/XP\nktXHBiKW2s3rClsIdgP7ARZLS29DMDESiGmiO6QSaWrKX4xpZ3BfvmrQp22L\nYSB+bNaePAVAsqW9y+ccnp15+nB7PbHzwoG25GoozBsbZgjtkVYCi3xdwjXj\n/ASCUeWMrnUcFB3SXjSvAzS6UPbJGFtPLX4iWQJwTpJ51gnTju0SVL7GRO6T\nxQls\r\n=cr3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.61f2d7580.0","@material/theme":"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/line-ripple_5.0.0-canary.61f2d7580.0_1578433171132_0.6402415060881983","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7d8963dbece9d1596e521e838b7182cd876bccda","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d1be53a2e.0.tgz","fileCount":30,"integrity":"sha512-wJjRSWiwoSQ8okNW3dDdYJsSwmcjPirBTsgW423PldbP1PsPkNtDYCoeLpPZYV9kEtbVFUcPEZE4Yco13+4aRQ==","signatures":[{"sig":"MEUCIQDGYcbPNSzsftjLAZWgOXJ3uHLGBwxpa0PO6wKAmavwYgIgTW/NV17TPe2Y5KbjgeXoc05lohFl+SeGnCYu25nMEj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNcCRA9TVsSAnZWagAAp4UQAJIrZXRvkN2NVmxxoXd7\nygYUTwQZ6ZCuic8LC1tfm9NY9vJRUcIsZAYe1El2yfBR6trmJLU6q5lnccsb\nNNvrwcSIRyJnE2uyh7i4jwLPvRL7l4lSi8Rymdie82lfk0s3ggRl/CKuDHRl\n4wcT4/X3kYo0aXBBZH1/egIOMF/SU8IoDlht7kLvRxCdp2722NsA6H9/cKVu\nEFFzfy+lDPAmcSe1pzsojEVIxR186SXdNxHcPvcXtWiEFxkUR5ZnCg8arjKH\nRQy9ZyRZ7cO1EXRr4M6na7BCIEJQUD1/ztplVo7hv5fnVW+zayXXWxv2Chtb\nqFu7MwQ+lVxg2VnOS8YyYv9xvoEIiinjo9owYO4ZY95fZCStoYjzaQhcnNLn\ne9/GTmi805yu0pkpjtqrbgNA6tkXmLleU28hfSe+vC9JonCfTbG8zqlY8o+H\ncmfksJeegCx1Fc37m5HxBdU7FrDTGpkF/vovsXvwQW1dI/cZif6PnF3p4Hey\nLNaQLOeLwPtoOVv67CahRNLjGlYuVqFVioQdoEw8EpJfDTTBCjvQv0fneEjx\nckJwAZej/fVSuMD/4Q7LAE4U2yqE5n/t+NANAkxh+WFv+r5edKsr22EeNkj9\n0F99k9wHfXDY/s1CE/+uvPz4hW+yJUfLB8YyPHoeHtDLyxXRv2Z3eRcbNGmT\nqy3U\r\n=yNXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d1be53a2e.0","@material/theme":"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/line-ripple_5.0.0-canary.d1be53a2e.0_1578435419609_0.5912957504156857","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/line-ripple","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"319c43f6576e2a1ac3cd722ee8d8bf169ff7c963","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.9b0d06e32.0.tgz","fileCount":30,"integrity":"sha512-jhtdrOG7jUNTF45bSg7PAqpNNbjDPXRuJ/s9Sf2Q0hhRTZa8wmz4Yl413Vtpq/NfhLxiseVXzBDg5rDOb/6EcQ==","signatures":[{"sig":"MEUCIQC49tY/6qx7e4acvcA6D4Bkh+opOvXVceZrYewDMMaFEgIgbSMvKPLhV2efUD2SfALsjC9eAgAjx7ziL9dU+gwnxag=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPcCRA9TVsSAnZWagAACy0QAKR3aFY136LWlkdMZ9j5\nXbhoaAxSJ5uEuKgNf+MVV5rPmXurRZeLhyaKsM3u3AlEQ6069YTvj2UdGL1r\nWMtNv6O2GpSw8xDkjHn+Urmn7L9L0JEwLVCOTxO8QckzQOTcrdGW8jrFKAeM\nzKgTbGEXOcR/7CYBg3QFHEiILTeX+HYebOhk8i/EqRgSaXAStSkjYUX+19La\n9NdvVNMXN6hnbxQXj7VTOeAoUF2kfPct551r5hDpaw0uRRerfC6sIqbl8Bpb\nSKm0e09UdH85bGT740gpEgH/KNbvA2FTn1Z/NH2e+PHnp4XiwTt3d2Q+Q1S5\nvTXFx1l+q0CZBbgej6gRaUlpSF9vo/H2ltP1IdiLiEyoMVPW5hwIvi+lHv8l\nGROrB9vRWdtsVwmWqCchismjgNAKn+0WIkxVdvOpojnJLjsTgLjDFhZMAc7B\ndGEsA9pZHx4dHe8+fVcxVhHYtJLEEwD6piOmg1Tbv0e8At41Z4wSOQDINJk4\nOkavhvG7nLMwnjZON1qUpXQ04SinleiUxvjlMsb0I3qjvKAVHYv+lEqah7Cn\nvbcoqAzAL8Z5tBJ9yNcq4Yj1z68k/AA/TLhQ4xLSN6E7FER6EQgEYlM9JDkD\nTCgd6N2tKOmqhbafK8xITh8KW5wWnOKLNbDY4R10uh2+AF30wakf4GQeXbm1\ne+Br\r\n=3ve4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9b0d06e32.0","@material/theme":"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/line-ripple_5.0.0-canary.9b0d06e32.0_1578435548196_0.3099888701390019","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/line-ripple","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"31700f2cc46ec73286af505539e4e1e9819e253b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.730c807a0.0.tgz","fileCount":30,"integrity":"sha512-MeBQmo1YkPB7sH/TBFoua71ZcYezi1Wwq7ZCkSxlyx581pHaZOBnTvEICJi4nJPIf3B1Kw9D6kdjfISQ79BRAA==","signatures":[{"sig":"MEYCIQCDB15hG/LLOeQAsFBcgkQybH7OnKSN8/WNqinDzQHtyAIhAPfhqIB6vpqjvb0qMHWmzcmF8HGef810whXawQ07GEpa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQ9CRA9TVsSAnZWagAASpMP/iaxSO068b/TP0HkdWOM\nzGluuPOmZ9EOLsQJRHpaH/YkoM3m+M4CSvRFkCZk1kyz9eL+dx31vqinYdOI\nvNZ8YZpIPuBuX6OduQBQG7FzVBn3k4M/nUtkHgN7/SeuvSgcEz+mzsQqgpax\nYiSJ+9HYRD8JoTfOQ4KUx2ZiHkWK3B7o9JTEWKqtwTHDjrqXT23MsmrgNWiz\nrTrRKGTRj93LFHLLfjPi5jisP0ISbCict/Yyzql7bu11NpAIOpnoMZs1JJCy\nVjyJ8Q9SH/dpdP9k19b7jyBTFeEjYLIk83Jl/LdHl+DU33Wjy0GxiFFg3h9v\neeA40o8XxijYpxGye/mIuvApEovMXsuFMH2W7E/y6An5rxqag1ZWWt/5HvAU\nhcSxUwKwHvXqjoeoNfj0ZaJ1ozNvruHNIo8uSaTb6UA+J+fQnGrJAqqICqMf\n/BHIDCR1CdZK56kiv9ClfdohAVeCeSVRSIVzFS0bj+4QtzoqhpJFkNBvQhKh\nnkYjR50SmR2DBD+X0jdjYtzLcRz4LESqx2Xk0cFXmaJFsd+jL98scnHvilLh\nY/kgb75sPwamm7CyFJbDyOz6Zo+ovWCnQ0zsvu+X2oi/Nc/6rzxOdAOzh6pj\n3gdpm1nNYB6WsnQVFfo9PqIIXO7XPtlsHJ+HBFnSrnRclNDoEIdORB3+bc5V\nm+B+\r\n=tWzx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.730c807a0.0","@material/theme":"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/line-ripple_5.0.0-canary.730c807a0.0_1578435644730_0.39641909985627866","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/line-ripple","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6057202f876495458b8d06569db4b85abee883a2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.2213152cd.0.tgz","fileCount":30,"integrity":"sha512-s5slu0J1NPPFxVULrjLxEyyaC26NKOtc/5QXMWT7aT+0wuuOrSJneUUHM0DyLh6QE5aMuNfY1QgWylctvG4sCw==","signatures":[{"sig":"MEUCIQC7bHmuTChtRykdBADcysWHN7Swx53cokeumji+4D2sDgIgJgqKUYjtEMUTZS8Dvwww8iVppUZGI4huq2MUwofly9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg+6CRA9TVsSAnZWagAAVmUQAJ2Bgq151+Chuo5E1rsA\nmGUESbbTyvziyd8ll8cP38LPfTtjSE1RSOZrHnnvt9adZSNeoSadRM5lquz+\nXV99Y0T3172hPk20VyoTNNN78flLwt5Gskij4scFVL8dxEXq5pnEg4+k5aIM\nv3biJrTed5ZHP4LfUbZd1FCn+vAtX4QbGW7nRvSN76OxiO0l+JM+Op9v6J0t\ntcBLWM5JHoWzxol61v44OqaaRpAsn/JIV28IRIAO2fkciHlA/nZtM8nRxed1\nIINTJIcHdkVBPUELGt596qOthW+w0exiDSulG8pkLEbA0yYQUvHlvJ+FzwCr\nKDB51jw7FuLtoLLzenU2ThCxbYZbuNP1R1k51XCcMiue0ZahQzrvq3hJDEXh\nNqEsF2iaOIjsK1Vdzc9CJ3X8uqBM75C68pv1Ke7iWjC+mBazYUeYpaCpWo6E\nEdS/KqIKU/OJqMC8jZqYRUaCwwkkbTpK9NQmngcOycc8spqI07v269AjAaV+\nCOIV4Om95hDh6c2GCe8DBEbgalE/o9IgDaJbjeuCgX3I5sciEUqH0MoFdUAR\npocEuTnVxc43s2c1mCDu4o0Kky2Pz4laA6RSKpOsIpXdIxquK/mHU67Ss/ub\nABKCOVZlch5sXHgsVMpiFy6GnOwCMhVjxkIi0v1ms5hYAhLZo2nGnRf1ROgW\nt8Yr\r\n=Shmc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2213152cd.0","@material/theme":"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/line-ripple_5.0.0-canary.2213152cd.0_1578504121989_0.57728407859891","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6029d06e2201af43a3f31d2f88b795fa599daeb4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5750f7169.0.tgz","fileCount":30,"integrity":"sha512-4iHMaQ1DkwUFAdb7usNQTCE/0PZl106W55Rcg/RbReNm2/7+LYAJAbwyF/Id6RoVfCqO3uFFUkd9OPvQYZHIbA==","signatures":[{"sig":"MEQCIFXYETPNgfhTgQj0ohNAK7hI2atP/kYzK+7AMOE0ClbUAiB6iaizucrg35qqPJer6Du0shBvKBuiMTpaH5ubqJI5/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhfZCRA9TVsSAnZWagAAecoP/1eJZtUhrpQK4sl08X3U\n2g+j/lp30K2uB5DiyxK83m5KcaAluqGCTDAKHMgwoJ/t5bRWojLqdqVUMYG0\noCkNSxA9JNdqu4hfkKkYN2zMcKRYIacL/Qnm4n1D4w7vOZui+P25jUCyxpS+\niF4o8QEa0CqDPjAEeUYWYOJrPpU5dOjzVdWHvsj8mQFzb0SCm/goPobAmsd3\nUHHdJ4jQBDY7UN5qAPtBKVTGBmnBXxdsPBkq5O5H1wmBsHeANNHw+6S0aPR8\nVX1Sh2uZqUC6WlEsp4EaosRkjHla3vHAvZiqYgaddSfS3p2Mp8XUOjgPXme6\ngvhljVw+rBITnC5qeEt3ctvmCmREs7ozN511UUcdB5TBkIWCQbP7BngeF6vG\nfBZ76rhKreia+7tnCyxUnK7GNuZb2ymV1FLhT93PswHLZe0JoKpNtW4yo1cU\nqks54+n+d+IwaFXbftr7r0k79a2f1CwjGmhzAJoE42145vYBBQ7eFqcPIAiM\nJz9KJbo71dzOVuWFBBmjTjZZru78FibLeLF4Qsk68gLJvH8yfnV2e4cBdxe9\nwv12rRuvN0rbz5jSF7xJt2liRG4JA/ZKsR/sdQPqdPaG9aUn356uytxAzOxP\n41InUlSodO07r8Uo/sAJOQ4qB01W2RWNIZMQKEdEEqcrecyKDdZp/szDbQ1G\n+HdS\r\n=gSD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5750f7169.0","@material/theme":"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/line-ripple_5.0.0-canary.5750f7169.0_1578506201217_0.9178509855213237","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0db1316aea9fd6f1f57c265443550437251d38cf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f7abc7a43.0.tgz","fileCount":30,"integrity":"sha512-V7qIKMUU1eF81nroamcgvUxKtsNQtT2Yf3KFVxtckb6+1t76cc7qgJIwIVzpDQ/o7wBld2RBRL0OWtH0AgHtxw==","signatures":[{"sig":"MEQCIHGmLTdukGeYbhZcUGAVc5UVzAhxPcvuZ6fZmN4eAqlyAiBAEJqGAytgv62QcJ/BIF4rjS0hfFAhlXhwCMGjIFyAuQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8VCRA9TVsSAnZWagAAJnMQAIme4YMsa+QuijAPvwOY\nyH0D9tjOfVNyrqywusepx8lzBFNyjSwT1sMzxQqsWNMZuJ5OHgnJ35YsI3js\nejltqKy9yEpggnymAj+Io2uZN04Y6Yn27rUkpU89I3msLdl2rPlRxZdzedYC\nf0ND20RH6Uolq1QVdB8GK9MZ5q6h7kbWfEKEu8otkuCj/Xwm+YkIWLElbWIf\niwK/mUEyAKfnBbINGZYw6/7KzpOEZteB2lnyD3Ws+MpzUlrIehgegA/LRW53\nAs9gg2p/h+5Y6wKWBV0uUPWsToPKnuzJjUwo9Pr7A6BwUARBKYTNLQ2jlToi\n1o69Klj44SPkiwesPF9Ah3qFlS4zzQ9ppcK88H9wvLjdBYTRZ6MCtlDPhOcB\nTT9YpiJgaEI/OuI5/BJ7fuGTWFf/C6l02EVXoc1OsjtM8wGFNqPH7MhXHfA2\n6rI+DLYFiBK9jFJYTmANfVDVDlh0TrSVAz+f9obdBTTkQhD8Qq1NO1MlzhhQ\nlU5yXIn+VKgIy/W2JKMpwpwfu4jAeS7HTHtKtRMIV2axSQ85M09HkTheWLiu\n5vY2+3DpEZeHJhyFAgEcqKkZ/vY95b2cuKPOXj8jgdA7UTioEBQWfluQrzMl\nd4WuVE3dsFhvxQnqUZ6ju2pGXAchlFwoGzYqzFHwUlGyd9sgFpVk6mRM+rm8\nTdEi\r\n=qstF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f7abc7a43.0","@material/theme":"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/line-ripple_5.0.0-canary.f7abc7a43.0_1578508052613_0.9900200977018994","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/line-ripple","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"65793da94271b7eba47b5a3d5e7b5286982cc874","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.bf7b4a061.0.tgz","fileCount":30,"integrity":"sha512-ZBV0eqwAvm3U4SCElrpQq/JTwyngHubNYjBwiDRAQSDRE5R/OpXNlGmApLxg9SmGvmBuEXLeKd7F5c5Suzb25g==","signatures":[{"sig":"MEUCIFACjb65xdQNeLZyXPpuPxpfkpa2V8s+AJuIjRwGVhaVAiEAhRJpp+gEgN5CSdNaNWbXPgLKgQH0n/eW0I9IOBKTusk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJSCRA9TVsSAnZWagAAKdsP/0p2tw1kSPw6VmxXUWhM\nVIGxmFIsP8Sb6V10FfB4QquJHaJT4QHopvRjq9wQ4+DCu7BvJskOTMzoY8dx\nNozZ74nYb4ZYfadvsK/rRes1uNUi/guxrW+hKADrB1N49lQWf3Il82S1CZcD\nJBX5p8HfYtEpD9QQWhlG5ix5uCCBEPClYjWwEo1Nd0BYMw55BitimyjpX4WO\n6r0fXycp1Iuo2fsKWmF8ane4FkkcOwl/OOcYXOVUnh9clJnG2BIfDXXq+ep8\n5ihvO977/sgrgKKlFHjnl5OJsYWfFLLLnozv55s14125uMrRFwJtEe7DCBsM\n6lKe4wj1UdJfNrLF904Yn7D9v+3aWP/oJJNmlMgOtTVud7nzUcLgiluaQ0FI\ndIN2Jy8BtcK0XJapwW+Kc3AlfUqaqM2I24cC+TzwbCiQGg6ROnai0xtzf7Cu\nOXouxP3D1BNxL9ssYdstkowd04xTMMibjF/rIF+q4KRoKpFzPaPNlxyF5hZk\nEMEHMHyRp1ZWs7gfCcvTBbG6BR9lp5zQNs5+78I1FPZr64Jww0gYzL7k7wb9\nNlgvIcLp8qFB1hKrwOZhhBgeU4t80HCwiZSTN9gqRAZotHdffSHOyK+WCbIh\n2+9mYGOQUuT9zrAcRdidd2Ew3dA7AZljCc0UKPABV2d+METdyqJNY4bewE8o\nKXiC\r\n=Gxcn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.bf7b4a061.0","@material/theme":"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/line-ripple_5.0.0-canary.bf7b4a061.0_1578508882047_0.6692204464390537","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/line-ripple","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8aaad931f4d1d4c550e90195e9b85215625154bf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.784fa7903.0.tgz","fileCount":30,"integrity":"sha512-sFuCrNNths84ZUB+TiBmtGIFUCynV73Vh71ND23UUzIn1HNYn1DrVt8azg1hRlIX8dkS3ztvpMDXyN8z2LgABg==","signatures":[{"sig":"MEYCIQDFqCALgYMF6n6fdl3VA8XabLYudkApzEfbjknqVpZwHQIhALrn4eFm9ePaiPeSieqjfgJgNxmzwMqKQexr/t6d1r7p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikQCRA9TVsSAnZWagAA9xEP/0Qi2d9kE9GOKOAj4yed\nX71gDwgwtHFQjy5vALYAnjwYSqhUCkz+C/GIPrhjQIlQsNpZpme+ByKSYP6V\naK52lBY+Nmp2iiOxLDYOWvsRTQjfSkTVev5VZkoU5mSP80vRkQN6hKm7KWln\nrBWjdpC7LkDweYptJTGdQpU3fQSz4HOKZOAQRuiZaXQNV1zg40i23jF61igN\nY8OEDT805mFHjCzMW4XR1gdn0/+pmatIUzVg/BsvJKybjjJkiARtXnZ33UbK\nnyLGsk1gQmrJgQb32RJwfHI45K53TI3ExqAR9wQZBsJ459zMl5NrsGBD5obd\nbypH0tjHrHYqOSxJT3Y8KMvrf5PSUpx7XbVUvRxOVl0OHSb7J4Pre/wyml/7\nhdRebGSvsU6EVd3QiPcwKg/rB8qnTu0xC5HxKuMQ1cT+ZUDV5/TBrC+3x7yO\nkqcmNcbrw6RhxMWds9t4RXYhUTX1N2fjkfL4ITOrBqLARVqQJiowby4DfZIu\n5SQeUy2HWF65k3nMTvnzNIuwmQDGJVWJfDQO5jfcY1Q/+tLey0Vu+yAwqt3S\nf/kJfFUmQWAbGy2S9WQGPcM438qk44DJ53XuR6HXL82XbTe5qkZhwUlyDfP5\nzRD83seijZMSYR7JIEY4T1vElAqjQV1kJvk+AR6LJUFSwmmcYbn6Y+qDw8EX\nGLD4\r\n=Drzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.784fa7903.0","@material/theme":"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/line-ripple_5.0.0-canary.784fa7903.0_1578510607613_0.16023408969094888","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/line-ripple","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"99f01695ac980bca023c351acf0db85594208dbc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.823c050ba.0.tgz","fileCount":30,"integrity":"sha512-DblwoT/oDXZikesrwr6PdwukzmYYeGvhDXgbPX3J6GJJKIaklMeUD7je/JxVt2TwOpCNhoAMt9IIwGQq2b0Wmw==","signatures":[{"sig":"MEUCIFqxO8W1KDgEmrtujhGSdpRJ7HSYJzGcTo5G/UJNDlQVAiEA9EVDh1YUQVbb8Q8x7AWkKgtxDxA4J/dZ/c3CiBdnWbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjc4CRA9TVsSAnZWagAAml8P/0shNFFPVRKdZGHqRfCg\nTBTTzRKRlOMnxUNcIEh9wGQRVOrYOzYxXtXbdEXJMDIgHYmMePsx56R/v19k\nFSuD82FabI5Lxo4Rn1+bw2zZSwjkjBv+AUakSaBauEYFTi/MYam/0bV4U0ob\n6XIqX/V1fhKJrlK49JPDNN/7iSInkwt0UNOrR+Qh6ZpUJ/GLWbEW6uYJuaDF\nZPO6T5dgAHHE8WEcbuOu2wmYPncPqKoHv1BGubWTCiBzoLLa5E9n2RelRN3A\nWj9rM+DxuefYUi83pnpVz8sgEOoe944LwLoTNRysNCFIJxqKhxaQQdLr9lZZ\ndBqrY15Ply3cQPgS3d56XVgrFgdMC+LdzEbo2PAqkpm/TQihvTk1QD54g1Yd\nmeyKnLRSYs96pvIGg28p9IHki+MuKUicXuThqh8TQmEm48fChxmNW+/ipcHT\n+kejT0AqP+8Sg47RFsXpNSJj+B+VDoSERZeyy+HiMVzRUy/YJjhSFptlOHUJ\nZYH4OkLIy59LND0QTxk4ntRCDQ5+FwybXfH5EbiJUSazpHEW/ThE7mq6CUZ0\nhgbnFZAJlP0O2UKELaIZZCj5h5g+grz/ZiBjGfRprBNZmrE1VNkrmQSr/T8U\nAIi3Kzh2laSMyV68C9zH1hmC67XEglF2vaaV6uLGf53LjLAoB7xBvieE7j60\n2uiQ\r\n=/i8H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.823c050ba.0","@material/theme":"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/line-ripple_5.0.0-canary.823c050ba.0_1578514232272_0.8218832738378887","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/line-ripple","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"157b28a4a07d07d0a663e3cd8eda9fe00a986e2a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.70c708dee.0.tgz","fileCount":30,"integrity":"sha512-bbKraY44/iEOAhTn/elXk39GBuXyLui4sbDBVlqbCnhGujDopcd9CHMlarA8z2zDxtuUhKfx3aMgU2Hur08tCg==","signatures":[{"sig":"MEQCID4o8fBPtp83emvuQE4I0U51T8FlLQIjpinDk080IRvaAiAXBDSRq4jOSGKGxIlIG96Q6z4noxlH3nBTMv8ZepnQ7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjncCRA9TVsSAnZWagAAL7cP+gK4Mu01sJ4VD7Pij8Du\n0jdVjYDSBd2b6P/854NHS/ZEsT/vI5LLQzM5Ypls7hn0ASdMEKKR1QWFTd8B\ntCzAbd6nE6HqZbGpr+0zPIA2PAQmsoyuv+CZdfcxaXkiZ0DGIyHjq68MnUuK\nMutIG2zZyO84WYeVm2A953X6dEbp6IaqOCQjSUjM6FjW1+7/66TOgv3MiMPR\nEBsMAvO4ktvQNKkA9kYmM6JEXF/i1LTH9S9cDQa+JAQqHiWKJU5qvtepcbsV\nSQmNiXfDAu13m73tJJ0qQz941Drc6khvB7SnekIIbm0movYf8TVWJHLsJCQN\nCvlBD2Fhd/PLcaBhEd8bseKXhf3qYLprEDXC283Yrq0kjeHj5ws0E6REUcx8\nX7Rw1UXHlOqDVQyJ+RhKvMPjVLvSULu2ST6nIpFZzYASvBeU7viZDd6Ab9Ze\nNMaWGK4/U9nJi2G9HQ1Bhz8W62sWqE7ZwQ9gLA4q9zoYEjPMqtvzw7ehH3Gf\ngYJHwDt4tCzTi5ebnoEPHWvgLh+dPlG4/01sw+5f44I+PELBHbPocKZo6nu6\n2YeMww8WYhtbI+97rLBWLv3DRFZuaVYSsal4fMd/5agEGWIP8PXi6pvvBcBT\nFsP0B0MzcZtadCpz3ToKN+LSIjARhzTqUtWVo1TTjK0m3TNn8uRr36T5fCvL\nN3MW\r\n=23Ax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.70c708dee.0","@material/theme":"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/line-ripple_5.0.0-canary.70c708dee.0_1578514907832_0.6542588655463082","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"392fcabfa08bbd592c5f1860ad6bc1fcc5d9a313","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":30,"integrity":"sha512-T0J0uoljhiXYvqgACZiY5Q+aSl+aDvUyh+cYb/pRdnQT8Wsq4vWG8shdr2OSTv2x8q96JWgtPDFYflGYMUsBYw==","signatures":[{"sig":"MEQCIE+pOFPN+2Bv+m2S/vPVucY9JlX938t+Dz5UT84ctj8TAiB7uQArrZ7Pzoc4dFWfG40pl2r97FPQT0QU+wMrL4smxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzECRA9TVsSAnZWagAAp6QP+wQQU+RXx2yCZHXmYzrj\nknS7+7EEDa1IIkBtkSc8AX8PLwEaC6/dIYrw+B7k0Gw6QCW7w7MEohvBywFS\nZeys1UiLKfaYdD302PMuQbBa1/KjeBqxjQAak5YHjJUtra4USRyU+simsLxs\n9IaFW+KrxsYD+655nJhlyk/fsZHX5ABWuGyswC13Q4o97sa4DNjUuBXAI3UR\n6nagjjPvXc1uyZUADD4HzRIkc2RicbhAsJlRfv5neuiPNlpJGAhrBrx4S2HF\n7kn2V8UbXfoIsmhIL2dyQIcJi8Nt++E3JD+lpUVSdJcV4hAu1A5rsohIs/4b\ngv2otN0rGwWCMACmgIvxz3bQpW87koCZSQA4Orb24H+P+u92q+SkiwvOkqvK\nlCf2y/5FiuWhAsoalGxc+WgAYztFJBSPrxBetyqqPgV6xi4FnOWhIbnLLwHi\nGAZ8uXtqLPVp+uXAulcq2qDK71tpeUtViZAjvwtROt+AhLeNd01ebP7NBOMh\nSpDhwdI8Ji7yQiC1NDiMrwT3ToJ1MX+vVzS5Q0lfLTrtuY0U2Zv/zm56YcvV\nYb/xZvPXELKrggLRWq1vK8D6lTbk6IvtJCR16C3D/OOpe4zDz90OlC7UmW4f\n267Z+8n+0GYBmrIStaS+ecaTThl8ii5vf22mCT4kApjfO1rq7SdWFvUAwe61\nQTYh\r\n=knTO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/theme":"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/line-ripple_5.0.0-canary.5ed9d13d0.0_1578519748273_0.14056355629585982","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/line-ripple","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c3ec0ddd4edc5b8776ad419397ee183623c1944","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.4819cc7e5.0.tgz","fileCount":30,"integrity":"sha512-tw4CgzlLJqz4FDv9iZQnE6TaPViQg5Ezdz5OdImO90OihGOD0e1ZnPgt+HFOJg4QFSjATtgyuLcFGM0CMw2GUw==","signatures":[{"sig":"MEUCIQDC067ENTMXQSOJyHebuFnC5x8eF15418cHbdLLds4kiwIgPcZWiH0mHrmNK7h1/cWgR+tsuy+OO6tbXWtnGx0XG3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBiCRA9TVsSAnZWagAAnN0P/igHh0F1FAgU2Hhnn8WH\ngzOR4kl7aDmiWyhNOcrMF+S99LoYTA4shvftabnsz+hcMpR7mrAeMDaR9XGQ\nRWHLPr4xtlsWmpyrApWpd0o4jyJXk5SZMkKcnJjAhs6Y2K4AEdA0FeEl0DON\nG35o0fho8n4SP3VERwaBHgAKC9/olOa4s/AZSZ7v3CAjJkpt+8HS45fRmWVa\nK+fTh7DXy61ObOK2IgrFKiDPPpeKyY1HNJp7ouWGJyVLKhfMpabVhamI1Dt/\nfpjdKQ5mkq942/iqvS08CrS9Jt448XNyTnLUzVKMJxzA+dTWt2z9DZOP//h+\n3YG9yeXTb+PijmLi5TWOoyk12qFT2DZPwSe6bBfYv0Rm4DWf77FAggpwcFSw\nCSBNY4EpIxUpe5821xGaVlUGEgumakLYuDV3UtopCmilbqgp+4PAdpeTa4Xt\nOVdXGlH7QF4RHoHkA0WGqq1dlPOXOPPtYU7wSrjAxVpo6b5PY+F6BUrbQFsm\nieCfcXkIPVGFj3AqvN4c5BrnZBzTftOzOtQxJWH0tBpDHtmv620f8YT9m1X0\ndwqvbBLaLgyDKMoD5xRwp1017J981MYcJNnPuQGQRH1k/GYbUXlSixqOINoq\nzeDfGHDq0vNU25VyD43+osNj9DZBr3ve57o5h39MJ0WPJGjxa7MuBqtm3FUT\nzn5k\r\n=jEw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4819cc7e5.0","@material/theme":"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/line-ripple_5.0.0-canary.4819cc7e5.0_1578520673619_0.21779285651547897","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e07aa33af54028357e1b9a5bfc04f481b79e1f46","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":30,"integrity":"sha512-djShDXL7md17D2ShEYY0PVGRprVyCeCJRhzDvW47nUpuUdfjSMC+TdcS1F8xyh3+7T/fxPnOH6/z7P9hyD4HfA==","signatures":[{"sig":"MEYCIQDR4KreYhf+zvJgp9/VZeEsqzCsnLl0Qo1amPNBG8edPwIhANcOuKFjGw1ePXaHvRPoftNzZo45n/Okstb5+i/kd2cT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlSiCRA9TVsSAnZWagAA8fIQAIl1atHEAm0iDbyNKt05\nLmcNorNwkbXf5jI2MTzvioWkfKpiMfoQtCKMWrb8GtTEayUV7ojqgEOAaiTZ\n9dg/BW7BckCnxsyPp5wHsDS9uq1z0Qr+jE/OwYeju9Ymo+Mh4eRd8P9M1VKd\nJ7Yv9LbYsPl4QGSd5IJQsdkcRBkB/f1grblcgmhELmpPGOuRBbEfa2cJOPiX\neMNC1M5Rl2sP0HRJgFTTQ7Bh0fkBBbzOcjvZ/gmsbg5CKCRjyl68tyA5sJmo\nt8cwxTb7WhEoEViYfjBVBNaPJCN+J0r9eOUEOckaBBmZAORMBOazLZll4qMi\nqh7/Evza3LSsnKjwn9VB7eZzaLj94hQLcXPm7vupOA2tc1M63+BxTqeUse5x\n/P55X03g5RElS5W4t7GJpX+TsreJQqMyDvwwZSkAAO4BHEagDeUH7+QkBEic\nn40QUNKfYnQpTy25lDDtAYmkchItkwIlKLtM7eqIIuye5jruWKfk1xzd7OVN\nelEya+XTJyTGcQnsGyAZtcTFIWHyawNwdtm0atDjaqpgzDl9rstmORKvDHfk\nsxzNc1A7lcDhSThLsWyAYmaXnm2eoRKoTPLViKzCgtChegaLc6sc9Er2ZP8J\nVofwE60IiyZqBxi1IlazpWiH0EcsTI5XlkcmD4JToegmui87yvuqqbe46Xwh\nR5kt\r\n=9Nnl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"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/line-ripple_5.0.0-canary.fe3ffd2c3.0_1578521761677_0.8482164969389898","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"855ff207f5faeabaefca1ec7c20c1706fcff5921","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c0e850090.0.tgz","fileCount":30,"integrity":"sha512-V7vwspfsm+t25BUkwUSaUMHUMtj3NqcsR+BRftDdtEWfIGHlbniKH3DdHey9e/E8YdF0lSQwBgnddVs1GiSRrg==","signatures":[{"sig":"MEUCID2uZn0p3Y0VsdoIdsfo7Aw6D03rDHdN2Y3oY0sJK5//AiEAzwHc5YcQ6FjyL0wOrz/qvKzojJuoPlDwngA1xk297Eg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZFCRA9TVsSAnZWagAAFDcP/0THjr7DEwq/HwzKcS6i\nzS7FSOdSww4Thy+bNDci2n6747IlNDTJdumSkwdWNyXxSpqcA52j5kJ3yYiq\n47wy5jV7iVfSfFdJoko6CfGE7dnVPL4RZNkwGWwYkeaVodwFz1KjDKbq4zVx\nGlZG2b7ffhkY6ItqfPufXhs5E5B4LQ9PioxHvHLPhqit74WadWA6XGjv/GTg\n59tyTeYGlsenjGwZ5RQO9zyymEg6DAKKhvGhR/NW5Og2Ij6rcrNKG/KGBVeU\nn0uC+X7xLJgcKo6wO1A1BqmF8eDrYFTLO06OPjKjlxsf+2cANDMV37h8koEb\ni1pCnad7F4z8xBjH+x45G4Qm17W0vMiAUZTp47Yllzq5P3EAqReyZweIPO4r\nYjqqcuPQ3ZUi9IQuIAIgf/O0Q3jVeh5qYz9X15AchYCdpnawujnI+4Tn3B7V\nJEQ2d6r/JOVvHd1Bpq3VLhaiEfQ7RLhZ9KgL6p0mWmNiFrJwqpRavHo5cX/a\nPxSaRbn87CXa66Rp4r5JSqD6QMbjoNFgCAShZbJv90VO+MKxqyVxM4/5jRn1\nDFDGhAGqC0UuyTZa8+DIpVkxqdswxH0AnVJgQSTMylJhwAvdUu4k+U4b1zBq\nLPGFDjjsmvOzF0ltmO4H2qzs9iYhQySrkVg66OwlOkxsX3t35dE5oXCnoWor\nx1h+\r\n=TZsb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c0e850090.0","@material/theme":"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/line-ripple_5.0.0-canary.c0e850090.0_1578522181444_0.3692799853037463","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/line-ripple","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c40c12b5285e9ef06ad2a53db69711d2543bc53","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.615f86f38.0.tgz","fileCount":30,"integrity":"sha512-iSkL5QZXYHTdPDuNidf09Nfw6z6KnobPlGw1YZT45WOtSvKqrKilg3YkVkzJETA04Cbm7+Zuhdz/h8ONwnEJKw==","signatures":[{"sig":"MEUCIE9aOhg4YQ/gyw6Nl/xn+XpGBk88Zd5SgBudTHr74VAhAiEAyaATq5JBWFO/DymqAYxKB9aom7pIpfSaxbODy4BpjTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlozCRA9TVsSAnZWagAAgDkP/3/+9K6PRSoQwFC7MiRq\nPo4Kvxv/Bse2B/1gCTLIVvthclIo1z5O3ey8ckmEC57C8psdFXim7/W3Gq22\n6XUZ2sov2hdRXw7wjRqWVzrEBW5sl3t4y5n1HyyNdQ/rM3yCKaok4u1a9pId\nEUxQW6IbSwP9L/HrMPFsDfHa5ER6wTHoQFeNrmEJjRbrMY64pRVsI7zEqMQc\nwIL2FBo7JDi3aQnjWGGesuruZKhQzpSiYWJ/wB7VMNFegPA5+G9QoVooU1sY\nIDQpb1mH/Pey8brD3+qiq6C8k3JJR/wfhvP+edypTHS6sn/nXaE+Z14p8whg\nyMcysh7nRijudrKxC9Z2Bxm21kFqt3qApFFbdjEuDiL/GvjDVGnCGcoliVk2\niONQaWLxBkzDPKB83ACZpixuERqGnVejEMyCDgwC+KQaWPdwCPe0fhw4r6Iv\nS0XSQlGyqxUdYEfNQzNCXe7RIV/eOFTWS8PL7GRnGb8BgnH/KuI0FYPwn69i\nkKH/ATeGWroATMf/QxhFHHKKkIxV7HUqBserKfAiVUo4TI7kRh4ElDoZLdJa\nZQ+Yp6J9Lr1SYe6EtvN3HMMmSGRAXRZoMrr21e8ds6sLtUM0CKoKvXchJJkr\ntIVGK58KmHI0tzXIQ/VRH4u0z7P6ozAdX8dejtgBZTEmeSP8YH4l+ISEhjkP\nLNrg\r\n=LG6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.615f86f38.0","@material/theme":"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/line-ripple_5.0.0-canary.615f86f38.0_1578523186747_0.7653916019330336","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bcdd04bd7f056a85ea69b44f7f9aacff71e017a8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1eb032637.0.tgz","fileCount":30,"integrity":"sha512-BA2n0a/JIWCusMxbx4O1Hbdo6BVkJuWgHxycfijiSrDeAiDpZD7Pza1KQlkMEsXATn1NShJochEvRqX8EMEwVQ==","signatures":[{"sig":"MEUCIQDOugN4DNXbe/cz+xparATXhhr73CViXANeIzrl0hsopAIgAnQPoak27dqaIbXCBncFmqlTNYuqT8rlRyrfTijUZYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7kCRA9TVsSAnZWagAAzG8P/RyTV0U52G0eAkPvT48e\nHvwQH273Jq+GY9AnSAI6imfeFbi2MNjbeWIRilRwkmp84iH+3C1LiWTo9Leg\nrPwiMyQfPGjhMmfxWsmhL8TWewrwVTNa7dSPdcCbVR0Af97yN01rt6cDSpBm\nK3SrBbzbxRSkFpz4UA0JL6A0IPoP30I8AxTYZaLg04E80REbmaa8S8Djogdx\naujWEcY3GXpn54qwL5DTJNBxWS2PAi1ASeajh98IUenCJlBmK9qlG5PIZLaZ\nP89YIkbDnke31U4AAofdfJl+OP+PEeL2SNa2mO2e9+icS58Cc9U49lSvCSvp\nrle12l4LcXkKHGYhUmlVAQTdrn/yhlb0V2LKkfmHHrq0blw8IFgkZfxWVpGc\nnHGASUU32aNEZmCjwf/6tmBebm8RXypN65ZFLONT9ZKSV0icM7XqK2IV1vQb\nGEl0OYzXnX2AApYvRV92k5GkafpHT1RzQd78dF4RYBi6zI18k0PqXt+bJQdI\nBYu9t0ad/x1BfTsiRbKKQQelkn+/bEjSEZ5QH78TguVzYpsCpiK8+IhuGYVF\n3vB+pTzizYP6CFn6cNt/Gq0mDkme68b5lxat5klElRwHLMi0aZ22qm4CM3SS\ni1aYzcgQN4Lbda5RL3XKd1rA4SXF+Wib1f3Ac3psBxQahG4RkKyKCIcOtaLI\nlvr1\r\n=/2b+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb032637.0","@material/theme":"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/line-ripple_5.0.0-canary.1eb032637.0_1578524387890_0.31492067328556894","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"83bb851489505e99beb77d9abd9e288c783fd271","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":30,"integrity":"sha512-AhEKax/zayJx7sdM8+h1lGCive9YKKfEdl6ysp86qIG19wATPi5YyXW4+k3xorfe6fsaYICj3yGFPxCYm5NmCg==","signatures":[{"sig":"MEYCIQDPxlAbh4XylMqXx4raJw8QmpkCfrrL9x0D84KwttweGwIhALlTKVm+wBLGILksjfthlLkoGVDaV94vl2nA1IgPHicB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8XCRA9TVsSAnZWagAAT4QP/RuVnMWWM34Z7ha9P7OY\nA8KmlRGIHLID93DWSPZ96hCIMtVIlpPaUT5G7rlQgQtfQ89laZy6+0UCHcaV\nLSFlObcZL+6d8H/QbSawUF3BwZiSIjaKhkktetQ2r59MK5KYIz6CtlyHRWnJ\nPNwDy17rqXMCFI3qPewuY+NJpQywWAIV3pLN1ftivH8aPz4x8v/upj5uJA69\nguzAWMmXio1u+HctLgsuRcwwemkhTpUHUnzYnjflC9JXsT3Q6v7xQ94IEtG1\nY+bDiVaFWrjk43DIKahIrWRZTIPHb8w91cHVA21GSMDB8tVnC6Bq+6ytS86J\nWTle3PbJbOIvYQT5yUgdzkMhHdoHI11nX51bpWI1IZHhRs4ufGOu1yi+X0r2\nyIbhAItVp7hf+H1cMEfTzIW30IjeJmN1B+h9EcpR016J4c4OHC3nCPmj97BP\navoYbZkdECOnCiNvckwO+0KV1XocZo2gGYqW5aM4XsyJCFS4WX/VO+3AjKbx\nNwUcivlOF/HiP7BeRGj89MSVm3ADZgnMTzoNLp8rWXgZDInWl4+XeenJA+CO\nCQjvTQLIr/ulRzknoPrjSgCmiSpMyGxN8vxZzffyOItsRb8bewClQpgIn+rq\nswlG0Om+mYo9vCrW3W7kgYbonbRrF2lmajAap4bxQDqRTVjDvV6hRR/dKFkG\nrDTZ\r\n=bGtU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/theme":"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/line-ripple_5.0.0-canary.5bc5ebfea.0_1578524438790_0.7314160389293034","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5f1ca4a0aff96efbce7134b36d8bb523b0c0774","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1112b8def.0.tgz","fileCount":30,"integrity":"sha512-YtqOX7rdnnezSyp35oMAiOXBIqt3/RWMcM99K77ijXKO/MYJoXN7MELlEwdooKB7pQWx6y8KmILq0pCEa6XQLQ==","signatures":[{"sig":"MEUCIQDo4hFk/6HJv1MAnpXlCCuhena6OcMsIJJrhMXZKdr8bAIgS7KABZW7tn+uQYytIg5nLFAjW+8dqlDk7KxuGMNmbko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6S2CRA9TVsSAnZWagAAK8UP/2HGztK7gnTa83UC2fGY\n0cAFZ0oCjLRtRN71frpyj71c5W8zH/HyLWrrXow+blCTB8/vtqS/nTHMZqXp\nl6XzMLpCJ+BNbVqTWyb+WZdMzRyA0lFqZhSAQQ43ZHCqS9+8PiryLE33glhV\nFgRE+HcnkJpvgRSVKOGlTg05LutCVQ3YQZjRwi7CE73DO2BwFSR2E/7t3AUY\nMjp9v4zMbJ+GkyeAtHj+Dqov0888xs2I/bfIQHPKnuPrZ5v+DbGb8IYVMRHB\nJdI/M6kC4TuEUNFrQlrVBew3w29qVWTDJnfn2W4r4Z23tPCgmYdg4wZHu+ha\npYg4g0Bk85JcAhuwkFXtOrN5zEFxlOnhwm1Eb3dQFcoJFPta2fdFl0En5qpu\nQqmPYmEk08RAlUNMA1ep5zpv6VZOuVW3jfu4BWb+ZcQeAOSsSD7A7luCoD5v\ndsUY+Ko7MncRjceg1g9BjAdbiTcMdiSmdcvBOF5DvhCO4IMuYwVHxZjUwz33\n16faTQAzI2zK/NHyixev9+G8legWZIsXsUK4b9K0ecdrZVs2sa1BZz294aPT\n2u78pvG8QBimOMqdRuMpnC8WFUIk2oaX41h5lEstFNtE9hUiBgvXgOtsEvqf\nqISK7qwiqyr1kzrCfQ8Lx3Z+dauODNMV1kORs9UKc4KvpXXV5k/iWjCEzMRo\nxWzE\r\n=IGuQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1112b8def.0","@material/theme":"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/line-ripple_5.0.0-canary.1112b8def.0_1578607797917_0.003634774002347907","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/line-ripple","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cb38f80719e177690ee75fe092cf8d2d78b72b95","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.aab102017.0.tgz","fileCount":30,"integrity":"sha512-Xuj5QAw+1YnvHGVzneRAlQKbCacBVEIh8wfg9HoDR46D+qeXuyuqHykSUndQD+FqIAVAXnbe6efC3H/e1Ec9Dg==","signatures":[{"sig":"MEQCIEiqG8yMhY3Dw1zvC58vqLzuW4+IMoaCIhLq1vLrYkbSAiAdJ+X4eq02crKcLZM8Wzxv6LPD2n9OvTXUtsD9h5vGSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FXCRA9TVsSAnZWagAA6NEP/jxntJsFBVg/eualEkGz\nB3D3arri97HrBgDAIaUq4rShlV8yFBNMNjnox42hrpxD0f0yXwe7XFXYTa+I\nnqvFN9Jjr5bpNm/oMAwPKOoK8JGXtc+/JRO8HdZ82MRezOwxqjDHtPNOBOhW\noFdkOFKu5L8ibLWpZHzKKUl+bP6LmErDE7iYj3HwL5beIScuNWqZ0r3IHC5I\nDPAkiS05fG3Khcj7wr6qmj2h9eZ00HOY/yYhxiViy9B8d6I38AxmnIL3486R\nYmOwWgPXz3hznMeaNl90zmxm4cPqprqQraMb25YleU4v6lCkG4fy4Ktb6kri\nHoFqlHkrJeHkZK1nf+B5rjPiy0M703xb7/fYzRRvhp4TaaYbnPo8Tx7U9vqO\nlCOnWnlZ3KgKuJ0Ei3FAAvyhZhwV9zhHX1bypc1q/8AgL2Wn6h9lGDhf1u2O\n0OGT2BFJJ4QpzIup4AANyoH3CUxtndk1tJQCrZX31INK6l/8RQk8grn6DyvL\nxDN+QEXXgBZz1uAUZakGaslW8skhE7C934hfdYjl2O1vKWvtXTYvMls8wn+9\nh3TGoE1lPe/iFdU84pM2wIz5TL9fUWOZae7QeR/mc4ZIZKol9sCRcsYJl6Aj\nFT4snuEAcNwkTwcKOuAY05pHwN548dkw1rq4KpINIlcH5agx4xNDFcnQFeua\nEF0T\r\n=AIRA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aab102017.0","@material/theme":"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/line-ripple_5.0.0-canary.aab102017.0_1578615126872_0.5471005938766569","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/line-ripple","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5b41b37244a66a1c5ac3cb0b223a1669a5be317a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.426913342.0.tgz","fileCount":30,"integrity":"sha512-BrTgC4CztU8ZLwdaHHlB71oJ01xp3TDsar+tg19rYrD7fu9Ux4i+29lHgnI6Dl/EX+ZUVTFyOXwc/iOROnYv7g==","signatures":[{"sig":"MEYCIQDjP+KPgOE38/OdK0a6OQ5GvbWef2/hXgdqAfgYmY2gOAIhAJDqtbLTo2JYBAnp6mIzyMjlMGKg6BpEWWv1nBWWWYVn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9bgCRA9TVsSAnZWagAAOMgP/R99owQ9sybxe/oMrK0O\n/Zh1Rg/2zOpfL0qruziaBUG6/N35RSi5Yq9rIuGoN6ZB9iQ5K7arVRvpCtXT\nCurGDNVyEGVU13ZSUWZUxV6ETpRprEaRFnrGMLotmueVr0H/Q70XxISeGnmd\nX86vSK3BJBQFgJaYt1L9ak9ME/KKKG1hd0oRcr6xiw+zJNmwpoGEuDMq2xyp\nEUmHBdKBZ+9DssIdpR7nvwtFd/uYCL1+ctujhbViCaoOYLYs7xzYPuwgJbk6\nKFn57SRKVGKyf86Ah8gcChujFtcMQuFrbwji1sJVSpJrQMZEGDm6GuRdUvHJ\nLW94uKSXTTg8d+R2cjLsZMIvFD7WBuGfiwshEbAPbaQvL7EJHzdwp0RuSPbJ\n7mBuM3HMcGY+DdekWHrnjz4QwxrC0yJuQx0zTEGW7kEmIdwA2DV3THk7pK84\nUGRfr5RW8jWIBGq2wVXAeNAWp/cvn50hCRv9qQjmkaujhpJMP9/qkL0yVnDS\nFyTdIC2THvDcsrz3kEJfpxhVwQPMa0z0X13dLBa4wt265xzmcqdJ1nlPHmIL\n05ZSgFhQoHfHPJkqLas5eabkAVJsLCecoL0bnfmyYk2a2LSTUhRZ0nYR/5tu\nPKcmmMt4pqFNQqzX8o+8rv/lgY1NBydLJEEQVdnP5A+VB0M7++ianxCz1RKg\nrNvf\r\n=OTh9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.426913342.0","@material/theme":"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/line-ripple_5.0.0-canary.426913342.0_1578620639367_0.9299053165182831","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d47947b85d33831c731593a1c4821f8375ae576b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d4ea9a706.0.tgz","fileCount":30,"integrity":"sha512-5F4eqDy5zuWqfaf66wxNFJzvCb9SF8mTFbSiDynz8GbJO7mbzYiy/v4IH/wJS0KlZvb05AjCkivIwoGXO3AUww==","signatures":[{"sig":"MEUCIQD7ALlp7bJFe4gygHtgE3Kw8dVYGJTcrkoD84aknCeiwAIgV16hvxgWWfGwdgsKeP8V+lbXXFe1JFLsJiugpWboXIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLNzCRA9TVsSAnZWagAATisP/RP2oqv9+1bkqdNAW2+K\nvjfa4OHt163gdx3xcHPGHTUq6mb5L68cUCahwFxKMNVH9FcQyc9z6DPj98+6\n1n21ah6NiN7vBRYgEXk6PmOviKpEaHBH7Xll7VoywUccgRwQMTZe8iMnsKw1\nCtSgqCoMlWgKCGja4B6S6OcBseRZBjcVIOxp8+R9xc/EkEM7uiEpIjVDo5sM\nkovppCJ2GRgAS/fvjNUf6nBikg0go1JSwSUF4xoeDBtrSlWpQ7/v0b9/tWYk\n5DrQCYKBilvOf45gUKJnTUD+Z456rqyAWW/fWxXIrYdLd9hq+d15ftArfyhe\nRYPYJWlPmxQykgBqndrgV1NqnJTGRG33Lybz5/Nvj76X8bZIvmJJnVz5MOYk\nyXjy7wTr4SMbmYQBgTvU1BwRl4giKgk5/oHmqSUV8LX2CAmtiVoJhSFR2Knf\nlx+vFcgiRZt6KANFbWtF6ZS9+U8UBp2a6P1HFGOCI7Ble+itNS0iT/dFy0Ul\nGCcddt59Ruv/nMbLdDprY9aokZxBApy2a9mqAbpDQ3uMouYpDOyOmv7zsvAA\nXyOKVifust8QwJsII7ihAsxOUAc2rlUinVnjZIcvUB89t57sr+d3sQ0WSKJd\nAXatfjV886N+1ePFpwCrj/9G8D1zWAELz7w9701AgHyJlsOijdlMi3TwfTri\nnNy6\r\n=nCLH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d4ea9a706.0","@material/theme":"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/line-ripple_5.0.0-canary.d4ea9a706.0_1578677106598_0.9391433843297108","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c21bbb761ff7d4c6b566e6b5bcee1d4bb2d62e52","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7d4ee2996.0.tgz","fileCount":30,"integrity":"sha512-L+vBpw0mDho6Mw1MFYjm0844FV2aGjEI2EM2wDS1iO4sNS31hqltyiVEz6GNHPodyEdC9u2npb7B3LdS3H/O9g==","signatures":[{"sig":"MEUCIQC4KtPlDazj3VF89gusnFfHmsa/XEM5Q3nkyNlcH2uK7QIgY6k/mVR0YfSaPan5/aFCvThxXoiM06LBiy7WnHsaGBI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrRCRA9TVsSAnZWagAAQr0QAJZwqFAkfmXkoA1Z1uzs\nv44C3i/MNLq4cstwODLHkp5ywOBfOi+1omf8sNYfitinwGbccUyugKlITILP\n/XWLjtOcFoRrMuNRgExx5NM/GccPOPTkHlg2/yz43Ayck3wmGE/m+6TLitm6\nOFetHxXnpgEP+nput6M/iZ2mjkOUTI/k5dKAUZDarkT11JcCtADqDel/N0m5\nSADuVBhB+MeMltkAeUPJI6jTpMz7Yr0mExFs0O6EAIDiTEQuwDNWc3p/rN1T\nwyhGpOs/nOddgtEl6SqsyB2sk4UQGIwjKjd3mDniKOJMBjRo/u7P+8aUpuqS\nQq9SyTz60NEcSl0Gj5JsoJvSRuo8Jy8WQLXR/beeQBWvxRYYNzAtSJ0TTmQu\n5vrTFDL8hzfzGzXqJF6k8WYvjONOUJXeKpwGQTs4U4+hv9t/2+2I7pGBXWkI\npoF9CO6ajj/Xsf3N9tROs1oo8dTu5eqIol0svZ7peQZtHW5XcEy54jsPCPxq\n0E+HHy9J87cBu+jsRKnO1D2BvXPllGHp2fnKeFETQYmUcuN+wefBCxGd0TG4\neTJ/zNdVGHRnFJOSC2a1e7R0TTwnq7O7dzw3qaXxECtTQYPcyCR5ixhluHXW\nLxlAG3OFDgDy+q3Ui2VWK58mQodKRS+VMaflzZAkB9DgC84FfnOG3DulAqwC\ntoiq\r\n=Z5lQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7d4ee2996.0","@material/theme":"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/line-ripple_5.0.0-canary.7d4ee2996.0_1578678993017_0.7808383563786265","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"32eb106578c82f7fbbad65b5d2dafb2cf41680c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.981ec9b6f.0.tgz","fileCount":30,"integrity":"sha512-R8TJ2r7NgCg96MBRCnZHXQYpnXHIFNHYOpZIiHrSUL7n9MR+xDbQXIGAFxvKKYpAbgi2gm//r1/Gm0xeehI6yA==","signatures":[{"sig":"MEYCIQCO0HqX2iE5g73EIl9jJLiwBm/E+YwRQ8YOl9ZAKOQ9aQIhAPrh4Wdsm4VEe2+afz6KyCHTLk1q9+WFIP6qP2jENkjx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/lCRA9TVsSAnZWagAAtgoP/AxX7M8FxhgNtNepBiru\nnq9Bo60T8jD3zJz4DVYa1J6c8iIGlQR9fDvgAoCqY6Xu2IaWUwyko8Csk13J\nPfSsKd25kVb09pveLyYYFyUxWTZImn7xQkSDA/KDV8RpwB3woC6tB17hoXaf\nNh/FErmWxVscCj21mtJD8dkkPeNvNYRQmKcFUz8f96P7zrBPIH5pWiiNXjTs\nYImffwAgMVREkX8admpFNVgtBS4gPEEXi3dQeKxHuAg5gjzjWS/9R6YRqc26\n4wWC/wRBE+RdDkKwpme8yAcPClhFpXPAGsC16DLA0JsRm2NhVOKC3Gmz6ufx\nCT4234enbWpoGvXZPIQnFJ+LgWac1dnoi6gwoc6oMSWrrprr/L5c6Z4deNsW\n8SV7e3gDXHpGqJZNlxDQsmJ7RhuoL5rWGJbYi/n2S2r0eWoD2CxJnCYSImLU\n5DUTJijK8Wt9uCqQxvg8lZJ10x4AnWkGiuEDMbBSNPFI7lWcrcuouGlKjsVR\nPBRhURTxld2BpmhxpZa6waRsPaq9+7GyJjhxqqdE2BeY320BjV/xxj4FZ3eE\nX8qCu5Pn4LI9YaRkET9ryPPR7FwaHiifgm0BXVt/ni3t0u0TcQXnBWj67s/x\n/h6RP3jk4XhDo8LrIqLsoQQDAhCWGXM3pfEiQQYxuyo45qVfS3rTdQNpeQwh\n2eId\r\n=MXkC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.981ec9b6f.0","@material/theme":"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/line-ripple_5.0.0-canary.981ec9b6f.0_1578684388833_0.9119580997786396","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/line-ripple","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0ec40e370bcb909dd9a4a4337cb3eb3b3620e33e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.737da83fc.0.tgz","fileCount":30,"integrity":"sha512-bJNZEnHQ02Sh2oQpj0rPVRxD2YhP4/hxrTuni6OMulBwyMQuLorqWwQQ9LP9yCzpnyk/x8XmrKxCc9IYdnB7mA==","signatures":[{"sig":"MEQCIB9tlVAQzQGdIQZZPpINVZkUjo/rxD+XorIL0hPb1WIqAiAkwYJPCXrvtfzzo4xIE6vTLKIleaWaNptHNV+WK1WSeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOorCRA9TVsSAnZWagAADJYP/ieP6U2iUQy++yQPH+VB\niHFmCVffEpBP8jBDupJywk8XEuA8BC3NXbMay6+a/+nfn3oE150SIfZUc0y1\nZseFzkIU4iQb7aBzK5wQHEJiKT5x2UMxpLIGRRTS+BE++ojBZfxTdoaV7ed7\ngOL3YIHlVAGKXaoTmUwUonZ1gS9rM8dDs4Sa8QI3u67tgkt1W5ICIvwhSxNx\ntwSBnSukSfsUWuMK2PrAlph7OruNyf836vKu1nM9QzKibq6Bbh546H8B6pn+\nchC+KqiIOub6lsy3EOb5H6PWgwixRmSeIS5yY9KqI2HFqWgLRoMY+0Y77nmW\nTOJe5XVHgrD2DDsmkBidnIZM5p9psrUkV1wjxedPp5ZydN7qIQKX8JKTCUYS\n76um3xm5HN5rQX2sc6v1QfMl3HsOVzbKycweLguj35cHuwGKA65M6mtTIBnO\nSZ0MHMOWcp9sEHPFPheiGp7yI2Bq4alnnt9DS5IRCtY9BEoN1o0lu00unTmB\no/uPIJ9YzWRhy8mhRvJ0JT4wDsSCSTPwNy6QHYZSA/4sio0EF4Q9bMEMdd+y\nDb4/BSnze4g0BqIRdPWYtMhs2HiEN/u60jEQLzm/rYD8Dtac8UnZNMpFL+Pe\nZkC56fNCIE2/qVW6SLdpaekCY7Ye6+5IOJ6WJMeUfVqy8M61xaebA2KjFmNF\nd7zc\r\n=p4RF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.737da83fc.0","@material/theme":"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/line-ripple_5.0.0-canary.737da83fc.0_1578691115087_0.17380714122358643","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/line-ripple","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1e26d1769cad64f209474ea3b93a1c9f2fd5fed9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.aca8e6c18.0.tgz","fileCount":30,"integrity":"sha512-vrhMedid4syto/cTcQFxgLzx6hurOB+Db9Wj+1xhZtVDwuQFjTw+Wlk234v5npFFHELNeEXDr5+bBuVIRzPqiA==","signatures":[{"sig":"MEYCIQCBy+VtSCnF1JdBJ/nEloEV5HZjJQiiE3CFDFMhh8ugQwIhAKC/drXRGNimxZa2Z9fUXnig+HzjmXWru6cJXIwlGI7O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWfCRA9TVsSAnZWagAA3mgQAIAm6Fb+hsoh7HqpJruT\n/qLj+9R57vyDLSdSYgS7agY7vB5sBzcc9YNg1Bqk+CCz42qsKbbt8mYVkklQ\ns7/MA8inMphzj5s890fzkhiuk6/tDS2nY1auUwdM1UZpWOBsaWXojrcQ6qvw\nDZnnEkAYdAdrhagsy+e437Sk6e8F3OysDFordvlE6bl+Vt5iGwpgO6zH43Sw\nJqMRDnGhxFJFxPaGtpBkRdGzAjixp7j7qxGdB86Yj5Wzk/nDGcSXEidnIe1e\n2Qe2K5fSSsxQLQoX6initakToRir+djQkaQm6kXHGQNy1ATIECKrA1jlyNSS\nKZ9RPX7axvUWJOUx6pWO8YZYD9gEeCJbLdJ6ykIbld/ybJ91/4A8Oj8QdaPI\nkGApgipyYQohxLZLIUgazSNU+nboEHcgRHeCYpv3nX6OPexYZQP+qTaFieZh\n+MfywGqaog3GX3zNP4WWpShmOt2Dk5AEDnkhMWmIzzMWJEy4Rgse0ap5Ocqq\nQIEs8ITRTJZcU7ZR5NxnkWTwD8s/VVkIQVkM6BDSRg5/yQxMt0IGFDpcxeTU\nzGM0NXh2HdaBJtMXXS+gHJD9WzOd3F3rReTmWARKdq4csshgaCo/TVKEg84f\nDVZgvaeyuiFfImj1VpTyxKHOna7yeQpSzrRUeUIuqynv9juLCCFnhvMdIq6x\n4HRU\r\n=VKo0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aca8e6c18.0","@material/theme":"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/line-ripple_5.0.0-canary.aca8e6c18.0_1578943902633_0.1112283331500119","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a58b717ad2f95c384562f09d1972df3888dd2ef1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c38d84e21.0.tgz","fileCount":30,"integrity":"sha512-ij2WJ/soMhJNnDqVUTOQdQXIHjt1/sPtYMUBXiqyVAsCXgxZFEvFCIBepycy3dGZc9EFYsV0zg9GqSkDXF3ukA==","signatures":[{"sig":"MEUCIHkBQx6jYdv815GMKuJnD32kov/CnSdsrlUJ7wbnQnKxAiEA93gJzG/Tq2n9i/nEuRE9GSpAhniz6crDWuXEjSKMGso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOt6CRA9TVsSAnZWagAAJiwQAJ0kqRWOhKGAf2ybwDH7\n95oCftQr1BnReLvHFNPymvS5gAJTudvESVLMPydsn3WFuZu6iIXXP7XSk6n2\nxjENUFunU6nVvKYC9uUjf0q/otZJZvVgUO0SlB2Z12C7yVaLaGeqULCLUV8W\ntKWoDatpBi3WR1LE4eUh1PfgWrPD43dWcna07og74VuFnHh2qqWXjGVRQRp9\nVJLUryDkRWaGsOwH9T6gpdGqer6Jv/D64y1EuekJniv1g+mKUyefeZXSm+0S\njSgNMsgiHjXqAmm54iudA4e5Crg4+21c+79y5KHlUmPWcFNM5UnxNYPkZUrG\n3h8hgp5GjOIhdQXH9pz4k0TQ035L7nuTmsdS7mR9iTw/frZu7f6IAUCz81u1\n2tBcO+YYK6W4Q9JeBWN6rIoosElylBDv++6IdlmVmph29d4qz090NVZskyK2\nyhOOxFndaqGPhbVUpLOmVHjN7F1I0N9Zlfof51Tbm1KXjIBwwluYG12m+8/F\nAW2BQo9arfX49+5W5Hs+Nmtf9Is5KCksPafvBaFD492M5vI8ArX38zN6FGVl\nkOK/zycusxNQjzc+hB1yMTCv6QQAboBMj2h9b7+HmcdB6REihPDCKZzaFqLs\nSqpMvZojD9fVPym7fLa6L6uVkjHxE5bdg10ysGCnzGTVDXAXnqbUXPePP0/h\n7pmK\r\n=ubZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c38d84e21.0","@material/theme":"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/line-ripple_5.0.0-canary.c38d84e21.0_1578953594070_0.552113554132148","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b2cea78db370cb1621a0f4a7b5189c4b55cf4d37","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a4db5fbad.0.tgz","fileCount":30,"integrity":"sha512-mczDEK7T5ADoF8OVeKU8sBgVPW0ubRDh9ZWTzmchHkDIwVll2xEEInZs87cAY0H9UtPF4qRXeeIZp1722d8/eA==","signatures":[{"sig":"MEUCIHNTwCYwNejtkBWQsCOwPediJPXXc1xTlFVYpV1ArnqqAiEA3QPXOaKht0CvkzAUv+x8j307FEobn/CC8HsrhfczKuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":115802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQuCRA9TVsSAnZWagAAVRAP/3xX8pYdrSVLBc8UZhol\nwbsZ8+NaWankDRjc1YKDP8hE5k1//8rfnlRuVFFJDgWTwO8dxZTdFzLi2BrT\nehR5Gh7IsTzr0tZqRxN29+hzSLZB0uBBY5s0wImbYWBpKLxSmNTaCaJ1y2C8\nSw2znctfdJh92HyX/MUImVFdG8myFLK/7Qgo97m2E45U2scNsuJxoWi5tWdX\nPf3DDXV8MSnOvjQM3mdZ9CLdBdz89xUJmNQqHwTwytftaegMpid6eKUsQnK+\nRRGAd4/63hFegPjVNJHCXbUGUbHXG8cpzSWjJiBSEtFlPdaaMGrXs9EWN/ZF\nvEKRTAPuPUTYqf3yykoVRm6iUdIiyFCWEL4MGMag1MYc6fYWvV9aaGSwxNj7\n8CofN5nUWFhJCkAPV15AnaunPNDxgOcAz+whl0kpftiyKHZc+lfhdTP/y1He\nX9K0lqMH7J4BwAv4+cZUtMHSzEkOrtDU8eW/n5bDuFaOFzhLEMUA0yJiuRAb\nwuOWuCI21q387a4uKXXmWLyF9szo3mPHfoggNU6fwOHUCeVK6XkFiePPRHaR\nIqhjPWWoHU3UYI3abUNn0HkK6SGgymQUSBYtHjfMaahLXILBTuU9tLq/TQXj\nTLwWIXavz8NDryzZTwMwaL/kJgiaTrbw7iXxIdYOqUnDkLiXOPIBvAscJkul\nhcoU\r\n=jDwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4db5fbad.0","@material/theme":"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/line-ripple_5.0.0-canary.a4db5fbad.0_1578968110399_0.6133424427016521","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/line-ripple","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b2d973dac797a01142d0b7cb427d58fed5a600aa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.faa9af310.0.tgz","fileCount":33,"integrity":"sha512-eQVBDJ86G69fxqFkzpM2ynd6jv9PTmSeBH7Zpa6wdE+JODQn1vGgkl0mewiX5OuDX573FKD48ZzFzhexV3+usw==","signatures":[{"sig":"MEYCIQDtMO8/KWnwfyN5JDBfebTB14akeMmbNlpf+7zGBt2NCQIhALDKLoDCVCMYHVSSc3N++9uOFsH+HIzKFXCM+OebofdP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHPCRA9TVsSAnZWagAAJxUP/jJINMhBbTWfqaEev+uO\n3Q5W0VCJhKIDnuYq7lEqOcDDADlb63F9N5RAyja459gAHm4F15AF4NutFNSi\n/EQxwKwXdqHTmP5jhxHBD66iBkCFDW36lbTy3d2NAUayiW83WJoZIPJZZZuM\nmVk1ipBCKJ/RzTqB9rkwtDd/s8QedyLPf8AL+JvIQZytRHlB90R3pJx84Br1\ndEpMyQvoVxRM/mHX7i2joJgf4w/jl7rKYssTccO+GgLhInc9uQN+qtx+1Jir\ndceuanaq71OHOjNJuOQfnGsipICqmp9uYDgi14jeoSKsGtbVVlh18EQ0nrX4\n5RP++wLAYQDyD+nn+LRmwa8esDez3Ce9uLnrHkgJ7Q4+aNvKgX/a3HY6L1qk\nSCDUabYgoD8HSfrbReUpC8K1vb80sf0yWKF0xZT+zQvXU/xSzylHUwjE6GnR\nGE/aGGm2pESEZEa66wgbscE69uYXK+wuwF2r3LdbqFnQRVF/+EqXjuZU/cn8\n9nVxPTlUjgX1UlwKKyTAW2tzmmKLBC4AER65o7BSDCb8hb8rTqNOSCy5Ye7p\nuFExzyz+CtGDc9Zwj2RWKPFqSbvMLOddApzzytoNpnj9Wyhry0NC6ao0RMFA\nlGuCapginzeW2ifW73B2gIpmsfVbCs65N9p8VABsFT/rBYqO8ITYCtZLBwzh\nlIpW\r\n=sxEu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.faa9af310.0","@material/theme":"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/line-ripple_5.0.0-canary.faa9af310.0_1579020751472_0.3693552797641304","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/line-ripple","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e12eb7e3a70b178bf876566225ebb49ebbe26b34","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.60354c577.0.tgz","fileCount":33,"integrity":"sha512-JtvfKkmVe1haMFLBC2nwSoOBumEOCmOdiOhPN3DbybLcJz4YZjzebP/j0tNJTJ93sKjlCm+Onvj329bG/Iunpg==","signatures":[{"sig":"MEQCIFtpXGjJtC+Jw1rkeb/HKgjl0zJGbkeXHZZdbisE75CmAiBpKZOKL5AVhFgaFPhbJWXai/R0vG7qRwm4Kjz50AGnKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSZCRA9TVsSAnZWagAAqekP/3hy3DbyzQe/YwLm6rbU\n9tRP4rwr9ZQrZ3M7zD2FhoMnPQ3X83wqPASSRq37YQc03xmC8PYQGhVb6XLe\nvvXg1413ulvvdhOWo4oezPzDk4Udugocy36q198d55faps1tkuudexjPhpTl\nMaEInoj6LOtnjkpfZfqgnPr7GL4Kw0EBMPiWocgxi1jER9XhlCOxj8pMfL9Z\n8LJEhmVnaMSqPHQB4uCmUH0szpwbN306Zr7d5iI9wkfs9B39TlHOtGe7j5dM\nJ41F/Ty67n0jwye1E+bZ++5w6Xr6A7upqohcD/PUNhwuOprT9c/SGNgbJMSI\nflaCOTH3QzV9ckpD94grChTK8u83HJdvwhpglJrVL1asUylqxGLmKkuowhgY\n4PaDhXbqz9m/ztrQ+lDE0LaViyWMbc9kWB2Pq68ymZX9z0ntGc7pHic7CQwu\n/nVIvPeL9FOltgbqpBwT6hrGZNLKC8DTd89tIYFAoR+Rz1zN45BVmfr4uB/Q\n2QE+W6Hm4Y4JCVJ5HtUfWg7Bq2ExIn9SEU+09MhwsjKmLhMH9nQj/CBX/782\nDnlSxh6lAQLWqIrYJoBcr+zDETgHBXPQE6/7llPR2nu7PrXyLQCrplgSfE4o\nyhXFmNjL9n8uC32IIKM9yxkhGbzydjV0ZcAvuBL5IQF2jnEp5xGJMH3JNJH0\neKLT\r\n=HoYl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.60354c577.0","@material/theme":"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/line-ripple_5.0.0-canary.60354c577.0_1579041944762_0.29457563150821264","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b4029eb73770d3f3ab189b8ee9b6ae27b392940","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d07c78daa.0.tgz","fileCount":33,"integrity":"sha512-jcXpD0SzLHUuJryGQAzvNN8Q1DW9g8j8u24rPyb1e7Lz3Tk6elGl8BFDfoH2Zru889PhCoCD2yvFoYcVKISqTA==","signatures":[{"sig":"MEUCIEVGrqIZ5XBpn9tBOvCn2X641rTp3OL7cg4fQZJ3aWCOAiEAqReGRhEatsvU7c89yfiPV6QL3ME+p0URYEkj+Wf4TyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlDsCRA9TVsSAnZWagAApQYP/A7XceuWZth5Kf8rQ7C0\nhF7GyJuZEG6Zf7kNcUayVcw4TwlgO+4+wOQK9vQsCEqa4/ipwQ7+WKDCQjzo\ngNbyyQ+ZgKRcPz4s14uUUivk9XoJeOF1YH2Ilm9/QVjp4sf+UmkKQR70bIZX\nu5Rtv4AenJK7HEjZc/iYw7ZtDkpza6R7vWMrIKOA8kibM2Jy18924irksjdp\nJ4Z6DLZpGb+XnnixeDqyOahe/gP3dkQ4SPZ+ISDrc1WgWuXSI25mv0yLzbnL\nH+hJyBBJfc26R5Rn0gzEEqT+uiji+qdjQxzGE2DBZfnuNnAw5TOb8Ue6op2K\nW2yWlNrkfF4wlezje66DRBv+uw6eiTJ5rqW2iAKVK9K0XVL7DMxNmmj5M6r0\npTdqalM5Tsh9QGxWpq4dOo7HOQs3F/q+leAdXBbs7brgfURWND8CgSuoeEIX\nYOVzawDEtDrHWFdDLZp5V1RuvK0pCxeNJ6rxTccnYgVuVpzHbT4A2boMTy2s\nTdSLWNrxlC/263+soaL1K803fDfpRK55UFBfS3OpJeeyrvGxW+4gsTjgj2bh\n2PYf9yGHvFgajMfdj1Dq5j+vyGp+Amm1nmG6ZfpjcQBO8KkZy7TLbJGBLgPv\nsQhUnzwsKsK1o7kz6dgUnXoBUjPxraxfNNtCXWGuAge6y+krSDPQWHPVVf5e\nmDlq\r\n=Jj5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d07c78daa.0","@material/theme":"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/line-ripple_5.0.0-canary.d07c78daa.0_1579045100441_0.5874900761667865","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/line-ripple","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ffc2ad8e6f1420d23c766228159b92d6ab879f2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":33,"integrity":"sha512-z43bb/EMbtqACp+vO63h5jHyF2zvDFOWExKHEyyuACWdOFvCGqzKR8jtZ5rdeaQ669AIc8sq/4zfkfafd55Qew==","signatures":[{"sig":"MEUCIE66WWQ9s4Ht+r5CDVI38TdUzwJi4MshiDFf0YJpzIArAiEAwAHRJOHBaTMobs8+zPq4uR3UeajGbvApsvb+MxbB4ak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4bCRA9TVsSAnZWagAA0lYP+gJvOdXAWNBAb2IrYp8t\nnv7q4bhSI4mrtsY/IfS+vaJDveDeMGKCkVz8l0xVrvE+X6yhA2bLbGLrEk+Y\nwEDG3oVx1v2v1GTxnFr914gIZp6+/yAoF7AMsqU3h4nE7BCcgK2ia64W5sU7\ndOG8FVo6JgWXprKzyPNqW/ql4NULklRgt6mi3rgsi6BZt9pJl62Am8eV3AtK\nJV+Q+NVRM+qwGNaLTk6Dw0qYOrbDxYy1wZUD/x3o/XT6cEAXHp3NogrbIIyU\n2fLxxX0504KiVKltJc9EhURKNB7dj3VAOKs3Nh4KSmZ0pF/ZjCDfK6A4AK4m\neKuFhKd75BKprtHcnqx9h8x+qKOXpreSuiETvF+iMJmboAnYb9HfYDtd7gdq\nWf9X3D7aruSSFOJF6yW8nmvIa29DF6QmRXfDdBHk4RXUnYHYWG+yWPvEEbGy\n/n4jfA5l0qfqeWlyKX7IvvqFKcveRsnxVw3d+2sTKeDmlbrFctNkZlKTe8GJ\n61MWI3s4FJlGb12N4Ubzl7MD95JnIKqe+bRn2d6xRM/nxrpMDg2epXY2ZVH4\nbxdWw+ZK9zE7xZMixty9v0NnD9wuuNogmOmnw/q5qs+gddxzSvBQ3vs/8aCN\nkiBw2kgeURzVZHR4Lsl/00qDfBB4nOgXWStChQs+0Q1xA00XMZuWoL0H5yrn\nMmHz\r\n=OR+j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"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/line-ripple_5.0.0-canary.8ddd5c6dc.0_1579052571054_0.5174400852758128","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8cabae18da36712a4c8e20f8f2496415f932a361","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a9511d870.0.tgz","fileCount":33,"integrity":"sha512-9k68qX/keIMb30G1jJeiAxIG72UFZqstGi4FjMgc9QckIRgSgGJ4D8oqczX7v6PPezV7rMh1yh/ZMey6Y94O9Q==","signatures":[{"sig":"MEYCIQC7+RPe7UuLEQgCbNoPPWV6wFJWhjUNL0ImCK009VpKNwIhAKY4Q2UVSKlP+COH9LHFnvBW2B/X8rP/gMH1RwWMAsC6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2ONCRA9TVsSAnZWagAA7zsP/iY6ywaSF5tWyODStFUE\nIUaBcJpiog9VUyOZyCREV2uvmSWfj8D/G3+RNrGjhbrsu/SOJnI6C5oO4ad0\nkLgJUIgOm+IxcU2nfwYgjwDW6/vUVh3CYG9T2f06CHJOtjnFU8b8iS8uHsou\ns6riqqhNn7FL8mQZMf5m9nMBunYefs86G7j0aPxrwFIT5cScvTTsx3EOwG3b\n1QFsGxb/AyCg410xEzSABCv6NMuZk+ZmINW2ok6I3BDICVT6RnY5dRZt/WDY\nNNac9Mxs41y4DxRnPJVgheQAzCEWCpVR3WTsPXLeVYFwAiJOaVXSDSbVSmV8\nQOJTVnD6qGDaaxEJD3a7eUgAHVYhVs+D4+gkS7gLaV5c17BIoL2QcxJz+64T\nqXqhc+cH1isNvd0ho3+V646A4Li/V0wgm2FQY39ANe9ZhDf2ExYkEZbS4zuD\nS89yDy5byOHoiLRHV6qRWfTqoYXyNKZr9vIHm9+QODtzk24/65dZ6MSazlpv\nE2e9Bce0eotiTYlEtVgR+QcQsE75GVIpWNtL5QWyou12AHy/MUslc8rYfgeR\n/O8s3XAwy9/L0eeEnLm24ovZBYlyQsBxBbR2Zjri4Ib+8vQNh7vcABvGx52N\nhsfPXlvf8cxJV533I+9s+6pzGDfrNMaLw6+UdgCO/2Wkpc5U4mSyRRFezzNm\nyqxg\r\n=tyKy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a9511d870.0","@material/theme":"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/line-ripple_5.0.0-canary.a9511d870.0_1579115404673_0.7328317062639245","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"53d2d96c798fdcda2a7a02fd14d63f2663ce2530","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5d4b82bac.0.tgz","fileCount":33,"integrity":"sha512-vXSLZmdlvBU9GZFPqDHL0ONcAlzlsaxb83JbShdyg3YTXXH26pt9T4MLDrvGIERx54gGUjR5uCYUM6fvPwniJg==","signatures":[{"sig":"MEUCIA3TeJp0Ebjrq5vtTAFn8PERTigzmIlTTIWWKKpBOhx6AiEA74a2T1m9SMzXvx9Uk5+PzLEjKAelkEe4Do3uygnMsJw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5aJCRA9TVsSAnZWagAA36EQAJAy+sBtbAkySNnPP36V\nQnk4WwBJM/vbmV6rqq3mTblXGAnt4QU2jP3wfP00qxfgNg7WD+GqLiNQhpIt\nkSNiCiRztxpti4xLi3mY9chNHb/u6WwONmO1ZzQkxJ1vrLSHhBrCgAQIDCVW\nwqDiBBbqTr/TNLE1SDPq9ssTB69U2zFqTn+Dgjg2pA3pTtGFJIDgSEa2FCMI\nlmFUI8Z0svIo8DK+uK5NUhr1ZmN6NwjNg92gNgRQAd9z49eNBz0XdJWudA0L\nvSdBKb7xP+Shgt6qmo5jqerBsWe1ZrSaJ+dgGKCWxc4ExjEMlBMuSN/AFKIv\nyMsQ37EvR81anCyhHGE/pPlo22TNoIjNOTAzpglC077apOP5QNHs5lYn8Euz\ny9dmd2FQ/XMtI5a2ISHAT5S6ZZK+tOD2Dm5VxnbR7s1k4A2qMicO5oWZWFyg\nJ9/RTyiU7BFTqOOlwLv/+R/aYuRyf9Op0OGi4Gd7bvZiiGSNHxOcO4bUtzWU\nMApscdY/wBM0gvMntq6wKBh4cdLMOcH5MWgp20hvaVYD8s7SR5fiOhMfcuWH\nnjXPpZHd64D549XUfeP3dwwOAtWg3ECAnlhu3HprKV/3apvYfYuv1nwGAL5U\nxdYJxiLMZMtCHrcKBxIv5WmQrKUCxvsuEYXtlEp1JweRbi3ZxZFaZzDFj2je\nnNj3\r\n=8ART\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5d4b82bac.0","@material/theme":"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/line-ripple_5.0.0-canary.5d4b82bac.0_1579128456612_0.9360945890858854","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"771cf221789d7ffdc3c9babd580b719bfbb6674d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7c8583c4c.0.tgz","fileCount":33,"integrity":"sha512-/+1PSE/LUhQ5HNTxmpZKaq8WTn07w6TJiMlL/8iIk2NuQqvRR5nMbD9sjJLWZdj0iB6e6pN+AZ654Zbv/UymRQ==","signatures":[{"sig":"MEUCIQC5OLP8KNpMVm5dNZt0Mel1V6z4swVv0TmELFSA5afUGwIgPEmC2ZFOONg31JFuh3qpew1hPX/MUh/Mf2SzzsSkG10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5aYCRA9TVsSAnZWagAA3nQP/22/LmovnIbTxu7f/LGY\nZil4yA/8GTo0ecSG7WjhxYFCbqI5nsZgI+tsAm0TOo3ewvFu9Ui/Sho3nwCJ\nEDA3MpP6aoouANX+n18gG8eznGHU85JLkgVhMdf1PeDltNPLdC7dMKblL4cn\n5nWiKrBZigy3xC1wlrWor43AEuxWPXtXc1Rkh+wclbYtFk43Z3MHTQjsErPc\nR2DHD5i3zXmbX9eu61X8pcacZ0NLaO8sqECOn+VD0rkFNPT/H62t39dLJydA\nFwHOwjNpE+Y09Rwxio9koFLJNqnbaYhvagZul6/uHOpNZF2BsVL8Fqu3sDMx\n9CHHEDpnbDEFzex45X7HxBPGobXjJtaQQe1e7gIu6Fa4ojCn8ceQesM2rojF\npKTonkS+2oHnJoJG4YXHYgKLRNIyG3SQr9WZ/6I3hUbOwBmerTNc7bFiQvIb\nnoOAyflWmjS2EhLcdYp06O4XKZxEvbW8OpmUWAUGbOgtjSFrtrJYwGZGV+8s\n+UWg9EAiPFv/fn4mebS1DavYhRs843hfRdbyCzdlZ3eY9mKyO41ICpUchYoF\ndZD1Iw7zTdQqRDGEsI7CuU+RASKI0hx8rNe1vMgduKiAeyIyaubLzi5L0rI7\nGdgwzykFgBjq7Sc7FZ7T0otH50cd6sbUWuO1C7xzq2u1UBGEtiaziCaAgcHw\nHnyU\r\n=CGmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7c8583c4c.0","@material/theme":"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/line-ripple_5.0.0-canary.7c8583c4c.0_1579128472500_0.19757839591493842","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/line-ripple","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"54b3e725db81d04b51439c7f8db54acf7a8ddd92","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.57d0186e4.0.tgz","fileCount":33,"integrity":"sha512-f0kSZknxrACTarxTHvOgUxK9LQdppD+/1jIonsZ5Rp0IQ1CZaeEK9kgFU3jeJcnPv9sOGxBbxy0N+mZhUYm/EQ==","signatures":[{"sig":"MEUCIFnPmkTHskAkZukksNHpHFb6lUM99sK15hT3aQokfQ61AiEAoza0f8cvg4B+Gz3H7orJmTFJ9T6P0pILNF3kMU8ghRE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKivCRA9TVsSAnZWagAA5F4P/23FLuuM6mwCQcenjRgV\nLZ0Br6ySGMDYTb1aaDAx1d15uaPe9+d1s4lOeY5aSbZkObIxTFdE6WT2Wm2t\nLGn5zT4fRxtSm/TgTRuMNZkrGdthaFuuko8jeb5HF8RnCkUYK8zdXN8w3xDR\n/Z69jj0oBshw4Opzyjl8f/vdJQWBy7jF19JjYRdSxuwzYtyg8g+ZpCApFpjT\nD4tXNwLHgBgTVnEBesu0KZBVwAr+WAvKfeHvwz3t7aJwBAwH7pE6h+9U2U3r\n7HSTEQQ2SN/N7DiBWaTAf89PVh7b1no0SWsZqCeC0KiAGYPbutdOjwFdfMGh\n2YJZizr6nhUrG/m40gCULBIhb61qcAutPMYMzgdF9n7iJIUeoVR8q/Kubvcx\nau1X00Hm0I3ALz/ZADJny1bzrQ398AP//bwcD6ND70ey+03djNv6s/C5Y7FS\n6/jSZxB7J2cZhbQiqfyFty5dB7f0BvQChheel05sy+RlMb6Sd+h7J7fJTjSM\noKG6VOJaY70VtvRManI+DLIEhydiMafn9qpW0IW3LqxxUWWmtnOYiwX2WyxL\nRlQUvDnNfE7lkHOaVlYNedKOisUAt3yW3UMa45oKOYooDeMvzchiC7LngCb2\nbxBxFH41r93X6uwWzlSGINwasEjT/fCqgSlNPiXqsSRdyoGnY18CKGlnWjVr\n0FCT\r\n=x7U5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.57d0186e4.0","@material/theme":"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/line-ripple_5.0.0-canary.57d0186e4.0_1579198638917_0.40047236549351917","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/line-ripple","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"39ca207dcf28061de3dc16810e7b30f5120af471","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.071a6ab70.0.tgz","fileCount":33,"integrity":"sha512-Bsgthot3rVck6URJI2Q2mZb01USimU2FHLWsr2CF/R/wcwVsASPX09T+YjAHDcqkUw8ngKbTKQpIAUZGEaAfPg==","signatures":[{"sig":"MEYCIQCVlfnB8LEfdLrBHKxiaehZewiZRVzwWYrmEzOuU3tiRgIhAMOE+kLagXXG4ix14qIgBNtW5ZUtxPyiC1nJl1L+yQlO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKosCRA9TVsSAnZWagAAQUkP/1uQnT7pdTJqYFHBJR43\nwtGDOe3/yeZcc4XpPiC1vQhMPfGXfyLAml9xmqNwTgKSO3Q4nCADcZj0INNN\nEwuDQOoP6vI2yFEEbB2l8Gn8E/p461LsDcB0wX/yy3VJXJ3WWIwuWJaeWxe0\nPQxsVGieYKOZeG8vUJCP2Q6TUgX+drL8+XGXeFzduceCfxtetzvngwoP/2mB\nUWrenanRe3flZ0oIdGSExJqa6gqaEleFKUzkzp7Xf7F83Vww34q3eWqhFJ6n\nrcv9jjXf0MbLFlYarqTnicuktrApAMBN9vONbeHAB6aqrWi/+5G+Vk/iww45\noxJDRyGd7mQPl/+vskzMgxwLogngX4CbmK4fjokO5jAXB6Ulcs5j1/7JvrMq\nz2BWtvluSkXycZyE2bAOte47ancpua3yhr/6FElPbeBTx6b8atnqHicIRo+4\ni5PrRMEGPk+ED4pp5XwYPdt3Iv1ZkwgdQ32HtZC4qLtu6bDQowYsFWqL9J5J\nkCFB2duNLWHDf8s9upQPDizgzS+0C233Uiy/4k8gx1aI/Do0gJz1BLdnesxB\nyau5WYbScH4JQGIj6xSsiURZiLtMKFeju8wW0rCTGl8Nydpg1k6aR1UfBYkl\nP+p2ggN8rSPxw8xrxVib2YncsvRx3vdr/phFasMxtOYgQZ247dHl+y7nwgcG\n2aVW\r\n=j3Vm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.071a6ab70.0","@material/theme":"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/line-ripple_5.0.0-canary.071a6ab70.0_1579199019722_0.7334919447348265","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/line-ripple","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7d4f33509661ea868a366c4385587ea38a572741","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.22e0cb618.0.tgz","fileCount":33,"integrity":"sha512-2S+qEJUVnS5FHB8rjqcS0rNQOLbbgbV/QDJYYt4w/xRQE+Uu70/USK4FQdlvrZwNxEwGkdyQ1LVp7C6CzrGzMg==","signatures":[{"sig":"MEUCIBOTIPdUyyOE3m+JRqcCgDRz4DhmOyeDFykdLHRbWcKpAiEA9Z4XiQ5yH8Mfw1EEjnR/c/VXeSPlDezd9vh+6CWqorw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+YCRA9TVsSAnZWagAATdgP/i/vnrfvTrPmezmHVlYV\n0cZpXO395vWa3jiHctmg78DuFYVaxLvVdQcnB3/VPrc8qbzm5Ke/TolkJN/G\nB8ahYAJCkFDGzZ04vFUWlTaAJtrcoKFl89DCFIHj7WhKy0zgnEkFsyjnBfn4\nA3IBl1AclriO1SQf2ArV2B34euLRHK4ZLY56GmrPQ9tlp6mN2UHJHCLZ9bEk\nR9xc/PnuMmfZCZnsfblNctUviC67c55xtrLRn0rKBXR0AcYhMWi9Ya0lR94f\nyoMDtVf0oXbXkr7eCUTOsh8/e8DgH0SJTNiuptrs6Dzv+vK4h8leL15NUM7O\n3KQqmhpgaM966zMElTG4uKUpTOTQNfrQxGWO03FwduuTZPk4V2D1JHewwUOZ\nKlSZzO9AQf63Kn2xtaRWtg++VoYFXRdUyKBgxqI7r8TTPq/+LwrRVSTRXx3F\nHKTnzeBvZoj0yTHam5zlxVyJew547kk5utUvDD0Et/1W71KJLY/MRkeIBHi8\nVoyyC8PqZZ4MKhfMfF4Gy9fAPMrXZbufdxnDAdoruUMvXf/UGs024UUT0YXI\niIff7+t7ZrmYMqTlo+b0N+Vln1qqtmIhh8gD24l7jELWYNsZmYhVg0939pdD\n4x58UM8I6lIVq7JMshVIFgtxDqoHW8ED0wfb3NZ1kPL9ADM8/rgQZ65ZDMlS\nt0Kw\r\n=x69A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.22e0cb618.0","@material/theme":"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/line-ripple_5.0.0-canary.22e0cb618.0_1579200407659_0.6976063075479184","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1711ba098cff8cc7771fde82d1a1bc4f50419771","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f16f15b8f.0.tgz","fileCount":33,"integrity":"sha512-3wjcUC22Bwvm87SdvObWdtBi+vWtoR3Vzp3TWkxUog5e2shtjOWKUtM3WdM867XbFaQf0rLSQve/no86PIB+FA==","signatures":[{"sig":"MEUCIQCr6bz9//gWTI9atCqDVbfGYhECc3jqw0yXzdwg8J960QIgUXYSeeGNHstxBcuVrkKSH8iw+wlBexrXBkpqKES72e4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqVCRA9TVsSAnZWagAAcdUP/1HYbQREg8YJf0VvcbpY\nhcLffZ+GhPp9MQP8meDhuWMrKlLzM4f2sSzQo3Id4+0rghPzhtr1Vw+luQyS\naXxO20cgzZD2eaIYGZHz153BEYm6xjVmfZqdt/XtjARqI/G0WbMJK/DCVQrN\nEvUQxET5rlhFDPOYh5cJUcGo8reFDmiwILK28LPz1xboRXljhS/NIk7tSnPA\nQ5DJjuCRBVf3+X5+1tbDqjfVNny9al2MC0j2H9zqG/fSCQP3BYwVp247ADWZ\n/tSoXtlUfVmpSu1EaYeUEWx63FtX6w2N/bi/hw2I5nhsxFDSomSRfQeWcEAw\nt465BNFavic7S/HFDWtDNLU1y4uCfte0wN+7XnT1yJcFxO5OEumKQ5fQaktC\nLlQqv+HWTE+oMTMXWWadwMi/6Yfxbm2/W78GRdoc7GTEik24CuJe/7DxyE2y\nx8qOuJy/EfLoloHqSy4qT2oIxwwU9AkXyb0FvE2dfe9zkda8ouGC6eU8962N\n8OdxWF+OXYYflMqeQeaFgzkiOoTEbumum6d1+e6QgHkWBqfiQyDpmTEpIGFo\n5Bj/rdy4EtLnyiin9xVGK95/gf5f8Jxvbed+yybfQfkI66DSTK2NZTGy+l7/\nhP+EHO6WDEktXFXUOfSC7HE99NBzxcUsb4cib789wAXgYPN3VOqJgwbZxbLF\nJLFQ\r\n=/uDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f16f15b8f.0","@material/theme":"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/line-ripple_5.0.0-canary.f16f15b8f.0_1579219605563_0.013597832018467315","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3481dc1eb6e3c6f802b14a9a45c770081115d24f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":33,"integrity":"sha512-gSGCcdUpkC+Qf5JwbPnuCZiVEyOs3lLc3hPNul7uVu+Pen509n4BHeHKDJPWO4s9G452o5jOZLMui/X0bZa2Og==","signatures":[{"sig":"MEUCIHokMRiMGP2/1FS6zNBNt/NpWOexcYIn9jHYopd8zI2RAiEAq4bdsa38ytcdxlDGfPIC7Y2vnBynEgXgDUh33RtRUo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGOCRA9TVsSAnZWagAARckQAJJ4L6qd4HTrBUXp5p+Q\nGJcUbuFEs2d/noxWNmQWP9E3ZMpvM0ZidNqsEC2SbBG9DZoXnbbMS8jchVkv\n1H51x8zr3oUyk4GgXNUqXUR3aM5H4SxsyH7QhwqachXNXwBol0OUuNU06L2l\nDmfG2aIfVJqcUk/5GTOvsPFt1RGlfJC7cQMMDZgNKxJlPeizVdn76iCcCJF9\nS0126mxH5Y/zQLEEpSb2TzGwxry9OvcPXr50HdDqnfcI0fW+I9fPbP6gPpjF\nnsSZMSMz648ALBPKrNz6oeFq5FOIIUSho98t4QitS2bSqdDZu19ROvxcgrle\nHb0v6hGXCYlG4fQbmTKUCTABwz0C6+lKwFQ9fgQdO13eSg5sm9i61s9lF0bD\nELcJgAFu0LeKg7RJZ44i+j60qIhSOi53svxHAg/ZyJm9AWE2ioQAqSBa4yjm\nm9m2NYH4oQyNR7IioFwpR8gIv1xaNXE2xrlDvMPB6nwAYqrtdBRtomrD6QYi\nyqegMyCgMr8l2sySGCF3h/6+6HsKYqeeXCL6sBIO4bAW5ZDAGDCebwRJyKaH\nqX/DyJxqjjVu3uCgwwGyus2ZrHKnQsDPbM0Lsxv0XWvUJkIfvNrXBmY1ciE9\nNjSrjijc5rbJQ+kd2fqF1wYfsSQ/MudpLhVCKUv2WOj6FXkUB8SEgai1BYPC\nJ1bM\r\n=zl9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/theme":"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/line-ripple_5.0.0-canary.aa8e43e9a.0_1579221390239_0.7620901580022235","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/line-ripple","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be4bea03e0ac2faeb7134510e75180a8f2222ab9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":33,"integrity":"sha512-kOZx9Xyp4jkSR3n5oETnWBXly22tQf5AXUNOKwPa2LSSpnwJGZU/SXB30WwT4Y7qh0ErJeMcb2QoD1AGwsa0ew==","signatures":[{"sig":"MEUCIQDD2LQHgrMG5sHy4G9O+ZNYMV+OrJFR/XGj7OZmrIFxRwIgdKGntG4Wlu38IlCtAmY8ts+YGwKKPE568/9Ve4GLMIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcVCRA9TVsSAnZWagAAtI0P+wXh83zl3IJkolwyXuY+\nDwuVLfvIwLXE6LJRjLbfTQ9RMJ0OmhXMKKzB63Wh2u/5moCMZu2rGo0qWwBM\nXUrgd9EIVvZuyMffq4pajucjK2y6JsRtvluVnl+PJVvs3boNDHpe2LJcvaye\nlYWMyOxKzyDJQXXlWK6/s4BC6gakvJJCDO+jgljmew4ty8FyP9cz7Jevbhvg\n7aU8AFEoc4ghjH/k14ngnn4fqQdWESzlDJramGe4WIrDefZfQzER//dBj8/0\nBSB7VCJbb+kJFWpDSI9/gL1myuMRPYd9rJa6DflvBmrHaZQp96Fqkggcnd7n\nLLhQWsocxcUCAVrdApxlSvQqjBVrY8aCisu8X7UlowjVIbtrYMNyaQo847rP\nHklZW5k5o64AdaheIyBCcYzZVnsdlQsV1wJ0tFyO7Zv6P4ixZmI2c3+rX83N\nRGV5r+SbnsBralp2D/TjkmQ0AorMXN5ie5tXz6qh2aFZmSnYXU+SzhT323HD\nzuxOnnyo1xt8M4kFBWF7ouTJjlmmZWPU2ys9zgExQka1aRN7na3AaeVwFofy\nx/2gIZPgKEyo2dfe2wRUYWTUk2LFAsqI8kdEpQ7b1os7T75f4NNZ4M4di4Lz\nFCLc3PbYvvbsWLFVkdaub5uOY3rvGr+lhBs5sffwDie0gy7qAFB+4C3uzsOa\niVpG\r\n=BmlE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/theme":"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/line-ripple_5.0.0-canary.fe1f3ca07.0_1579222805347_0.80278207453125","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf41496be3348568e1f0b2b9c1e1e6059885b5e5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d405af26b.0.tgz","fileCount":33,"integrity":"sha512-+Kd0sQOoAUa3leuopWOFSjjnuQTW7wpCceHJdk0W/DZ7Ch8kiNL/w4aerYOwT7552EWLCAvLx+iX7hvRtIQDbw==","signatures":[{"sig":"MEUCIAkySW+pAvYDrDZXab5RNCMp9hHb9vfYxcQvryfQO+F8AiEApD4u9mIyvdbFbAi3utLv8AM/waLvAr8l1lydwQItQms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfobCRA9TVsSAnZWagAAjAMP/RgaI+uY7LtVTRGRkbH9\naGcv1D+iMkQBvAJNHFj/4HTYr4o6VfHsnXroLWTAnn4jZ/mlaTgtoAuCvZHh\niSD+A8C2C4EVGDeKdrSDpBvrfqTLN6Ia7ucVS5LB1Oq82Fs26cEqS/9xAg/c\nKKxLZ2gnTl1eObsolKZCXgQ6f7r+3trDIzYMJonKmvj7aGqZH/b6heCKIhKz\n78odwWH8lBIGVZhuc8Dpdfm5WFgccmRM7zJwJxSQ6wjm63SMB8cQUK9lHXHs\n3prvvFt0CT5XSVY+2ODK7E3iGufBXQSIDBGNGzL+eUUJRhWABZiX4stI5Pn0\nlOiXoeSiuzZO4tOQQZ7TmPfodJmtnf5S09PgS16w/jXnrMmEC/IXxNUTtBQY\nev8pRa3bxjZVTDw5sWXI2kxoHTruuOsyD8w7lrTma64UtsL6dVDkG1OuiVbJ\nPAE+bF4XkB0p7Cjp/Ih0xTxb+vEI+/cZdmPqnF+xIR1L40uOcCZ9cRYuOGfs\njKo9PjTSctgBQMf+unRiD4T4Upt/UPlMMzQeE8NSB+uilTFN2CCmy20lrl2R\nK3XnZvGswnoLlGANCXf90TIFfvdisU9z3zXGvj0fFQX194eWV/lVk5IXfBEV\nb8gTWON7ATQT07ZvAv8awdkUbBB+LfeizuohBkilVkRD0jYIgB3HCYp2D4Vw\nVY9D\r\n=7UWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d405af26b.0","@material/theme":"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/line-ripple_5.0.0-canary.d405af26b.0_1579285019135_0.7243858315546139","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/line-ripple","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2e54f6be87942469082d8b60344ea26493493e78","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.6e857aae2.0.tgz","fileCount":33,"integrity":"sha512-z35bWkgOFkEAga94kjeRwKCbt+EGsXgBudED8N7buu4TFj/NFzOou3DvdL5CSr70/awdRmHk9gWUniRlw+ONXQ==","signatures":[{"sig":"MEYCIQDcDGJuJkAsQWeLGEfjlg8yzvA0/0fAo105mVvpBjJ+3QIhAK1zC/AgrG+GCkUmOe/yRZAcRWGgr6nV57Oof/UmCFZE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfryCRA9TVsSAnZWagAA2rkP/RwQJ59qmlyJvwhAyO2E\n+jZS27JqcqqQJNGRWXge7lTcIXlMa+dniP4vihMe/2I8kb2kuwGdTtdCHVnT\nydykZQQ9KbtHeC6imP4JGE3djXtH42w6YfaBJq5pHzbn8EUbtxauTkFWS/SO\n2Rzc44CQpnDBF/oEeP+00XZPlGpnZiqsaA70y/Dg7lY64TgqF4Ivs127bnaO\nFBcobgcpfxYxfKq1kJkp0Wm4ocCnpM6I4AdhTUlmGD4Cu77ApddaDuOQQHT5\nIyDROKaATqHsofkZGynE9ImRaGDjrEIzC0H1RXizVVkkNKTeeqJR/paWBn96\n7ahRX9gpPp4l2o9+AQhXKfOYit4knntqHOOAG0F84X36Y1+oHCkpmpZn8xr5\n9neT/YG8bTOw9vHcX3wapPbSINXcRrPRGIS0ot1Vhep/64UXOIBv/rQJuzzF\nxivfpF/d4SyP/s1aHT3OpMdnz+iFzn2Min8w1JVR8K8o2US7HWW5eaHazKPE\nGHxKYJ2dFwW90/+OJX1m1LYJo/J8oQBlnTi8AtciQUhnYaDQhRF5feSi5OX6\ndmdqfztpWPptimazDmcMgr94XrJsOfI/Gru2XuS0FvKUWuK/+ocNDg6KjXAB\n4dFuGlAk4C0bMe2nPGkHABVDsC9SSLP9pR3LXz8Pqi24FIGivy64mt0HXA/m\ny8+x\r\n=Cnqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6e857aae2.0","@material/theme":"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/line-ripple_5.0.0-canary.6e857aae2.0_1579285234153_0.9506568806202498","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"56aeee1cc0279451d5f4cf88244b2ca68e6ac6bf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.e2e764f7c.0.tgz","fileCount":33,"integrity":"sha512-fmMlmHVDsegu5SeM50vMU/5KOoaLvbtH1Z/Ohx+qX9OFnVZy8+JJ1Ca1Ya8lt+MW5YnuDAbxbvDTJl0higytKQ==","signatures":[{"sig":"MEUCIDR6kcQ61MO1BKJ2I2EcSFYpMQDquT8XCpVc5cHx0KemAiEAsbxz2tulvd/ffcKQsyHfv41I36H1L6FqKGDLxWZCDsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6ECRA9TVsSAnZWagAAOvsP/2bJOG7NoM9r/LMP/GGn\nl88KerZG7eynbFfVZWp2DuVU59xw2IcqtZdilc/KfShm4yRM2n2nxZzgOBdy\n5C3NLfrcNlvdP6D35MtB67acurkyIMkeknYy23yXCeKz1Lixmfu3X+qfgT1R\nzYkvmE6ZcIjD/90eA+JEh4yUjuufpaZmfHTfDYNdUpKghd8i+Xo5uhapycUK\nn5AbHD6f1zTqYGIaQjKL0L9iEUAafGnthi6Qu6IOvTe+TjalEDEmNv5AD+oc\nIxzyGpI2Ip8rRkuSTjUsBkVuacKyrBUgzG8OGwckPjxgC/T2xGfF9PN8sZXk\nA83oXWn0IGi6WgcNtOoiinqH/iEa+y+AyGQQXz3KU9NM5nqCkVqYCXNYXYOU\nfMGYy0vCDKYcIlDQV92Zfussvvlp+vMXUIbMv/q3KZA7TsxPzXgPc8/NTNcL\nq7SI4dZxgDUwAOo5/xFlvYNxVPD+1+0PeyqUF2hK8cmnfDyjhqI0tXyvrDPB\ndhB8couKXs3g389UArQXRjqAS9XnlhY90B7Z2Dq28xnfhasYyw4KmwB8PiQd\nti6IvHfdXa4XC3IW0Hj/NgKU/VC7U+dUvrwF+e9GYI8DrITE8NHogB5TgQAi\n6cI4jwmEA1TaAbLAONt2ki6ywXx0ncCWuqjnk2DfPiq0f1BsoI890gElLcVd\nYcEP\r\n=RlsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e2e764f7c.0","@material/theme":"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/line-ripple_5.0.0-canary.e2e764f7c.0_1579286146190_0.13283410330367462","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"26472c5b60b9de9759da7c6d3e07e1c7a40bde0f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7ef986a87.0.tgz","fileCount":33,"integrity":"sha512-bwZPKHKBElDKyH8dCXarsxB2L0cDzyizPCY4nd0ynZDgySbrRE6rQOksQBi2ha+U37u7cj5ZDlKvoN3AtFTiqw==","signatures":[{"sig":"MEUCIFnOFiB5mGuzuGS2C622sV+0l7Uwg/UYzQIVzD2D5N5rAiEA+oeV5B8vsEBtggSF+jeYfp8nU8g+LwQvPOK2DF0aW2A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtbCRA9TVsSAnZWagAArA4P/jf9kBCU3AEVryV4xmPF\npV30Xlx3zN4fg0Vqiln7fTa6kwVvigLQfEeCacCUHjJYL5IOeZsivRVoGL2o\nbQMxkZO6lKWxRqRrCW0++THowsrMg7/efKSB0pllwb7Xc/loTsoAWLXPqQbb\n071v4J2ipzpzWwlFbVHG1fCLaUhIGcY7V3atnM9AJQMGJisSbCp9EUJ7lDe6\nZ1BYGEaTOKv6r2801gpt6zAy4aNobVBP1AD14ZpfGxg66J/LG4EQmeQ7/kk6\nHqtxW1jqtGYSN5piTaVwy+wS1Rt9q6FxYmBFD0VnIPeDQ5+BLdaTvdln6+8o\nenQwp5sdUJmk8JIJgFiVUIMqhrRIvTLhsffr0wBPxvzaVEEMNk3IHV2PDDbL\n4H2jpYg9Lu/GjrR3U3addwJhM/oeMyphFfXWyCMi97wM4Pa5T6mXdBo8KKDG\nkhRpw9MTkJ2LbLWWNgP9tmrM2CtqJhvaIx3ah3+9f6IV1oW4ZQFedhnPaqFu\nb/U0coX+xm5BOTilysatvGOtb2wImkb8bwm7VLCcWxdu4a8/NBf5xzYQh+qT\nWdIOl+weIoxOXzCZORrs/J8yD6KEY0RPj19efB6frHlrovh3TH86XMPJyQeE\njh4A9wQx6Kyw0REWwZAu8IjMgEKeZR7BVpxug93VOJlbN9T6DFgOZdOjFizm\neQJI\r\n=GYHO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7ef986a87.0","@material/theme":"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/line-ripple_5.0.0-canary.7ef986a87.0_1579289434611_0.6642402429225533","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/line-ripple","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"80789910130f4d1c351142324bb517445319554b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.29402e2d4.0.tgz","fileCount":33,"integrity":"sha512-hv6NQHiEeHXdC/2Pq7322ttusucc18dnIITduyhuej4UljgeVQhbz+HDVVNAFf+CXSISoVzugRMQoi2PXpcJHw==","signatures":[{"sig":"MEYCIQCmoBcZjbCuE8/PJ255FsGMJdshND3jepAivcGzwMnibwIhAIi0/IXFDpLfvU05WFWWf5PDNqZdg7eaV0mYFUhl4+Bb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuHCRA9TVsSAnZWagAAHMkP/2Opv+4fUKvn+QwPlFb/\nFD0uUQY+vPiRjcY10I4dgxDdLCqZUAu++/CVxLJeLW1tTflW5jQLVO6Ywy6y\nqZzXavH25TZeaM+4Oh44oD5H2P1ezFI8rjnITvxjufMkWnypgplg1IsLaE7/\nGvDJIdeKYSvMMowqOxzN0KT/kZCe7eDyYg08JV7DrSLXqJ9DwkuInYCafef4\npARrtD2F70yv2sWF7KuOq8KedeOi6wrpltB2+62RKo2fdGMYiWEl61h7Svvz\nMKXBQo4YG++x/M5jXnzMJ9Ryp4Wg4JnRv5kIi/PLPt83xel6WQRdoBXHlSue\nqUHG27UmhBxF2HcJbwYlyahIEVc3HswxGh8/7bDhHVjS1Fj2y0kO5iafMVUn\nyBtIVFt7gA/HJwVzaye5fbIhGYSqzGtE2hZdNRtn2eVqN4YI5nZmLiqfJJkm\nnHfl9bKHc0xcjH88oNMou6IWiQIdEA3lV1kRn6s6d2Xn3BW+sP7mFg4cRFWQ\nRCLqZMZOaTaiYyij/ZqQFQ2wj1EZ3RV39JSGgXNgHBH25Fczow19Oi9IkX8v\nHCVRF3kXGXRsSgk0jnodRsi43kvzPlWnQLrWJO90pou9TVwwn4Pkg98fu2NA\nMSSn6IgqCu05wvsc/idUSDLBDY7fVdlXTmjdG42FRYdw43BhrwdZT70jzH2t\nex52\r\n=MCaJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29402e2d4.0","@material/theme":"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/line-ripple_5.0.0-canary.29402e2d4.0_1579293574601_0.6731314487282181","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5e5fd7beb6ef3de34b4a85344084c6dda4b4f83c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.2b3ec563c.0.tgz","fileCount":33,"integrity":"sha512-D8p/gJC1RoSeoydVga0j7G9r8TBfuzs5VMZUDGyV/6UrBCe+f0MHD0oSRf9vRE4Zk4w5OmjGjtA70Y64sJ9Ldw==","signatures":[{"sig":"MEYCIQDaIC/bDVnwORku23+82ioFQPEkfK7JPxaCqAkP1SR4dgIhALRcC2wau3Ds08htmr0XDCSphKH1OI6EPWFirqyr/Q5D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8UCRA9TVsSAnZWagAACYsP/RdUFWdT6yePHf3zoQD9\nS20zZOBMSfdyTTqAeg7MvN1YfoZaepqVWLzmZnHU9qq/qDhuQYKVQL3fBdyp\nW5/Ie1RJLHGIyfTwY1KbLq428dthMng6tUog6om42XrxRJ4qWSxWYK165kKm\nQvFACud1HXKOpzhIU0xU9qeVKz4AzBYC73uSD7skLfkkacoQ6rK0ItZh8nE5\nTxhNXurgQKEtLrBJ79Q7QBf9pAfbcm5A2QTA3HZ6eUMu1slxMj1wS+kWaQAg\npeaIBpH8IQrU8Z+o2LRkWfWcpzlCaoTMFULeKsz4aJMaZeSdUnENATD5zANT\nq5GXSs0s/yibee3luE1ieHypItfvOIisOzjNiXzpFUyGFCLC8YwGClVfGguc\nIjFKpcK1lgmjm3Pe5GxEzLzz3tRgGlq1cYlq8onSVf5EweKCOJsqpz6rvoNf\nESPwtXGijll6wrPvts1GtKtsWeq6pNaTnXtMtG51s6OC7vEMOk1uZtZhl0pZ\nFMYqwjIt4i+TdVyc/NNtPn8XSnd+QTL/WzQMN7j0c4FigoKysqcGvtv07hie\n5+m4jjOy15ZczdOpTDb7++tiCL2+PYYriXCNyAG9YdQs4K9g26PtvRQG/hTx\niZ1K3S0Sgt1MPAOBUZs0PG+h0759iEE+2kQvVX1WnPu6rg70HBNdcOJn99rF\nxEJC\r\n=F0fh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.2b3ec563c.0","@material/theme":"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/line-ripple_5.0.0-canary.2b3ec563c.0_1579302675819_0.6172856553349808","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/line-ripple","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"53e4a1eaf2da8532a2e6c9efdfa1ce2248ce67ed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.e8a993677.0.tgz","fileCount":33,"integrity":"sha512-PiZDUvmEZNlt4PCLYuhaNqPVUVJ047fUdbpGkmtmphnvcBN8Eqx30s6zqLshSgWTNuZ4EwTC/KYya4l0lJajGg==","signatures":[{"sig":"MEYCIQD4Lbf476nV3wWFS5JKT7FwbWu9IgH0j3AStLIa8hIr/gIhAOqNWiUL9TsWS5TGCJOzT5u6C56Jz5xjNpiMT2P1k9+n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyuYCRA9TVsSAnZWagAA00MQAJOFJs7IPGxLj9aWxPcd\nFvIawaUmIuFbRUxWu43EAAXOu59h1DUYkIyZlQlAuxsplt124vH6FHCqO8nS\nj5rlDVTSLplkusZZTk6DPJqqmvlRmAI8z7V7ShmW6QlEqI02tVHh9eki0vaH\nCx+pgLh7jwXy0zi6BIGwOWcvM7A3dU4BPlRLu+8XC9mMRHZR20PyFSJo0PhR\nWxaMuPf5T+ftPg3yz9DKStf3Kjtpu3KzNiIS/HSPBS1O1WVWCxQntzsq6OMM\n0MclKKWYNTB1JrDzQm0JOvP3GzVkKpDttzucPjAjpz50ewcVN+2ZYiMRSVf8\nfY7q+sTSdWQMsTqt0AMGVfEaSya/AebOPHv3cGlk3P5eBnCbEINRWJ1WHqiC\nIKQLqf7IzlKSxyYcRbaCmf8BuVAoXdoQFPwyNFOYHcg3InFMbgfnjI/qsaw1\nQQJOUMnL1t0bwqd7Iu7ejuwSAR/xhdp6UxiaQCH1Ruh4kTcKZQ8wlJ9jdWTE\nkYowGe0/N+wzR3OYFQ0S+dRA/7Z2eXHosGvfp4UIEx6QwmYUbVQNTypUwAJE\n8pcg1IOjvAUx5fDi1HM4ZjcWd8OSmFzhYHhDF8DTlLSl8UIIfTnU9M1T/VS1\nVQLHPkfCBXeylRHDwizP0gNPzFNP+EAa3DxcSSUDGV1xzFBAp57J/9HFJ8i3\nNY5T\r\n=ecSG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e8a993677.0","@material/theme":"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/line-ripple_5.0.0-canary.e8a993677.0_1579625368490_0.6124439023785893","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/line-ripple","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fb013e99ae69647d2d3767926449d281c04fdfda","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.cd4903304.0.tgz","fileCount":33,"integrity":"sha512-AsU0lWDnotc8zKJmANGyTFPLyLgGkDEcu5LYNTOYVfHZhHAzqXOG+iiQsNS6aFPaZHZmiWp0CRp+cSr95Uwesw==","signatures":[{"sig":"MEUCIQCe0N8pZ1P7VIUla7krDu5fje8nPLZ+g879gK4jcFl+4AIgPjKAfiqp3n7bQQvA559EcE9R0sxBxXD72xHOHvYKXAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28ECRA9TVsSAnZWagAAYAUP/iDcoYbvGprVTVfa5jhX\nGIZqw8ZbnIr2bt54JqPnuW1867G8iXWPSPmdF2sa8q+d4Izzov+g9iIuuOBM\nHNDlKkt5QqLBVfgTVGMH9jVVvkSZDlsuRNLe9xUU9pL2ND2jIB39/KH3Nhv/\nCwUMh7bO8ccCvnVDohI3Bnd1tlTDt3AWjZ8TQUYpDpDZ7CBbzKfeOpp8pE6o\nyhuFq/TCxsl+aXsdfEvksRdKqM9rG8/5u3HqTS3gGvnyxO61m0jB073azgKT\nH5JbZv8+hZkJA8HhGlJgDjnXBEVC6G89Fc16LIRMayPlysxsZPTZTi7e35nU\nxNkMLfkiXf/d4qdFVw4fW71QU3mwIbutqd6AZlscjrUt+iw+pknWsPN4uawX\nzrNjdj3KxwMZ0sDdw+c0hUjuJS2Dq+vhYbvJ8FSEE4gxR+xHGu6ojNCvCY3c\n0PReq0nHR/E8vMxREizac/q4p99B1chXUAJb0JIV3uPvFNE4AJTVggtanH/U\nuBzUYGApq8zOJ6HYbuCHQIM557StV8thTM0rRy+xg+JyVm8OHTh4lBhRdefk\nh7QRg1gRDE6xem2VRBtE4gbI/uZpUrfB/TYjC3reg/QXd7eWgy1G774Gl62Z\na0MSYZb1LdmI4BFjqxDDzGIQfRxDl6pwPho/7S401FmrDuX3+raDCjVWenRt\nxIAc\r\n=CQHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cd4903304.0","@material/theme":"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/line-ripple_5.0.0-canary.cd4903304.0_1579642628354_0.8907483033120567","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ae291b687f423537204a5bc3ef770b09a3f52f48","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7e4b04b25.0.tgz","fileCount":33,"integrity":"sha512-2Oy7GgkPr5guFy/XZfAOGiavoNJAMSG18WI8wtjBCDZeKtRUZwoxGJmtyRiQb6LEZOyL07fSVxvCReaWPmlO5w==","signatures":[{"sig":"MEUCIQDaaAHo5cUENsdV1OAYH/9uBonQPWkBwj51lWfRmHXWOAIgfcfgYvI2HsUrY+90CFwjqzExq2nHZfa+i4WKkSMJA84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38hCRA9TVsSAnZWagAACjoP/iwH/Nh+88/1IBPmeMwa\nvxErjYMl5JOKN6yyFXcs7k9bqjSCas2fzlef6oE3Ei2JeN5DIqox5H45KT3r\nTLRpws7JcpfEedRF/b4PFCzw9gUAdKgiuIilKXdoAkMgot+4R9m0DMMCD8BK\nnfWwylc4TUmdKCXnNd5iSS1FS4TiC3Gd2UlxEOSzJ4+jcARciYZnB0ubYpik\nVwLfkrZKVtBOzfQVhmur8uOYZTU6Axp+TDsl4mwPhEwNAQHcrzXHJn0CVO9X\nezkHRmXhmEZMX0E0gV1nYgnd+wyKmL9pLgA6Mk5ZN2jhdTzhSTPK5mfJ1Qfn\njQT665knbBipThdCwcdy6prmHtoZXojEyTz0gG+FV+szjc+nLzfzTeMRkOTR\nKAvSa7qtXrU03E4jT0mMeqEqsPjidE1nrx4SyyYUdRPTF4rSZA+k1E23E2Hy\neECEgnBZBMFBMRAy1OGtXxZNBT4wNsMAMBCB0yZGdKPJWIkxxLxmlazKmVY8\nUlxAOM4iuf9abYuxevQe+efJBoFmidaOfQFvYj+zFRk6wRivRYPDSNwC/3uv\nc1YTL/15Xvy+rK8ucXleLKALaouXXc2OQnPOHlO2Bkhx8brKgAFlkxtIoWcY\ntp8HRhmm4T/YDaZ0cCAyY7RNGjKiolwWyzyEiAGwKPZB9uR/lHdFz7FdMpB4\n8MlD\r\n=OMVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7e4b04b25.0","@material/theme":"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/line-ripple_5.0.0-canary.7e4b04b25.0_1579646752965_0.9012931436086602","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3437bdfc98fe6aa2005a912e6dc981a5c457b405","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ebc296937.0.tgz","fileCount":33,"integrity":"sha512-QtLZ+/fh5VB6AWyxBSW140ce9ksmIekc4ovaH7MEMeFxX53q8xZuKeZu+tjQm7oLDY5FufZUC03MxK3Bme5TGg==","signatures":[{"sig":"MEQCIGMdXwm5ZzlL6/96j92cn7CuJ6ajjZYCa9Rbtd8OvgQNAiB+TIBDKx6YGyBQjH7FMVjZmO7vi5f8g7IA8sAGNVykQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4zqCRA9TVsSAnZWagAAm9EQAJyXZ+PUPY0q+D6GZ/cF\nNUnKgTUCxnK4W2JctsN/mwGgRNYigAMVHqRSMhMTwN2ycFyvhjzse7yQfC+e\nNTEZNmb6We2LWBR475GTQxOWXQnOTWGEFgzLFR+dtCVu6a6duYysY07lMtrR\nPR2oQaACQh0JnB2udBivlEwXCiOaf3N5orVmJ/bP95hcE+RLTsWoab8gTB+j\nicMCEOWWUnwWii5ioXuFlWrqO0OSAR1TI97MG6zm8mBxDzNsuZJWp/y8yb96\nCEpm8LeTg+QtpOUKGH6tIHZw3uYh7bkK4GDz49wC0WD5X4lgSN7Vdr0K71Qs\nAo+Z4eQu8v5MRM8ChsNhNmjpAsaAHqSNslvAY3L6+ZoAIGdUZzTBWvO8ch0v\nCJ0bDPsBNDrqywsHu/kklI6sVeBoXbxHtivBRz/OVa1pek+r+NK7LxDsIFQw\nETSkq+KH+lBpckefkoPgAVRkggTEFU76bZjA+nQtt8WmcWSzf3vm0ZAtzF8Z\nceFCESoVXRhUckObxSNkbeUqQwZpks3t7q3v9AKNO9sfAPqGQnTlfngMSXdW\nf6hwC8ZaiCZCUZUr6h/HH7JmUUQEK6SlYll55rcfCDwnFIP1xSFl4xcwmRLF\n5omL/zr065iQyi/NTXfx0t45abxvr4KAR542EXwm3DBsqWVdxsXkE+0WyYbK\nS5t6\r\n=7g1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ebc296937.0","@material/theme":"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/line-ripple_5.0.0-canary.ebc296937.0_1579650282267_0.5223750083613952","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/line-ripple","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2daa6e4e3f70019c1e8275c4b824aca2d81a4048","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.cf33f113d.0.tgz","fileCount":33,"integrity":"sha512-FPC7TgxY+nqdeRGQAAlq9ZMojjKnrcHCtiQFuZlL5W6pFqSgrRjTgN28z7aqm3bM6f/aAX6C/HndH9rZNTocVg==","signatures":[{"sig":"MEYCIQCbyWXtaSs6oZL0QNpL4rt1qGFmHhyotqpOdEw1kX8qNAIhAM9dxPLlwJXGLSxQ2C6UiJd9dG/WYp4FYnDoS0oWfpUy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6O/CRA9TVsSAnZWagAAQpUQAJZWUih/qdg97PqlTNGB\nYaVCV9/3cWnXyWk4kb5PV8IsySE7eb9O22b6tydITxncfOcbEFdNFwAa/Bay\nVt8m3pzzviNqLHVZcKRvp0gMrkbDGjSyLl4/Mq1hD09KL8FZERWgCbr/GkIc\noW8w5SoF6/wu+19wmBr00uarp15B9v5CZXfhmq5HGJhCh4XrRQN+Sd/iMYVR\nWB6BtKxVcYBH2XT7e5UrpTTFUyWPfAX4RRPaUZzLJL21JeSvX04dua2K1NoS\n3s4wDrBPJMpQs737DTp+cLJV17nGV1yF4VE3k1eg2QJ71WqIfs9Dh49gb+gQ\nUksIHuUaRKACEydSK2jr4j+RwKLDDbJOzq9Li6ywLaFffIWO8PncK5TW07kQ\nSm2mBZep58PRfCKDdOFKcCOat293dJj1GOcKXe5U+iQpWdfoKQWXqWLuRIYe\nMQmeFigXrAX8EZZ8h9F25sLoSCQd93kGOfjjB/hH3o3mVKgUe/Nze1X1joHS\nnqULbsCobKwiyRirLAQGLQZAVoMFX0y1obXVmTkScrpIl+zD0E0O0jLQFswX\n6o1nNPQzbvNDwJi6Rx24SQif9pP+TK2fnOKB5APB9vAveram+WzFgNkB5r9D\nYqJn4kjglnMH5C65tqv8MHHoVcc1r5SdQTayDBKEj43El5sdd0NiauymiUOR\nl6+L\r\n=TF8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.cf33f113d.0","@material/theme":"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/line-ripple_5.0.0-canary.cf33f113d.0_1579656127101_0.7226034407139723","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/line-ripple","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"351e8376df485c72d3f85d5c428a81c5975deb15","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":35,"integrity":"sha512-SXq0WwYzhPxnkib8THItqCWprDpquspe4CwdiVirW+4vtMF9yx3s6Pxv7KxQxSQQCiV44KGB/QEgu53XMbCwjg==","signatures":[{"sig":"MEQCIANn9HHoGivSu8e0+nIYyykL+FGk3Dm1ny5IwTCUx+RLAiAV51k8tQsqsApmlA9lC/LjkeSMJ3/WgsUgfFYg0I319A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH5vCRA9TVsSAnZWagAAd/UP/j9wHAG7GKwBp7gB+wKx\nr7iBsqTZF8TvcLESi6uyYpqm2Le++GMp8KDSsOKNTNZSel4yGyb7rGnr56xf\nbMLVbVZgBbILUNGopvirS2RSxVdveI2FJtpfLcOnwO/HWkgUQcQrogKHjgtn\nGEAeP4Q+CiaK2x9vfSGnBuVN/bQJDUekQAyfPHzywwHM5JqaDia5cJIl7BdH\nBRwJc3PB9y4p42fjXCTDMRAoOFPMWDjBll6Xckiej4d/N6rUN6gdXOiITHO6\nm3YZ7TyQxWRIZo/I88lq9WQLiqlnbqOgCF+wje4zMtzPqFZZ0YUyVs+VCFOy\nx3s4rvFxFFGVBHx0U4ROaq9Ie7uXIgA0ee1Td/78QjWC/x8RvSnIGbJtYSOJ\nzmwxTCfc1CmTdo+cBe9eY1I1G3/P+8S+dY0QpMqef4fRKYzLdhPnub39vmgH\njxQ1wIi7QpcMHKjWwPu6WIbFaX77L0BmzuuspooOXr5nLBMFfaVXJrWzSe4m\npa3Df32gjHe/w8eD5MWIf/7HUbWRMK1Ks+5TlyozhB9UctvO8Quab3M9tZTQ\nwqnUcMEZOQ7kMKxRxOAR8U2X/6Hl/s8ZLEphPTses2IcXsD+S3/uDYnrEHyo\nLJYpWV6MR4tAIOrof/tqS96z4kiQfW4L2S8zmzJF9RUoExFSkhhruBYo/lPA\n5N8J\r\n=je/r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/theme":"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/line-ripple_5.0.0-canary.e1d5f1be5.0_1579712110803_0.5574732356991925","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/line-ripple","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"534f1f3871a995a28a8426dd6437a6fdad7e6abf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":35,"integrity":"sha512-1+fFvsCQEN74qWR+63qI9VdWUXxeMWZJieO0E12SB8bkq+T7Cfb14/YycWZzk0lO5oqBoZtMgAmVrwreFxGg4Q==","signatures":[{"sig":"MEQCIF80+RsyUUoCc22w7gd04VImVZZv+yEsdgkLgKu8Brm8AiB/L2aObNBHGmdFbkKnFunX6979XtB2hQvvPOlDr+ng5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118566,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI0ECRA9TVsSAnZWagAAt/MP/RJA3ErvuK76x9hNIXj+\nJDN87+HFIjOSzn50RIGAvmjNeaVMlI+Q2BxJ/2fI+KHWWFjS1OsHpKuxiGAU\ndvTy1Vp/vOOQdsZBwMobQ4m0oNgNJ+2C/z7o7tT2i+FS1afCVF7rBNt3NHEE\nhRxAQCJ+CD31KobZnVRKHt3Wibj9qF2DoXx5pQzSvG2riYprIaD4APu7qG0g\nnrkJgWj0yZnBCv7SM/39It/4R+pNF9aLky+8k/kACdxG50I24WB0UGUtpOk8\nWQCro1sYI1pjf9jbzIDjsZ4PbwVo07gEob1Jh6ibNq/SETQLDm1K+qg/OeOD\nbOrY71dWnyGTruyP+55WjEkHUZq7wcHDiX3SKDf5e4F/X9WYBmrcRHTQHqzw\nBM3lk/VezHtTspKySCwg/T1ANcLTUfJiewZcEcMhzxCtu6xpBVFoiKFdn82h\nidpEQmIjUmlqcDWOiCCNeuKemwpNhGDj77Pbj9mXYhQ8uGCY5heo//GWVsoW\nkcH/QOIzvlhot5GDhtDbFqN+90jTJJ3BEUDaLkbHV0AhrDrMEiPiLyeTu1BC\nTdUUsRDozW6fpQP75UBQ8hnWzcMkIPIQMYaETIsPa1FeQ+vuQqqMLEHQkc22\nNLoqiHrNB3HKQXZiQmsgbeUXM+Cx8OpcgCPyGLrqZQmxijyCvGs90ain2b0b\nTvL3\r\n=vCOq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/theme":"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/line-ripple_5.0.0-canary.6b6a4ff92.0_1579715843943_0.7867203581127549","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/line-ripple","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a950ef4330b18c3b0d308932b4e90a92e116c80","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.6092f71ee.0.tgz","fileCount":34,"integrity":"sha512-6ybvHEySRrPOgNjTjDTdtVy4NqmAQVx1jv2Mxuets+g1J3mqH5nwUUwZpi7st0NS/aLC3B7M1R7rA/xe1Iqwmw==","signatures":[{"sig":"MEUCIDNxywSpkkgODdkbonYXNoH57sIjF84R0krTapFMoZBDAiEArumaq6GYNl2hx+DgeC4MSv+Fy+CoDsZ83NsFXAU6jLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLu6CRA9TVsSAnZWagAA5ToP/ROGlz8TqIHvehQaZYM/\njAqj6wTqZbrROLdHc3cZSGkkuIJamN6lxg30lSVHSKDmO13WZmTRcXCfz3Yo\niKXMUpVgD/WCEZF074d2spi2RuvSnfZzwngYxqXhQpFApNz6QrAuYmVnlHU4\nINGWKdPKzidXPFhxXC/LtP12dHGyRmCJ6xvCI1Na6c0bccRCKVYq77xeE6w4\nvSWkDEgmFQgZ81wgS0T2wAfIWvOiXFcq/ojQQ0I2txnDyokha8g0OKRMAXys\nU/wVUMEFUbDWGZD1j/Q2ppozoMRVbxLwn0ufKJxEExfv6zFXmbxGnFV/b+FX\nTAlr86Ktsx1RwP/kFLV9gydDlbMMRC5Y3Fp8fO/yPK5v5c5buYVOEN7HhvZ+\nPoReXLT5X4tc9ax6UPogxdXi+JKrSeUDkLnGuauHT+BSQDlN5d7DE2YCInZH\nWUaDdpWh3CsThih559ISEVdxSV6vVp6GTN+o4EX1Y83Mwnq1+cK/TEa1aRd+\neN9pFpgHc580d3GBRbXM4GBdBp4d5tFs2NyzjCuSKce/uX9cw6mvRWTQsLzR\n2VupDoSuBBRY1oMYMLYlxlc1OALz2rId7SyzWttd99PJNKgcvhrYvz0AeAAg\n/iJPVP5qF+hLxqKWz8pe0TiAuPoyIwdrFUwf7St2nY8tTPiBXtUW0wbrsaJd\nXCdO\r\n=2B/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.6092f71ee.0","@material/theme":"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/line-ripple_5.0.0-canary.6092f71ee.0_1579727802310_0.26272302191438746","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3bcb0cfc4e9318dd510e0b7b877022f49c5001e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d8d95020f.0.tgz","fileCount":34,"integrity":"sha512-RdRucf1jN0rAb5ZqejwDxJfVzIthi4Vcylv7b4l1AU7vzF1/B8qpp0SbQVuj9XkWTzhSvc99l3aYz2yfjlJmnA==","signatures":[{"sig":"MEUCIQCpQLmfEVAgjAjXfyexVjQhWkLaRbYKtTrSIlQajtMm0gIgCzUtxmvZ/wpGsGB+fVtAndSGKOBb7PFX646OR9o+XCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNYcCRA9TVsSAnZWagAAxe0P/3SJbP2MoFmUO8P8sALc\ng3HQJPo+jYrt/rprFJdvOC2JBh9YpvUMLZxbHwLqRwBBkQ5ZxJ3ojYfqYMWw\naQ6bKQEhIxVa4M1W9XpQZMyMHeGCF395P6HIlpNME0skdhzWC49zibcsUfza\nqRAGoCNLqlYg5ehNK9vh6oFnS4EpH0dKgviHyMk8ZP8P99yiV/kf3rDc+/6f\nImxZ2hLRfFcRnP/13dy3P86UEYaRBup2vOo2g3edZIoeqAsDxIhdilOM08eW\nMhYeR43rkYt4hRgA29NDX9eEnG/dCpcWYJTZF7aOp803XvkD3K0uzuOG5AIg\nJJK3eIr6a2Fu6I/BVFqA2ekIs36QjAgM+N/bTea0y2GwtEB53K5l+YKLc/Tp\n1IUsbSP8VIiQDO3bIYGyjzwF45SzeaqAL566QbmrEKNY3qc8gSrfdI26kDAv\nAQDM2y3KALktCR1m9O5/MlESZzaqNQ6PNdN7dv8QOk5bbX3JiBJfeRzll6El\nPH2Po2dMCycKZMXp1vFM4iWuZN1U05xJjcGTFeu/kYN1kiuXLDDmUaFT01pa\nHchL0YCXmFt8Pw6hNV2OYjXLVKI1TuXag38AbC94pHd2iy06x7SxiLFrSSlE\nyml2LEv0BoILi9hObwnX/Ic3uk/VAFeQpMcVPKFFonP/m2f94d+edPdeKUa6\nU/gX\r\n=5IoB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d8d95020f.0","@material/theme":"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/line-ripple_5.0.0-canary.d8d95020f.0_1579734555765_0.5004741761254778","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ca5c76974a96518bee9418e58e30205a771ea3b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b7facc628.0.tgz","fileCount":34,"integrity":"sha512-4xJCHg65FIKciMT/3yvm+HlSjwtPup7EdQyTs6Hm5lub5DBxoZo0RjmXqq98kHQ7W9mSFGHMArR8vvkOxVciug==","signatures":[{"sig":"MEUCIQCG1r0xCswHEzMRpIBwAXYxWSXCabWd1/lN9KiWAY+mYAIgbsTcBlkyAkFedaL1hSaHImmThk4vwCkRfOylF8W8JQQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeIFCRA9TVsSAnZWagAAxtUP/1Foqc8R4qZ1uYul3Ahf\nE3Rpb/TX+k8Lk25ZEfSJbp93yZ58IaxA6Kub/4NFrx+EsutHDtdh9oWRcR21\nOa4OBNafNL3z7JSz4HpxbN3eE/Nx97C2WRhD2yXRpDv7ke6/S2tJT5KFR1MQ\nqShIbKx33sHAHG6f8n5RliNyn1m3/iBnMfDc8c4kC2E897qaafFIb1l2sBCx\nRXBtzNa3NYxruKgmPp4A7Ye9X5JOmJshdqHe/b7SB6E0GkQvP7C8y/UyxH0N\nQxRMFKhRH7OmSalYtm9GBIZWczavbC96MBq5llIxJ1LWMlx1DNNFTdalY9WC\nBTitcXEyxUmJSO4uyXR/Xt66EYieVLwBJgmsxScKZFaHUt13fo/wg/HcX4Y9\n4neJzQQslvlbERUF22t+hmWfzjn388WlUOLdPz5/xYhZlMu4jnIGTI8uBnMU\nCex2LWqy2elTTlNXxaKqBjxPnNnHVvxHKch11Ex456BRmWayW7rgyvMBq5h+\nZvyb3wsxQcLdH5VhGp+MaMy3HpPuvTV+2f38ztPZ1nQ+XPTFPicROCSa2b8F\ng2yLlFhuGLWwchh5eKPo8f1a6o2XBbgA2GgzTiaTMU1ZDZvxJiLCFOUKkpIx\nvZmvHKCf/n51UvxIv0WDqSSfFujhwQEnf+PLZjU25sMauYBotne+USoqfMYU\nA/Ie\r\n=68xf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b7facc628.0","@material/theme":"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/line-ripple_5.0.0-canary.b7facc628.0_1579803140535_0.3360067624578389","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/line-ripple","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fdf4ab4899462754e49c55c81855ba0283008a5f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.63f357dbf.0.tgz","fileCount":34,"integrity":"sha512-nkHUB6eaXoguZEX8Zzx+2HLbKdx8uCOv2HA497H3oBnYdlLQlY7pzh5pzb1iSDKBkoEPQ69SK0Cux++WVOV0Xg==","signatures":[{"sig":"MEYCIQCyjIDMpKybhRu9SSik4N8+7vqjpc59v5KsmzV4e4K4WAIhAIihQJzSlFagkMY1+5Hjralzz60xlmoFBUDBJEO03IWs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhY5CRA9TVsSAnZWagAAiw4P/3odwBU59xJS+yeuZrVJ\nMVR49wTjTlJRb3GfkiEraptP9iX36I+eQmQAdqY/O5Sa/AMWQ/9IZw1xgNp7\njGiIP1+RrAH3FWTWCVaVmI6arKNMunWKGlJ33iKY+mw+YoV0FPbHLXzD7KGs\nV4AmsxaQsV2cKtu/KCJ39jzcLVMXvBTBGOTDuXIDm0Ehw31imtrzDnp9mQ1z\n7SBwRiqAKbEwvyowJBqJzKhcMekdQuttE/l7La/DTaWOxBDQ3/181iNaYwPc\nhp9Hg8v+YB7TnT8svHJ4TLbklJjs91nJsbBX8hIBQUw2hCAQTbz1SzZt/lRP\n2Tsjv/+OUbzK80q08H2Y5ngoS/d5WDsz4ugQCYBDl6mcLJkv0At6uifeIgh9\nJjsX7IUC+TZDa9aE5ZltRU5q+DDZ/tPQc6Jgosd6blyUCOwOHN95hGpK18az\nv3/YXiF2HugnPc1hxmdl35qcBCbqOkYQO5eF9st2a2BtvaW5BKaOLDSOOESe\nIlPR4hwfxXS97iU7p/xoQHXCp8Ilmh0LJUeUx389sgHpzgz5xyV+/jG7ALkr\nhlECGZxbvdtczIwQwlw7dLxahOCjIZCemZJIbP6VGRFBRHbfyHK+igcs4HqM\n55JgzobGLk7CvSpE0ZBf8iKT7H304Ocashc0E5ElcXjsJCqzvYel8I9tl2gl\nLBJ/\r\n=S7YU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.63f357dbf.0","@material/theme":"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/line-ripple_5.0.0-canary.63f357dbf.0_1579816505108_0.49769748759290544","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4299c34a6f1a387e539dd5f6aee346120921a40f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f2426d26e.0.tgz","fileCount":34,"integrity":"sha512-8NNOGQL71ub4AjUoCm3i17PF/c6r54fM//iosRZg88/9SsiCQP0CzM873/5K11c6V8RqfBoaLzsPMrrMuM4nPA==","signatures":[{"sig":"MEUCIEpHmJHTR1vLla2zU4u2CTghCSqz9qeOspfczzcVqLOYAiEAirAIB56Bs7vkG5gsKhQDr3TeSIzAoRpxScVtVbOKouw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjJXCRA9TVsSAnZWagAAT3wP/2PVFe4YoI/9OI582EZo\nP/rtnxvXav0iv3bW56U5TBTR/Y9nG+koF7gxQD3GHPtJMnznUlaKx3gM4v8L\nq0H5bJ7J5HpUgt3BVGIDB52B7eqLsG/RYxc0WhzswqVQWISQtUkInAM1ZVq4\nyYqFNPtzN4Y6bqvktnWtOpuVIJNntVAia3NWZ9zPekH73Uitbcdv211RqWPs\nTg67MjFEXPzNHSHcdHRfWBjyjkldRZCafqDiuJLsthrNkjcO1+A4s4/N/5L1\nR73t+CR5PAlqUgPt9X6ElGWaKwmSvir/9UIemQH7sWE4/FiSVBt1o7wu+3U9\nZoVilWnEGq+F6yceAR1fUWpQ4bkKAnRWuKCDy2qT8Rv8rQysVHHxcPnvR35W\nAu/bKQGPyLztHSBj4Akv//xxA6ZUSwTcooPFAiCPqaN9TqJUZ38wOBPDH9bG\nn5OB/cW1CQgnDQM9grG2MHazJg2ofiJ+yMkyWgclrrxt7fxXivERYlyKMHV8\nMHU4lr/AcU3UzM3llXsHsU8l6m5jNwQI1tEtZELSnwcdmqtSoreBFzgKp9Gr\nhfQQZlwZOj1a5XUx64xUR4k2KtWRflb2bYdwjrZC0XDPd/hvgv2DPyWfEM2Y\nFPOLztIFA7C0rQs2nJ+8pgXrc/i+ict5FzLqNnbiyeQS/Bvo5WnAf9IFQ7Lf\nO9az\r\n=snb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f2426d26e.0","@material/theme":"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/line-ripple_5.0.0-canary.f2426d26e.0_1579823703430_0.3989313875695555","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01feedc641882268ba31556d0a96901ed5ffcd5d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":34,"integrity":"sha512-DgSwMVzby+i5YfytCkLd5nVJn8CzyuPVk0Wl3mrmjuEFQNuNpm610/US4HNeoL2aKSuL2sYubA7btg38L3FU0A==","signatures":[{"sig":"MEQCIAV5O+Ksl/uZ1Bm0aUhPvYsFetTGoQEGd3RsaRwZ1WiIAiAwTLS4Cs8WonzfgDd4yPPiVuA/x5J25CwJi6zVMHNeVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx+ZCRA9TVsSAnZWagAA32kP+QBwIYqxov92xuR8nwfn\neoI5gSbzRMcMptAtk/Iwgszb4t/YEHNZpIS5BHa++fy22Jm0s2+tewvG8UgW\nMx5/v1x8+AYqtvE6He0F+VmJX8c2KG4aSe1wmQvaElzoRp9TaDfHhUKO4ikk\n/9a5ROskgbi56S5OxMveJojshmwbkQ1KxH3cqHvCuXpmFjczawFxI4glMCNg\nORvikeZhPv3pHkIM6+wEPu133D3c5i6FGFfbXF8euy0lHqnR93icSC1KLPyU\n1u2kUSt10UJ4UnXE0oXm2GKspmHgtikSOc/y9uJej/AK5fGOXbrDCRrhdGZa\nU3ues36Oq4DNx5IVMYaMbsKbOKefo9TgFyWzjY0/dtNqDmgbaaNceoYOCXPU\n0AhsejyCAppjl5eWWzMQ0CqWxdQs7Dw/EElGT8qeVFfDAXoDGOUGpquPceQj\nk0zJ5Rr1ZTyYKGJjtIEJPEM6ZNJCgv9mcVzqzCDtCmM6YgWFTgk330NHUI2O\nFJ1A+hdgg2moMBQW25yVbwyxmbcZthWswLO5j+7nwHAEyqFZjHGjIt9Kuisn\n3ZZVcG0uuNyEpti7mzhlxD82yRK0zVXHrmPTD0yH170Bbg72luoLPdHp0AQ/\nMx9NkKXzs4XCRQFPdtzUDcpMmDlKXe3F7lWTJVfDSMwq1l+MF8ubV7aomaxC\n94Ps\r\n=eF5Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/theme":"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/line-ripple_5.0.0-canary.7f5e0c23f.0_1579884441211_0.42145084341182915","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"48ee1096255010855582edfef7fdeffda968c02e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3fc3ab520.0.tgz","fileCount":34,"integrity":"sha512-RuUsz4IoPjBVFbUFF84gaYICx4AVaTLUg0Qo9ALBt19P8xzHSlpr3d1v8Ivsyo5Nre7KD7bP+aZE3GnGP5BiCQ==","signatures":[{"sig":"MEYCIQCbm1OiNiS2q7ehL+h+gp+9hPgqeE1bJrPUId/9B5OElgIhANR4ia+zrONgtHB9B1OH2ZjJe1BONMUhGuoRizMShrx8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKydkCRA9TVsSAnZWagAAt30QAJsuOHpKaVOB/RQw6ZYS\nDfp5FZc2Gia8Z8O/jC4h528P7/WZKlvmh3l0wmeziDxyXgaqST29CuNEjLOP\ncxn31HFb2kkEkK8kJseT1Ew6L0v1Pzfi3hdRVQWNupq6VLo9gIfWx4TzhxwD\nxb/bqFoPQJjUTN9dyFcDfEhbJTSu/Go6PYhdGNk9ppAt67819uC8qxRcEwc7\nYKugxn61A+UL2rWW1dgKQ13zuvvwGw7n5jL6UKvIBRtMv/ej6zwwcwzK1sZX\nGhVqOS3Tr3kw2/nvZLItlIGWQTsUVAZNOapbLBw8WjLtsC00mxqLRvI2/sZl\nm8srHFBvYJ1GJAAHhtdqkHjZZqC4RL+p2mSJggMaZBsplwk6IlwNBIKJPL6W\np0PhdaDmTvYpBsy2eWCeEyIolb1SQ+qe7jJm2QOmCbwuiDZKTqkpCp7U0InY\nbyV7boEkOJ/uIm9m7hoDGBO5KGLadhTIi48q4JTkn9oJsf28X0z8M06NbbOx\ndG04kHDygaI2gidWKNMDtoI+Ih97hpKoV3KmUQScHj8WIZJaZuYOwBkTnE3k\n4IVAcogaGiaB6bWByJHN0owPzjB+8sbv6og/CJa8FvmDC0/wWn/Tib7ElVxt\nDScmvHDpU7pEO+7qPgIIoXZresJQZycTb8d3impYQk5kilvloFvW59M9Id5B\nqaFL\r\n=c6Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3fc3ab520.0","@material/theme":"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/line-ripple_5.0.0-canary.3fc3ab520.0_1579886435569_0.23315273057657615","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8a606f9b165ac26518f2d7bd2c64bb3f00bf8fd4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.80a4d326f.0.tgz","fileCount":34,"integrity":"sha512-v6sgkEzVgSZuvLBsjAoGemF2kep0K+nbPA4AzHapniob34v4XF8Y66eRQNMAQcuMv6Q2UcJFjNV20pKFZteYeQ==","signatures":[{"sig":"MEQCIAHYrT8M8H6f1cu1OG3VpZdlvyJyPGlFfpolwi6I3DujAiBRt9w+EgMlYuOJNggVXii1n5ec7o6Xsttq2KuA8PQK6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1duCRA9TVsSAnZWagAAfGcP/isvZsv31rPqTZ5sU4io\n3oq2/LxJMlHyBconyxM/ltyjLFJ1DQQnE1cPyGj587hkzJCLYlGvLmkXz/iE\nWoWWRALEjZQLVoYIq9RaW37nSaX3wbQgEl/1/igowu6R050Bi7rocy33TLoc\nlThmt8DaoylFsn5Cppw+jFAW2zIKhRqAkzQVWj4q1adc3A2oMMMxfjvGeWuR\nKvvWq/q5meymUwUgr269A23IW2vL0ypj03oxzf4nchlsvFM1oj9/HAXaiuBU\nM8zVzByLHXtsJquhS2n4PTxatYohNIF0T3iur6eZ0rp6OtGrLCtvrJZW7aol\nj1VLlRurKhcgntLNDo9LF0X1J8lP0Wey4RqnM+KebF6p9I9RB18O7kwEm26i\nNG4+WNH0KAF1bCN5pyu2guAAFSSSNOHltCWQ4v1Bt8MSEhruhTRXOnZILKlJ\nPVvJU5cWlzVHUQFUfzqpwzReYlgEfetXgF/9BKai+yrCxxc3GuIiVGRWfDXm\nuuaMfuOF5LhSC8OBN+1p7x7VtcrTfXR9SKRfnJ3W4epE+jTqdUbhTRLBFLqU\ny2iqn1P8Vro9YS7/EmA1pG2nhxqmTHpTNWxgIHMYHOtTFMeg+u6NnfluR4Ih\nFlYVP6rzdPkOJW875Jr2pRcbuzdyzfMXed7peR0HiJ6XfPTfnjQnoJ16FqQ1\nLnkB\r\n=l9Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.80a4d326f.0","@material/theme":"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/line-ripple_5.0.0-canary.80a4d326f.0_1579898734297_0.8896035359733105","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"614e47924e65598215a555d3e31428aa3838e5c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ef7de4def.0.tgz","fileCount":34,"integrity":"sha512-AwTODqiv5PBB8d4XkWK4CbdPewz2wKiidSsJVPMeymXp7S137fN5iSi7k20cS4QTUkNzlzfOHJZo0M6+KeYUnw==","signatures":[{"sig":"MEYCIQDZlyJ7gLdvUibFlDvySQH8x+/S8mSdrSN7hfEfUSvXCQIhAN6Gec+bPWXlp7yvnO6dTxuIOojyB0car2BYzLTXNJlB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2JQCRA9TVsSAnZWagAAv1UP/1uwG8OM4LxyeMECtuNq\nBthajIkhe6yjQ1Lq+S4zOrnfokY07Xvr+nC+HripWFsp85w4za2/0lOAMTeB\nFrrzP1wHJdbowTHjKWYLkkqleL62LXcZJKI2tbrdofL6QFHv7T4+DW7OveCu\nSyeVfKWVmtXvoHeoRzRYN9AEFtqIElb8mnW6ODxDrWmI2twDH07idmk0dg8F\nxB0nRZmWqLxCiBXVa3YAW8deMvAIZm+8SB2nMK9twWFNMTr9qJlBeq6TgylW\naIgC/fOVA7DdHixufnkrpKmYq9BnlyBx5pNMZ4U1ckbhcMWk/NAjVfy4Pzcs\nwfSUvKlWzi6babPaI7WXc/ZEqAKVGzaI8wjdhMl93ZmHCIUTaQJknryjulL3\nJZviZ0RwRFUfBtmmjf89hRJdQkKrzZ/hX95kQH/NDTTiR9iE2aE9eH0LsfWH\nYe3T3IPWZSEtTv5nTcJzc9q40Zu1Fo/Rq8ubLjEIfoDfqPZhE/pB9fdRsJWn\npqlZYf7OF2nWXSDT6TYH56JYT1+w6l2q/tYwkTsBy5wELCYAj6RLe2wbETCc\nsSwqUa86RdeABKrst7eDOK8g9NcKSKP1ejb3cuxI8079fXXTxNY7drgzfGkx\n3xJLeQD7ohsfNh+dVnPvHH/YePU1DQ+H+PZrwuKZHUJzI4CO2DLY29iyR86/\ngt88\r\n=IuPY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ef7de4def.0","@material/theme":"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/line-ripple_5.0.0-canary.ef7de4def.0_1579901519948_0.12794280202607933","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/line-ripple","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ce949dbe0cc37f51f819ff70742c2c27298f7dab","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.93e2288b6.0.tgz","fileCount":34,"integrity":"sha512-jNghAs2S4eqqPSDx2cvKKcy1JQ5dadBT/BXgF9KO/n4EtukL1wiw+vqzDiimfXv2L0CBB8qNmJRloZKP6uc2yw==","signatures":[{"sig":"MEQCIBq5aEnUKI2hbpcRoY1S7f44tJCRmyT/RluzJAD7byC6AiBMRdma4pqx7sm+iscOl8Gh8kNmn7GvTATZ1ejmMew8+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGeVCRA9TVsSAnZWagAAFgYP/3B5hKfnzHR9rqJ81iwO\nHkLJ7yyzBi5Teofa7PWdZHpOx53oHL7mJCwvhBCZGo6pW9/FoQj2To/2B26f\n7QnG5qqdSVTkWSeGbpPQ01dHMaNdGXMmDaKEYXQNhVT8B/oSXY47S8OuAEb6\nUVkB4vfl0GXoa+qhCnY6o1bmu3sVCv6aG7HKApbTZRYsbLhuSri0jMzWWSt6\nL2MsE6UtAWI5qUAXDm/zTmn2vy6tJIaMRzKD8ATwwBkg02OBe0XDlHvgXFbi\nELlks63ZlOqK/hNmZctvvnC/eZxtLccXGfTqyWaIa0aNaNmKwSlRBLfxfYtK\n8mt+72+155ClMTC0dzx08tsD0SAbL0IqQu6GHGCFW+b3/b/rS3aQmhYgdPHU\n8rieAkYiX76SiuIvlqomzzHW61ARU2KAOCQD0/P60d7ULACcbxYJb5PNO7iq\nhSsUe0mXEsIdNsdV5eqssqNOljUQo12IEaLQaYtD4u4fxsDWCHkfYLPNUbBc\nUibHBrDqoPVraCGuvd/i8cZQW3rGLkIR/CqrC4bTnf6xvXhnRNZCmDPU2ilw\nYRc6QK6gMrqpzciBkv5QuA14iWMrKLaD/e+Cilmyv+q7CG2B7+W5GTt+pMbO\nzjYMf7XWUyz1zTRbXQwq6f0NMuC1+t5WrFLh+W3xDw7vRqw0BIZ6BldV1N0s\nmHah\r\n=6HrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.93e2288b6.0","@material/theme":"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/line-ripple_5.0.0-canary.93e2288b6.0_1580230549166_0.25161830297780297","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/line-ripple","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a198fad5c6fe29a4384a259f28278b58ab980c20","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.34ef15f67.0.tgz","fileCount":34,"integrity":"sha512-QvFdpxul8sbhobEClfkMZzPfHoO1KkLB7RuQG5WQEwW1PDLTFP16t9Q9un7bbwuuYIYAftTOpqTAdNqIscbb2g==","signatures":[{"sig":"MEQCIG/AJHFYaV31NMjquNMjY6nOM4zV2SEIN0igEzFNElMuAiAHwF/aGdJmJzPSRNfK50OcdYtrTjDk5hYhlIAqORrygA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG4yCRA9TVsSAnZWagAA8P8QAIDlPdMHMbra3viIbF3H\nP5H6GOu86fddOtF1x9yV9b+lJsFRRIfPVIjLB7y87XYVW1oq4iwiIzi4JjpF\nBEd1B3O4e8v2qXQC0a7NPVSlZ+romuQRr3hnIhRPSTHyQdWhUJBP7cdVGydo\nAyHRIOq0gbO3X1RCry+Fvszsv65pba0KnUndHd3RjIWcFPAsjOZ9+gzQfKUF\nXtE1BRWGW7O+u76Xwrirou+UETz+8VaZ80iVcohyrDbHI7crV0U8e63+UZdB\naAyKnQiTMBUYeq/xUhJ44MSUt0oqbtG2GU4mUWmNiJ8enpKVZ1aJq59DlGb4\npP2tv63/NIDC9oVkrGd1rCXV4rJ4OQP5I3nic/53AWPQjcRTDnhGwOHCmnKy\nHR1if+sMGyOfF1rhr7tP2A89pXYYIdRzwTe5pMIb9EvronV1s8h9uXPRg1EB\n0nwCV4mp/XUHyp2bPch2HbVyMG1bDGv6g9en/7jjYJ8of1BbHdPdUMNJ3CZC\nHiGCXHize46cox1Fqii+Ucwc5Zsak56e+TfbYPcsgWpeORMG+RU7VcSMpBcv\nvP55E37KeeGkwW0N16r3rDz7BjcbwGNwk688hOvsLFvWtp/OW4w3n+hzoiIl\n4F9ZxI2RYriPpyJu9fCLjdxrHe4jhvl+7adZbAhu+jamL1DoDcRoH7n9PL+y\nZ7XC\r\n=E60x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.34ef15f67.0","@material/theme":"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/line-ripple_5.0.0-canary.34ef15f67.0_1580232241911_0.4511738852445297","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"19370de06e417b029c7e3e10e52df8e5a0b9aefa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d3d176ba5.0.tgz","fileCount":34,"integrity":"sha512-5hwq9djdWt4OrSmdoUy3UL3DAdqXMN0RhCLxFxAC+xeQY1eb5sGx67Eemk+F0ippN8rLamIRmVCsqtnnG3WZ4w==","signatures":[{"sig":"MEQCIEkPiKxztJ4lN5xbLCICJDcvuoTBdBwcc8VqaFyyZa43AiAGn1X3WWeyBgIaWDAPOH3IhYVO9+rFcScRBoH9W5uqdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG9qCRA9TVsSAnZWagAAzzMP/RPvGGG1jPY8gU3DaJSF\nqUj8PxTakPWePZXzHSGZRUOEaz1S0O8lwK/sYvXqvf+zy6ZZcbIZj19lHBZO\ntCo+Nr2VFL3TyfZAddlG+x07cmsRhBQ8LBJdzA+GonF0hx8uZc44BNdkcoCh\n0n3rxiOZNtyc8Hm0wMv0ucd79crGYAIGpIiXc3wjviXp4mF3ly+BFZstngj9\nKGAftuWNpVdwzWSBrGZD+iPiGS/YctYblql8PdT0TJVzEwy0r/V0TwgN8RPN\nCzPRdOR1Dck7AEgSh+1GtQ4LSucvvUajf2TS9IQ0Qd0Oqiu+9gKhAwBT5eqn\nQatHrIj19Le07fUBnlD9XR1XeChxQESkuB/P2LkgLnleEKLQGoSaoEq9NVDV\nKcAqDide6/PbH41q8YJRZiT7mRUn8mQFA/kqAlxRdA53nVDD6yNBCcBU/CYV\npCH9mcvwtmhPejrzddm14f30lKJ5olxDtWFBCyglz21z63Hrq+C1l4teiTZ6\nS0piEcggS7hn2P1CfKinLSNmDvJ0eNEZ7S3v0Ikk+gZ4KgkBwLbm5sKGTflQ\n9rjLfqHo6Xc2hYZg5GI26lgGwnE5sr14ONYxk0+PLc6HAMi9sVIsH8zB453d\na50GnvVgxHLo6hP8GGlgmscl3z+B6sJLnFbtt7M1ARsKxQutDjDZ7a+q7NoQ\ngU97\r\n=snP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d3d176ba5.0","@material/theme":"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/line-ripple_5.0.0-canary.d3d176ba5.0_1580232554294_0.41607008944488166","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/line-ripple","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"35eb0dc0bfd9827fef0fb4ed5dc0ebbf6211e85b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.32c1df133.0.tgz","fileCount":34,"integrity":"sha512-B3yHE8uFVGz1ugyEPsXFzqZ5KaLIqI2/vzG5WRJmFdO3AKk7ai0J1XZ8IrMOFFYCf8+aya3QhZuk59Ats4+3FA==","signatures":[{"sig":"MEUCIQDAOW66nodnScX/onjpA3YQB2Wp4AItosaAmflg0XmD8QIgF5wf1e4VFTxMRewQLJsVVGFwW2A4UV+RQwsA4JdRu3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI7MCRA9TVsSAnZWagAAhTIP/1GWUAP0FhaUcL8uDEyg\nvy8SmHqddLGZkK/dCwtdseBQEHijoZIdC26jQyQ8Ziw1JF2G8pLdL38xhaR/\nKQBYP3GJ1+Xcd3J1vT3Qrc4mM+yEJl//Br31hfQZ+RmGoIqlFhZ8ivEKt1u/\nMR3czKpAWXdj24o7vmWHC/TjsvpT0aajTfA7vfqmeXSA1cq1WzSOPFEpCQlQ\nX1g4jWivAldC8dr6hcR82/Km35jmQu1Yq4j5SP/z8DkRUdyajHlj5KTX6wCG\nSnwr1LlDvXTtuBCZu2n98eAHwbK07U4xYYOI6SgvrLzKpXUexoDM18cLif/m\nwuXoxO3gH4FVrnYNoA6zUPicIgftcbFjqiECgXRwHKhOuELFbZbt6tYijjZQ\nKVSEp3enABYpqr+SY6/cdzh3ETHJcRwyx6m04Utto8Uy1oA/zzLpKTB89Ecl\nMi/R9xZxtGPN18BC4cu1qkFbFbbRg6p+mMSdBEgiFIu59EVAf/S7U0hx0x6h\nPAlhXcht7P3CAnDWdOd58TUJYUuhFmJ+AKnyqQAjbeF0+2ayj7GQxzRtXlgL\nOUqggGeye2aO4xQQ6eQ9KoVbnOYGBujkpNCws5Lwk5ee285tgKHalHByTklp\npDRrK5zPG7l5goG7BPbOx9CYyfblVVTZsu9Is8q09VjnfbpmzLN3pDjXKppj\n4wuC\r\n=nRby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.32c1df133.0","@material/theme":"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/line-ripple_5.0.0-canary.32c1df133.0_1580240588439_0.48657451530585316","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/line-ripple","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"648173ecf9859599e34834ae75ee02f7092dff00","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.f3adce86f.0.tgz","fileCount":34,"integrity":"sha512-GXGgnM3n2OhgFPV0YRRoBAY42eQfqgjYCnHVUl8iEHodvVM3c1gs2zvgen1RCWZtiy+Z7xhM8Wx0c9OOj+hAqA==","signatures":[{"sig":"MEYCIQDk2X6nXIw6Bc3djxK/jg5w7rzVyiI/yS4IH+ivTdxVUQIhAMLqwuRuTg6JZxaihW9XIRa80MMm/x9f0UNmkpXv/D2E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKw3CRA9TVsSAnZWagAAGI4P/3Jbjifg2T6jIgt8DDgq\njyA3Zxyvg+LlpmNmkJSya5TQnsOcK10m+Ev5wIvf89c6WqrIDZTzIrlO6qQv\nrnomcMM32hP+OTgxbThB6PTeEdoWFfvmSVhUxI92mFWZPkRY87h15JQHlP6P\nqqYMWAm3nth2srRRrA+xIW79KyLQwxMHhHNF8BLsE7bK3Q9CxcqPK1nuXvfP\n8MvnF4f94StwzSPqkooatPcSGxSIrMc58VtR1WGsVwN6lHbvSmJEIGz7oI7Y\nwoCdizvb1gBqaDYqfEA0NUoEJlUEK0w7UoaglyfJdEI49u7eiD7eRgrSq3XT\nzREgxrLQe33xnz29fbgDYdq9p6/6Ni+kO4qdiJrr5rm5Qy1bygbSX0Y7YgHA\n5HAjuxOTSAD1krXpRieSbQo1LAZTLKdl/ieUvHaTX0mJQ6W7CK0xrJys3BdV\n/l3rWKlV/+2jCYjfAHQZf1peo646KGF743Rbie2X6bhMY/+nnjV4fv4Sb7cF\nSF5vVfCJm+2r89H1TbwaX2Y06JLYzQ1Zg1FKKdFNlHJXoGgxN9iDI69If2DI\nHoe5K4xd/VfiQa/AE34z+DGTDbnPcpsIrZq8MpBdmpb5VIDYmv+LtImARem2\nLXeG8CclIWbm9qe48OyUYXL4RQIuuDMwOikw5jMaCAMffILS7z/Cu/XmaCKk\nr6eE\r\n=nWP5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.f3adce86f.0","@material/theme":"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/line-ripple_5.0.0-canary.f3adce86f.0_1580248119014_0.7573516564378304","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"69a2615f6d571748aeff30062b61d4b35cdc038a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a4423f890.0.tgz","fileCount":34,"integrity":"sha512-srfNigNgHT2rxNw8ni/srzNhXRC2q/Ugj+jLY1lWJmQ3fYSHH9JOR33WDm1KyijlbRIiLPzNhVzawVZNdCAesQ==","signatures":[{"sig":"MEQCIDjqlBB2CkCKvnNbuYEAKvtcnagToBQbQzDzlp6HmZqjAiAU9Kw84V7aocUz6zBZC9MP5te4E4TkogD9I9q5LO1eeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfR+CRA9TVsSAnZWagAAPxgP/i8daQej23f7cQ2TKQfA\nbGtKaDLl5SJCUfC0R72TBxxGm+nVT7CnYdB6hlxL3/oKshpzqNFTc97FnIfG\nWonruhBxAl0Lct2F1FZ+n+LhjiwfHVZeJnb3FSudriqSbYr1vYXK/+OtbDZe\nsWtJn2LHE5/w8nMQDkRJrfuYPf8sH6pr0lWs/G6ezrciJbvZis+m3sBL51a2\nJ1fFmqssWwJVP+KaDqvlVyTxXECryvxoNeBFhYaLnQTZIqvzR3gvjQC6MjR0\n0ngXidZQvZ23O2nWA0R210dm/K56Blz6Bp3Y1Om39buFgo4gt8mFUZgHkXZl\nA55kD235Kz+LMcfqxv56tpVbzScH10YcOKjUJYUn30Dn2XxvT9bGbbvi/gIY\n4tTOo0RBTvZ8mrpdinmqxuGutoPpw5NpX0yBAvgSLXcUxBXjMUJrHkXwFs/k\ntqH1G5uKV5t2YBgbu/ze2yIlBtT+JqnzNjhyWX4PcV7a9XdVGslq9tGikMDE\nf4bE2b/FniCUyk4mq15kN2nvMUTSyVimXjG57k13qBjGRM6SdxiyPhJpML6v\nr31tu31qILCQ+CjGB9vADKwDH7OJbIzqsaS+q1RTVL2Hb7dj+nQKUiosFgGf\nj4jma7LWyIKXi6TJYdrmvJ7QiftEkpfsbdKP83JMktXI+EJIBFYLZ9nd6WJJ\nas/2\r\n=SV+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a4423f890.0","@material/theme":"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/line-ripple_5.0.0-canary.a4423f890.0_1580332158136_0.3724925742708691","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/line-ripple","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cd15a255800de8e5e4532e50d2cf6db948745665","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.9351f167d.0.tgz","fileCount":34,"integrity":"sha512-vAQemhJNdbK2aB9eOriklYRRzZF83afPaEKuUTOzrmPTcNUES9MXSR4xt3x9jpXbNNXihZ6MyZSvAlVzVk2s0A==","signatures":[{"sig":"MEQCIEN7IYa1FNvrLYZ3QqNy7O/+9Wbb0cAjtDcrtUTottnhAiBjDXb1A1iRk5oaZN9S9xibbOHwtWcMeLh1z9BtlE5Bpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf9NCRA9TVsSAnZWagAA4SUP/1YMCmmN1chKNuybfIA9\nqB/piSZNfzFuIg1P6dccUQ641jdRJXx8MByB+0f7/vWAKTU0sMbYUy2WBATG\nMsu5MOb/5N8u45eTmymEL/OF3KareboMFjbgQmWapJ0OsSHxis+somoV7O9t\n15lYC5WaCRcpi6vr3fs0nqy1c65mWaar2fRCsW0ypNVnYPx4+KlG34Z2z6Vr\ngT0qGeoLi5EI+9kcbLLsjd8QzXIDnhOBA9ufAtO91e5l6QozXYYon5/NHe1V\notraWIU9WEKv1hGzZbe1jPSG7342X1ba2eMeEnUQIs2dtUNrwT2iy3gBLTIH\n/DnZvva68YrLuJTD613b2oETEqv+mwsmiVE3/eAsCWsxssIcaWxLI5oa8kaz\nuMV6MGztRUqObQIKvdgyC8poejjoo28cOZCCLifFYoRuuQu5RgVXbeW7cIvL\nNoWboIebzmpv2+MaVljhhNTTD0nSB8eJ2Z2msityzcIBm5gQMbApSvk0rYLl\nx0fL4pti1eAcz2gMJsUoaThnsOznbxzyDUgLyvY8+lhehbhcLrXUlOnqT8wj\nurBx7SrqkZu8KbtX40zF+W2v/4NpGU1l6n67kILwZN/i6QX52DtGyDuOwC1S\nV2AYiDkWmnjKpVoHOncLylKYi/vvgQIqZZRPSUCsVqCbH8VYgL9VJ+f260/M\nWNHg\r\n=35eV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.9351f167d.0","@material/theme":"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/line-ripple_5.0.0-canary.9351f167d.0_1580334925021_0.603861714809234","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/line-ripple","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4848fcc22002d51771db15fe864756caf67b2075","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.29b89dbc1.0.tgz","fileCount":34,"integrity":"sha512-1+MFBuGrrwFlwXaGjgnTRSIUxB25NNvmlh0pZakKVdRzVJ+SxOIVyX897XZXxxAqwSa+gfjuXKG36DcLLv0gKg==","signatures":[{"sig":"MEUCIQD1x2llK1vzBYKd9n8fa8lOcZBrBnM0mEMBO0T4q+Ho4AIgN6hzcQeUEHsaDm+KTuF9NeprZRPwDUQiH+rP2Pb0xXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgRMCRA9TVsSAnZWagAAyTIP/3Q0i1gWnqWMnWMf59Hh\nTBAFzdlput2PYlIfv2BD0oMXtlVoGMaco7bXbxxK2e1yJtsdHl/a7Jx6lrYj\nOqcqJXSFYBS0V5I4ntSkQMTwf8pz3YmDF1W9V3LdPfpGB7dW5QF0dIJWoDAx\nnCjCQRd3lSjFNKofN0y96bovo4IjsdAlV7jifcS2ybQjuIkwOgt343rlzVda\nlmTrBGEOALozn4DOUmfjGdbW2J39uebYM7COdOtDfaGwEXeEfmP3OwhbMmKv\ndMjnkF2m03Va52apz7dXNiLkP93fkNTlcOwQVS1DHH7n4k3pEo/sAMw5FCaK\n83Z3c1f5WnljMtvdQqJnAk1fuxVAgXsRWNww+xkkUJObM2xUIZWdUz3NdZuS\nFr+cb5IQgYZZ+YSJ6IcI4RY1sHheH6wpB/wIvuo5tWk5hN9hUkHD1FAkBeGf\n5mqI4GMj9MJTgJaJmrpYeX5LCn17h8LaS3KM8+FkL+RTuKBeCaUS1/NUNlNx\nc0rP35ZVu6IlAtft/ye29nKmOHsy6RQOkwQxfjYPmkzQ5gX3RXQmxgDhtuz7\nozMFKoTG3JXF0mRLdN9KIEQy3DxfdpMAmkjBsCQMAzpx9RB6BjQm/tCHVaL0\nrDcT2QooeQcwItHWYZVqT1bUjyZ7YN2vSlL9mtQVAz79IOsugXR6O0z/tigS\nnIjf\r\n=2Z9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.29b89dbc1.0","@material/theme":"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/line-ripple_5.0.0-canary.29b89dbc1.0_1580336204150_0.37804673257390276","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f71f0fa3cbfad1d9ecdcee45045449cac23b6f6c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.45985457b.0.tgz","fileCount":34,"integrity":"sha512-VkMpIR862uPL4/4YoqSK8SZYo9l3RnjDae26UaVxAW1OB8pwfY0KNc4BsXd9DjRRHulKfMXalsCtBaH4+O6AMQ==","signatures":[{"sig":"MEUCIQDpCAArnKr2LdrzH+VnjqBBEyjeWoAUCT9m37WLMR9DRAIgTBE2QWDn2CdBibdFEff2OPWoS76zPB6xdz3vpZ4Na6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhYUCRA9TVsSAnZWagAAQGIP+wWWP4wLfpMUbiVMkrg1\nBOunX58sXxbLuhuD5y4ZUV31ODXEmzTVeGwg4g4OHEK5woLNtyuXubQwv7Ey\n9FIYEopcXDgZXPIIQEFN76T5sZq/DJhsTasUf6wQTeWTHv9WkrDy/9jx3a4I\ndDfBrV/5Sg2J7EfbotS0yAxOlpHcwbhEgNaCAMNedJy0tFlqMnQcMYA6e81W\no5YANz5iC3WPlmlHNi2N+M7bZ2G3WPRpuoiBOL0vxEX1b1pL5maj4qAX0En9\nv275nidMJM0DTLA88feaQg8RQwLRLcJwXQodV42ERbAroXzyfxVc8RjdBurB\nmFEJh94exnXOvhvf6t8ePjZck9qbSahYT8IJQR7a36bEerUoHAqnyBN2pM8w\nbGRbBfGfeS0QZ0ZNYkVAkUUKGFgkBPACj6rDb6Z1Jl6MeH1W4iZvnY5MLn4E\n+4uY8g7LCNEMkyQhL/1lz/iiSDidmVPPB//in82dKEzIunQs19YVmUET7mDf\npXMgcC+JyEQpbAMizKR55MvMeZXo47iACnUspOJFEJqSlb2Wo8ebzfDcUXiR\nIDQbojQOeammBVrPe2mjkzn12KFg4ediGtjsDtEJWkm8fMuNRk7YTWDwmWLN\n/mF3SZderS3ZfCQlq8owJDUvYUaq30Jcrs62FcQQS7UsLCkrDFiveB9jQg27\n1iGF\r\n=qLEV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.45985457b.0","@material/theme":"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/line-ripple_5.0.0-canary.45985457b.0_1580340756528_0.2035426407460521","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7838537e1f6d5df215d2acdfc50ca0c8bec20328","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":34,"integrity":"sha512-PjLvwrutuS1CFOg9w0oK2ppxXQOXaUW68xDuWutDGFqUrREZJXKE0CON1L7PG3pcBLmhGbfpPxEIGtw0QxNQzg==","signatures":[{"sig":"MEQCIF5UBy620/ikoo4hp6JoDu9JhybIsAQu7cA7/81xcEchAiAVmsR8l5D2crwXXmIeUJt9HyG9x8w3b+x6FJu2qqbO3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":118329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxQ6CRA9TVsSAnZWagAAmUgP/RjObTFA0FgwYDJbsQ2w\nwVSO63VXbu1h6se+A13gSHI2KkJSFSkMVlo56ZgM5vXlhAnPIARo2Cs8BsnN\n5mI4gipJKA6Ni3rhX6Sswu+i49bAAMEsUwdG2ai0KXjwLcQs5w7ERb7aDnQ5\ne5J1ru1s+pU8orMHsNzfvxNGZD9BPofOJd+Yb48l6hKxOZxGMfgWJ0EXN1Yv\nSoRkAYH5B9CNCU6SMvNxKsjIEe2P2jCzGstDaMBjV7USp6GtarUWroNcK3Zo\n2rhUiUFHQ3OyulfjjrnwCL2RpzNjaUSe7iMKhFg9+asd5Adb5oG3pC3a4F+W\n0wlNsRGMkhsgMmLk9Ro6rra+jTrtLmbnIbK3p55B0buviucOiHXh2gUKiHEf\n9t32BvkOGv6UdSKz1kjtGTwXJNl/+DwhT3jFxu778R1w+uiwAwmlVUy7MRhJ\nq/WseHCOHt4p5ZA28PkvRPaT7KCngSZ4I81Vn/HC5k5QebYE5XAzvgrlyIt2\nevwFoOWLuMotPOPaOPfWjwpiclXWPpcMoFAIpFI4Xy7J5N4iVV1tcV0t29uZ\nSpUQCOy3D8a0uActZUwMU1na0+ZhXxXgGEUqYmDKMt5/AhSxInnLPrp25+uT\nCzpaI2ndp1rl4pQquoMO+BIkJwCg2qkaw1xI+2FHYyQCei6uSFsBkO+E1r7W\n9S3A\r\n=xp93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/theme":"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/line-ripple_5.0.0-canary.a1a0deb3e.0_1580405818449_0.5475606357477958","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/line-ripple","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5513646e488cc7ede0451280a94e4d880c190d60","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.181486643.0.tgz","fileCount":35,"integrity":"sha512-AdcMpVYlZiHAeivHoPqgCwJPQoybwmfqEyJgbAEnqTjR2ZC8TEcyPokdXWzYJSBWndvyIu3zO05LCv3RKwzH6A==","signatures":[{"sig":"MEUCIAYf8ARG6YugV3wRdcoD4rsbWhVI3EQJ/Fn6T/LFRBhpAiEArjN6/LU4v6x5iYOZ0HUOrnB0vPZ6XhPUfC1X0NplS+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0LXCRA9TVsSAnZWagAAEF4P/2cgWpVz9fkf4JF1Htyx\nfvj/WXz2xPUo9WKKNEo+Xu9/eeMOUHFFLHoLtdQtNpFaCMbxIkj+fA/PYP9a\nb+N+LZwSY9RuBfV3Eg9ejcJ8njhRaSJmRsgB8Xxo6iUUeMqlsExvn9JxkxFa\nc2lhzXySCNw3CtyXYQq14gMLTUOHP9ivf31z1a5G1nZLVHu+uu8m9Hoz/UlM\nFOzUShKYud+yC0Nglvc8dM+BvOtSb++mad7ZgOoDw9IE5RVhyBGcF6btSbuC\nxd95E8aWM/yOYxRxvAGGAGR5jzRS5CJjZua3/xqgiB7VSLrXAwzk6Gy5lBbr\ndm863gXbInsb4gZXJocqF6CYQb8Z5liGX7I086BkQa75ssCdxIvfoVl26nR5\n2xNn87NEYPgi3CNjTYLDMjJjL+4L4KIMMwi5eaxzNzlKeHOWhejfkAyX/c1f\n5Hn44XG5q1kL1R7ljEmzkDMN+/4pVhJk8g2sh1Ikw0ZeM0BHiv/cJQpYpm0o\niZRt7nMqqGKFTag33WlJt1kxC3hxTYmg0yqDpF/gaXJ9GcBhZyl1KdHxX+E2\nUUkRJtYpm2invu1I/5aeTfYSwg5vuzr0FVEdXKRnRlCsaKX/q4EwnDUN1COB\nnH+dZDxsyU+hx3kRrc/JMdyOR4bIDLer5Ggje/US7A48i7zU2nku1uWGri+a\nDoWg\r\n=fVrz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.181486643.0","@material/theme":"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/line-ripple_5.0.0-canary.181486643.0_1580417750847_0.3169667272571459","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3cd37287939947bc594949a5ba7bedc9a297e2a4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3a85313ac.0.tgz","fileCount":35,"integrity":"sha512-+/+n2jz8z2bzE+ADFsXjDKlUpWmPoTvqrCUHeGyntsBm1D7LasrDJqPnPvFZgtoRD+t45+JVqT1145j1MzIOxA==","signatures":[{"sig":"MEUCIF8BS9y6kDMIyXQ5o5s2p82G79RrNmh8ax4p6AOvc60AAiEAy6q+/+NZoIYyY9fDCQEbfzeRTChY/Lx58v6Dh7misA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124449,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFRhCRA9TVsSAnZWagAAxwQP/j1UuzXlPakAkqY7QzyS\niVVJFaqK/JZeJPzHSE8SLx07YbqoCCKNlKaQbf7xTPTSkfDlraRRKV3DQuo5\nKmgoMUIVP9D8J8hJtdWvu3VPnYW9/4Q+9owfxKsA2rdte3uGMKCy5+H16ySk\nAybtcfqVoVwQJG9MWVNN3cC1XuFGo9E4FTZmb5u/UcU13HCMtPfh6ayFOHKi\n7g+DQFsD4Nig6+VXY/rbV79M4CYDWPISr6IXNK7IrjVoCD3nYVNOK8LPSGma\nZJ8hN0Gf/XXksLP/WISx+n8aJOVshq4w8ief41V+0A7BRqQ1YoRS4f/BWrdq\nRu+ToxGqtxsw3i69soqg/ouH+v8B9ezRwLHlKC/kJlJ8wRYuzj5IDOnrYD0W\nGO/Msp9P5dLkzkJ3msAVZBKVHNgDgDwkoZ09dwJGvcnIORaUasf9CnGTrb/Y\nEzPJC70DOfuv9bJmm7mJQmotka5+B3FEMq9zLu5EVXfotzjWWqyyOUvarvIX\n4wKW5E0OK5XZmT+IMkwihAGpQOsu/AD1JITA09gUGIlKCfASHA8VmjFEAQYE\nazAERTcw8knfZqYJaJhtXNKVhN/76RECrxB5T84GKolZg9QYsLyfookjycph\njwdGd0mf9QqcooDnhbP964VnK68AazAp/OpFX7Z9c5OW4sXNqX2NJNQuCCT/\nDm1K\r\n=7BMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3a85313ac.0","@material/theme":"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/line-ripple_5.0.0-canary.3a85313ac.0_1580487775241_0.3052938013941817","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a3662818f83698388d8b7aea4b6919d38ffc4b1e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b6c7f624b.0.tgz","fileCount":35,"integrity":"sha512-IfMJWzSQBjpGtcwNWCl1wNO4knJc61QtNNLixY949e0cDqHVoBzOdCHMKufsJnBm/rCZ0drJp9BLf2MR4Yajfg==","signatures":[{"sig":"MEYCIQD6XG3KO9JwkquNig5ojg+rXfliFBMGWgZE9pKCr7xb5QIhALjEdn9EgyFFJKvhq5cm3PPklagw7MbBFaVe8X/d6q85","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF22CRA9TVsSAnZWagAAXuIP/0lXVxqXEwwEVHzjRJCQ\nyhcRVf9UFgb4pSLqIeIPlY8gUFJxdbQ0zToA+ERyVVbQ8l1REQij/2A7NLeB\nZJ3N6SfW0/nzDFX0brSvFNaBDtAEJwG4+ZaX6Fdj2ItVkwauFSG7P43ud7q0\nUcjBHGtVqoulgbvYPt38PW3C4dSOGbwrrN+ZqBhsXHU3xHY8SK4UHEDei6DD\nMJ69VbytCGf2aEuFTNLVz7yQKH1cs2iaBHmGZaNts1UDAPK/MeKH7OrGSFim\nfAqBDLhVKLTYn8w+6XygMLBKA1xI2FnPUVVU7zME6vczjY7+s5Xre8TJ25Es\nSvkofOfp8tUmjthJwfSr6lhcqWPUGIvxgW1EmbxMmQVX+C7Tj4JJ3B7EIqcl\nJhiQEXSsV2r3dsYi54A5rBw5Uzfr5fPFhcVaOudC9lz4nqLWmsgrkWPEr93f\nkBEO0WvrRu0OAZvxStnyFKC77/Rym5dZAtOejeChSvpG8+QtAGbz9qhE+aEw\n/VGZ1DvPjXWRxoDmG6B9iWuHINtDA7wZFgqoJQemh5xMmzcSia/a7znS+UuD\n0W99JXiks/2T3IVD/6PULhkerJi6uUEjwaKO1rNyvTZRs4fHM4oXJOFHNasc\nDf9b6r2SfF5+yLPpU0QbmqD+f49BdvNSFHD+6Tr1aUYQ1j2lqxuK54ThsSl0\nxqC/\r\n=KmK+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b6c7f624b.0","@material/theme":"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/line-ripple_5.0.0-canary.b6c7f624b.0_1580490166011_0.5405373129131048","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dd9b4f1e4f40003f18170b41345a7589f6e1b238","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b3f70ebde.0.tgz","fileCount":35,"integrity":"sha512-RMiqoW02KTx99emxsyCkJscM8vZCJth5bWPgA+lix7xtOIEIHPSZpvWdn/diUuUzwiwCy8971yyorYYUGEuMCg==","signatures":[{"sig":"MEYCIQCzxqOUJVlTXBtKq9jgmBkSy40M8b1tn0kdax1Zm1kjagIhALoikkUYIS3U58KodWQWaYiOAZmH1YHRExoYi0yFbfwC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNImQCRA9TVsSAnZWagAAR0MP/3uFS7d7FHIRzij/TK9a\n89wR+uZ6glBLv2GGJ5gxykNgmguMXYE0EXohIH5+F/yfi/zpYPG9Wup8hlyB\nZB5ITwX7vApz2x6Tljddhf/niLdoIRgA2S97QZO2FnzyKyPv55+RZoHB+TmP\nkhoryBd9dFnEKihRnxEBvPmketrGJ1zTfkoDNDHnj9XOLELRogqjTa299PDp\niNof+b6Bcywfn4oKBbQ2cFV6H+gEhaEhtjD/xZmeX02wHjoTVDdkHRtlC0IN\nbRH8XwX7DXiGQFRYZaSAg+b1hpykctKe4TyPRYEFwfXexZXn6tJgisO1meYg\nOQe/Xwqbx2OKpnyLZkOKYIuwVLMeLkAJGzowinF8mv5OKoMnYmGr1O/sSfAK\nH2keLnfkBOo1BA/EfDZ+KaqLBkAcEE681Osfou1vp6okqCrqJGwR2ouVheMU\nOzpvtxENVLVTutermf4EjGwp6cHRoqCxhiXdusghKb1R4BQpR5MhpBKWagqc\nMCNjd4s+0jkOXnO5Cd2SX4tPf0g2XT0pubU1LeS9TXEyXDPa5Rl/Z1BK4Zlx\nwfXvbB0iuEOiK819RL+LXzY6TlrL4CK5q4nIVAZOglmELq5WL+ZQEJYBT5Z3\n8i3MF1eQTgNrsnX16GTIYYGJVbYlL+LBOwDHWSHM5Ub7t47qTlcG58LqfFv5\nFiGo\r\n=VTNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b3f70ebde.0","@material/theme":"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/line-ripple_5.0.0-canary.b3f70ebde.0_1580501391883_0.9626349996091208","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/line-ripple","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b91a0ee3be1067d4dd3312d901fa7e33876f541","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.3e782d8f8.0.tgz","fileCount":35,"integrity":"sha512-6lek7EmoZetEUlcIbnIC2ss285t/XFIPXAbYC8cV6oSDP2/V2xvFGjVDGzDCQDdeMRc3zEnyYylwkwQ8qR3VJw==","signatures":[{"sig":"MEUCIA3t9/Lh/bC/fH7AK6JR1Mt7hs4hfttDtuh68+30EsRGAiEA7gAXPBK39XHohToki+67M00NTaE3qkaE4UsDOrereZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiH8CRA9TVsSAnZWagAABiUP/1kTKhs5SzAThzLM/mHY\nL0OcmLBOz+r9+u0C0lefPWo5BQt0mCi1dTtGk20+tFmxEFbZhuhDNIEO8xX1\nT4S5MwhX1EzGz4e2WA7qjh839QUv4ibh/RJ1iIgy2LL2B65J5mAr2ek1TU9z\naXBEbeuGq+ZFrHDFVZjjigFPyaLkFVdXUExLW7mIF7tQ5sfDDRKVaKe0OhSm\nWQIUsCfZxKGavJ8AmazTbjsNGbiL5J/JCIVqFn7Faj1yIGUhJezesCr3734X\nUUg/XT4njm2qmd/NNY1Iu6IT25o2+wSp1URsEPRsWTiDu7CaDGzab38/d2IH\nzI60u3pOOWx00vS7V2j5ZpVCLE/pe50G+wC0NXJr+Gfh4JdOKb2ki1Et+T0o\n7135adE8UThk3LzWAXmwKHV8eSYZtpUs6qlNP70/VCm8CtDtgE9Hvjxz5SxI\nl3SlabDb/LmFad/CeElwQy/j8bEi7mXpS4Il0FEzPcjLz+hBKOWJUyw9tDMy\nO7K7mJvAc5hLYK1v6r7hbaQo91/7obGdnc/z45WFBK4X3RS0qcdE6yYn4gZT\n/RyEyk4R2qrcCVdGK0f5lU2Tgkudmwjfi73wUS+j//KhJl7cbXmQxn7UEJTd\n6SKUgWxOXfZneasGzj5a9416HczaY0Q1J7oB4D2hHrXwfOjmpMCGYWQYTqEP\nvZQW\r\n=fPlz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.3e782d8f8.0","@material/theme":"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/line-ripple_5.0.0-canary.3e782d8f8.0_1580605948372_0.08595278823078911","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/line-ripple","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"809491142343a90d48076958739a2d6467a608fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.535398572.0.tgz","fileCount":35,"integrity":"sha512-4982ew9pEfD4JKPEQL7JcR5Vamkf4Hccn7ensUrnBnD58lU/2sc0bvI5wENpWNjmG0EXyocC7URmfCpjZTXdxA==","signatures":[{"sig":"MEQCIBCvY1Pkt02nD2ksSrs1PbajxZvgmh42ol3Yxi0NUnmRAiAoRBdsBggzRs4NLicOMGjnyUheH6WJ0MeVRPftPfXPAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGJdCRA9TVsSAnZWagAAWTUP/0og3wOl2cPc6ZW5Pzt0\n2IwR0p9Uz9wamrnge3XDtqZ3sTQUbLrsWvJOLN1qJBHsShO+VxR+tq7hIdL8\n3QaI/aHgrV1Lm8PggPcX0fN8h2YMyu0qV/jRvGZc5vggSXzaYY9QfUGI0gvf\ne0784BAMjgK+T3F81HGQDSFP6byKdhkbGsQOug/eJ1kTutx63JYawmyRYzmA\n3KoGMEmzlylDL6UpU9bah1nfyh26ZmFff8Ixc6331gJaMZnCeVzvXs8aa+bW\nB5LOrIa2+7bs+3wW3R973sRrdHUiwj1nWaeNz7R+0W29hGWj82tL4Nud5YFC\nJx0Yh9ptWmRHZlviJu29FJh1zkbjqj0FQWAgCWNGEF6rtxfnBTc3Pp88/bsq\niV3LchKfD7F6NOe7YXtqzvXn734+hovrgmckW/dhm6CzKYdHWthrf61qRoY+\n1tElMUUSDj8wdpPZyC8HN5M9Vw3t858vu5hF7uh3TZHl4nBlFnxCWFDiLI2a\n/nqK0bt7qb1JmSl7jPJh2sy7Dm6DFUo7GfeZxR1Y3RV727B9JorVQekxKMhl\ncwwEQdogi+aCcc3E0O7w9YoUmU6D8DH1vuuzqpailOcdU80lRoKOMSHENiYL\nMC/eXf788AwF/U31kJxFivls8F9MICQT3T76bj6c0aY3cdbUc4O9snpxdoA9\n18e0\r\n=WWlJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.535398572.0","@material/theme":"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/line-ripple_5.0.0-canary.535398572.0_1580753501025_0.6656526720117588","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"46a61b8169e97948d9fd72d023ef4aa31ce3a98c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.5ff33802c.0.tgz","fileCount":35,"integrity":"sha512-0qKWnNoCfCkIqnj2yk5hBOJflGx2X0l6TOaVWHs6xwwEl16ZtYhryolkp/7wrfhJI7qq/wkgrv27yRqTyTODrg==","signatures":[{"sig":"MEUCIBl+e7rozJN7tYev/FcaImESVj9xhmPFcV/yRf3oSvrcAiEAygBP/3/nX1j+uf5kldukaUVsrVn/wP3SXGTId9B32iE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObH4CRA9TVsSAnZWagAAd94P/RqsaZGL+D1fCLDMr7OX\nZXLJhyv5K2R/kF0GCZ4zdjM/+/AV4JJltZwe76oSwq1yDAqdC/YOWkuiWTYK\nKx/r5De4ntWHGHzcrlZ1PEe5PincIGlS3scyFbeoLTsXwcNuxxBir+PaPkcE\nTsM+ZZcplOW7dsNl7x5cFFOVzQlZ5hDgbNhUBxSdrrbg7wNZXUm1jltDay/a\ngYtbGtfmE0AhOg7MDfWaWdQ1LiWkJ+L8K36k0Bit4uR7xCb2JRU2642AOeIp\nbWAOBT7dC8kNoI9Q2OIGVyxW2qv1uBuMXPjJMwh6was/mvqWy6HyfVzDCGOM\nBFstXBoHBHjD8Ff0GNPCzbpzuoEpQe+KyNTi6Dv4XL52eV2P6xH0hV63q99G\nSUdRZBdu5H1aAjIiQ7cttrxsVYZrH82BXoTqpUOUqywFZkIGiS5tBU/38dsw\nucq5D54JFFpHOMjpzGCcAQVCi1IIA64qAZakQzms5bCJgPpvIUeg8Vwovf7C\nqm4oP9Zw1Y37hVcueD9zXAZOLnsCjq46Bh6Duuhx6cXRxZohT7qcu3ZJhay2\nXiismDhlSiRhnepiftmz2zL+mqDUtKlTgcU7izJZDRJZDZxwOfDV/Vn5uWs4\ngXG3N5oszTElvDB+GhRPjHAVtATqjm1hAhwN5MQMkdmgoiGglt//kt0CwaK2\n27qN\r\n=ZyUr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.5ff33802c.0","@material/theme":"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/line-ripple_5.0.0-canary.5ff33802c.0_1580839415649_0.2294018333253911","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2078d2a949a43224758409021202ede6ab487347","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.1eb29491c.0.tgz","fileCount":35,"integrity":"sha512-paS3tFkJXe/X2OQC8Opm6LgnFw1fpYJkPgQc4qj7elttKGEab5BM53t5wJdb5o4YB+yPJnkZ0oaAcAxlAJORXw==","signatures":[{"sig":"MEUCICodTsxUtoTos5b/lR9j6ZfnK0Kbl0hrlRq16N0q7PEaAiEAz3Bru6rQxO7jlC0Oh0J2bQz0lZc7QxIkAVhOkIyAIek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdtbCRA9TVsSAnZWagAAOtQP/1PEhp9Y0PXyqycowj4V\n0ss83l1LcwSxR1Ete0w/jFMOAzwtUrk0/cJxUWxPtAzgAFINmEnJM7eKWN2A\nXD51hUfHpITFKQSlUSIEyPDoPKU8pjDsGqOeTWPyST20e4RJkvzH8MT1BZvz\n5pnIZ2BtaAWg3868vlzKRcqu7gseUROZ5jsb96zEcgTi54ZmUUzux+B5Ujvz\nj+c++yz7eTuc2VobIXHQ9ADLhyy0Eg0QSMI1ue+z9UOpg40m88657jIc5hMi\nbYVJsieyoo6H0U7Zupq1v979UB/u5AZonNkjnpEDXMmxKZr9QNAnYDzrZl4C\n68pTmSt7PQGqV+hVzDEHJRfsRCIqC9D+tCkHSbjn+QPwkwnAWIi953X3XQff\nXJ/kgsYXWyy0gmc/VEPNV4Pxo6zqefcrmh/dFUbBsvSu485TGwH1sHUt+0KD\n/lLqL9pLOkZ1J6Kpd41BfWhkqrN3E1j0J+Kl4t3uXs0we26/QNgmLhHt9H9C\nrg+SZZyDiplt+lvhphxL/ZdYEcWVGlPx3BVBuH2eWYd+h0FPGeRQi5b6kaYi\n4Jd5GNl5dSt2QbRuPQIOKVNs0m06/uwwP/Gc4hVayWMNzWDSdFf4+DosHxQW\nRCp1nWgE56ru/WUCh8Dm1eEp1kbdlt03Z502uEVwkSYsBDPBt2Vq7hR9Xary\nPq4R\r\n=M3IM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.1eb29491c.0","@material/theme":"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/line-ripple_5.0.0-canary.1eb29491c.0_1580850010987_0.1975269641535875","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/line-ripple","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"85e6a9c85e222e93c66f870d2887808597c8e15a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.4c7154b26.0.tgz","fileCount":35,"integrity":"sha512-UozSn5pL6mDJrR0suUxtT+Yz7XKlcnN+stFoOkjp2nz5N2aOx+QHro2ST26VsWIxsQ6N5/kXKUEGr2rcaF5nRw==","signatures":[{"sig":"MEYCIQD4wdvr7JTpOlO0ihssndlf9VhOCbKVNAhAKzAX9HnZFAIhAPK7mBcrD2/YUAUV5v3WWkVjBgWizOWinR0v3hqTalrb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOucaCRA9TVsSAnZWagAAa98QAKCC8lJTFdQXKR1Sb+O3\npbgxQeULr9ScQ8EKLyay/d7aU400UyWskM/FbPqMHOuhQtCRv1hKUV4cLSG/\nLi1MpPXd5TvNJBA/mFVW4+CGt0vH2Qsb8eKISPFQi23IqqqMskCBEHoihCJy\nfR3MdS6SIJhknrZKH9mosoT9taGeRsV3SN9KuuZZVwzmb5yoVaRYazc+io+A\nJXDB1Gexjzmd3rCLjMJhXmhVEor8Lvv7YPQPrQnYlQb3uDLvD6+ic8icv64/\nOXZGPymEe/qxqbXydvJ/Q0Z5Moe3AqUc5iEjlY/cdBtXvUpb1SJ7ftDb1al6\ntBuj+H+pLsNbs9JE7XiuI3+v9KStY9DDEbEUUnM/KTi7qK3DzRiC5QOCxXR2\nWBpChc6DGl9ru78lxugZUhmk1S8XXMQJ9DiueVakRDekdyuhFcmcq+a1bpIC\nD1TWYdL4wxTpCv0fKM+GK1hnL5lh0wicL052xZFj5eEuR4pCxh6MCbLjJp48\noKMU9KjekHWbDTO08zV771ZcUVuQFJE7bN4WeQOeAlw4zzLPDZaDXfrVbOF4\n+P0WpcV5bWYIKgDXdM7V3d6qL/WxbwjDRDStzP2VxpgHnQr4ISaap7QxMp85\nMbq45+zH9GKRiUr/Q2VSgCacKyxe4s7nLFygGv3aauJIc6Fp9sYHgsxdxDuY\nv2ii\r\n=B84L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4c7154b26.0","@material/theme":"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/line-ripple_5.0.0-canary.4c7154b26.0_1580918553849_0.7691688650641832","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e706a33df4de0a4666922d0f83d0ecaf58720fec","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":35,"integrity":"sha512-QCLCebufXYb1vpcNRo7GDhT5SYpv29OPCi28Uqz1d43g19glddMIKjQodOnSHjr6YUs65A+odJD1pYZQzLnE6w==","signatures":[{"sig":"MEYCIQDZFLLPxL7gZ8zsPyR/MwNAkctW4VztWYF9jMJ4qq5kMgIhAIOHjuDorzj/PnNBqRItXJ+o2gajBNCThwY/BsKl0pnz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1CmCRA9TVsSAnZWagAARY4P/3MBz3V16HdoYos9lysB\n5og1j43NHqCq4cnr79/O8DFyHZ44+xD1oJjOPzn09vA7BC8Wu8IkNMhvumf6\nWNrS05HyZ/vggXpN1a7PBsKXx8NTM6Gc4KwZIY+piLLuKaFZ1koshstbXVkj\nnaU1wa3sQ+1M5OKapcUCIRIOAvimTPn8ahHK1u7w/SuJgDu+0QwQph0V4fb9\n25l9C8CC8+xQtsx8Y44ABaMi4QTRkL4rwm3/IwAXwmUGw54H30kB0jlXfS8T\noNxE1TooFCbS6BsGjOqErxX1btkh+Z0OF8D/z72ZS7zhdWS2tYp+dV2xQhOA\ngFCV8ykXBmpixwasfyRuNvJKLva7duChhsGl+sK5s53ZlC7bSLozHp/ZLc6c\n1OpihPssO0y29nmoldMVIK8VdMe+mmAo8T+jrYa4efr5hxfBtHkVRcg2UMyR\n/ZOdKODc+OulHE8FEFSpCpIduuWTymdhM48ck+cYeUhokX+3u5c2pK34i02u\nl8bluAI3V7HE0JvTP5NGpssLn2YQtH0bir2EgzdcOmXl6Gx1X9FjvJAH4R2n\nWSGCAuM0631XpWVx5LYT6mLN/33D5kE6j2pw0fV5r5h8TtjHhnvT+oiPSpqy\nQeRBX21Ng4IbcR+teNK0J/1w5joKQWcTzdD2fmXJCa+wrFTlAASYU1b/LTvZ\nc4S7\r\n=3w43\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/theme":"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/line-ripple_5.0.0-canary.ab5f49a2c.0_1580945574121_0.3615569296481165","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/line-ripple","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c2e5c8ce50474b768ec5a8e18de2e6b1f1a6de6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.c541ebe15.0.tgz","fileCount":35,"integrity":"sha512-+Uq7hYqd7HBV+0nnl/dhXwV0wZCkm63NwfZyT9Jgw50LqFhDyXsqKWPQNt5sdA+vsHrbzXd9JnnworvL+O3lFg==","signatures":[{"sig":"MEUCIGA2o7R7+6QPcXehSqNca4tIEYMoiDJ5zh4qsQKHSUEpAiEA2SZkH9HUz40yQlYjT1drqVLjz+jHn2VO41PbIuzRdlE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJNPCRA9TVsSAnZWagAAkpgP/1C2YbQHkKL3TYEnwBLB\nX/wfmDK7NhMJj0l04xg9glIpOBhHq04k3+LfSUUbJqD0zYHJl7sazBoZE7mR\ng/Ux8fdHFKKGuSG55PBhZsJrnfYk95l0VBaux/iIar796sihSO72V4OjOyhT\nFcweytboShCV+fEABUNRiOuQXni/C+VoXUjF6wutOR9LzAciDa75kbJJsARL\ngK/QT5R89HR49OyboemrTOkEwppYY1zcfxS6L3Ru0J1Xa/VDDSIm8t89w2w2\nwwR52fNRzkN+spFjynkj7limRYXH/4c0wd3srT9cFakZFBPIqYbffh8PFABJ\nkZnxW/R6IKNs5lB9UJbWC7b/sLaYQrxQLX/jAAW2i4HM0zqJYIZz3lFOanPB\nJp4vwPZuc+vit8aTNzbTYxtY2CsqJNrbtzmbbCQodC/WIfUY32pHYwzpz2Qk\nVKWI9yzAASwiAGs9WU8GcYPIr7qIUvA5P18hzujFdQlZhDyBx+5RNEunFUu6\noKInVLcXIs7JnBf12GuPf2rat8n/MygWc/0ZmAHYT7D0vMuZB0Vr7CHHsSE/\nsRTbjsRQnWYkIYd2E1tnMNbIf4Kwar7UmLPeoqZrdSXtrjKvNxjcLQwudbCI\nskwaq8Yiuo5pq/xVAll5Vgf0lUdnNJuYkJB6R3JnXK9VnuSXzmv8oIRQdahH\nhSPK\r\n=RZRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@import \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-line-ripple-color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.c541ebe15.0","@material/theme":"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/line-ripple_5.0.0-canary.c541ebe15.0_1581028174884_0.839803125339629","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/line-ripple","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"af27d15ca3e82d9b8040766802e5801931906d85","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.98f7faa05.0.tgz","fileCount":35,"integrity":"sha512-4qYr9jNKVJ+OITL/ZLFSBDw2YzF85g/RT5UHvvC2O30JFeDwgG/K14rnmKJaq9u/3rIpkRcJ8UnontnuFqiSzw==","signatures":[{"sig":"MEUCIHFs9mqT6X4WwG7q9lBZswMEQjMBg7n2bR2cPHgWF2i3AiEAxbCbz68p0ZbKTsjvHkqpC60AtXNckHEhHKdlW69E8kw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbicCRA9TVsSAnZWagAAsHAP/jFDB2wGT4pMqPy6p9Kk\nElEu8or4dWeCzasweZGMk6Zch6JaAjdVwqhV6dyoOjNburr22xskVWR2Z6TR\noDLWdkO/v8b20LXGFtmgnSKhHHDsaFATJLwR53kAO2XyHGhDtWlZ8k1Hw2MM\n9Lxib3aAv8NgR0a48CMJHx4yI8C30svcQJ39vvv7/SQZUjX4ZTf0Mr3m5U9G\nJ/lWI95YKbxtvxop1Khv1ixerCc7qo9U57fhK1ycmiphqBgal4EqHjDCDfTA\nNtzC0qR0dGjAQbljOl/VbOFohp6rgq3j54gXZvkk2c4BjHJMWrwcn9OHo/gF\nYcbTEPX5WjI+ESmEJ5giet/HABUhmDsW/VWInjv7kFUXHbLsJ1SxGweFjHjt\nie9wVjEEOFivIj8Q2gRcef51/5qDF5SXasJ/msof6RUP5lbsbweFpdJNnSLb\nmsF2viODw29uNaFqRqxfJYgVlZTkJWX4YqNqDheSLvwYdeIKXwsdHa4hx2JH\n8Ap3ZgitpVUiCrtCzHeLU+Es1gSjb6KW5FElTqjnWh21MQQeW5dA7VpzBUOr\n9TZGpowaa7+4gPB/UGNKnhxfqp+MJuNsQRQMSSifWmkltGMT6SJrLgJZS8eX\n9vrX35ar1zGb4+zXu/A1pFUv3CrfnKp3Bwd+EzwqU05C1jdmv1H9/s0IQ5oR\nZvCi\r\n=YNbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.98f7faa05.0","@material/theme":"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/line-ripple_5.0.0-canary.98f7faa05.0_1581103260443_0.5053774044013823","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"23235d08120a3b1f808eb6f1b5382b0dfe9192ee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b4727e43a.0.tgz","fileCount":35,"integrity":"sha512-S7NiyNujltSXNKnSA22uk5VipUqwQsbuOmvjGD4Bo3i3mkVQu8vHA6FKlR57dAEA7O+YJ6wlkWC9WaR/AwKLBg==","signatures":[{"sig":"MEQCIH2mTt24FFAv5x+/zJv8MtwdJpMTrAuAwCXJay0epSupAiAB7RQ4fqEX9gMYDceSrMqDCjgZ4ODfabs2gULC6s7Y7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcCjCRA9TVsSAnZWagAAc0IP/Ag/EUZfBfnObtyzV/yX\nisLsxuGreXimjI+JifZMwm2RboF7zBtYuLSZHvOer0YHAkggNckNUznoVS+o\nqS62PwKywHhweEHeVo4tPcBuJuizjFa6/ug09FGkSmDObilDjT15KPnERwkg\n2mj9mDAtujIPlsV8I1K/pI27Q0D3lNFjdytgqc6bc+Ls/HvP07ACbwThVrSa\n0oI/lr1yjdJIQ4PFhAJgi/mGEj8wH6dFt/2KiYn3A0X9rxHwRa7pbPqrhuQM\novr5pEy4dzfkXnRUVjh/D3wOIk5JsajnXlnF8ZrQxEfM2KLOBbAXvjKk/4fT\na3GXt1GJdE8yjxacWntyiDSaRVFEldi6LkP3lrxB/ZGJzCOxxvripnVVqYAl\nrdk3RqoyjTJXVxwCq7wOrv1gvKDMU+wC9LxZWtOXA4HEAXX04aHpyYY8qoP0\n2dRkJa9e0wem+XL3B8i5JBjYjZ34oll+5v+9BaLWyUAJPxxfZyZpY9GKEUpL\n9e3rcEPO4Fi4Qre6NDDojE65Vm34HJ3AGDItEeWVQn2CGb3jXI0OnzqMbEjY\nXdSlWJSuuuLbB58CsHDNYn7RVIyncw1K2lkLifBMch1BQfeSGAXVti1Fp1yT\nb6uijrskwQiHrfU0ok8mI6l8PAbmFrJhsGtWQSnjLFWFv+PiovvXPWo7AHSd\nJ4U3\r\n=P0TU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b4727e43a.0","@material/theme":"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/line-ripple_5.0.0-canary.b4727e43a.0_1581105315509_0.0034244184055507443","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/line-ripple","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78061ac0a1ab4c3223b7f66ec2eed4343e8b341f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.91d9d5a65.0.tgz","fileCount":35,"integrity":"sha512-6YHlCDIDKqCv6KoCQdKC6YYWVumIJ6ucU3Tfk0HtV+3weob2g8WqNwnsgrgET1tk7KEJprO7Cw8o4eEqJxzt+A==","signatures":[{"sig":"MEQCIFCftU/hEf3qn5xT/n7PE3P/6vYmb2EJcr3CKOOexBMaAiBAC6HPJH+7lR4wQjTXDVN7rR1RNOYNeexsikREO2DuHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePeu7CRA9TVsSAnZWagAA31IP/jC+0pd+qfhinrUqBhYo\nh1G0PfIrEoXk8Y2Xtd2ft6xE/NiHdlFx5BigueUqfNHNZaxZtFpsYIaoZwMf\nVYK3j9KuW6Rzs7OE/MrmHWQe2dcS9hAyByiMuijbluGKX6RZTiYhBWKc5ts5\nBfyGYRvl3DnC7inDI6VekIgf7mD5pACUshV34bFaOPiBRp1s45hIOnyQ7lez\n/aljn7zdb58CSkdSPEzhrl8P5VV9bQ3+VJi7Vk5Zb5uwkx6UsuXv5S/1Agt5\ntokIQEdrQcL3w9qa2PzWoupsu53hi8r1pjAdVhdPyDmmnt01D0iTbcA+vSDk\nLgpews82WbzCRtzNRbIRNg80cDgCRjY8Y5hNxCRbeJAyvALIbM7mnvkrqsIz\n3RULmCf0Wxgr/WmeJs+QT/Dq11L+jOTMat+kci/WWBhzp4aW+8TU0zhnXOZA\nDKRIzPqJlHc7dkNxbfoVXaD4tFwav+HzERsYKHKQHV/XX96IUCA74KiW/ZNd\nXHUxF6klGKc5bgXUJXTVxwm9eK2HoK4/zdn3mvcIJ5Fj33fdU07r0AIYpbDR\nYOF8YsNRT9xA/fKZ5LZWC7sfHY11MLcVFFjXapYmm/jknTbfNcoiOUZwKKsO\n6KZrW8nHlb9Ly/AbGjTtPbOGaA2hZz8m8TDa9mJ5j+RyO2IiGPyOfiv+9VIn\n83zf\r\n=kpci\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.91d9d5a65.0","@material/theme":"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/line-ripple_5.0.0-canary.91d9d5a65.0_1581116346908_0.28099098051142435","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/line-ripple","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1a9b65c085dd7153d4a1a46f346fe567e6f78255","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.d5c006ed1.0.tgz","fileCount":35,"integrity":"sha512-HwPzQ/TwU1zT+y0ayufZoixIzAvgHat8J3fnHh1AVXd5yTYJe+ppGeZgYu5kyVYwSoAqZXYlR93gXWkF9MnV4Q==","signatures":[{"sig":"MEUCIQC5HTbPala196mnJFeR7KkbgBWO8d0655hSKqehCWYEjAIgCg5hgNPIGumcHtgFmkfKiSOCbUlniu0oCYv3S6zADhg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYlXCRA9TVsSAnZWagAAaV8QAJwe6tDgYDIOV/nPOVTm\ngU5pNFp80tH4aabuI/EmmEzsrTV9Tc6q2rhr/LOShr8JfcFl5lbh+L/+86se\n+OC8/EPDbSOe6dYelL4X5F3X8FHm4RJhkURkSvbPSQp1QAWRsf1CCID8mUMI\n+Vc2zx9SWX1HXDa46agq+tPUbedDj7vQhdB8Pf3DjtS+H3f1ptIM+OdJur3P\nWYw5g2CEpQ/YFW5Bha4vTuoOwvZeFf2jADum4Qp+oDa4/stGBgiHwym5exDo\nSdgSBjQlmh21LaoBZKMZCVygiTQmKX11NG7ZV0516nV7F4Fuvd/NyLkpQvHC\n9Wo955Y2mt66GZKbUZ9LrY5+A9mdpjNGkwb5qj7uZtCKQevbp3CqzEZIY266\nnL/SHckxnEjj8+L7CUR2g6ogeTkUaB+pihjUOZmjeXmgTHlausPhlBcw1W0G\n25OWHHpq5PrbDvrkL5Aohi7Qi+spGzZg9mOziwEidUrFdyoNALNwVnT0e0ad\nzpYFvQX2eqojXltvo9kdJfHpNYknj42DJavAvKlqPf+z75qwIyRwTQ0WTXcu\nsFkcCLyHe4fbBf8qigCyYOZQpWdyO0v/DZDw9JiToliVbGRAHr70kcavEkjF\nNl06Ls4LBR8gVigKQiSaHgpn7dXy8NvYaaiNWrnpDl81rMeJF1wnBcNN9wRj\nv+O1\r\n=1lAS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.d5c006ed1.0","@material/theme":"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/line-ripple_5.0.0-canary.d5c006ed1.0_1581353302991_0.65545789511289","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/line-ripple","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c9ea53272775f10f6b31b3a170ba00609dcf21a1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.559f1a570.0.tgz","fileCount":35,"integrity":"sha512-6SYAHU392ui03wwJlzKumDu65JtkOkK0F+PFXWQil+k6ra7sv8EFelYHyNY6GxPHQfBNihwCOvSgTzysSNLVpg==","signatures":[{"sig":"MEUCIC9aBA74IR7xYZTkFeyMBi8A4ko8i+SpxBxHmA+7A5C2AiEA0diuzCV4+++7u89BhQkF+6x2sO1Fn3Oq0PHGwg21moQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZHMCRA9TVsSAnZWagAAmRQP/1IrNqUp8mu6sY+pT/N2\niVNuJIGIsUQuJxqErj7LRcL8Oc0MCEglcO4Kto+MRwtTOL++eMo8s5M2m0dC\nM6ruwCDzaevL3eYvA+R1k0s0WBlSQdhQGy9vpoi27Q3CTxm0TyBS5Lp1GcM0\nVDPfVFiNUGskj0WIic8YDIY8rZB6q85KGJSYvehXdOhSEQ42p2W5jCA78fAQ\ndB2wms2FDaUThBqPL1AmGIWGforA8dpIlFFZ0hX+1AaBgujIk1c20Kue6y93\niJ7t6UUuqHxi/doAc/8PGo2fFnIXJtF55vrN5Z1JBvYoUKwokoRHv9XM4tPd\nIn4WRvNQEy/PGXmctwAVHKD4dIM7xrCiUi6HK1tYP+CACCEh+oEIRzQ2XMI7\nLNxy+TWqSOgf3B0UL8Jle3yuX3DdtjQciXi033QeBp2WFExhUUapCXHAKCe6\nFzG1ZnKpDgBk6DKxwGaPnmWi66JWDtov5krw8BgXm/02yOIIRG01qtPPcmTR\n9jbXy26JPu2tWoUH8reK4rjkOPlGIbrpQUuvlUTplgKiN4MwVjnS/S4/ZTBU\niKzLJwfxL0rWesz2tUFIl+/OW9A4afTxQTujxZYLmKhiQMhYxJXPJpiDWYdK\nnsO5wYs8GrPNwbXmQA1BsjS/rJ5NvXVI9EFBCpqJPEQEFkDubrEj4rrFArAs\ntCqP\r\n=YVJB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.559f1a570.0","@material/theme":"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/line-ripple_5.0.0-canary.559f1a570.0_1581355468176_0.8171325816239701","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/line-ripple","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"46e7ec950f77be786a875181ce6d0cf2fb76851e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.ad3bbf782.0.tgz","fileCount":35,"integrity":"sha512-TkiL1GWmgcRGMLrYB7cEpEzvof7C2p9HjE2k8/UCORvNn5MZujuoA+FRaoeFqBn6vbi7ck6SK0VVh/SyMwIVzw==","signatures":[{"sig":"MEYCIQD4TVbCEFldE+2mRKh/JS/Bnk7eaCehUaJ+fl84X1xj6gIhAMWXZGw596sGUE1E4Pg7UTghjQd9ekdZc9vXSKhsvwNt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQarMCRA9TVsSAnZWagAAvdwP/jgv/v0cgSuG11vxVPYJ\nqAhILXizhXG9saKgxIZPVLTbs1LnAS87hIdts2kmYbDLtbiZfHDM+0NZurcj\nlSLBEJMrgELGqXlg9qVRxXnDZuOOsyA5GXZXsvYAGI3+j4J9Dq/DFajF/Lc5\nQR0P/WtddKqWrdQHVwTQZc3vg0ENCY6u3NTd13KCstMClD/xPeTF+FDluTcY\n/Mwh4ehMaP+/gmxu6CRu8BM7aXuWpGHZ5GK8wWWMzrmSnlE0dE2ZLpHy1Q/s\n3v6Dt67QaxlitL/JiIvjN67KK2O7fzFWD0BRx3LCZbD3V5PmT1dnvkFy5pnl\nkBY0seDxGlBv2wf/P9fLMLdIYmvGA45Nfq/Xc2sqbZxGZB3OSOLIP69sx59f\n6bJKPGmN6FgDRbgLDStxdVfdPpChn4acE8ugqkALS6upfJaF4ZrH000J8veu\nF4FPirczAGEhdNXCwWcdFmOl8L2R3k9e4QI8lkfXWhWaK5acIPlEOw+tuWzs\nEXz1FAEU02tkmHkjQfTpgMCrQChRdLmsTkWDEOnOJZuuk8Ks2gRW5jlUCzKp\nTTxUHoY543EBAV/nlp34tjZmnd2nNhhPOKupi+Q4ib7wslZbTrplLIXYgtPb\n2r8W1y14qwFAtpVAfy7337PJR8RU/Np9iUcSyrBBak2DEqjlA5seJH6ZKcpr\nzGnO\r\n=BYZB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.ad3bbf782.0","@material/theme":"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/line-ripple_5.0.0-canary.ad3bbf782.0_1581361867533_0.2750627750671317","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/line-ripple","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"afaeec750f0fda49cfc7cd2004b427be98347b2e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.570d8e49c.0.tgz","fileCount":35,"integrity":"sha512-vwQP/EqAtRD/kBZ3OfZz8j8eB/SVWvYhsoXfyKV99jkzMPVn4OLrj/oQkNXLax2UxXlyx3N9J4Igoq/Hv09TtQ==","signatures":[{"sig":"MEYCIQCOjg651SfvIKWT2wK27ZIPhuF+Dn2vdukFMZEOoo1SeAIhAIpKabxh1hb3/MKDUp5z+mVkKaLQbuhnWh6C/b7GOKsi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcBcCRA9TVsSAnZWagAAzQwP/3QlJmmAHiiCB9vpyg8q\nQKMs6OLk8SPCDxSrVw64/fqAjsY0ftyw4tcenOdzoCWBZ9DSLBlAAz8l2+3O\nmgxPlw6wPRPLcP9sgDYBDnFeptCYpuU77M6RfAbkJNjpRIuEZjHlqUlOo1J8\n8rkThZUyBwnU3Qtp9aHfbktLbPxMZ3hf8iiAfoCT13fbYlBrFMb79N6DU/5G\n00GkRTdfyx4ZJhKTFmxLUoxhJKA/gnv1GrZTIu1Jv3F/IrJcEzIWvK8BhE67\nXaEokiMyAASVEti3DX5NUAdQtuEKEKexzQfaFU3OAr+jw1mIhmYgxsAs2HAy\nFIRWjo80xIaw0jKkkSaMG3MMqKw8BdVm6OHTKldvx4LnshTUDrZTefqdgJS3\nSEM3FMz75YX97sYyhT07mkL64Ux4+e8p6EBYs2mEqZfCUDWMarJIobQxwZxm\nlOO5Wgg4TcnJgUeR23hyZ5JoRhim4mj8iBmPn7r4m7Qbg5bsw8M6iocs75tv\nm8p0sfl4on7HchPHoiHnBwcSX5GsJlr232gfRDkVDjBjFMmCzoWTDFrr0aId\nIXvm/ZgPD4p18nc0Uf4ciUVn++4ewtEcGHJVJoij8NJFsUAMS0qRYcnsIdDd\nieE/Dmxz8vl0Km4rXLZf9YHjhgdXyP/S9m7s7bY0UbP4ybZPJXXCJnTY+pvP\ncBWN\r\n=R7Qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.570d8e49c.0","@material/theme":"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/line-ripple_5.0.0-canary.570d8e49c.0_1581367388417_0.5150198554498857","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/line-ripple","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e515f9a44d65c74d5d3a3b144bd8fb39e0366fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.48b06b89a.0.tgz","fileCount":35,"integrity":"sha512-v0lZ4FrcUFtKVherf0UnEEKEJPBwmOXeqRcthWJJ9AeIgy+nIr2TpTOOdEcK3A+QO29imFzEeipk5/Dd5PYACQ==","signatures":[{"sig":"MEQCIH7h7LXkIlG1UPVVGB0G8XmQnvnLQ3ORBqJ1tTd927/TAiB7ceXKAyZp7uxN2UbQ87Ic406baXcLx5EmSIc+cFa+7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvWuCRA9TVsSAnZWagAAFy4QAISCVeOjurIi1IZns1MD\nXQ5UHNMm2hX2QKjrdk1hEb7zV7B7QFt5tDQMe4OgroAdEQ0zsO9q813mcLJI\nnhP5WDKSPpFzGDqrt3QZJj9J3+UVhgecEgu/S1FikqkGQsbxu974mSgGErc1\nYCTZF5yzXVpihs6rgB021y1L2U+g2ePpFuUfXvBU4xdXyGZsnfxByehIxJP/\nvPXQkBh/kw3XdR405+mDr/UYYcc/hTsHrCZRIBDBu4SGCHU9cBh454q10597\n+v1x3LmddggY/dRbqtvSLEUYVWQEXFgiWpSHhAbQ37ImrlJBxSP16lnpILwa\n1GSJPKkgp6dzPODL3yiyTzh+K/NkCcGgc/d6lkNdeiQraTP/u9ECPrLI7tF8\nZY9atMAPJ9smLSL42u2x0NZstKO+jTwSRJpKvOblOAhEwG6xSfXKGVidiknI\n6Hf9G1oC/poUsfmXDOhklg7ZZiCspFBtbSAw8IyclLb+/412xSOGOxbdg46E\ngzKrLDFVPkIAMyd4e//y/tfGlTmyDGy/lJiUGrrkFDLK/oFjY8fA4o5EyT0/\nvuhSC4EUomrUztV2q74YfLzvmq2nfupSMQLrXC0YLx0Vlinmlkadihc+q3wc\ndpDGui10uJVdR+QE9YGzUzxoeYRHi71yUpWmI7EyYl2OiExa03eIYpHzhk8x\nKMkI\r\n=iEby\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.48b06b89a.0","@material/theme":"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/line-ripple_5.0.0-canary.48b06b89a.0_1581446574040_0.9231504546834557","host":"s3://npm-registry-packages"}},"5.0.0-canary.612443dfb.0":{"name":"@material/line-ripple","version":"5.0.0-canary.612443dfb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@5.0.0-canary.612443dfb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f870f371323643e562b0780775b0583d592a5a18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.612443dfb.0.tgz","fileCount":35,"integrity":"sha512-RQ95tZ4VcWt/ZQR2Q+OrS0GAQixSFOt/RdytVTcUAv2/bDIhtiMIygqGy1kE63UBD6+FfW0RuqOKOd1M5kLR2g==","signatures":[{"sig":"MEUCIGuF0qEKIDyXQhwcHjfATiFk1anbOVSft8uohKIsk44GAiEAzgC+3ZLFJjfbu1PaY/VuOcTgbxYt1o51Rt3/n3de6zc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQwUZCRA9TVsSAnZWagAABNUQAI2W8x/afUvFAo7zxR//\nVglbTFwB21lv9dwkHcU5q+9ycMZBI+owfVb8jyUQtw4MvvCIvblgAyw0SlkI\nauLZxz/q7ejud3+Agyqicj8cciZhcjzUvtoZiQcAt75hKe9zIiYRYdDj8R6j\nHdYOrJ6AKkGKc3eCORT6DYjATYFA9rfVvO5eA0T/sSIrrNluqTzxj3QIiFVV\nAaNbE55TxWsAZlmF2lGMsr81MCPM/IkrzZTvQkm2cQuODsMmqTofybvzTVH0\nHyKcfRNW7Xw4ERB8MrK6lGSqcvX3ekEedLdmOXXTAhdkxkfpdVfUvEzURK1d\naDYVT0VMeMhLFLg29cT2zlcpWwuey3lVcGmWYxrtfVvnJl6XIikONVQ/6T63\nK9jHUhjl+IT/oebbVXDZvLvgTGw6NmbJxE1YswDYTxSqkCIhLHCEiNTZIN6P\nEDDNAlsG3W6SOmJObn8TT0QU/K07P2M3LMp33MnRxBs5FLeETAygkok8gGnx\noteAXrdCTCcgRlR5aNbHLxGpp8VbLwTJT+S0XYugjIN0m//vK7JBqhcGMDVj\niIThibKv/vQJnP5ofqn86Uu5zPekKUQRDuLWomUz42dZGA0zllolTyzgoYjD\nQ+pLP40uLxjHtv+8Gai0XG4P7VvsQawChfpFerO/on1z0Mzef/2zHnExXJ9R\nkg8t\r\n=Ose+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"622585006b9702fc93bdf0ae416f6c58e398243a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.612443dfb.0","@material/theme":"5.0.0-canary.612443dfb.0","@material/animation":"5.0.0-canary.612443dfb.0","@material/feature-targeting":"5.0.0-canary.612443dfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0-canary.612443dfb.0_1581450521411_0.6573970673753076","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/line-ripple","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4030876163f69c3be14f4b2634352cea4b8375ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":35,"integrity":"sha512-luk9PstN1cAsI4b9oGCWOBzJdtTiBedJSKNw9HukGlaUZkuhMUy7bsRdr3SjarlYFp4pfD6Zspszd4MsFBXfZg==","signatures":[{"sig":"MEUCIQCPXbB/tTBEXErndVlKOFMuTmr8ZCjOQ77rHrAwEfk/ygIgJj5bVhOEXIXkRO9B/nk3HpY1jHUI6pKCb53BZBtdQIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127110,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7x/CRA9TVsSAnZWagAAUtgP/1cDnNEcUCBmiMteLux1\nHd8Ks86geI06af6xrNr2EDt8MSaj7I7oPqQIhRqsclgHCgBWkaebRkVcNfDy\nZ9FTAU8ow3Xor+zBotyDLoB9zidon7aOW76TnnMZ+XUQ6PZGs2d+lywuTG4b\nGXCHZ9TGEvxdz0amB/GWFpeXxJNws8zguHH69ivx2szj81cHFPm/sNij6MtV\nxIe8rglUliPRxzugUzSAsG0fYmhqW7O5ihp1o0dV/F9e5yeuUxYFTcXzsQLG\nxsnUCUewnhi+pEO7uqqvVK/cAYTHZhejABEeBksT3Jy8wuFfA1NU/FOo6Oa1\nOJJ3c3jm+tNBxZ8O6G+I7EwAD9sk5eQG/w2BtTgOu5/j1iVHBc2apFOi/IpK\nqSk/Ki2pqYhB04Vs2OfXow1NLGjLnj/aX1EeBc9Okr1q2Si23GVBR7n18itB\n1dOBLharQhmXost/hkjK7bQNagbWHvD1UvzFlXlFfRwu9LSsY1ABn34rfDBg\nubs/y/mEG3EQ58z6vPp61TDDaGaT7biwThmr5CMgUe5i0m6cM8jGE6akYnNi\n4b3bNe5AfMSkHcZE07IOSQAt275cl0YrF/sw7Jjy2ogbyHNjuhlNdMjFH0Yo\n83+kfGcNeahZh3YL+Q4AwF5N02KPJfdawnfrf7Z5CAlCxq9JhTv7mcI8us6j\nSXqq\r\n=zRXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/theme":"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/line-ripple_5.0.0-canary.8c11ea2a3.0_1581497471017_0.501334439977108","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/line-ripple","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03cda435dcb27108393a1e189f14b4a5acfc6610","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.b2f3d311e.0.tgz","fileCount":34,"integrity":"sha512-dhqJgzTT7iQG9wpBwf7gCDPbCsoy6WNznvz8+62Xpu2wibKXULOCPWDtwinLTmmzxqe7fce12UvGpvTQ/IFA5w==","signatures":[{"sig":"MEUCIBCTe4wR9/MBgrXm5Umqu/YdJbPKh2NAEovdc9qmlimoAiEAi+5YclHl60xQPSMC6X/tIN+LSY+8OwmjplvEyeufN60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcL4CRA9TVsSAnZWagAAYk8P/AjvMVoDeNhJd6l7s+6f\nXVAfg2eZjUiwYV5RZEK3Z3W+3YY6CTdU/EEa/B/+7pzbn0qoaTkQ75YO7M/L\n81zmr2rw6eGMMQqknzgOA8jGl5O0bwk4hpUk1wZlck+g1So9XQ60B6bQKrQi\nFdv5SWwaSLIP6REb15Eis6KGdy5QKVao+nK7uQdhIeOooBaKFDJ9MgRkG63u\nHNBcSHqc7mNIvsuQP8hTKqPIqKvNCRVDVb/4j12Rf7VTQvx4ntePZZgfBiyv\nCy1xeWx0GOKI2L1j4BDbZ6qMzTv9VMYK2QNehq+QfPEaEb/A3IgkbY5ijhZh\nhcD4xQ3PN6a4H2+5jm7zuuTvu0STvoVJCJMS6VHvuuDRmRLX+NAh8lguOy4q\nN1QMf66iCyefHaG+O6w01SDgNznv44wkSxMb1rFjZQo70mODSlmIDsHDz/vB\nbOUIlgwQN3ee3K6gJveO4uqVpeOG/naOEZr7xumUFq+oZ6j4FtZ+I9Kvsw9w\n3+ttUGragHKngdBVuRJqIB8eimQExCQ/OJE1Cnm+EimwRhcyNzqHQdTv7MOm\n0+C9ClTk0DClyN9eWqpoEdGtmy+xlesbilFsc0BXBuXCtC0HXxBE3AvFvsJ5\n0S0rRLqYQyr9NiB5IwxD0kItYCbgnONjWshAN+S88vkCm2UnDQLlvJCbRHXz\nGDKX\r\n=4x/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.b2f3d311e.0","@material/theme":"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/line-ripple_5.0.0-canary.b2f3d311e.0_1581630200340_0.6489702351233204","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/line-ripple","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"93c6044734e38b8d1c1e3ccc59ab5fff445570bb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0-canary.4f488d0ee.0.tgz","fileCount":34,"integrity":"sha512-lgzqa8OXBRyVC1NqvMyZguYEfvCR8cUcGlCJZ6gdC0XVAEFsqUFnpfqvLmW5BS6tmLXojFDDYSe4RsjLa96gmA==","signatures":[{"sig":"MEUCID7Tk9FFo+fQecyqL+9Kk6+cU2kQ1FdwAyZjT6Jk4xRwAiEAiRc5E3bAlBP9Bv33Js4cNkNuwoI+3/vX3QTf0+apzH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdZWCRA9TVsSAnZWagAAfpEP/RjFqEShXXlPG6Oh6TJk\nM+9eoajjxRcITpAhJLRdzz1ZWT5LI/RcIVi562JWaEiN13NgnsilfeuS+633\n0+cOSnpzDpWG63/OLIWauxkWbw04UoaNko6LKFezs0pvw7AWvT29S5lfgDrV\nHE8K9gLZqV08rEjn/kRwX9gdba5h1V9T94mcHBr46hcDiU1Sr/50IcZnMpbl\nxmCOrBZqMJsDIm8nUDolbxT8Bf7KMcIP9cxq1mwOlKcJLQdNT9PXwrWMKlg0\nUhhn+ZqXchLfaWTjsYrJvPBiSllwjNDKzqUriboTMG0BpeaINf7Fv5r+mmNz\nBQm0Y/sIOVFnpnRYYrc/TPkc7G03x4Hu0y2F2Z/beJQCt/o7yxz5D1zuziAO\na2S05GohADpI4h6lu6UQs96NMsmDiC2slnqyKUCulOAKHxDYIgW829FI4YOm\nX5jkCDJp5GgpbeIsF/GBotpjiM0daCVealMudv07ywVj/LkGUBUHWtNMj8iA\nmnr/VtGqFn6+F9V/T2v541YX6GT9ztoht+PPhSXYV1MraQyR8Z3UUPTJmpG/\nj/qMJu7cvwGQBoTvk89CRTmjx+uH3637a0WNFDEuS0pPNg0a6zRVIRLB2eXA\nQChHwn6xtBd0TdiAxPR/AqjfTrhvb/KKwWeyMr4RQJjGNGr0M1G9eQduZGoc\ng1bp\r\n=vgb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"5.0.0-canary.4f488d0ee.0","@material/theme":"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/line-ripple_5.0.0-canary.4f488d0ee.0_1581635157904_0.6803860231070906","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/line-ripple","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"44671513720a78c3d0ae2bc577658c8cf6f72e0d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.fe79de07d.0.tgz","fileCount":34,"integrity":"sha512-61rDw0tGcdv7R2fu6Qt9TYmFNAEO2xCwwANa5hfXBWwmxIega+uo3JPoxy9eu2M+mgluyz9XCuKL+gexRCpTXA==","signatures":[{"sig":"MEQCIF6qFjr2EzjVVmK4L8ljOb3mNPrR4EvehaJN3TBwwzOzAiAbIWIIAS9YYJRqmlusBdF2QgWuQ860Yt27GHAy3Oygfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdpgCRA9TVsSAnZWagAAvi4P/2ULQxfWSmaDWybCzjqQ\nZUgBefDXntlikUZpNa4i+hjNpAGUg7xjFaJKwqoXjOVZU6/NHmjU5kIZnDlM\nNuNH6WiwgQR9wHXVkHcdVvrXmtEngDvc+XABQYHFVIzBm5lHx/yjBojXDDNw\nFqgr2m+8iAYJS22Uo10wMfr2N9po8RBAjQvWAu0dd3ToZQ8esIwEQTDM2qlT\nTNNCS8wirpNk4kWgLaDjYP1fRTYliRBY3yQxJWQp+vzSrmQRbnM5E31ctfzR\nm+iDq/kvjPysC749ZfK8vRQAl7+L50MiJnqQko0xMxU+i+36f2TjEyijCYrD\n8JAFNkcJI6zlFA/9jwtJ0eMardePovbkBIwHeAoE3KFo8LS2GcMfetDcvwIV\naCZJ9hbJVvMW93Fco5+D+3SCgYTL88GsqBT6PnRQhvF3R+qylG6yQ9nuIP0c\ntwsTOgXggPKE2kuho+BKS0Rr157CxzmwebnNeKN0HsL5GVg7PNxsyA5zC58W\na/ChK6XNldl2LpNNJydsfYDXuSuw/y1bHtNIr0Na2hxWoKSDToe8r/8DvknY\npH3IKnVCg53bs021us3HJJSpiYf0lwe4nA97RuqayUAfH1p7MfKUuMTTtSn9\nvN3WIURkS9j62tk/55akIf+G7cenvWb05Z9RlJTdrj8nTfJz81OfJ2Pyvd4Q\n2twm\r\n=S+JD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.fe79de07d.0","@material/theme":"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/line-ripple_6.0.0-canary.fe79de07d.0_1581636192202_0.24734009232737564","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/line-ripple","version":"5.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"39761ed05b271841f0449608a637731a5417b959","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.0.0.tgz","fileCount":33,"integrity":"sha512-1qEyGQ8GsUpwo4l2hoIWreJsUNYnYnzWYodedmTg++M5D08lAuCjfKR/o9qN1vtuslQFfFo8Yl8ofTmDbupH4w==","signatures":[{"sig":"MEYCIQDHGhv+ZvMu7kzRZDrKTsrd3ARPb4Z/ldL4VjTj/ks/hgIhAOEhvte8DR2OeQxeaoPFj4y5GBMSkNfy8ZFO2MBwt6l1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReUCCRA9TVsSAnZWagAABsgP/27d5tCnnw9S5uE8ZaVe\nzHMdeTgNWC6/3s/Pl1aDXDARUV8+SyyQDk526BRLqjMA3eXg1o++m+X4ejbU\nZjMIOYIXKGrEKZHolmAGy7jo8Bctaiettomf7KE08m6GshUIGWFbK8Y82Hx0\naQyaSU9xytsYqI/ejWV7Igj4wKCKRv+bTtOxSzCKlmXoNZ32nYIbr1/LycT8\ncNYSthxjEFImGsyUwk3+7CXUuUKIlav5FP5p2BXPZeXhnvEyeMgTKoor0omN\n94HpJYcOaSobJVug/eHw8uYf1BsF0yL1MsHEnjGcpSkx5kEwVMXapMjlshAh\n7D5ECwM9hAQpw6X/VRC96J5WMhEPPU1WgbrCUMmMpTDAT0JjSKa69OJQ1SMe\n+8nKEbckl2KNCeG2cRgV9SzgsedJB9Cqh42aUnBSlt7H2x5m4ygXzNQV9w0m\nPhYbS74PVmSbkNSJJjufhulqIcg0UPSSpPTN5m7zvkK1MXkNZ87tQr1iMuTD\nuSXPaGs0wLVhRMPUM+JpRHSt7KsMWXUgZKHMzJYRoFLNd/nrOGEf/6yk9U+l\n0KwMyA/vM+LJaOEXlukyWr/Pa4wm3g5emZ73Ovxo1VqnxCQ+cAHAv8NXWQIo\nKltwYhL0A1fqISTU935LJNg0YSTqx+0HNnZZA8f0hdFhOr67DUqByE7mNRGW\nmSj9\r\n=F9PH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.0.0","@material/theme":"^5.0.0","@material/animation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.0.0_1581638913881_0.9897227864606042","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/line-ripple","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28ef508ef14b2e44d02527289235d98caddb79da","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.5e313b1f2.0.tgz","fileCount":34,"integrity":"sha512-xnkFyWBed0s+OqTmiKTZcr81tr0y4OVt8K6UotUq0/MUvFpLUCaEACK7m24cjj45bTiSNMf/eYfjuYMwVqgVag==","signatures":[{"sig":"MEUCIAkm4Ch0X+GtbD0kHt/kwmuSc6S0vQh5ZsnRvkea/Qz2AiEAqPFPeF1hhgqXy7FvGOvRLuKrYAW4Ic5/uLYaIe4kGTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzGnCRA9TVsSAnZWagAAC+kP/jCUI8z0FBR1Lfg+V1ML\n2l7Eez7/dlX2K5wMnamCk23SxTHUWOtCQ89Nz77630bXHAphmNKM7tnWB5k8\nlL/X6GHAtgZRFoSZrRW4Swd/knw2SBo+Bt2uR76GKeAnsw+KxIRwKrNBM0qf\nvkf51tgDxhNqpHoSSDRXa5SdwTuYWGeL7nTwc7cnYJ3P/TUPpal4D9qeAedL\nBqi3oZfMYPb9/9ASyiIqqP7D4/ZL2AqicbUq/T1hMujv+CaEwwztxO1HCC5E\nj4fYZkzE0bvnNGyxxjdLE1jHFOkSLlqg350kk+0Dy1KzQDVQIdZ2OCceGvBm\n6HyHCN3WraFEH7J8/oPpNAB29E3rlm2uo10Uc/gjqepHTF9B+aBKcr1EudKn\nnEKFNtE1JA9nYJT2guQxQq32sNSjJ0Cga9yAjCJhR5BXsxp71svKBZL+bOSl\n/pgAk15StSV8LMo60ROg+uDlrdbg06A2R3HcbadGlkXluGyrYNw87NDflEdO\nowShs8iHyXEUMAmELqiQNIEOe+KhZfn8dObCv3BnSDfaROK5uhol2bOF8XxH\nXMAm7tv0QDLkjijSmf0VFDNKqPFVGsh61eeYZSKukOhBD6qx1sk00rGz3GoK\ns5OKY4QrlpPT9TPuqeppIfYWJYCZ+saogKX08yMInPQfhmG+MDWtivDcGQ0l\nnNQZ\r\n=2Nc+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5e313b1f2.0","@material/theme":"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/line-ripple_6.0.0-canary.5e313b1f2.0_1581724069829_0.9872483735331739","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ad91f876a337bf980f9daa56192ca8f734c711c1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6a56f387c.0.tgz","fileCount":34,"integrity":"sha512-K/0XHdIXnL1mAZRIQrXwn3BVt8pk7iZHcFUgkAbikRLgygrCAg/DqZzl2OfWchwb5Fe8SvixwCRCg5I0lVRhCw==","signatures":[{"sig":"MEQCIBVbsbrGL+xgEH6JqoNNxc7VjXk2ZLjvCtGcU/RV5U3kAiBc/roLd3w0FeH6RFsqdFv4O7mAbDvBFnI787+Eb8K36A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD5SCRA9TVsSAnZWagAAOXUP/0Eeh7Dj4tUGQTOEevEF\nf1ZTXIP0kRBser8ezzcaGrW1xyZy50RF1DhN5QRGtLEfXgHsQO0GhoTmRmMQ\nsd5GA6sbpVfZWIDGN8P2Ur+168cfmATOJfr5mTQN6IWUPtuQHkwfYYJ2Vb/m\nbE1o9A8JNmVNLozEFkid8BJs/moya9QTDig9sw8QeXUa/AkqN+Lnr+ggFtIu\nhNsiWAS2IQh9M+YqxBOmaMc9SA5L5X08RgpEtqWM1HPgL43jy/ayfBWJFoJ8\nFJqj2p36o2Qetm5Ii7sPGOj/+PPiphT/zmx0W97Pr6Mo6gE/EZpZs442RxoR\nCbwBpggN2ovdLpYeJIO/I2ylsyGd/g3U91x81TleyWeC5IhfAhBEDgj5Nx/x\nif/C+Tj7ZkIvpn0YWQnY1YVZNA9XSuOiz4I33O2FUPPervmvxj+mlXCaQpAL\nEnqlswARB3uzGjp4U/uBsJNjlnxZd9l2iarXA9ou8DkF6sHtJX3vbuM5SHbb\nYpyQaaCiZrHm2aixDAY+7B6BaU0LO7dHL/bK6vpdCm9bjyn0XVZwfdG+ZX5v\nR4EFww1X82tG6XDNTZtu0JLPzGLWeTTIf0u/LCGiIzYt3/oz+ec58qeHIC84\nnAG2sr4jgKUuYDzu++yZSxumNkKsEJKDfg0A17tDwcfje9IqQquFjHRQO6zg\nJU8L\r\n=BqYF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a56f387c.0","@material/theme":"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/line-ripple_6.0.0-canary.6a56f387c.0_1582054994389_0.5306238860579153","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/line-ripple","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8cde058e99903c2d5496f0d80595eab4bd76e928","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.bdfd52632.0.tgz","fileCount":34,"integrity":"sha512-y4Ho7/DAN22FylecI+e6piPJlyUgAQtQRQjbs3VXOqe0NUbGY96Vcz4wQHML+QTvBlEKRU62txBPJdslVGktCg==","signatures":[{"sig":"MEQCIGEU69S9u40jJpT7xV85yxoBf2mGlfj5L+KCnByJoKIOAiAGdyx7uUB8kqmrgHrL5PMiIGBfVxbURi780FiOSTTCBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZj2CRA9TVsSAnZWagAAgs0QAIUeNTnvervmuXjshc6z\nLDN6faVMivDjkiCm8kcKAgDiqU0jg6bSda6lWfa9G+oafQgmGDazFvVyYEYi\nHSBYpI4F4JpGMad6Tu1Y+7xHaWMcSgrKimrb15v6XUEC+bJ0vn5re21lHUeW\n8u/0z5a613rRrtVl29wWWouIcCyfpJaWgL1MynaGjkQQquNvG/Ijyd6lo33P\nGbHf8OsWmJN7g25EycW/VXwMg8u1YYr4RZhD7psCI/AW1R4pCg7Z64SRWgBb\noYLCFgxsP4xRuE482u3pSk92bzMo9xh6GpCdB3N9vi2EZrwwAev7rZVkonZH\nf3VpQQd1fQ8UEiC0pS9Vk/Tm/+CvAs2Qgd10pEp8ctJYtr8NcjiOqBQ17qb0\nz6GvbrHHXgYiaGW71Ydzybn8tvx2Blh6rU/OYSRsn+zBZcN9ym1rYmmrU6+Q\nbLZAPGE7gy8wNZ+NZ4wme0DLEwH6EgqW09qolPA4j3hQJyS6kwNJPph3BCNw\nw4PDmrxHT6zHFQNHLIFx/ryXPv8HolgvFEBpm+9XCwTnxaWuf6p2+zJ0uJCI\n9eaejSPqur9yrxDg6khqbmH9eS5yP/W42YHE3hSmKvE+Kw3DyM6NoeCz92rM\nIHh1zXZ7gdmFMGJQZmQRv5ZqMNgG480EdfenYWz3tDIMX4lVN5pIO1BMA3z7\nuTVJ\r\n=2Oa2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bdfd52632.0","@material/theme":"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/line-ripple_6.0.0-canary.bdfd52632.0_1582143734315_0.585722099300138","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/line-ripple","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1e9fb39add66204a2993a492114b712462e6224","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.ad2e4376a.0.tgz","fileCount":34,"integrity":"sha512-HpxSKsK+CfRP7cKtkYF8K07pv7CFtLXeEECkSgBWSJRQtcZ/DPTPZ2vZkwPEXbAAdymQXJXiknzqi09ymGxPZw==","signatures":[{"sig":"MEQCIBjsrAIOiquy10VANXAiX545zbP4ehiJV9tF78uQ10q1AiAfz/nP8bmcdlRoRv7fNHNEgOBJRx6wpnFBAMjgqB5Xow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxMfCRA9TVsSAnZWagAAJ2EP/jhPiqd84KwNH42plPce\nhbeIhCPkleDxMQO1e+L0Tf8DRpLd4RLLq+VZJ4S1FbRToDXcyLgAtPF7sRUd\n4DPHRWBhS/NYGvwgNaMQt5l7UFWbhPZTnrFizQ5gllfy4Q6032TsYekC3wZg\nrBJHl3MPbZlvUqsR2oR1TuuxJiZawvrUzhXHYXtisZpCt746Fx0MrYmIcODD\nhKSyxj/H5k9ZaAUmAWppI9bVTBi/Wuk4M6NlksRpjQelp1fAvQMP2A/Lu2dX\n3EQoAu6jV1wmAI/vfmGtve3Rnp5uhirdeIyldq/zSCQ1iR6a7eKVIRQB4YQQ\nJ+KwwuRs92Cm0PNBWGepXW8kpOu4eZb8evbc1L3n1Mn+CZeutAYjEJtv9+nw\n1mtEDvGCGbotwedY6AzZmcp3mF3suBJi1RQa/iLyRqvj0cJThbFXDFHamuJt\nHa3vxZ1FcTAwv2kg1jBf8t0XZM9UMcy4ZVUxPWDFO3KOzftmTp2eh7FEvHqc\nYJmbZBMGThzcFOoF8I+a3FzBXYV0EXJWsZ2IFmu4LRWfUtOTxaAiY3VJnSFU\n9NBBTXm+G6yGWXSS9lzzUoxwaTDbNRMAX3zOpfaAWsmNQe6/mLuODFtvNhAN\nAxIFC5XDIY/0sJOcOoiODEM8rcVj+GjJ2nw9CmQ2BFSGIJtRHXMtXVJDB68+\ngEzv\r\n=oEMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<div class=\"mdc-line-ripple\"></div>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ad2e4376a.0","@material/theme":"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/line-ripple_6.0.0-canary.ad2e4376a.0_1582240543321_0.3862006516885179","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/line-ripple","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2cddfb5264349524b4a5b282ffb742c5c21cf8e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.765caef18.0.tgz","fileCount":34,"integrity":"sha512-iRuqmvHjF+RsnBttfIi2+u6r4QYn5X8U6ubJ/UcGz/lW+qYxCmK28OOHh5pRXFQk9SbtdfLiLUL5Lq3+BS1OzQ==","signatures":[{"sig":"MEUCIEDKOkn7LFWclP0YIB9d5IsUO4FQk8465UztzgWszcJrAiEA5+TZMMK5Or2NarHu98Jma/wJ43zzCssABKykdJx60FI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBQ3CRA9TVsSAnZWagAAFkgQAItIHCCqAOlOIXwyJbFn\nolfp3EWtqZm/doVbIyGRUoCNUdJxzGVjQoyG39x84j1rzI7qcvnewbRoi7NI\nA/PHOkK/hLEFHzSin1r+BROw94S/BTIGqEjhTAi4RWKmGLJTTn+RDqIH+uZz\nDn9Ffy2s2xsiFr/P38OK6rtKMQSWEB35Oao8OvkFmLvmb6+eMwB6iMX3kfAk\ndR8YwYtpb+/8zH8PcJlcKsrc8LF3bdQwzHPoOngqU1py2eAPLAFAio0iQHsm\nARB1wJINKThU6IlMljzTtLvqEXbPXUpwq4Pv1512ttbfJdH1x4V2+PWiIpt9\n9BTq62uFhthflyf7gVlDfIts0MP63OIiDRDPcWn5hNBAcgOWg9M/dreufv3n\n2MnlJ3F5q1NefTJ+HpWrzuTIE9de/sy96HEy2GSitbKJL5yuH+ULYe6iCPeI\n48+D/cOlVWWEVm0N2rvvoOKrNCWNMisSKpUcT1ZuZjDVkTPxO0yBmX/mpgCI\naFAcz6qTYmfktT9dTQDCCxiV4XT67FnS+fNtO7wwit1sFUhGW2S2ehXJoxls\nQrWCSJrFb3uV+yIEbiYVyQJHVNzkZSSZeVaCSKUPAxZ501cE5D33pUlQEAbm\na5pk+DoeF7YaucTCrnoaxOY/KvjKaeAXj4iBEOYZpca0Gi5RVKWDOxtfRkX8\nPqWG\r\n=e7K8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.765caef18.0","@material/theme":"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/line-ripple_6.0.0-canary.765caef18.0_1582306359167_0.16625259557845395","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/line-ripple","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"36859fd57a03f3b46df124c5b6e3208c95e41c7b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.949562303.0.tgz","fileCount":34,"integrity":"sha512-naBaBeoC88J9xVeyr8w/NS3rrhlp/KpMEntrPqcAXqifz1+uZ7lrWN2FNmUTtLLgd9kXuzYnpoVYrL+OCiiEBw==","signatures":[{"sig":"MEQCIC5BmguetvXm25VDtcGjfVWZ+s7GEjpXMLelxLKUM6blAiAwrwgA3at0aWlZQ+XaOsPYSn4+x0S2YvPx7k17XVVMWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD98CRA9TVsSAnZWagAA80AQAJny3Sm1HxJ5fl+wPs2+\nVJV0xu4G14cvrCUBUcBOEYSxFvrMXGXRjD4CIx6qfVvY99bs7eLGtpC2vwNy\nBu3xBQia9PoTpavSR99IDQwgANPuFs/yKuAKIFfKLC9qHxW7dnPEe9ZB9180\nMomlALVmuYpLGYxFZke2wSD94IvAp/6bP5hlCH/k6VGsUVfBo39aSKpd0diD\nsI81Ff8Ctix6YsX+kWO8crFqOoYbm7pSeeEVdCa8nAh/VwccwzQWSE7JS7lU\naNkuf7WeuOJaHwTxf1T1oJwuIfH7J9l/Q9HOMsnIUuY5PIn30oXh8jiLgaHK\nyzbhVY9aOsrxoxMJ6PdJ0EyQKpM138hTxdXgMC5P0bDqFQiXADu50vJHAWXj\n4I5axWMead243NH0EpQPBqd9kMDu1+O4nMi7DEIcj6bnoGxD6gRB2/d39jAW\nXB01st7wdMffxGG8BdLgnAa/aG5DTAc/TJMbu6mX2yWnsRSlCnl7TVk8yPK+\nO2q9sL+eSNtOpRgFH+gGJ/jwF+w2oF0TOpQlA2gcEIwBZWoXsyprvVCZ9pfo\nh12uN5OXv1mFXCUSAqRE1awbJ+X/hs9VPFMFo/CoRCI0oFMIoUJ0+lusUlKh\nbrzNYopoaJ3Bgcmcl52KLkJICPAYoYmCj8KVufH5yImkJTMtW2QS5ez8ILzm\nolR+\r\n=HsBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.949562303.0","@material/theme":"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/line-ripple_6.0.0-canary.949562303.0_1582317435263_0.23527151934586965","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/line-ripple","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"224f0c4e1b23c687a680212414e94a544199660e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.7ec96974e.0.tgz","fileCount":34,"integrity":"sha512-jzQphG7UhUqSKpswSIjUlF3fO1J+HxXSoCmqivys7+wn4Gd+XonoEUAFbZZjx5xgIvIqT8GVzalamgOwfXArSQ==","signatures":[{"sig":"MEUCIBk75khu+00UHErR0IcvWCJ/PLeN6lgNGNCICYcPvirIAiEAlbzr0PEQ91r6VcPDWnS26hOCHOVVfOx8ASK6bkixlt8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVByjCRA9TVsSAnZWagAAagEP/3PZRk2/sUuA7BIorVH6\nd/c/MqRwl3Eb90o2xJhZexnuKqrHPcPudNOoASGky1PYBSspWF0yTiYNnRb8\nPY+CN5RBJuyM8GJ9Q2WfHZtgJTWkJjNygkaYXJl9/ozUdFzJ+Ibf43R+rsS5\ngTarrFP+jf549GHkApmkY0VPmXz10YmzfaYnxHcJwgEFgnuXnYMlUFksOYMs\nfdr82CO5bi8uz3mQBbRDK9REfCnrF/vkuqHUE7yqIuMicT8hweOqUIOM6RkO\nhQEFOW+dwNx5iq0B7jC9XaFXiGgDbMsY1DJ/+o/SEk+JJt7DUHFl2zv2mFpa\nlji9xdPRUv+K9Pz7esMTCmzUFO1Sxb+sRP1LoS76qeeJMO9VrOGgfyj/yHLp\nCoU8zgDL3OGkK6MO477BqHE138we4PL0tQcXs5T3dkHAnKkWz0qLZoed5zjT\njqrEF4Bfpf2iD+jMERqJXKtdmlf1hmf+g2qmfv86Y/H3jYnkRXjWYZzPghiV\nY8wm0AHY5NjTJr1EWJvjDC08vE9FBvIGKVFxeD1G3YpM2ELRozHIN7LOOZQK\nRS/oBaxeTNKZyaDa72D0cFdu6wVsb1RnY+5kW2cwE21XprKmFa11l1gk3yAg\n7dB5rHXieiDG+J9FBcGX6z9TuEvc0eX1PZnwnt3O+S4bn4J6E+a6xXfP25Ux\n7szy\r\n=Le3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7ec96974e.0","@material/theme":"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/line-ripple_6.0.0-canary.7ec96974e.0_1582570659124_0.8327685776923512","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/line-ripple","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78fe2df812bae18840479efb18a7a0636c62f68d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.265ecbad5.0.tgz","fileCount":34,"integrity":"sha512-4h4dtguiz6K8m7Z76FM6yag9g3G+mQIepocoeRH0gDyDffgsYD6ceSdUl033K1qfWVARmOST2lPE1i6nwSb/gQ==","signatures":[{"sig":"MEUCIDE0oVSdYxR6Hf1SQWEJYkaoa7IpGJHUWkz/OEHLdGvzAiEAmkOvAz13HNbznkrTUsKDJh1/agRXMzz/+6vvPYXc34A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYrqCRA9TVsSAnZWagAAN8kP/jNNP9YrJUtK13xj2joz\nHvoqjtvt5ub0z2Tmp92bz6LKYRaz05CiX5FhUHF2tyB4RlLkZF2W8DmYU56P\nMvXbEDptdJrLOk/UA4FePHAoUjxWHMtFgZ/7WQLzq+lcdCJdtRPpFrGvPn3k\n6bMcwx3W4Lu9WvfHzYExSejx6m/YXIF6Ly/FOS7kYw4CN/3shrMqKcWK4zVi\njKfwS5SxPZL2G1YcMdV0UOQjblGfLFKyHYSUpWi0sRQY+26kmPgu5EFEFtGR\nyxPwIwLDp0plUMEph/+vjrPjtPyzk9mDYnM2v3n8KzOvK0LJD7jNGjXYX3b0\nT6KL65BAjJ79Dmuu+Yir+TBl/2AAAXTONSJUkYE/H6cnxbdxJgzpNuAXqXUs\ncO3jEyapumYxEQGcq0xXgyyKqumWpRE0FTuSJlDLML1CHP+PuGq/QX940gPz\nahDiqPXFBu+MmeFCQcXxOTlxpNQVrp8LiPaKGoryh47wfFw/kUHHIvGDLC6B\nUYPpks/PAMou/MvE9ame0d4Je39lMSPxUczNrgn8Z7Bw8IX5C/qybnfnZXRC\n3xwjMr785xoxEnrTq1EYy1uaN3O2xzdY4+omeo1PS557iJxozoxRZptqVd64\nFOfmAFnzsun1pdUJuZiXsMm4J+rqUWn/guOtcbUG/B+Q9gwl/K/T5i626U+V\nZjZt\r\n=7geB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.265ecbad5.0","@material/theme":"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/line-ripple_6.0.0-canary.265ecbad5.0_1582664425705_0.8760269141154726","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/line-ripple","version":"5.1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"86cb1b8a91bf010231109211b8eb38ad059f5f23","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.1.0.tgz","fileCount":33,"integrity":"sha512-esf2/ROZl1eVpyGCWPvxMSGVkuIOG5Fm6qufOLp7XIx5IL1O0bsm+bV6cVC4JCCtmNOag4GOBgkKKbkOvp/R6g==","signatures":[{"sig":"MEQCIAeZ9n8cEkZFhMgTMzo0DucibULbrkfhuMF0MjFXuiIzAiBbCz8FUJBzW28SyIhmYarnUe+Nvc8agxtY+dhDawrIVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZObCRA9TVsSAnZWagAAtXEP/3upKjPf1rKdAQNSzDVo\nCLn2iAcQBU83I7TFBy8Ku0J3/Njn8PuH3LYTk/V2vmwskTE5ZsKOEq/3D1Fu\nAhB8oUgN1i2HLLqXYFW3KYXITevZD27ou8fZCN6YusYfW86Pk+cU9/wJIMVc\nPJFnmjU0MaQbxmDPp9CYprgtd54AvN+yvWgqFmX+LBwnnTWyVt74eil5pSsg\nE0KWrGnbOnB2F0e8GLT6kXJ3AWnEBZNjbXuZGlxfP7T9r5o27G1x+4SeVuma\nLbvoSI/o7hhITfwEsXoA8QMkTDPZ4MU49E+bS8zP9booXS0wD9mhWDrzVjYv\nVcUpzrH7sHFE6NsqttjW+2LPME+600hY4A3UqvekpJeDkLbTzzPMEA20zr2i\n6+tGsuuem9pMHoiaRiSeiS8Q8/LlYltZchsVXiaKb+uDVk4Zzbr0YIGsR7zr\nRiPcDQhb9gnRJulp9gi8vjGlnMqtvIKNGd19x4uAaKvU5VD5Ni3faNgCQKS+\nr0cHzI28ZFTwSoWflzFaIacg0APTdHsL908I8tOz96Dl1HJYAa3NIpRn+sgg\nZpQ6zbUFj+aAsXgqoU5J1e9Thk0xBezhj0w6WmliMFbLvjWKdPxQB0Yc91yc\ntIWB9E9tNS0Tnj6GAXaS8NxQJZ4nV4V6uqLL9aPbi47aNO0SqDwE2nlGL9Gy\nucM/\r\n=gSXX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"^5.1.0","@material/theme":"^5.1.0","@material/animation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_5.1.0_1582666650647_0.5675124194556909","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/line-ripple","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d2051ead2b00b550e8248914262a2ffe647415cf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.2cf87456f.0.tgz","fileCount":34,"integrity":"sha512-0QiKg+KXwhT/PZROYVDruD/Vw0XQEvU+7hKCauQ64YhITWeI6vgalOT+tuHubqyJ3jUeN5bUyvXwPvq5Jz95QQ==","signatures":[{"sig":"MEUCIQDXOZ4KRWdu7BLgOMrCeE4cNpsCpUsXwLHTR+G4uLttSQIgKAt2ahZ0rcqJ9ZSEhO+C+Tuw8hH82mr6Z1hklpb4Eo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZPLCRA9TVsSAnZWagAAOW8P/3EMrWaYl3S7YhmGxmhs\ntmbuiGX4Btg0Fi1q1c7E4LKXjslYNgu22KRHru8k/8hGPMWi/BdB+HIySLYs\nExZsspRux7LOK4RXLl1I5pD/knTzkFdUX+5PVO1xZLBEf2NJZosLwLGLT98o\nrz3lxWxZikMx1KB+fm6Toj6biL7g+tM1HssY3l61KcQU3bNFy6Z2m0aMjCeU\nFVZQkl5TAf9ks4rnkFiyQCOsEjqRzLSRkkok7uqA93mVHpyQpQSGYLqOtZ3v\n/pYiARiBayF/l3VgNnvZlR0jtMES4xHO3O8BPg1AtdM7r3bXJdTPj89MemKm\nl8JDsFRhwiry+PPKrwnxkhmOFE/X8YwGAP4HEywg/TxE4EeOxK+v6UyxDel1\nixSOIMbovLSpYP3i3H74liaSj66N4NPEF/5TTz/1uQ8VdkYi4dlUItvCD5uP\n5xaVOeNz4oMbC4BJkm+R3H2a8kcGKz7rbq6W8fgK40lrRqJHp3u1PaYjfA4W\nUgbauPUkV0GJpcMJBg9r9AeRkHTJQz9c6tOm59pBG9c05D8YIPHQrEi9r3qh\n8aRvz5hagF7h1L9dPIjjz4ZVJofzSpAJ57RWUfpJLUaQ75SSzz9cXM2Qfmx9\ngf0pWCSACRdqabrxjM0wgOzsH/nPwkKQ7n+G+62fFfJt7FsSQLPJXss9lI5f\nbjob\r\n=ReKv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cf87456f.0","@material/theme":"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/line-ripple_6.0.0-canary.2cf87456f.0_1582666698971_0.5603231839124687","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/line-ripple","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"14788b1e93f17385a0fbc98ec5a15803bcac1596","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.781434a92.0.tgz","fileCount":34,"integrity":"sha512-rZk7fK6rOdvn8CtfnsEYG/v4mAaOGcfVYW7WBhSViZxtqH3VjyzoFWa9zvalJYsQAKmxaHnyZJf4eCFZyo+kWQ==","signatures":[{"sig":"MEUCIQCxaFHKxqPPwVpuDOBgfD9/M7AIYNOIdfK90OQTTO0JhQIgVlWKfYDQZHyUMxwdp+179lMC9K1tQNjxNtWDyPJZ3PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa1pCRA9TVsSAnZWagAAJQsP/Rp7Hzllvbk+CWY0xqDR\nNN6R5+m1KGItHTeP5jUPnfeUc9AhCcGh/e4jarmhOpLrg3D6H+W4rK9hnDF7\nIqamc0X1qhOQBdT3CgCylz+WZU8QGLKtA6ipF1xbUsn1xfH+T1BI5KGI7cGs\nsGMCkvg5AVLrCA/3HzxZPkXGjjrSVhI1OaiDCoiFH61gBj+PX0UhCqYH3iUz\n1VuaWS7DEKWHKRGRJAXbJqy0NNijDNudLFB+rTOxNhyF3/LPhpJYq7OvwZ5+\nbVmDZ4sRZqWutY9TVAbT0vuK0ry74daD67I0xcnYfrBCvRiAEj7XhpN8gcxA\n0hraVgZno8XOQIK8QTt/oqF/BfZ0PrqwHNkGT+3TAToZFTeD2pGJUUp1mrDo\nOU8Ofa750DVywRJ6fSRYkaSqVTs2pRo7iPOREKEzCQK5FcA8jy1iXZ2O1tD2\nmNkiCFTZrCY2hpFEgJUrStKeyXGnqyjgyJFhBVsx4caWqF2gRtHpoB6XBYL9\nsL5GxgqTW7UzqxwA/oYf47bL6cf1H9248di09Y+QjC+kiHuytyCFYMwz3FpU\nrplzj9U9lDVA9f+/E6r8qXs5IeaJWlJ1TL9+CoDIEzaAAnvooDtVsttEpeVX\n6U+MFvR8F5M7tf2HHadSq3wmn0R+Nw2aAA/9DNV2EpdTlSyJx0ahuQu7Kh4g\nVjeY\r\n=XLHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.781434a92.0","@material/theme":"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/line-ripple_6.0.0-canary.781434a92.0_1582673257536_0.9935593648756529","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/line-ripple","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"656e384f079fabcb9603a4c23489d4fda332289f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.d6f60c98b.0.tgz","fileCount":34,"integrity":"sha512-mRt200kqV0w5NddDcWtBMWRQxa430nMDvOzp0wz3WxR13hC8cjJhAT1HrJ89K/wriGrklhc0hrOk/r3Cj0Q9zg==","signatures":[{"sig":"MEUCIAC5JGhCwVSvvlLvdI9y1J04ieNJrW544BCdOCuJvJgiAiEAoRT1pZdmmTchn55wQ1ihGOezkpIDCPmhYAoueNHqNzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY4gCRA9TVsSAnZWagAAnJUP/0j0tW/HeiMV18yTsAlc\nJBREn4FasGsjx8tGVulPGqvj3yFrOI+Ed6cnrKxT69ehDRSnylmxddbRs8a+\nKhUnEVTwIJzE9wQC7QitaWO2MzMWNZA1rloYgonZ/7LlbO+bfygz6RD4dR95\nemtlaAWT5KRsH21A+vXH/d5EuHJ3XkJwkD7k4SfjHrLycYJYSyCLDBZVuznO\nNOCEv4SeVgTwS8+HD6Tll2Bh29HczQs+LzAcoKz1UwDuWNk9Oyz/fMP86fcI\nFhh8gQVZKs+O+zgQAyncxG6ALi327Ag3y8WSWT3ht6QtwKCgZLlbFLjnBDuX\nCxjxyn+afwbUV1VhYEkIYAPEczsibqdrz/AEA6D7UqhjpzHcNuYzzAvyntN2\nXLglDwiA3JuVlk8bvOBtf0rfVfbSIbF92xi947dC6n2t9Sx8to/YMCg3IGY7\nx6fMAWBSGosQgYNd2BIIC0tbgO+4a/rpigBZQSf0fy/RBRDxhG8XZ5rTtrtX\n+wtWLFiE94OKy4hEwQwBM+TWvxiWgmUAz9Zu42b/8W9WFWnzZ5Nf7mM9PZMd\numypg35jf/xoNdQWjGfb+8aUMh6ygXAAqM75ay/FIKdtglxVCIevqasKLrDL\noRnhvBzaQ0z7iSphPVdYEZwegvgsu22Y5348lmGmPhYntrhT6xkGGrdcrtXC\nClJu\r\n=st4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6f60c98b.0","@material/theme":"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/line-ripple_6.0.0-canary.d6f60c98b.0_1582927391958_0.7624546633293741","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/line-ripple","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"265e18d7500fe31465951361dde2e13a828c48d5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.69edc6e28.0.tgz","fileCount":34,"integrity":"sha512-2d+qjHCyGH7Is27xY6IbUI8P5ZjBka1QAfjBb6IQgESsOfGeoXHJtsk7g3uak9a1q5DRqYqpcr5HewxxW97Y/w==","signatures":[{"sig":"MEUCIQDYclLg1yq2IpH66ZvYo4lzjkXDz37Q8OOq9zgh7ppp3gIgFtMobqeA6euzJ26LnJQcwxUUdp8IfkOkB0S0UwsCz/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZAjCRA9TVsSAnZWagAAgBUQAIJp81MaAvy44v7uH5B2\nW3dl0/DFyhiM4PBql+5UNlpA1EhoRrlA7t22TqrTeIMGU2H5HlLWqKeJY1ur\nDzwmUgAOoWjctuReK/uv6TJh1oeI4gLTmSxTptlg1Y/TxOpHJmYw7uiw+uDw\nRWVidpJo635iyAuJLTL0UOTkK2n3bwePUfVqZ+s+2Q/BcnSIex+6JjG7N/mg\ntVeBPe/oo7vrkw9Jf5m/AwI7A6VsGD8rVEiLk3DyBODjaX+0z1vRExXn/f4q\nzT9IHiDgqzuDbkVSgQJBLdlSRq1dsLUIjDzXcF2t6qkNdCYh6qsZvCkGKKR4\nUNs0pfpk9/4iJGqeFNCtJa25Cs8nSMllZ8XN9++285iSrQSEDqS3OphNp5cw\nMXxM77e5/LI4h758+J2pIquwIm78ExGLb97p6SF33PSSSn/XYW6BxDJEhpmo\ncRRxCdy0soE7ulFnPWUxr0MKceTbclAAfQYp+vAeS2fefq7d+YtPtEn/SvS+\nEZG7Sh0A/VR7ATicEpK9CcGo1SXUshtxmedCRgirGsO2xdS22ehOxrGgsGLW\noGf8BOYYxacszcXOV/VQaD4UjDEWkINIt0UnJD1lB72iBrp2FovQ9zInwcn1\nV3BxLRZQWkf9OiyY3sUsaeVIsklPf23H41Je/JOch3BiNyGPlBLlpKvIcnHu\ntH/i\r\n=tuWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.69edc6e28.0","@material/theme":"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/line-ripple_6.0.0-canary.69edc6e28.0_1582927907083_0.7907792028400606","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/line-ripple","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a3192f1fb3f581edc91a08e1d3d2a22fa69b8abf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.9372e4939.0.tgz","fileCount":34,"integrity":"sha512-arVpunNjTSs0o1oTQ8C7kpkzjwr/kYBtptmDHlQc1pfWBuq4lzTH/W0XHdHD6Gmom9LeqlxAFPawD/yCJOyf2Q==","signatures":[{"sig":"MEYCIQDyffSi+ASqI9DzQBTZfgrOFKsNiMtaypQj7S5R1+UvhQIhAP0JhypOF7MrJ6FYUGS1P2J2gDxn5VqiydSTSueftsJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqtsCRA9TVsSAnZWagAAGAkP/R3i90uwbJ8eiDFMskNB\n4c6z3D4GHzUpji3rcS6JbhW6i72D/+sCTkAq1lDHPlL95Sqsh5MZOtUpCRHX\nxg8x1v2wmEdE6H00Bj5UAHI80RvhkZdeA3HfcuzjT+YrMXHB8Adx4uGcCbGO\nZSfIiT741Jlcul7OMlk/22wWsX9fphU/2UJTKYPSghPWTXGbBc+YbZcjrdfM\nBhM61ZG/l3CBK41bBPS39rlC8/qJa4gcTGV/Go2vY71T9oo08Ocs5TkN2UAc\nSpZzCvFswbkcR9vgunjM5dSsCIP3oTxwByrzLLA8WlZVnqzbUc3YZ7eOvLtl\nQpz7aC89RKQW5MIpyo+EfKgxkf1s5+Mk05vvf6VwlCUcAxESN7fdhQvItRho\nIrSL4d4/000Ot8Wfwq1d/8eKHqDMVElwMki+LDOeGo45Wv72DzEBQcepsXJm\n3gvk00CvFOwaAG0tAb/RWlHhJQyGyNb3HHQQZ3Okob4fR1DAGjrCfzsc/oyh\nH9azqa1r/Br0xaKhpgOmoGKN3yyW9j6bD0g3E5rNYFdzvjCS/wM7YPRDIqwJ\ngMEdij8jmiFTWrvt7Q1Fqglvnm35pSnut53dozuZJpOwhn0REAACOA3EBZ9M\ncRV+hVWn8OWfsqSAnGtv8uM5IAfOjGyQb0sKycZ52y26kadwU2AB+9hlHiCj\nASsj\r\n=6DJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9372e4939.0","@material/theme":"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/line-ripple_6.0.0-canary.9372e4939.0_1583262572362_0.18933312590551266","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/line-ripple","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"41a8980a582b29e72c0d7faab02a5d48767bf17a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.9cf5e9842.0.tgz","fileCount":34,"integrity":"sha512-JRhxw92bDeT2hGOBS70cEOeQ6UuYQBJotvbSPqipSxxJ2suoi4deZVDmkBDYy6bOHMAZmUSd8EBZdRiKFQ6A0w==","signatures":[{"sig":"MEUCICZQtUU8+yPi9Q/lA35xcKN3xLe9pshOi+JzCzX6rWfnAiEAz7cZiPSBN+0BFz/PBNZmiKsJsZyBPPc4RtxJxHd54/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXudlCRA9TVsSAnZWagAAk40P/jlSLfWhpp3tjpEZbWXW\neo62+hxJiqeLvtoGOfCFKugTP+paG2H+0egiuTkMWH9ftRrSkfHnkdhuK+st\nl41tk8fnos8WGgSlFtbe1k3Zhb0m/Pzreo+yowmFL1wcOmrLpYkQ6CqfEJoj\nyC7aJZINw5pJ5pywiqYb3w3t1pZt1Zn9KL4uHfyN9qnOUK/vAKKJxXCH8ydF\npznN94Q9lWxv+yk7ZRJl3n5AwVjGmKV5aLFaZeLQqJUpiFOkRzpB/8ELm2Tm\nXCr7wlI5sFxbCHesZY5lQZASr2/A+IrK+eyKkJ4DmM6Ll9rGN402OUrHj1lm\nCZWAG27XG8wdrzvGdbMHCHbQzDHW1PHVIafXXAOXRVvBzer+VY/nOjWLR65q\nAvalA+uLt6tx8EiC5qyzUV6bqBEf5lvZGxV/edZrU50ExllF70kHnHUOebjm\nHCny7ju4kMNFdKi2GBdIP3D6R9SZK+ZCQLa2uQNPUb+49ZUlQwaZspDMk/of\nUAFSkgpi4Ad8VCksvDD5h8KFc+wi+x/EFxgrxgYgq/1jLSAnkE3jFwU9BoBB\n4IT4bhDbUAErlssmuUkZl+f5nHq12oDELuqib7rKD5vIiQKVkMZkNNNLHyxe\nf1BO5sx2q921avf39qI8afuMGtTjO5dsKMsRoTcUv2YiufSkejrLwQsB6v/M\n7WnL\r\n=UKp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9cf5e9842.0","@material/theme":"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/line-ripple_6.0.0-canary.9cf5e9842.0_1583277925347_0.8776902479772444","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/line-ripple","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"76d9c1b6dda47de4ee1c8ad3b0530e419d7e78e9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.3657f8863.0.tgz","fileCount":34,"integrity":"sha512-GKqWzrAYnMBYrTPPllib3t5kj11aPhmK2zcyDg59oyPvc7Y3fBE3GSDkpbQIsRnNvCmmQ57jt5iYhfUr5eqWxw==","signatures":[{"sig":"MEUCIFdoNNsEObbQtxxxuq/MqsAeJX8olFCZSeGuf6C6bl8pAiEAmlB6kgFrrxypmyqpqZRYItLF1dZRBnPBRBVqW65EHGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+jWCRA9TVsSAnZWagAAghwQAJNtqHBYyhzviV8Crpu/\n8udmyJiuFAOmRWEr5F8840HIGpWxGj9sJpfQnaeYGnHmJfwRKYNJl5gHWQKQ\nOo2dagtSRzHjWfd59C9jomTeEmzhqEpbE82qvhj0+1Hx5D3fK0wYu26Quem9\nLrJRiiGBc6ldaUuypzniniMBh6nBK5tLfEQORT12alGigOQM8OqAeFBtymKY\nO6Kk+4M9ubou1qbI8zU8WUm2lZYGBqTRxRYy9+KPhgvgNj6w1irUghjqSQDc\n/rM3HHMwd3hJPLejd4VIr3ZgJpCMYVcqqDzNvmR9T7h1ifLXYCvHVg4b9CEU\noPLcz58a64xiceWtgVHj9u26byTRJvjjvg005VNegxuK/NnJMCsz60/dG82c\nGvygE/Hh6MZ1Oa9z4keqcvW8XZVeb8Yv/vlmgST58r67M3s4ErmxcFDpm0lZ\n9btif6yhqudun0rFca157bpRcn0VP+eLjvolvCqoTJAaBnAkaKMw7pdqdKlW\ntzypXEBuwbQmkL3Fe3foQrAr9HScavgIgpQF6l1/PtWby/PQb4nhFozSyVPo\n6uYcXKlUL/bdy3OZw1xSkKgdOlTV6c48AfQES9AeNrDDrJ0/aSLMOn5+pXhP\nWXlqPvGujGGxA5+iN6MD0/DCyDB5Wv5f8GL07UFTbl6RWHD6nrw52gG5AfKD\n7RZ/\r\n=mjsR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.3657f8863.0","@material/theme":"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/line-ripple_6.0.0-canary.3657f8863.0_1583343830213_0.754239651424889","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/line-ripple","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b657c12392f6490357747575660b3d49f40a0f34","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.98b843417.0.tgz","fileCount":34,"integrity":"sha512-fp9MfSaPW93tS4+/Ct180Ppryc2u0PvarqSewHufnpA9ix1gMm1VgbNsxBXnt9+avMq6HH8JdaVuapigGtDDBQ==","signatures":[{"sig":"MEQCIA6hV4ZL42lJvBEZWffAlxQ1fqMR4Pb97Ywb43p8OndGAiBXq8bYSOxNuoen1P4B1QjDd0MH2PFw62WSukK+ZRvuRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUVRCRA9TVsSAnZWagAAKWkP/0XELbl8OimKGYuL6xca\nkHN5EIVo0TQunrl++Dyj8GZLLbEgfqxgN8/6O8FMchiPoq3QjSORC5hZSUyu\n59RYMYo9UqQ/PO/Sk28yqGcQ9p5xn0ej/dszwTQ/CgSYnp+oaqFFeiFaduBz\nJlZYUcxlVcGULvpuPfb2feT475W2Q+IyRHNo+iL41CXsJl1l/HWhQOgSnDg9\nwvincvAwixShrZkPvQlkR0qC4NWEeltQ5gQwHg5kFkkcBpF5fkFss+Y5Jqu1\nMXWsc1AiXThCXg4J7CDMEQyH1aftc6Zq+6syODQueAWoRs62mAHM5cv8GnFL\nvEDDm1+GZDom/Xfp0ORoPOkZH5vRbka7nHgyogHD9gjyIjqV1sDZjdbu76JT\nJKHKsO/tI93DJATQh1MBInsaaGfKB5+YuqxOkxkILjhSeCEuQvmRagXUtx7R\nPQJObx2XjUxvHWKX3lccyCRylwRflMG0YKV5YWlNBkEjwdHUO9m8ZvkxeIg4\nNXDtizHuN0efmPS7yW9airBki5+J3T0bOHKne0Zg5/X3MqRRO9Ap9h9CrUGx\n+npoxE2R3sYjygQGxEyhH9d0AmEv2qAMt5aNfNbeusSIpP7T3ofiakJJ4eE9\nEE6q1NIje0DmzbfaqXSsURT1kdXXzP/vbUQ2zlXOEiZiOZnVa224Zd0ct9hF\n4lSv\r\n=wodV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.98b843417.0","@material/theme":"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/line-ripple_6.0.0-canary.98b843417.0_1583433040615_0.44293450204102447","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/line-ripple","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ae28de1b4fc258c7d744a96d9d07b08796b8b51c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.17b9699c4.0.tgz","fileCount":34,"integrity":"sha512-CQMVPeAClcsR/Wxq5HhrZUb+gVDFwhJJtuOh6KcbkcYmrefeqMLvonytAvDAQ54nZm/Cc0hrBOTXGdvq4an1JQ==","signatures":[{"sig":"MEQCIDFWzGEhhCJMPYHC4sQ+rKHGxu/q0zTVM9+9GwKU1GkfAiAjg3Xv/8rF0Hnzgg6lfslJQqko0L4g7xasTQLhWy81Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVFYCRA9TVsSAnZWagAAkAkP/ikaITFnU6DwPQ3voJci\nG1VQVDIqM5NqL119nxfeocSidWKs42sBKNE+765e2AEAa+egLM6bjdJ3HeYq\naV1trxkXamUP31Fo8B4qX2a5wNJeI+GmbS4ZsURPYls/wGLDmXzezKUGoOPM\nWDVYYOLRCjOxmMfFfQndH+9IkJOc2DLmKhXPiHm1w2Ha/vikxCrdVhqlQaMH\nwKMFBccDfOIQtLFrIMdOGdxThS9v/T7Yh6cPcLt/XmlZo7ra1RiBfPyI6ULz\nfpm+cTtZBK14ugOhoM94EuS3AckyhO3cr58Pcn/9jVAkcp2YszvyMKe6An1A\n4KuVjGSMuk/nhwjsEDkkPVt4TkNKWBYMZSVpZiWX2N7BWmh0zT+JYA8+WmlE\nNvdRC5WNCsyd/00xde0jti5XybqHWAEyoOQaKOrCaMHCA3931+uUwX9ONtjv\n8/pWTa2uCWm4CoT6mBJ1p7BMKaO+oN5KTr3W868f70x4orL8wfBD0Vu8y2r0\n2nZr6e/uDhIT5UL8tnF6BECbTp2YBJy9PeFP0Gf8FR77fbw2cWz1rFvqtxW8\nq6uhNt9oMAeaIY3Bracf6yOdalO5kHRYaA2o+Cz9X9GpRTKf57GpY3GjvoJb\nSiUm7mIQ2J/fNisEsmsAzC3sITUEjjJMdierQobdSVhZ+ZpVz9/9O92W7iDW\nRwW5\r\n=TqAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.17b9699c4.0","@material/theme":"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/line-ripple_6.0.0-canary.17b9699c4.0_1583436119929_0.41464463531458184","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ae285512139ac223129767ea6e2a9855f6cf8c6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6ee035572.0.tgz","fileCount":34,"integrity":"sha512-p+DU9Zkc7gW3dDwQEKERpXX9BFq69EUM76C8/LTR4AgQJbiEpUG8+5EtlBbUUYhlrn+1RLLN7n9hKyIMNxTfQg==","signatures":[{"sig":"MEUCIQDtqtSbUEGAqXE+pG0kMCno+UgL19d5i3hnyAJG3831XQIgeAW814QbiD5RTbEnajaEV0Oiy8FyKngaZ9DMDWbukY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnLRCRA9TVsSAnZWagAAdlwP/0hc9LpaKM5qu/HDoP3B\np1BTiUxC/Z1ipZGMQBq1uthXN45bGD4aoxi5hiXDOgjwHw47mKbf0ANdn810\nH63ySFnVpa2oPUH9O55BPQC/YF2FfJ6/3Ce4vwvAOqh6VXbjzfyitQ7G7Ul9\n4IX00u+Odk//gWAbcD0QydZUF7o1YJ3ZtGXkoF87+RL3xufNLKPh3hNqYwqj\n6lz7qwVowBG006NwMUUwIDfXbJPIYi8ScTApPVFHtteTqpfSJC1bxdl+bqGc\n9567dnbI+FXfuX6s6cvqvrwEmWGvRH7BaPcv2WtDgZgn1lPFGrwDXZ4bh7M5\nYHi7c7qvDRXHhO9XueYKi92UUQfZWx1VgvdgKY+yRpIj7XPy9V1K92+RVP7+\n+6NGRCOX071av62LcDL/tBZUqQxssrMPi7w+lXwvx46O8M0UQdpipQnNXx9S\nqVcX3fe/7ezXYrXZhtPWUvn5Mf9N9/9CrRF1iHPITROqxsK7NRCLeSQZvCfL\nAm7rDRGjaegQz+qzW6kCCCNJqbWaq38nchmCdToc9FG9EvkbZw6LEcJdShak\n20yLKdurdAbWN/E0XVgDjpl3KkAn4ROR7CvWNjf1jklisud3z/2XdaJRW81F\nLRpllntLOlrwU6ffZ9xHU4PvzeMZUzggjvksTRZH5KNraQX2mUj08b8FVblq\ncwxU\r\n=iuhj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6ee035572.0","@material/theme":"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/line-ripple_6.0.0-canary.6ee035572.0_1583772369466_0.8837384060304068","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/line-ripple","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4bbdd047bb795487fda061407f4d57e653012d44","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.bd33cb56b.0.tgz","fileCount":34,"integrity":"sha512-dPBLBxmhSyXtB1iaCB1NMNA7XEMjC3eO7i1B+NxezbnNiPM+ILTeZeyUU4NxxawVxLJ99Hx2bPWT6UeRS7FyhQ==","signatures":[{"sig":"MEYCIQCzKtIl4EO9VVXzOgwDAdh11MSvDcz0EbbAomwn5F/KgwIhANB/Oe8uy6I+htndrlRbOXHVT/49cJkCUFJ4tEQEmiXm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnsgCRA9TVsSAnZWagAAz2AP/0dxLe+CfJ4Ne16mqiVs\nIWpJqYyqOa1THS0K01iOtPlQ5MaM2vnttU9zxDOM+L2hI9xfM2DerWMyk5VH\nZp1/7bK0TB7DDyNBS0g+nQqnXJj9XQddMSSqxLRbFZNu2xfoZcSsPkrWt83l\nEzkf9aM43/HtnXCCZNa3CJK+aJhwIWUPn7yyFhsN8MXXTwzbVsuD3Q+3Otet\nr37SptV2Q/taKUpEXw366pCpu+fhqZ0wfaMeYIhg9GnVwnJw1Pw2oCP4LuT3\nUlVg54oFPzs0Mb1nsqdLubzQDhX3wedMyiL/L9jGkpR20Nzx0ixMD8p1JI+7\nWPXgjzVUGV7Ac1B9Qn2Tc1JCHRHcEbCsF8ovU0UTSApvO5P8Rm/kQDAkUN5o\nRtrK8LZxS7eSgmnpdsOZC680UiyCy6DcMkTf5txkz9A676V78lD6+VTItq3a\n0Qqb7nPeqSlpYHOgstHRif8VooYwK2/9JI2XCKgogWFlyCtT692YWgjalaYF\npPQ2jmeKxROnBEP4KQmWe6a747WyiTt+GAbfI3wNwUiyaT/7J+0R8PrrcwzH\nBWSoayzFc20BcNU6OWD9bRKenUR3cojvTFvLenJFUyje4P/pBr3f4GCmcEOc\nnpD8DF0sKRamj8sZkm0fxgLGaZ5IIE8igCNoaSDN8Ql/xLOI8vc/aiMMXVa4\n9671\r\n=UAmf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bd33cb56b.0","@material/theme":"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/line-ripple_6.0.0-canary.bd33cb56b.0_1583774495776_0.6217731251120175","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/line-ripple","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"44651f175af0caa7755b621b64b30beb56add5ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.26c049afa.0.tgz","fileCount":34,"integrity":"sha512-iq2UjqHKozTsxjUSg+H5lBM3+o5PZHphj1Yb/EUKKHqnlC94ED6AZhuGqP24uEaQLYPFKMnbU3C6JgzwFOAeDg==","signatures":[{"sig":"MEUCIHfYsAvFjkGyG4cmZW4j22lIRadMRivcUQ4/Pv6MCrjkAiEAroX3QvWjqcHeJiyoRzlFhp3DsOj0cgkfjH/kqQHf5L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8gMCRA9TVsSAnZWagAADCcP/ic82j40erWAXI7u3dwb\nZCye0q1MkLBtC3p6ZvdH3fODNu1su0Psp2MYLVdZ984X3IhwLAXTDWG5O1vw\n/adNy5NNcJyKeZAkoQnZYT4MRb/O9aTOOchEO2ZaO2DD/2RVlcTHjsA4ZMCB\nb6IHPvZdU5qEBsNB7EyDmZyCqf0zfj8Cao6l6VFjtAObDR7I4BXU3NisVge0\nF90PO4dzr5RAn4CIP3eBozVdZ58voRiY1tLy+VHUR49IC/pEPs9vN149Wqwn\na8P2Zk/UWFbEmMlFdCrda3TdFVN7N8sKdkh1zFv1tsSYhR+iKRzL7p9V/5Il\n/gPTozkNGpaqqVxs/Y4quVowMlXSpqgW3ua+ug1uaORz9rIAA0mGNAhGyJCq\nWA97ss4oZ1gUJhLsEcem4h+wWzVj1dWQydVEfl+wMAr/YjJrr/j4e3dh6Owm\nUkO8qUuvUq8b+3TjxaNn2G6zNWHaHJbpIv0aPt2iPGxi8PvGUzECS/me9OXT\n++R3YXm6U5a36U21dE1blhoK7m4FHol0BgBEtLuksML6nsiPxmiKUMWVPgES\nro0dSoL/9BLWYmdZZnHVuT9QvqTKlBrpwlRZ26laLPYsPoxdKLK8FlkYI07E\nQEATeCjMm96lo1CIUrrcMZv3lCqTUbcAOZ6kMYmR1qs++WEoR83/Qf5j5rlU\nX40j\r\n=yp3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.26c049afa.0","@material/theme":"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/line-ripple_6.0.0-canary.26c049afa.0_1583859724274_0.7185452169526738","host":"s3://npm-registry-packages"}},"6.0.0-canary.a731fd0a4.0":{"name":"@material/line-ripple","version":"6.0.0-canary.a731fd0a4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@6.0.0-canary.a731fd0a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d68f9a08387634743977a07d5206bd35207f39e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.a731fd0a4.0.tgz","fileCount":34,"integrity":"sha512-SohFCm/a42FlwHyOCg6TheE0nAxpfDmvyJzrSEmKJ1vxG0qecVGJL5eyRL4omxQtqPSJ2BoYTJADPv8Qz4CW9w==","signatures":[{"sig":"MEQCIG1XjyJbo+VDw3Svf3kDXYEGzFpiaQqI1hBTDA+t2kulAiBQPyA+voPWFolhNFLiFhwi0AOWIgoleqfaE/mV/jQ9UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/lICRA9TVsSAnZWagAABmYQAJ6Kg/pf2f2LWGYT9W7z\nBlTiu7BikMQOxfyXepqA9X+uDFynj5SgNqtJOi5EiwuINIfbX+jZTHuK3YWd\nd+U+6XUC7DZzYxoL0iJTx4+2A4D0M/JBS9GnPIzF7x76l5ngs2b5Gs8sjBuu\nVzEI314jpDPsOLbEIT4pO7xkPeqGnnJe91cqUACHCSwxt19abkkajqxagudl\ndFxYuNNHK231OyCV4diYvsvQ5I6eaOK/OpeDMiM5z0PnJuEbKsv4Co6eBsil\nkJ/G7YLFmPXy7FOapgG14JUdbpouvwPMVzt2iaZADPKaO2BSYEcXngMxOUDo\nskPgpcFlrDw0M0rlXHljW6c65CMCMLjcaIi9lAc3bL3ckZef0VHemTSDMedu\nIsIAAaFrPB4ivKtoO72cSrAiV6NDlZgFmdkPkHz1D8Er/bgTdm1ZNFteIS0G\n26KRmLIQCaQJ747V+fxSBF6rFAEqamCm05EsgxH6VUCsq9oX2FY3PEdlHssO\nfKcxHhvbrUA710Xpa+Vo42W/+QSAPsUl1m4mrtx2NeAKFthD3PwL7pRDhcph\nPNCTf2Ms1JhGlY1oqwC8LF7AE8wncCM4GnWolGR9/ooYxMR3OEoZu1vfozfw\nJhbmUu5zC6Dflfsd3OujqhU5UXIaECA+oLHw1dMan8UB1eZScA6yr8NpyDRb\nrZIz\r\n=fNFE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"6216eefcc94fba4c66ceb4b1fe9352d3cac861c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a731fd0a4.0","@material/theme":"6.0.0-canary.a731fd0a4.0","@material/animation":"6.0.0-canary.a731fd0a4.0","@material/feature-targeting":"6.0.0-canary.a731fd0a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_6.0.0-canary.a731fd0a4.0_1583872328321_0.4606099411870337","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/line-ripple","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"caa8fb7e7441668f3e83e5c3686ba85aec32d095","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":34,"integrity":"sha512-LdaCkGA+f/anqX+gyGNEfpd3Lv8J4ZFreiqBtNNlokd3MFeQjWcSh4b8t2XCFRihVdrwZThTNgn4Vv+PRa6EDA==","signatures":[{"sig":"MEUCIDYeks3F9DpUxx6BMQJs3D/IehrmiFDKwHMxP5pBseyuAiEA7o5WyFaio/ag93iGBoKJ2tKYYk2Vp9v9tEcokfl1iWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/o8CRA9TVsSAnZWagAACHkP/iqOQXpFnAA/k4a6rfu7\n3PuPlOIfmeeNEMMd6vxsD8uxI4MSVjBqv9hYLMQLA58i5idQeBcznmXlwHjT\nvUDLq7dnrb5j6NtdMBgBo+ezmkIBxQ3vMzhrcnPMFjgn2SKJbXcYNszmjRE7\nJ4bcOtL1riC2vu2dMH1+0Ng2h8vS/bGEGeTJiR9Ec5rJvu9o/ftywDbVGzFK\n7oUP+5h0D1jyjgTmjuDuhYQznyv6XYOWXCEKU7Wn6TDRqioBWyInloSdRscS\nSYHGcGvZnY8AKy/DJsxKzHTEB7rzJYhJff2jUFGjTuJWEWy655+RKWPTOcqq\nNtMpUHPya0cUK0pI5vaHUQGZKgJhyRlE7BEdJbO3Chb6QYkrVzhmTaTdkSDV\nznLu9O4DHAlXKgSoJj/QvE6Mv3RrFgI661UNRaDfZYMdr1+37uk+LjA2lpOq\nFVz9fMJqtaqlglqIoU9fXBH8WcgTNcJSG5U8NvEv6solgRvMTca7w6IVRT3S\nSwJqPhrATYLZMcy4z0ygCm+G4b21hXMSDAHlg41T3QNOT+bHsVsRRruzPV9Z\nCwrz/1QOA/amMebr+wjhyXR5ZIGS/41bv9gZidhxQ+9wa8akTpSKSkkj2i2U\ncO6g3nmGdLLYxLWrePGMNq3wrLvIOJofWfOgUwsURrbaKVgazCVzx7buEye3\nYMcZ\r\n=x9os\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/theme":"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/line-ripple_6.0.0-canary.1db5c9fc8.0_1583872572073_0.017372268099003607","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/line-ripple","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d0f292681c3cb374afce9f1f7ca7603e8b81b9a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.4971637f4.0.tgz","fileCount":34,"integrity":"sha512-/DNAlDlB3qZC2uh6LnnzkRgK1wS+aJUa7qNcet8ueHpp02LjUmt8Oy/K12Lcc9rBHKf+leXgALQEkslw5gbvkA==","signatures":[{"sig":"MEYCIQDC9iEcAloRLgkzEOP9O6IR4dTh5u/vN6InsyvKE+QloAIhANQEfvUXxfhSCfEEslYUQyodFUSlal4fJTWEYohYUyTx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBt5CRA9TVsSAnZWagAAsZcP/jvZG1GrmSnpZn2HWT4A\nzKNUG3SMfDMLvFxI7SMgYUEAgTBrCV7n80PRLA9guPFUwdTtjN7UKQq/aZ/7\ncVcCYkuLdfVV82pRF0q8Lh6CFxYDxYXqZfOHUBysZ47Ng/wIpfN2U/u9/fqh\n1ZyxVryRI501Wa1cRufH66V/eCwK/d76ZRVSWGEAzGgRNMa3kpP2ZaLbqdrj\n2rUfbaXdAvZxFQMvpHmj4s+RHONNmstyJFXGvsLd43reK01TUCIiVZ7HPp2I\nFV+S/SB8Wmhzmc6zV3e5h+ns/OAbqis9pESEOlQG77hyo10epTZTMeV+0E65\nKsRX4JXcroc4zx4xP0O+RebRnv1W1K6EQrMudvGKW0ld2kzZLX2maMZ9gXcW\nr3w1nKXLJaBCldXFMKeoycl+TCS8Q7LSjdY0ewb4Qo7htuQjdDbUGbt3XjEs\nV1e4KS0gH+CerwHLyhbf7x27qH7ETUzLVkYNzTDA8PxJrIPnjAfLd5UTgHf5\nI+hwnjfiJuPYobGsZGaLYt/EUahRGtvrmnGKa1ZLNRVJc9CSm5AcyYmemUlS\n5n7UuEAMkoMZF2XHEka9TYrO0kLsdDzCOTfIHPDdAZ+NueqNfcXbmze14U8q\nto0wMrGCpGa7FBknppwDlTWGhMFt+2/Y5vi9nD4JgeeA7wFPmYttdi+tR/Rl\nbGSW\r\n=n/qE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4971637f4.0","@material/theme":"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/line-ripple_6.0.0-canary.4971637f4.0_1583881080603_0.5782891081222583","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/line-ripple","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b6a1d38f59e56f9c8636f74af2c399883031fe06","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.1ae8130ce.0.tgz","fileCount":34,"integrity":"sha512-OJ9OvXJt2Rkqea4/S7WyXx/Y+63G7Yz88VicVzNHklul1n7E0kVV1iSLLZfZzmD2gzdOErDc/wN1m777B+HKsA==","signatures":[{"sig":"MEQCIGogLYE9vW2TrLwS27FA0myFZjDGfQ2Yq7HzGpgFG/w/AiA0DNTHcWeUx9SceeJFhYVWEBrBGk+kGD0YLEp0U2G7rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB0jCRA9TVsSAnZWagAAFWkQAJAaVZP3X2fp9nFjeDNm\nu7+JNr8TDRnzcgd4nYECC5GaLPdoD22N5LWAIf9T6r+QLAYkXOu1lversX/T\nAXGIEv0V4jPDrTfO1SGyLO0BTd4v0fbCUX1bZV01ux8HMEtvwWG3tTwAgQVX\n9SdeRoNqcGpOHqjDz+gKbfDYQNKYAMJBwdcoOvIwvxcBaA5oD5dh0wVwnVDQ\nGX853QmIplCrx51+48KzRplgOgSTKpEfCOO69gvZHyNfUMzFmR9bHW2egvcZ\ng+u0QZeK4BL9RtoHsUHuf/UwTd8e8WJjzkqn5CNKgQq2BpCbEguhQvaqW9Sl\nTPiqkCsagnIkNehN4L5SY/Pyk9TLoakLQBM34PJ8hMt2oakrFp/DkIVqIX1d\nIC42IUn03jQOybGmK2LNS4jpPPfq79pfFs+RUl5r1iwUINSRqmm+4qxXShqA\n2aKiPncBO1XyT3xI3Mbtf3U2+rH78rDyTM9OX79t+pVx06Dr6/3XqLOSK1m9\n+UR9jdtRqkQrC2pkz3gjgKbS0cTPolsAvXfX7R98mBpOQXH15N+lJsYFhELD\nVIfK25wY5DqprABZM2FJ42OymhhVl2+za4QCVMtIqain4xou8pgUxdsZNZym\nWSqczXjvLR3srunrj4M+IbKwekzZI1CxADzJ1va6+h4vfl8UbD+okqyw562R\nwixY\r\n=dX60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1ae8130ce.0","@material/theme":"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/line-ripple_6.0.0-canary.1ae8130ce.0_1583881507277_0.6756136522644085","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/line-ripple","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c38e4205613e407f74bec4299805e3672f17f826","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.8639c2690.0.tgz","fileCount":34,"integrity":"sha512-eHDoFmyGaHXsVT9my/aplrXW9MyIT1aciU1zSpTKby4bby2SiuVvW8dhDW/R9TDSMnZajxrP3mNCAmU/B40sJw==","signatures":[{"sig":"MEUCIF+xyUSnZCf11DTxtTzr3AVEDGfp2Qi3CTT0A+Wmw2UEAiEA1ebHvReP+bvDWlEI6CD2uD2Wc2wWO1syTzD3VSzNybk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIYVCRA9TVsSAnZWagAAS5gQAJbuIu/fcGA/R3dfzRR7\n0DFQFurSnoMRLHgum4SprRo6T3e5w/F05Y23fhIBvcOpCgMasDli+msxb3T+\nSzanQj6v2O115iSj3Cgd80b/K65p1XU6Cm3znrlDfxaoevxWTsX+KTiTJAfS\nXv+krty1GQLQsX27pCM0jyvyuWHTCpsq5CQcl/TmYOYybuPBEhZN+msvFHR8\n4f/sNL4EF7TGJHDd2pJ9AB71E4w2zfk46g8ZlpSZkbAq1qmFMpJSd3XSg3ol\n90rHM2BIoJ3T/piIzfh1QbR4k9Z4jsDc1BK3F4h/drPC7ZBVHy8s/HBxEPod\nxypTqJELeZCAOKZkqkcpdB6YRIFXQQpB6911NGA03KaC0thh3xJlHXwmkry3\nVfm+XtIj8mWzKhvsm6J/A9YyoOsSCuhftnqKQfMxjw1sq2mgOJS9jTyKb3RG\nvWzUM52TjFhFNXNywX9Gj5pYJA2o02TZji7N98/2q0pM0aeKxbYZBe3bvnxE\ndmxUOr/pDv4GhjeRJp2G9sI8hxO17+yGv3MuYP8Uho/spaqmLoK3ZRb3n0Hd\nnShtVX76nXEvfnd36hk+ivtZ59twlByltEhzaRBo2QFenme9i1HRtx4wWbA1\nr3FRh8kv2l11WGW3gWlh0unOdBdHxluhi7Nk8zZ+tiCnPZ9/1buIpuPyiN4z\nqaSx\r\n=oX4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8639c2690.0","@material/theme":"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/line-ripple_6.0.0-canary.8639c2690.0_1583908373097_0.5297907851093797","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/line-ripple","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b3a83434283f53fdd63fbc3b9ebe74ceaeb954f5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.d5808057f.0.tgz","fileCount":34,"integrity":"sha512-MnuYJq60u4PcYJSpPID9vtxJsED1mdmki3FVW8nCNXeg4gBCDSd9qEJBFKNICVRM/soR+Zdy16WqbHRccQtGsw==","signatures":[{"sig":"MEQCICgvC3ftNxrAx4TiltDJ2LyOdo6TwHdr97QE3mh1QcsQAiATyaxerIu8WgeHoG5ziDe5BDs5F9n60ssNYl9Y6pdZBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRDnCRA9TVsSAnZWagAAPJUP/0JrPdQLNpoigEKt8KCI\nUVy1fAXoMU3YGDLJmterEQOUedu6OEwbFVHsE7xt9NzpRn4pQuE554dfLcwE\nasgsFXy3dum+JnBUkhCluekMJcwbIENINNKkDkH7ubrYiiBPJrBRfzHVdcBU\ni6+96dxv/hgKdWk45e/8mtnU8MofVciOM1reh8JrHTvSJw8WjUxttrLiND61\n2OALbfKXp9n/LB5Hnsz4sCUOQ6CFzgKyB5iY8Y2W+rJJ2KCuK6ANkEkxD2H5\nHMJ9mdhlzRJrP0m7bWwWEP/o1pg56y7VMKvgWOmMcrPFZlPrtdqSsQ4ssnIB\nqeEIeZDj/v/jbfCCAn+EdpyRv56M+7diPeyfl0i+e6OXyTveOm9tB+TyKEIB\nqlVohTghskTnnnZLEr8JQvvAUw7MyvKC837Fgihf+Sb/xfA3MhdcRA5hqUo4\nrd1zx2nnCj+VB1K9IrGQxddduOg4nUPB1lBAkOZdOuYObSZwu1v2St71EMx9\neGt5dVBn49ljeZkFpTMrHSEyaiwauSx+vPj5D7IVD8ewQjiQPVewyNbIv1+4\n8XUVW0K0STEHZdjwQ8gDO3JnEMUs+vli5oGokQLczJiu4THRrRALxhgu6o1H\nmfjuPwIp38/LBUiu2AaGWsr1/+NyU8Th6sAzoAZoZoJB6pKsPkSCnYlty1nK\nPOea\r\n=7n7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d5808057f.0","@material/theme":"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/line-ripple_6.0.0-canary.d5808057f.0_1583943911472_0.4438786726187576","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/line-ripple","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42c72c7eb90be59c011414b87328d9defb30a6ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.b3f58203d.0.tgz","fileCount":34,"integrity":"sha512-E6+oqSsz+CZtkW/rUmcygpIOo5aWehbg9thrrQvIG2bHDjcbQuAl8vnLxKOMJyLSIBu4eVeFlieh98A9PinqCw==","signatures":[{"sig":"MEYCIQD+fsZtGex1RslugdknJc1hTmSkSMrofKuD6cVbpCCWrgIhALJ3wqOa1E955dfEnt+xX2NnshNxEZvVjWlFd9JI5wae","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT4GCRA9TVsSAnZWagAATe8P/2fAiqlUF1qU3mVq2ZSE\nmSSp90/dbCVDIjez3iu/CwAtS6vcP3fGBYMjeMzq4UnV+ZSedRaO42XNdVDE\n7asYuFQukW2Hr4UH99l7Kans7Dv+8Wq8VI6n+ck7ZmEZ7MkrQRsL164dAIKX\nSSrZARdYa5Aq5dwdpJW6S6xudk4lV7j6HfOFejhY50/R5bO+b4byVDiJ+Llw\nGLhLWUcDG2YNszsImJYBSZsMDp2OiAgCdAzM0YaB/aZZqPDFtxX7hOfW0k82\nGyDEeau5BqpFd9RqUtC+yFKRykkXk9oseVbaLtT13JXYLj2VjaehihWByO7p\nt09/o5ZGem5aKVakp54raEygiax0GbPbJdkGJjCUJvywhUkdE8Yb3Jfh6sJt\nKwFwaefeeUk2sdEaLk7NYtlQ0g32TyQe6EXayq2zQGnwGtrrGCWPJD4YrkjW\njrQVnQQZfi+dVzjSbCxkQ59cG89Y+RPx/Z14Q5DDtf2DGub63XldCb0edEJr\n8Rx6uQ+xN/b1cbhk1fk5E83rC1wTIK0ZdLnPnyWdPwhszHNJcg8iDVTW0Xpf\nry+/qjiEnxboAv1FTidGMd08FH5pcqvjAXg6wRslyJbaXma497HHNkJZtgDA\n+BpXuRrxrybj+BWRPUPZQJvcB8RsByJCwd1x5cYle/glZDntoQuIqndr7f9u\nXI/J\r\n=k1YJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b3f58203d.0","@material/theme":"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/line-ripple_6.0.0-canary.b3f58203d.0_1583955461891_0.22852105099003417","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/line-ripple","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"17032b6c87a00978457f2cb9aa5be226f0a3079b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.bec065920.0.tgz","fileCount":34,"integrity":"sha512-rvw75iWVB/yeXv14SKDRAWhzTI9HrB3JBfgJED5vevsnELLjyxBfikZmn2zggoay3sPq+zmnOZI4VyZfi6DlyQ==","signatures":[{"sig":"MEUCIDABYrwgIFGFKHmQ3fJK+nG6OAflYN2ckSaccvLAeA0KAiEAoZTV8SwyIlTFY8ouw8Mzk3nSOeDtCbTbj3+cIz5x6yM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaplqCRA9TVsSAnZWagAAu+wP/2wbNERT72pw2F3J4W54\nDK6Such9eHNZVJJJm1F34t9nSRR07epNhDacyt+shPLolQIbx9+peNtMyf9O\nrBd7Cfnm+s2Uq6nRcK2iKOFBWmrZWjnOV6/52R3RG6BYNAkQdnUtUcSFp4/A\nJqbVYW/wI9XrEF5ah0Pen+tSEKqS3FVvrs8PDwt8clgV/r+obWNpfHAYXXKY\n3fJBIlnzduzHIqrOlolFaSX8WpZ6NxpmOYVkMv/I83yO26xzDVAfg+TKFX7w\nz3BmhCpse8j0biCOJY6eWV9KiOHHfcxbtBC/ArfG3pLQ8DZp7NVE7+7qNtiX\nenW4kihWyTR+m0JmM6FfeIyfIZFY7y+AZ7RCpK02Rxequ4tsFw+KdtCTJ+Zf\nO9C1ZarzuhrSwrCDDzciLTNRd4BaL4D74lQ2qJEnhMbYTvcOGxGLK/EhSOK7\nTeZUe4ut1f2liHFfZONY7fXtjwDZceGFcs7SmAYhccLml4yP0ua2BzR476l7\n9nyP9a1KlJ8aPa+o/Lyg4G0XgevKBbtiawgd7f4mnR61I+i7NsEII6hB28J4\nD/WCGtCeThx0SVHZY86gZWTgA0d5IUREU7pQ2OAbAaUd2KD4mHniwPfaHsop\nLHQSTOWcsNc6n1ZqnXhxdjAfE67FmmRsJYn3nF8lWrvCEGCLlTsCaVBkB+Zs\nPwOv\r\n=CQML\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bec065920.0","@material/theme":"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/line-ripple_6.0.0-canary.bec065920.0_1584044393629_0.6232472219180225","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/line-ripple","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"41461ddebd743abf40f48259b5df5bc1f6858617","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.776291ef0.0.tgz","fileCount":34,"integrity":"sha512-/jPOf9XUgy0c7pKbGQ97+6CPNQ/ylmu2joCgW1sbY4WckH0m2EFOiwqwpU6wBCgs5xIBsXM+IIXguWh/k4kGLQ==","signatures":[{"sig":"MEUCIF/vzQLRY0ph871h1SuCp2wMnZ1+YTH6kpZbY25jp8vFAiEA0Az+GCS0q3EbFXit3gu/SolyvB+hYdvGKTR36IVdXNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSL3CRA9TVsSAnZWagAAFaUP/A9kjeKpv2ZaJmZ2sOP1\nbTrT5lUME2YN6uiaxIQH32BJ6sGKAjp55urKle4bNTvkDBihACqK8dNNf3o/\nGbny7OlftCf5Ak84908Efw8Ly1dWT164bpuZD6PaQHNnJVQkAMLuKn9Vc9tL\nKXNuRKPdS6ujzP7W81I4w2B6waxXsMR9sWEnyTkPCOD9dy4wAtOqzT1ErSla\nV0Bm3cFnHWWVEiU4WRJixJA4OS/Cz6/QkQ6rQ+A0ICr4unN+6WK+puJCO7hy\nqoXzLgqwm4MYANAIvpfWU4pIGuo5/JVRa6VdSZVPz9UY1FxvxqPxdo5DcFs6\neZGTpXxsaXzZ6urPP8Uo3vd2t+yClSxwTJHS58GhDoUat16nOhtJQygBXtzJ\nzvWw/Ckth+SiXK5kL9aGiH5daqo5YU2dm8gxK0B01ad2purAwz7pvFi5sk5B\neWNi0ma/lqR/M+rEKqaMBQaW6+oNQNm+PlMs/9pMPmiY4MqKqG4Vn09sbCpi\nxsA+prDdwCBJuGmdXay3WcjMnFLejqlwt/Xckw7NAQD5HyfNL/ikmE8x3Ksz\nIORwvVOIcE87gYddSUnDRIMRPCZaTBfqSX7XOiG1cA1OFw+B+FmeZIJlWBaq\nZf0GS0N9ElqW7c8UOnHVk7MXzkrBYUqAAxnA77PTbjSRMwxZ1Q0SlfwWkZvn\nmEJY\r\n=CtqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.776291ef0.0","@material/theme":"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/line-ripple_6.0.0-canary.776291ef0.0_1584472823316_0.36545907628493013","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/line-ripple","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"170c0b4d140c2b27ef498baaabce2352b3ed425c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.ece19f3dd.0.tgz","fileCount":34,"integrity":"sha512-VgLsBRS7rthwwktd/wN99DOWTzyV8oZTJzwxIWCzAbfmkk399t9dnev3loxmKDRZKdMkJKfbp0dq50JliFOybw==","signatures":[{"sig":"MEYCIQC/3c23MVYd2i1TcW9rMpSsPWoJesdeWCtfHODkwQiJwwIhAOd8J2RYH+6lR+KZG7ne/vN4h5yWOZJ9CiS71CTQhc+d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUiYCRA9TVsSAnZWagAA1uMP/jRVyRg7C26PlEs5bNqp\nIV42iblbHtWkjMfKjfmZwHAltQzjRxbZ7WdzxxDSEfAKx+I4GTXO0ypRIrsr\nocq7Gm5tAlrhdBqPXuLOnf2Vi6NVxbe0k8cSyezVcZ7tln8V0R1BT+X5YEFH\nNglHk02zYMlYJnS6Jit6hUN/0irTkAjifKtPB7f6/5vsn/wT2uz3Cy8KdDG3\nTo++sRFANY/Ay96dBdwRHTR40q93VCEVlqM+K97NlDLh2Vt4EM42b+gn6pVp\nOeOlKjWvMsOX7OMEwkwsVb6Mh9JITEIYDtxVNfJxShBmX3QJYx3YuEINebeJ\n6XfPeNRSDQQOiVH0dOLqp40H0MlWDmYas6mGbuhece3K1t5iyzG9vUZg+1OS\nL+9NJTXh4ShgqZdo7z8zfY7rfITZeMFhmCCrwGksr1hQCPBYblK+Wcqt90+y\nEs73Lm1SXMR/2KnwIGus6N2IWYI3jN/v6Sd1o7IFTcyTd2nAoFi0C8oTJn+E\nvCMGOjh8A1xA+nczh1Ld4xnBttJo4zg+lxeU5hMXZBrCYDq7qlrfQKuLnGtZ\n0MBH+CkX2B05WTHKczwak8djPoiiE7gYDw0fnNGjWfufJ+QAiqASYdhIv0Xq\nwqe93Gnp6wWL/FFaG67daXYdqU1YlCCjvljPS7HtOBgO8mQmbOtkbWbaloNn\ngKSS\r\n=xOyd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ece19f3dd.0","@material/theme":"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/line-ripple_6.0.0-canary.ece19f3dd.0_1584482456171_0.9598085519158055","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/line-ripple","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"45f38bc2e0e6c8dd1ae4b1bf7251753b95cf744e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.4dc45af6c.0.tgz","fileCount":34,"integrity":"sha512-1H1GzchjypNA9PPaTJk1sT3G1eewEPY2t0EX4wkqYUfMNaW7YNiuwdUzNS+uie9yWI2fJS+3XOmIsvbiRTRzYg==","signatures":[{"sig":"MEUCIQCc9SfhRRiU3TNpJr+uiR+M1gbDgUiuQT/7TcjGCqG0OwIgIgHwH3VR0deskj5pViltSRGkWrN6szsC4EQZhd5dgks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX26CRA9TVsSAnZWagAAM2oQAIV6bpeyCP4VMgH/UR7C\nA8larVxjPLqihHfFHqI5G8KmpKRXrpFJeWY5akmFvW8WpMYCIL8RaIRJMeQ7\ns2HHOG63lLbV+aE2jPQF8u8/JUwGVqy/p0kyQK2kq+fIA9sZeirTpyY5rooA\n9lIlm+D11HN4d5ceZuTOYgKCqRbRmLiJDi7a+SBB/RbB+/Uy80lBEkKrwRyU\nsWACYEV/6f1WQTMrVg6+NjABgxDPJ4w0wyDL8vAUFf40hdxEJIX2Og1mOGje\nAEONwAvn0b5ie1QwfQmqr+S2NIRoxNWBRuXTEVVVs94u9XNOyVq9vAthEdr2\nvJnaT2Eo+DqVAhFC85BcRpdzoztcD7jl1Naq9LT0RE6j5z8qrj6T+BB7w9pg\nzQ3n544HiGslRdt6xG/S41q4XSGNcoTgooP3jPF0LIwdWj8HDQrzGH6vu1E6\nXATXKUZ4BmyN3F9F9OGstxYqe6/4C3l5xHCOlJPrQKn2Y86e3SVBesanQtvF\n5kgsZGiAfvWy0/RZfIRcsozvbHoN3d0MDm1agyPesPP41xkv1jQ41Ss/stY6\nzWdW3VxCTNvmlHWujyFdPewCmPXZLE0OLwN4q7zO35X/ZyW1byQIErt4owgI\nCt3xyhudg91o1PNDrvQQ+w+OXio0PLF9Eyi8t71IeN/HSBh4SYM0mZ5NdfCo\nXP8A\r\n=X2NB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4dc45af6c.0","@material/theme":"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/line-ripple_6.0.0-canary.4dc45af6c.0_1584496058446_0.6359444815652122","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8cd3343f3c0d5ea5bab58a73eeec9150fdbdb53d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6b48781bf.0.tgz","fileCount":34,"integrity":"sha512-tbmdrcJRU6CqGklDG6QoIOL6ThwgED1F0zj0EVNETi0KQ/MbxXZ5cXO/UzhGADC4QVs53v8Oe+FjUse4Tc1GvA==","signatures":[{"sig":"MEUCIQCgH8vU76qnWdoaUR/djI+ES1wQ+B7GmjIhVmZonXTZkAIgCtF5Q1r7bW+PoHEP5aXSCta2eHXGtW15OigXY7+P7W4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj+BCRA9TVsSAnZWagAA06kP/3F/4MJaBm/DJRQXZxpf\nAQ7iJ1MJMZ4SEu/nn+9bcQACrk+q2L7tkvPXW5cLA0ghoNiZamMa7O9Wpv+r\n8rg+Szk/MqJEMQn9kttGp87lA4wV2GsEjbbJTqkreiKJH22+8J3w2rm1up9R\nErXYxJ5QbZ11x8Uam061NZyPO7c0oxl5nKWXyo0q/urnv+OAI4PTLnZ6dqIW\nvegZ2S2CmpETwqFZkj9Krxh2GFDnD1ENAfYtAiIMVnwbOh2nCrwIotXMFPIL\nC+ka6Wt6eqWrHvySrR6iBTQVr8GTIMRRRU2ENyNTVZMbSCOMXx7DoM78VqfQ\nYtZyw5+2bzWsjNydeLOC2ztwNFQ0iKilO6jykikzwE5etG0FMVAh/U4SRHPc\ndLnXc/CFS8AwLatLQ3INhlL2Wf5PcO7U7PlO0XAOLNIqX+Nkuaky4fjbVwo3\nE6Z55Md2PaFrSTHmC68s+qCwGwd5e6EFDdUHOjza7xH8UjzfFi5wJ0QxyUru\nnvCPkHbTsDqlCzjWv0sFCG6+qvF9DTucKBkdy99qu9G5AtuAKtiS3WU49ldl\n72KjLuhclTgFmc+al5rn3QMSRpA47MgQHE7WRb2OcpnUj/1fYb7fWWYhS501\n8QXadV79BFFBfvxp/UpIjlV0wJir7ogg4cYiM2LJUCPUmllUNUgZ4JBWUdvO\nt0kp\r\n=sFYK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6b48781bf.0","@material/theme":"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/line-ripple_6.0.0-canary.6b48781bf.0_1584545664697_0.037615086106081774","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/line-ripple","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"533eb34dace72599de31f29511cfdaabc436f402","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":34,"integrity":"sha512-87e6IdkUZoG73AH8Bc2vZoOAhhgLd59EcCeiUWKKFlIgRc4pg5O4SFT2UxMytHPB0uLMjowBfk3OktR5kRyKpA==","signatures":[{"sig":"MEQCIHTnzEFlrH6adkx7HhAjPDE8rKfff4x4YKrFJU11oRZLAiAuSUUcjAWai4CygU9GPn83bP3a7qLC2iYbVsWWBvR/5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec61mCRA9TVsSAnZWagAAkm0P/jdW0wSbDGScB5xnd6EU\nvIICFTfjFywK5gOG5LXj3AqkO0hgUahsPIs8o9sUSY/IySAoBlKMUeVaahKr\nnh5kKN/JebF58gkHhn8hAMZkI+cIJXkFCRByktR6pwmpPDyrI3GJhOjinWdj\njwYlVm71FGfFvVAzJdh9HpBTQx/Zy8oUrwSsQMx6dWs8EmlYdOElJbL+64hZ\nguLvnzzKfYlPPgFuh6dw7RXov96TEHcWTkOIeCqUfXmcNvv4XS1hHHlEBGfJ\n1y5ecgPyixKH9iU7fpEzlMVb9ABk/3i/uYGhnsgwgwUgSdkJVDp/67NG1Mez\nfHd+dIDbc+48BTXhzDrggXB5bV06dzSstZQbJSyr8yhGJzB+pwxhr+m1j+D7\n0faJ7HRgBwz/zPuHLPHQqc3CXPnshISBZkcYe4xvGASbQJCXYvTBogmsWTut\n53BYoqk3oeWYfrDPoe2FgMPrf4pWgFUR4RUnAXm5wsLKEhnIJTY85zynewro\n1zvVtpTc+TEsgYoEbHRnRNP+iP48IP0i3TC5lyIEHZgfT3j2LSn+SmQDrWWD\nT3OQ9mDVvrqIYPs+15hwfZl2NIVQ4Bb5aspv4GI9l03ik03IE7i8mHQ7NSoo\nlHy0okvDqhpSbmXvd7ygQd55XrF/kmjfknQFVEiVt+Hu1eCbXIYeyeTdbbZp\nBi9H\r\n=FPfx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/theme":"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/line-ripple_6.0.0-canary.a88c8e4dc.0_1584639333843_0.3272945788869204","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/line-ripple","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e2478095b2648ae4627c152b1e19e5736a564b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.cafe18860.0.tgz","fileCount":34,"integrity":"sha512-MIFAcZQ8OkJ3+0m4okh5eUMOK6OE7M5q2WptH4OfzCtN4PHe6MbyY/098LFV/Kd7lUJf3H2byBLJl0GjqTS7Iw==","signatures":[{"sig":"MEYCIQC7Nn/nkKQkv3ZBo0cZeBaCYceWwPzoL+YBAUMMzikMdAIhAPm5cDwKJjB09k59lLyF0jB7RJMLynKbPkccIPS0JIcr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNjXCRA9TVsSAnZWagAAGVEQAIcgmdXPZhdBpK0kIDUd\nxoMVkp98FBw5AJPwp48px7Plcx/fJwsDOBAoCsdKeCJrPhxCJnzjHXljhvwG\neBOiuMXe9FPH94cFhr/kGN2lP+b+dy2AueHylQsHlp1iyTAtP1fNJnG1zUba\nr0NOnZ7EYfAsuSDT9fY9yZ/iYDDq25unQpea0QwxLRU6llY7B2+vrkQcqxSC\nmsbfzFNDMvCraUBk1Q/+IW7Zia2KMF9tIUtAseZed1FgOEPfkylUt+bzuD6f\nrgaG3GKC0ZhYkte5GnWX1nQpsKsrii5MCIBY3z6wOLNgEDp8RNaZncOwkJ/X\nTQeqiqX4lpgE0Tvp+uUFUjijxvEt8l3+rfRNU/uvgXPXIVzw/mdvo88AnVJV\ncTDS6dTke5jf7XFC5WlCiXkJ/y7mzpbVuIFOV/Y0YIUBzYG7HgEUEUe8Sw4L\nFIr824z0410u/M6Y8Gy9iN7tPA6JT7wV1xJl+PJtBwZpV9iO5SGBLOIwzbFm\n2wla3TKy6MK3KrRBEtP63qKpl/IuljrUTReUvuAT2vg2v3tqpn+Y2G3mX+3S\nEsOSHcKhcYxB1xeEaLJ8MJVE6uk1CoGRonIA9hLjUA4YIeT6LWA+AoQ1E01L\npUqSU6dLObSp/2P8j5JyM5r/oCzgQB05+OUDJPxkwt6WUBkrhKCSJHsQNazz\n42Zb\r\n=2qX6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.cafe18860.0","@material/theme":"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/line-ripple_6.0.0-canary.cafe18860.0_1584715991126_0.04419023669540678","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/line-ripple","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4f88a9b50850ac2695aa8b15d5c44232bb3e9c71","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.35a32aaea.0.tgz","fileCount":34,"integrity":"sha512-uswpaOoLWkzWyYZ8ebzpkU3+C0OHmRzGTds5f90+nNHXNbpb/i/gwlGUpWJW/k/O7dQOBAaz1lWGUp9yIaXD2g==","signatures":[{"sig":"MEYCIQCbmdDSAUSTN7idxOc5kKtDQ5kAYGWsSjlcQiMmpP4kyAIhAJ5AdB60Wa6jhaaeCAlovGdGg9Of9FJleLHqgFZlQfoO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSB3CRA9TVsSAnZWagAAEyUP/2gDsFs8/sHzouskDfvC\n+MWpzaCwedkI3DANw9YZjFdfuWY6n2BUfnnwojBvK97JZCAYxfEzXaXBC83w\nOde5nLbpzX+7kcJXmUm1pCXAsd8q9+GEZwebh4Ol5xqPCTsSD/97U+tGugZ0\nVjS4DkcYYZM+JgcKc0AiNQ0QIPBWCu9s5iiLAt5c0DIoostdpzDo1LaBF2Qi\nLkvCI+2wjyHscsCXLqsauuLmF2ppOdatRiafAeLlLIVoc16sy7KS7gr3CV1J\nzgA4V0HGAXX33/htcqa69zmSWURgUXLcF3qD0epPFfpzxo5v2LBf9PL0H1EV\n/G2hTcwPvpbKZPWq8jOsWl2rhYqY9us05c7f2E1QfUXFDxeB7fiMXGFr2tYm\niUeFTQ7K307TMeN0DH3dzrDOb5L8RgA+Ss/PDq4MaIaGpwLvJPDA3YGcaf7l\n4BInqxRcHsNDWo/GigT6qAALlSrCE7cXciXmzKoR+ljD90OZDKU3HaP3WzHO\nmzYKntxxBJv6bLqRwzs5k81jbuwys0fOJhcxupOtp9AnPrAPHubEtqcuiD2j\nzgwolJavIQPuqXFUaz1m7woozT4XlwFRwU/HjDva9IdGoSk3KbNkHBCLYcNi\nXPbSAdPM+7Qe6Bbxs31ZD9ykiVA/+EWOBZm+hAlv0Ae+oO74oiRKa73DwI1H\nojli\r\n=3SjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.35a32aaea.0","@material/theme":"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/line-ripple_6.0.0-canary.35a32aaea.0_1584734327345_0.8086861787491879","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/line-ripple","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"209de793b2a14cfe7545fa390e6b4554b2f3f85a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.e75deb854.0.tgz","fileCount":34,"integrity":"sha512-+1jy22f4Ghns/JBKUrbv6uZ1ghLGIugb02hOFPcMBP0hIwWePQF/C5vr0WGW5702HQ++BjM463yGMoGgpc1EKA==","signatures":[{"sig":"MEQCIHMu1c5lrxJRTROHRNaIIXj9JNGAC9kt0pOHdL5vJNg2AiADtRRtqy1Ae5x7wxmnygngGO697lcIXDNz3mBTXaibHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUBZCRA9TVsSAnZWagAAxmcP/2cEWlmtqVn6soIKWJNr\nWCGUzfE+BHmXtb+WdAai80xOSIhKm0SnXdsFwJ2PTSlmh9uF3TEWXrB6rdAE\nB6Y5O2dxvqNUP0i1O6SPTve6cJrXpOg70HEEHuDTNJ8Fy3VeZs/7/wN6KnsY\nqZpOb4ZzFCn4lIU976R6a8Hx8nJcKq6DWgBjhNxLizqPPt43N57MGWjnpTj0\nJ+Vu/1mCMa6uA5AQb9q035Wzs6kOgEWy8FMYO8nvrwa1yaM2B/mudJObfbBL\nQZ/M9A0FYsCSOhgua1ApRw/EFKsCEM8zOjxbLa4Nht1T4lerQivREaEBafkU\nTyNcaJ79b/IwT5AWoANBrD1NtINsim+AFEJ6akTq9xv5fxS9Be43ET6LxjhE\nfMUZQLxMBkY7kkrukTUUH0lZcUrtc3FVR7lQ8cCFtfAhT4BL0FnRqPRb7wvU\nNWyeYvvQr3xVJAw6NvIGV+DLAKp587d2w7ApXqiWj5XKqj+E77ZseRKwYlL6\nr3XQeFIHao90859Rmj6yedbjxjb6oMHWeyuh31fgN/VJYi/hsjk4jGEA/5SS\niki9U05uSQqnpCi8JFiSEHTKqLEQ1/Q8k0aynqLCu0G3/IKvpCy1ROwhj1a3\nmWl8XTHCiZ1yo9QBvrDLXhAfOsPd3mV7pzCR8C4DXueGp+q1AM1bfxq/83BO\nLHm7\r\n=qA+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e75deb854.0","@material/theme":"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/line-ripple_6.0.0-canary.e75deb854.0_1584742488812_0.4340498681212801","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/line-ripple","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"89634b875c6382372521b7353a690c087c39e2f9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.2cc6966f6.0.tgz","fileCount":34,"integrity":"sha512-PjqqZUhOlf/GpoMkqYXWEmlSnfabU49SYRI1RiLYgwMLTlz1al4jNdO27I0MAZuK+7R9C1lPyxZNCI+3czFJjQ==","signatures":[{"sig":"MEYCIQDzfBDwbdHPB7S6xNPmmW0he1QwyRsLBcowqlXS+0b+oQIhAIsXl8ma07BnWfTnh5JzzZDRIMISfOGB/dRylUFV7DM4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelS7CRA9TVsSAnZWagAANJkP/R7XTLezRyC1sahDKKVE\nx2NkJTQEWORGxjd2FlxKI7PImIaWM+YV63TDfS4nxAqewBUJcKBZqwtTrCSe\n7eh/vS8O/XlvK6YQCclfEgIjUfRN4NDgyLuSZCcxHr4Cy7vy01ze89+Ot5bW\nkd2IxzM8tNWvfl+0K0qKqRBt7reMqtdiSQAm8xPjbIm6xMd6Vabl8Wv9sBqm\nTV2GEKQ0PTTsl3QJ1rPERGZndK6jjyZP6JVCleUUINwjg8/OP9sIk4OIiAxE\nW3hcAp7IW1D3ddhdXwtj4mMX6+lfqU4DzXIaUYgC8MpB43O0rhtjbGFAR1EO\n0ZxogNfyIoX9CyxQdfsns4UwbXkr/Xh3xZq+214Edl5OD43C96otsmzPPOVT\nzchSEuvxsmhCUGkDcj6z/B921GTf/K9s6Zs0OImB7yuNyKIDWV44W00r3sN7\nQgrGWii8vBoELOxJGAQqk9BqOQYcmKVgdumEnkx3xnPtcFNJph9CXyfh12Sb\ncD+tnGE5EAaRFAc4xX/dsACmUNrrrbmI5fezOX9byHTv8Yvx61t7hj179h+l\nYOPj17ExtDG21Xy6o67bHiqDCHq++cPRmamFVjpkYyQhd6Hxu0zwyu5Jw4i9\n9YCssjAYqGcctQsE0G66lBnRcTgZ7qNu4RYl/1dYloP0dzyT+MvWb9EUxxzU\n8gLB\r\n=yR2v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.2cc6966f6.0","@material/theme":"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/line-ripple_6.0.0-canary.2cc6966f6.0_1585075386803_0.16479788766490167","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/line-ripple","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"81ff2f3c9630e68422ea474ba4d7b8e32300bcfe","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.8707953b6.0.tgz","fileCount":34,"integrity":"sha512-yPDA4f8ldLa/zL1YmKqnPZcVRLi8D+0eJLvn5VghJ9OC9HPrZkk9nD7ZWz6Sxjy/dW8Ft1lTVX8H/uGuPhGFtw==","signatures":[{"sig":"MEUCIQCKQnE99J2xF/MmiZCxD6OpK4A3Rfr7i+9iqODQ82v8+wIgQD7mzNkPIoqYId84sQY0na39Gg/YkD843/aynWcDRm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelWYCRA9TVsSAnZWagAAypsP/jgOFAvULrbXtcKaNamP\nZyEaevRfkQ2m5Z8SM2LaudFFWSPFGut2DR/B1au81UVGvMJoeQbg6FMxxe4x\nvmzfBGfUcCpBRPTWvaGIFAZCWr7uF0o3M4fXX8ZPHbJNuM8+7+vy1kolMOqE\noW1/rapb6YWnzoOKoi8EvjVq6+BmBR7wWrV4/V3XkevVPieHn4J1AoEKsidv\nsZlgtPmNd4LVnaVS7/1MzT3ejnGQMaRK/iP9QvDFZdj0vo4U2/tEZHr2ig2o\nrWi9zBQUtrzEmLhKR/MwUizt4HwnfKx1EZnqGHk17zpkPoHuhDVVoyaZx3Y2\nFZgPv5fGgtuzy5uxy6ORLd/4nOxCKLGIFoFOg5VdbQWUuF61X6S6JQF12vTy\nt+I1bfB+L+Nc4/5n53FVS+GWoAAzTxhM7I4PQcsAzXDCS2b1pujrb4Ts9gbz\nSv+malsEK30Ps4afeEZrOdFWUhNVH3go0Y54jjCLb2smpvY9NdTv19HE6hPD\nNn9PV1smRFTxYELEC9XDZeabpGNpJf15M1kDW7dqvk5oTUQLPNZkfATj/h7N\nQPxV8ixvSQDJO2dmyaH2QfK4H5+u97+z/dNBE5rO2Og207Amd23IXMbo8W5/\nY4Aatw0Ji3BCEWb4+4mbjQGJmXZQx9rJGJvQQr8n+SnEg/gIT1mPa3TMHTki\njcuB\r\n=8omI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8707953b6.0","@material/theme":"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/line-ripple_6.0.0-canary.8707953b6.0_1585075608215_0.07868425880440832","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/line-ripple","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b0a3d3efb9faaddfb86f848e2cfa310e17093e54","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.10af6cf39.0.tgz","fileCount":34,"integrity":"sha512-AeMw8gvlEHZBJPzUaSnnjs9h6wd9lfnyzrV6I6BEexxnW1r6gnpo81Irmjk7BV6Ib8F2DsEEgCauh2OOHnTDXw==","signatures":[{"sig":"MEQCIE6jrD93y/v1TcZBY9gbMUidsHxCeQEc7dTvXeVqQNouAiAdhMdfbq/8gNXZp4Az7/tGR3unbf8pejiVsrp7fS2Tew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6BeCRA9TVsSAnZWagAA/zcP/RETuiORdTygeOQtfjd0\nu6pRo/+i0JHT7AlmdHQxwhWnzkiMr2cX5aG1Xf8KqXbtFcBy4Cvp+t6IWiJB\nE2UBT9VcCEDXVGiP09eMoP1i/3BcAOAjSakJCISn0oSTdD1B7vsMyDrJtgJ3\n3zSFlbb2rdePfo4M0RkPej8LWGg202tSn4TzkpJ1dg/ZI6I0w5CRAlAifO8a\nE6pQaBpCc3ynZrhpB4B5wUWmBI4KpHc03tDdS5GPXkV8ppNairaeGnrLMGwa\na/gt1dokIDRvcOWDXsA8ctXk0e+BagV7AWtFYifL7uK1xC52d3ZSGlIKA0QD\nhonH/rwLwDz1DXHM2fZSGKA3oAZ92YL6qXz3YX/qaQhDgSaxzRZDUu2pfBrz\nkRiMzOfgF2WwfSadb3NEVp3+2Fv9oTqmd/04cHsP8sp+JhZgzYjI9HJL0j9I\nWumN8dtyCBTSdPyh9CwHq41114za4jGoiG7AVT+OywM8FkOFN1MWK0juBmzj\nJK7hrFi4RiCEHogOaruDv5neccpvt73OBNjMWeaYzQnHYw2j9eBtRPfxLR2A\nPTv96oM0VFYDiFysgeCcUQD2FMF1NzH3pTGpSt3D9/oM0+6sUWSDSGKsMhZu\nvhzehtfh7YdOUuf4sNRa2mQ0kfZpreAQ2i/UqMlmvaaNkR2iprXvM8DDwGOA\nCQEH\r\n=69Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.10af6cf39.0","@material/theme":"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/line-ripple_6.0.0-canary.10af6cf39.0_1585160285706_0.30466295884380745","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/line-ripple","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b093793f58adaa4f5684b46c51250c363da3702b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":34,"integrity":"sha512-x79k6VGNjBfU7+ErQj002QzaKIfB6Sc1x5MbdVqcPUz2D+STxZrOJTOqcqBaepuruXsicZ959qV1y2hbTPvfGg==","signatures":[{"sig":"MEYCIQDGytvaQEutl6601/1VrV32hppW8iSruN4X58Dp8bQzewIhAJztfsI60SxMXhb6VbpK+imi8un1cv0BRUGNjNvpMr/g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkAzCRA9TVsSAnZWagAAg1kP/jTAxQG1rRo7nG3/j/a8\nBORB+K/7z8jRnLwhisPYHbYK7dzA8bDeOJErpAPNb2jworoIn8i3MZCCEaAU\nLNlK1h42UCGyBXY3fA0N0NKw203l2+kn5rfukxiCk8r8iFl4VDCf5LbK+FFf\nxqVkpi2Q3BGoFiP+ixV9hrD/xVtCJls7n+y0D3CAYq2I+1loIzMk/gpQ4+eA\ntqQ3cp5nS7pfDJIhvAtN3kEMD/nMRovv6fV1mcUWdHX9wpryBYwjjRfaOYHq\nt6phBMa500hPPs6RS5Bk9U6cIGz2YAn+zUam4XebMPjFhgUFR8BXtgmtq9Y1\nJznO34P/FunQsdXaLgilMxkEKoFUlVuvxLn/V3QKkILLBRWHhQkGhI/YjQfK\nFbFxzWhg01WSy6oHy/3g85l0eOmUocfWjXKpKUnDZ9RTFk3dYHw9VqyffHKZ\nKyrHyaz+G9dTsY3tTEoPZyZOcZvR7o8alJt5YGpLDUEV3xlxhhggSXed6n++\nQGIdYlCFO5hmuNK7mtyzIKVpgRpm01/SeozkTIzUjXMMTABiWdNk2guycYC+\nCWU/gm/DDJJFmoO5JhPGRlcZ/LYH+OYj4dIzE/hZB3mKkHl6HCVsr41l6XL1\n+VW6PFnEY/IQ0SbmUEWqF+J5QoMHJ7LeutkcnYeEbsr8keWSiJBVF+CihiV7\n3ZmY\r\n=9H7E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/theme":"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/line-ripple_6.0.0-canary.7d8f9c8d7.0_1585332275071_0.32937539436698127","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/line-ripple","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f4b183ebb86050cf7acd875a5d037eeb3ce6aea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.d6315efe2.0.tgz","fileCount":34,"integrity":"sha512-j4TON76GmfIZKTj4ovBzGxq4bgKLyQBx0+lbJjiPni3K1Y7+bRjWXCOwI/UxC6PLQB424Ld7r4zLHBd8x5h0Xw==","signatures":[{"sig":"MEUCIQDJ4HF31BvSRNLpvllqGvlGi8mEPyWaTJ1s2DQQ0cH45wIgS7V3c8MFeKlaKrj51wCJtc/0dpLeapIsIRoeRVHUY2o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpbCRA9TVsSAnZWagAAQrIP/11Px0gSPyVboJAhtOGE\nrbx40P/FAyNcsh48CJxK46ZA7mAT0faPAr42dxY4MEQIAX+geYYfOyhvb/14\nR38/k1VL6kdqcFS+bZDc5LWqW40ULkvWgYSVM8GMI1oMJQEHC7pJ69v5FefW\nqVCHIwMbCgwwERsnI0jCPZ2RgHKpMHkPkOHY6j8RRBX+zi/cdzrUKfBa+BAz\nHON0CNDxzbOb5TrnD9HmAQ4+hN93fHU64ES2BoTXH3236po6DREov3Rv2hJu\nlhzey17T9ILCnp9TITma6KYLvko1srBC+MwH9KfZ119X+4bPTaUqfjwB5XFt\nWmswJ5zy9nirTeL2FjdbMCauVRv1+EqbvsCHMeZQlIlTG3ICPBuixvnK+GxU\nRh57OmH+eBXEmynIAbpyPVJJBiqaJqcg0NkgJDjizTD3T1WxBu80WEOkNMNz\ne7PysaJwAgK/O+rC4NQXepx0luz2eY4EVSeR92RsMoiK2YMgm1dGWS5Ckkf4\n3ziDP51Yia4wKKD9twfBAyPn32GTCkin07rgjQeZdEH20wFSRiasVQWWsuhr\nHaN+iOb1mXTsfEtGs5SmaslhiOX4Gr6phQbwBcx3wxq6jTy7QNkfLHzEgyfK\nu3mtybOhDyygpFfaTdo+pkC+Hyydq5djZfiFZpcVsZOjo8tR7n+PB3mFhoIz\nJoeL\r\n=e3wb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d6315efe2.0","@material/theme":"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/line-ripple_6.0.0-canary.d6315efe2.0_1585338971045_0.3695550145030557","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/line-ripple","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2f40d18ecb932596123f988ca57318cd745c0da2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.a3016368d.0.tgz","fileCount":34,"integrity":"sha512-BqunK1DbAv3qUO4RuF5JyHvQ8F8edicOXGZn2BjUXXhl15Neihkfhh/+a2vCS0uSWkLLwcRH9U/W78GDHTvfvA==","signatures":[{"sig":"MEYCIQDbsIyEXO+hys97Jm2i+CsuCgGG8P9E00j28mMN67371gIhAKZhpxyE7/VQF9ah038XQA0TSanfAv2Bt1Ha/yA7T8sM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm3SCRA9TVsSAnZWagAA8OAQAIjt606zxLxx3UxfIT96\nMAHI3xmy3MyOoJGrnDc/qPQx3ScuT0BQwGiBfUSxJNdMZl7saraumr4F49lN\nUm0iFmnPFZHKlRAsXFR8oFg3G27x08qeknJQ7X9dInoVyqWgZjSoAhdg7bJ8\nTSyAk9y677FZLxb2K4i4fZk1CEpov1xJFDbewF8wkXMWl6GccrXTnLyfTP/i\nx0J0roBYQz/BM9JjIZa1EidZ2mOLvOAS7uvkFKnAuaD+h95yFw+7tgoi15xC\njQ2XvyC5B9N5U4yx7y4KHfiVWGUghUsaNLe7hDVeM+9aWyKuCh/EWBuvmABo\n+Ac506spodk8cshZHSCRdRVnkqhiARZhmOjIoRqWPzgtdG5ydRXDqjHCQUG0\n4SajbtFYi1rJRCdxFIOgqF7KZGHrGgfOyX+5YeUy3sG2TDE1VYzJ5sBA3dgR\nGXrdqfEF2RjLJcoX3LDXxYNJIsXCp1ULQ+CZhf50Ev7lRSduBkFl6OV/xE9R\n8ugtlg2pLYFMiMhnnEPRr9qr9Mla4BX8Y17e6ezq5JLKirhgpyHw4HFBTXgX\n3kz20Mo5LHSUmEE/fR8XseFzk/zcHLgHTWN7nVf0FafgTsJJ9ZeKCFyMHyYz\n+KeqbdT85Ur25nJVGWissHRS51tBYr+Ao2Q8yEfBdv0WdO/u1lPWDZEnzTTG\nuHvO\r\n=4FV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.a3016368d.0","@material/theme":"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/line-ripple_6.0.0-canary.a3016368d.0_1585343954510_0.2525939662699528","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/line-ripple","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f23979a5ae1fb3dc1b129988ed823ced93c6519e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.4b45b6620.0.tgz","fileCount":34,"integrity":"sha512-Q6DPRjPljO8nxHotOaHkVZL+KYGN6XH1XITSlrg3Oq+LyztJ11CptNkZsebKFppxuoyqEk8r1xMgN6PZtoDfnQ==","signatures":[{"sig":"MEUCIQCn74F1OzaD9uUQ0uRa0deuEP5tumPRDU19fxc1Ym+Z+wIgF0+6+Dbt/0/HWk7Yy/pc4+vH8Td3GCaXaQjz8RSN4Q8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2gNCRA9TVsSAnZWagAAaBIP/Rr/KKRMXLv/rA9Gn/Ex\nbKoiuAc7UhGwA4rN0fpsY9t4t7GH/slKcysMJ/pWQDqkCW7oRwpNrG+Levs5\nvoQAZYHK1phBZGUSPdNG5SyA/eOGngCzNSlEAA2S0Zi0TZuUwll1ymh470+2\n86uZZZp2ImhBsZX/yiI1snndKAE6z4LX8/QE/nhuxBqTDYdWcrhEuyCfpSx8\nvAqPFWnusj6D1Hy5aryxrNOT+OIJiWOq0SNSNLaC9zq4U5myyzhHPqUWhjzg\nxVdyoLmueXvKCl70hKeihBGEW0Kn4NkBWbantOiXBf1nDl9DxYgpN2hdjQx6\n7yIfqn4BCpuoOdz3CcYqu1IeNAKvS456HxorQ25WHr2+dN6Nn7csFHG65vHT\nOagTkxSJezeVPJg0r9sWhSJSjvswU3UH9tz+36RwvrL66ab26lR7UeIXgzd/\nrYolisbzhcX2eezKDlJMloP0nGgdqKzwJQjqh9vQ6XBqWd2x5RFu9xSjiuv1\nieQEYEBgb56jipnjsAZ+3Su2TQ3kgg2gMPgtmVwGRvHuxnqYz54KSjYM6yaF\n0VfN2WFLst2PfVVH2PDs+p6rUXjSEHHGxRCI/ouNPIFuYKm/gvFUnFnKOuQ1\n+ZrXV2HkFwsKARrlYy0/aDpH+xFrKBGLfgod1KdYCtIFxszsq3jzK3UsFjZ7\nyI1W\r\n=YBOS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4b45b6620.0","@material/theme":"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/line-ripple_6.0.0-canary.4b45b6620.0_1585670157349_0.751863683207737","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/line-ripple","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"19db8c4ce5ba57ea583b735936efcb4bae66fa28","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.e84b9c8.0.tgz","fileCount":34,"integrity":"sha512-+i7Wvaj1XDFKfpJ88AME9e7w1IejHX4Rf/+AuskvjDTbb5xjq+vuFYvEYDPVtGjDq+MqRgymgQIfLerULXr43Q==","signatures":[{"sig":"MEYCIQDRrzZaPLyXUaZL92JXxWzmvO1Zc07odvBvef8yc9uFvQIhANJLUlxEoM6/NDAVJForCsmcEu5vUnLlomJvLM3vuuQK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125773,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMeMCRA9TVsSAnZWagAAbLgP/ihx3PBjBCpqjEZsb4ZH\nhgoY1zKUovangJoz6YfqaPm9/MqnzJrDESdM576/FY+DTqRcbHIkxp9obBBI\nYfUUdSrTvQvUq8KTfOy/jOx0ups9Qf/MBLPlT3QvaxQzrrtD6smkTgMkjp1u\nQvW8xH7N68c5fbAvtMG138K1lzcqhBG4uzs9cc3nVFpM/fq0ILxoUU35Ween\nqMBZS3pvqyR2NTr63LoLhG1IaqQmH4YiE9Vpm2VP+BD7mr+5R5MwStJALXpa\nWtV65blNYxaAI/6muaY8yz8Z+7dz0t3WMWmcviXK0pQECZNChOEfj/yrS/7d\n6wJPo8yaZbslnKZ9rTrwzaETg/xIplVfl3S6LVN7H7CEMTE619F2tJFCJXre\nM2Cuzpry/EZ8RV6QVU1HB5boCy3FIgnHAe/y658uH1f2rRzlauQtZwuhWeJ1\nPBJHcCP62H/haZRR7ovfGTPmLiI6sFnyEz/BQCbyahZGz949YbjFjDJrY3qz\n9gkp25K8zVzhY7P/ITo6t3r/baaCsUIr3gsiwUXuYxBiW5wpc11SKtlaUl4N\nDXd6DW/4Gou3Qjpm5PQcoTVgg4Lq2P/8QEuEYSnjj79aFMmrI2AzK23EDDGX\nmz7HA/pza+qh01nYrxhreD7ghbYUDIUGcxuRAqKQRLhxllwUTBR74PrypFDj\na/k9\r\n=VGoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e84b9c8.0","@material/theme":"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/line-ripple_6.0.0-canary.e84b9c8.0_1585760140154_0.5786489452904053","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/line-ripple","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f82d5702a1234b70efb311fd8caee86596fef561","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.e33c49e.0.tgz","fileCount":34,"integrity":"sha512-bVTQHVyglARuZmYIM+HiVJ+7BQb62GnK3o53AvdtBZnHN69Hw6dXrtqyiYcoUuntHni3W7W2dq2tnHiS0OOu0Q==","signatures":[{"sig":"MEQCIFwBoPst/odvoX4MhpFLgqOFLOh3JT4UgJJi9r/8sDPlAiB8nrN78gAPq/nTqCumrcq/1EJQY4DIvbftc/3PBB4ztg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS0lCRA9TVsSAnZWagAAyXgQAJ6DitpAfHYZDMnIzt0R\nhCuNPNoWVD2xTHzKMIvbBfkx3fJqsq2eqY0us14LHZkvUpmtgmXsGyjz1b32\nHmurxek6//mGDLY5lCCkP+1sfFBgMX1zE/L5e5s7qxJOg+qXlC8WGf6Jtily\nllUH32h6YPc8shDu+ksnAFf20AJHTCyM8Z2UWHf8r1r8Nu9ABgQYuXvEPevA\nGf3hFWZZQYfmucm1Hdr9/Z05p8nocRPtVQzwM5CWJBXvRoEoycUrJHfGd3V5\nx2spWjmyhGrBTu+3cSgF5fiRmrdwWAL8+jihQDA8ZhoJuZ1qbCxmSN2erVTz\nLq81nEm2EP3x9+ApV6w0Q319LVW7fWtA5G278cT5xfKQ3BxjJfgvVQFmXw/s\nr5ehr4rfXcDUeMwJryW5IpypzHyqkrmj3ViFk/RxJvgxgmVshxYZbY07o3/p\nPhOiNTKpTRbIZYI2acvUWkbKL0wRbeOrHTbDo5UZZQTLrjtvOuFOVRmQ22cQ\n8WEk77qjwtufnymRo622/i2S2bFsWzONvEP0Jq3OSuUhDrFYo7i2k8JR4239\nEqhNLnAZSF6snInzdiGNhNYcaT3x9Ol7VERk3Kl+b/Rgs4rBRbWuc+hDYwX1\nh/iW2NzhEwVfJBKzUFyELLQ8ad8N7jhTpfXwREBYI8No0feRfzm/7epezF8T\nOGpk\r\n=5rpF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.e33c49e.0","@material/theme":"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/line-ripple_6.0.0-canary.e33c49e.0_1585786148891_0.25928832423092074","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/line-ripple","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0146ad9940b72831fd0d710424e7e75fafe4693a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.f1f8e60.0.tgz","fileCount":34,"integrity":"sha512-iSkUZSPORsZ4v7sYWip5tKyixUt1d3oXmvlSVNJHIeSC92JoIyrdvXzWErxkMScCWY1cT5+9i8MpK/8vHdBP9w==","signatures":[{"sig":"MEYCIQCNE/1NocuhP0vrK/5O5wKoVruOUSOyNKmXIFSCyBgW2wIhALs3My1MyjEFQ1nhIpsXAeOJnnTnflFdnSUMV0iqPgnF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjlYCRA9TVsSAnZWagAAVtsQAIGz9CBoq4oZgjRAdWZQ\nZlpgLqczk9mox57yKzsmNNz0fOB41KevPtizkxqDEdodyvaPljbnE04b9Fps\nnU7TEhsJ+lLHTraEG0OO2Y1A/UKqP0/qBnLhTW5ewEHosrNqRXvmt27pcSoj\nce8BhRFJ1DS4GW+EHp0KuFkYTarq/fu9/+atDdX7h0VfVMvE04SANAHcsZxC\nqzR2VV2U/Dkw3weSnzN5BkhSDME0wGANs8rc5A68p2j8b0ow7NLZVQigqojU\nKQqInFAyh8vq/QBNpvaZxEVgV+7V1KjyWMTpP6XcI4knNdv/MHCkF/6i4TJO\nPTIgvLbzaJvhBmne+Ve1Pz+jjrJCYztURkQqip7AbfVAtwfkiReDLsbEsxGj\nI/Jo6rOikfg46YR138ytyGEP69yJJcMlzrf9kXBj6DJnLBYTM8kPKlSlyAu3\npZtYVJ45Yizb1WaLNehwIrLw1iju4kqWuAlv4VFqgUznRFfV1JfV5VZMl6fn\nU7UDPdmvEX1UZ+31y5x95QayvdYVl11M62c1Mt04Vk9qFTY/APC50Yx6IiXR\nmWpYEgh3FF5VqxIjpUyIUJziJgc6uHcBD4Meff6KC6TcHDOXNkI5KGSbAlai\n7dh7/Fk+TmKBzD09dGOjE+OeDx1Scp8K7OgofWsNj+Gp0Y0mGZeQxZ8wHzz7\nwD2S\r\n=qmYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f1f8e60.0","@material/theme":"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/line-ripple_6.0.0-canary.f1f8e60.0_1585854808547_0.6533055750520456","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/line-ripple","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c37ce6ba0a9465f9bb1eb0fa4a5df7db6c5412df","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.1e17c49b3.0.tgz","fileCount":34,"integrity":"sha512-SJOptfdE1B16QeavwUmbO1VjJS/xI+N74paYWVcPSQW86BFWTzmo3vV/7264tI7A2QDHdFwhIZo9xqwUPT0eIA==","signatures":[{"sig":"MEUCIQCs63VDiJiszcq9ALq7pfhquZTFIA+IyVjTqj2B8DZxXAIgHyNvOW2WeU3CcT6uIlU783W3H1D3AViFvNhmO2O2Qs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3p6CRA9TVsSAnZWagAAOFAP/RwZdo6wDZjdHMibfCNX\nhDRyNv/zBJ47gNs5dl8Qff7Nf7WFQIwtxtyQvu5XH7Yi5xVZ/W1NeLzCAiy6\nmusPMeM5DsGiN0xpgbh06xdQqNx5rENWJBT+4W/J+FJmqG7v5Nia7Aku+8hJ\nb02EAbVSOExlLaXHE4BZF8ziwJVizOfwogbh1iAWRb7bn13+E9FJM5gkT3WW\nu1x4ovEPHXXqY24po+DoCDIccRmaAuT9Hu2sKkR3DdG11hRCFLkwQ2WlShLc\nTpHLSE+CLqLflV4K6OP/cjNWm+t7PfxlapQ/DtUIhpROQlSSRr68SZAeRm3z\nrMVjltuhh+aqXgWc5QjteBpwd97IGNm/M+uxJL6KXP+fIx601YqjRSQVE5Va\nZnQApmqiSYXVmcxme8htx6WaOXQ2NmyIicYW0Tr3bLy3rzISj3MnMCVOABN+\nW1vlzLGkUYnfmxNIT4M4C166A22O6w8i5SBk9G7sZ46L99mXrNehI71Z3ZRy\nacE5QWD3sxOhYZlwJOQmGEuW8rJGNBxlcdlpxvmrPRCLIQsfoOdc3FPRhbEC\nYm8X3FbhU/maF2ZgiQlsfTOY1+13XmF55ENcJmdr0KkldJioE6/lB46WCccE\nokTt+oSzIcQhaGdsUXFdXOtkZXCed/0Zlg93EpoEr4aS6ISUBXyX6KxEVQ4u\nQToK\r\n=4D26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.1e17c49b3.0","@material/theme":"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/line-ripple_6.0.0-canary.1e17c49b3.0_1585937017959_0.6226884268530353","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"602b6733a1bc177a6790af119bbb85f7be4d3d22","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6a40ef217.0.tgz","fileCount":34,"integrity":"sha512-mXjUoSOEMKTT2YCISjAvF38mF4JgrTm1cP6p6Rpbg/n76CV9R8164sHVQ0v6pzERZ8ZRSgJTEIdEK1tyH81bMQ==","signatures":[{"sig":"MEQCIBLRWNzurK9pdgHBtdUS4D5ilDGuhlFeRHtVJw/4YqA8AiAk5jJdK1rXlz/ZIT5T7RxjmPZqOYIt5hXrnpmLWGWjeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh41jCRA9TVsSAnZWagAAn0kP/ilB+VCacZOFeD89b6/w\neQut1FJKyww32a1O+K2J2hHUkbK4JkMuqF4cxjS4SU15jSnuW0anLXzDqjSM\niKZeBaRiTyDby9bO20Zv0FFenHIvYzbCj0ZrxBaAsvKkdJhVj6wvO4X2GoFx\nJGHX9zApNHq0jzljLk6dqYwWW+T2SJLXI10vg3de8nOWFaVzHlT3lxF8mrhY\ngNAC2TsZALASDbvvIVYMJ9BZAE1aih0DtNnVnBGT/Ap533RLd0gmH3tfpF9m\n4ZaL5/0k2FU4JnGBnB3nD3b5MNDD/C/5gVKKSQkg28Um3c42MpC2NqFdDpYl\nbn51My9kzRhKnQwjfi7WrucfhVjl0eEur2A1ZQVwnLWkgbcbFBOtO9+U0mAn\ndYIHJYdmbSjXu2QSFpDwJbHDqD1pfR9RBBE9gDLfp1qRgylTH5kqPPKKi04s\ny8z8DGC6zCv9F3LXqxcEUoSqE3EqrKjvYwt1V6iWUKW8/1Zddt0wuvsaXxkj\nSOGipe7JCIrE7KJCT56zcIqMFUJO2kT3dHqzGrzAxWO3sArRdH6MrSOAZvUq\n0fDFymB971RnMdQxLE2VczE6gM8nIkXgCBdpTlaCuLe1Oaqj6n2gud87AirH\nWRffuWF2vu/RCir0p/k0cCue2xBv8vecPn7ZM0iH3zZQ0X1kqQoSjHlGBwW6\nf6L8\r\n=K+4n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6a40ef217.0","@material/theme":"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/line-ripple_6.0.0-canary.6a40ef217.0_1585941858946_0.41518609933471784","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/line-ripple","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f1a74617840e279527a73513301fde844888a005","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.5f24faacb.0.tgz","fileCount":34,"integrity":"sha512-0oRVZ2Gv58UkSzprrRy+GtChmTabIODhxCvoBj3mRbsK9RiBfBZIaYQ+J/c+58/S/6cLFFbWZIjDv9QjQ5ZpPg==","signatures":[{"sig":"MEUCIQDueSDdk7PhYgu+paHCvPCq1ywjERbtzj7AxVvgXOxEugIgX6aMf2p1scg3rd40ef4WXFNHztsWwfNlCUJiBKdLD+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje9TCRA9TVsSAnZWagAALH4P/0d2svXpnhxsAo9CZWvJ\nl6/crpwax84LvzbYay7WAsxCCEE7XrnUWlRAlmULds9x+ABkpbICKxLL/fKk\nCgAmb3n4lLGeywO9uf76N18/TlE6IZ0eRZjzvM3HXlnwvK+e01dHX4v+HqQC\nx/9v81pPn8DM/SMVHK3fjTb9+qpGLIEIwFob+GU4tLpMxHCdVFKkXHfvJgaw\newAo7rOCM9KMlHNLSeoi6XgX0CvsO4B43IfpcsgQVGCTY/L0rEi403u/pEFd\nlnWpNEIClsRaZp+++avtxaJTj58YuHPpiPjQE6R1v0mvlIDyDQ4fkbXvhoF1\n7AfDxmF98WdYHMbn9AUDDKILwHS8kQODSFHtkGiHkUYXVQUqWxizHy1wfCiy\n/ZagOdzNDV8ODZYLNk/RYHAyAd4lhy0zPe8OHuLRJ891930I07Du/v4+RGbL\nuxoKfrOU8N23D7f3afUC7Yk4dq+RpINhTMzAyIuEKK0rz+/nsjFm4uiteow6\nJQQ1ZFjzNF9hZIkJGmMmab8dPERzicr4Mp9Eoif+xetlLK+R1vcHzKbx+3mH\ne1CMMIG3p7ExV31CQqsWLSBZGtoM++NfepUUMiLs1gCBb04I00MdMIYFTiQ9\nAzpd5d6Bpjiny2gWUWFHfMExR9yU1fYr5HcZQA6KsJLq8Li+zI8T9TRJ7HZd\n3Dva\r\n=KdNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.5f24faacb.0","@material/theme":"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/line-ripple_6.0.0-canary.5f24faacb.0_1586360146866_0.24005426492536142","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/line-ripple","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"24198ba04c7d8841630297c34f68f3224b4a714e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.82fa986b9.0.tgz","fileCount":34,"integrity":"sha512-8hvO0dtOO+P7TN130tHJJ2yXHBqlwkfyUi6LSRSi2ivyODddNlEx2WFgUSV7A2nmIgqyC63qSeAm/jG7QD3IkA==","signatures":[{"sig":"MEQCIF+J8KNvNFEdeHTNwDaNxWvFand2hA+Z4GOctETWDS3hAiBpcSFpMi45jcf/Mjpf0d1oCOUFRGRqS36XjxOFb62i+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfClCRA9TVsSAnZWagAAcGQQAJ0e/1xQuV4ZXNm/MmQQ\n3VRmjcyj2G0YiNzx+EnU9DAGELmGGziNOyOPUxH0+bHDJkNyZLjFdNplaAqU\nj2m/RWtdnwkBv6WDXVOV0t3s6nPagsqcVaOA1O1GPjXdEVm4zOzHkdNEDhng\nYEubdGGIIijTkyDQjrIrSWoeeqlZLd4/k0RN6i3pWWnkERCqDoT/Ac6DviSp\nTJdRvBR+dOoGvpqavX+xfqvW5nQs9kaNSCmF/A46MNwShU6OEy9YjpuPB6X5\nyC/P5yoqrGT3Zz7edzFdV0z7TK7yte+wdSg6OkHrtPM6YcEVNgZN0LXadFB8\nzHj12lmH+oMiJ+PBlO5eqS4CsdIVqWl4ESIQZmmkDmzVActHqy6RPqjPz4P4\nMiFZWgUX/FiNn3POI/fQEqnSwk2cSmu2cvIu5AlXdrgqFkwQKZeWhvd5Rig0\nPwq44MYUYXi/RPoyx6Oed17yA9yLRcL1ovlhNPNzrjzG8rtfTW2sFH7RrvC7\nqcrNpTL9gAR5AVz82NADfWF18ys0r5/G7WqnB7fyhe13C/jSjb7NrIrXRKBM\nqHhuG52mqq+113jjf3ERBmipEaLyuG9Ijum2B0zLh8kn7gA+aotTfjQD7T85\nKx5yFBVQQ2JCiXgGxGat8M/OJcArJ057dy74Rm+9AYxS4TMoTl06fHr3Z06e\nHvOI\r\n=ZQ5w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.82fa986b9.0","@material/theme":"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/line-ripple_6.0.0-canary.82fa986b9.0_1586360484759_0.3207552477130866","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/line-ripple","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7a601a6266d112da6333229dba0cec60574b3112","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.9930d9cc5.0.tgz","fileCount":34,"integrity":"sha512-wt3Prg9Xre89LvK9BfsWaAO/eQpMfh73claFJXLpl0Inw9UwcMFP7okr/BDG+jlupOr3bwHRzlQQrBfBllBKKA==","signatures":[{"sig":"MEQCIDWK52CnWnTPZxfu5xtVgVB53+0B6fOyZbq0qmljjVUDAiBCXBNAHQdvWXdDBjdk1zXltzYW7UHCDX6MaAsjQlXSAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejia8CRA9TVsSAnZWagAAX24QAKCUn5D9sEFjdmNWI4+9\ndJw50tm802m7KcI3ZNYdLiHUNsmm2ycE1oWbitovYiceY/hBj2QGgQB4QYqX\noUgsmSbIPXK0Jhabc16QwTTj1/47vn6LbB7Iu70UAZ88GUnjBhh9I3XEobaG\nYpse1Ob/SqeMqWJXNcj/2UZ7ZHcg5FxsCIFA/6ULjOJJazvGLd0kh8kbZ/Yq\ns4DJQ84uRoZEfaK3WYM/KC+6WoFUfT05RnIBoTQaC7A0OGDRZNUAA03U/HEz\nAq0oqK7aTsVL96o4dBo6QcF//pjsKebUOmgdORPIwqO7HfuTtkFyWTPMwdiX\nVZn97BltXCgLQoVND6pQosdurRObfn6JE6QX3psRw+3QcJDPoyTulDMxzuPz\ntzo8jxFAdBiZUSJ2RhSrDY8JhsiBgm0gMcPwSrlOx6OGwVVK0wXf7n/030iU\nvwyQDk9bvLkr+eZnYoXHEZFphYZ6dK7urEAtIEGYDvvJZ4pukn+ppcx0kT5r\njdDWq1V0GlqrgVCl9KG/1vT712UnsqQwdxlsrtfS8XnKlJ5PsPmETCOwBmfM\nbJ/YNllKdWDEhpI+6Q1wVtGznsALt0W/Pc/kOnzrzYHImJJhXtgAgmCw7CSf\nlwB/Vyhi4iXJUpcVGpc6JCBm+vR9+KlFhca8D6MC/Qg2taCu4q9bwY8c5CGh\nra3O\r\n=7+4L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9930d9cc5.0","@material/theme":"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/line-ripple_6.0.0-canary.9930d9cc5.0_1586374331891_0.5113497929551996","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8e6141867ea34e366a3a92046ac78fae9ba6d745","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6601d24af.0.tgz","fileCount":34,"integrity":"sha512-P2RlFyoeV5uZdEUZw/Fj4sKjoySGsQOkdyFR+4Dnh6CbisgDaxiPGtc2K9Q1Vfnbsa0Ci4vAvLQjjAm1BbS0YQ==","signatures":[{"sig":"MEUCIQDqCM2GHka+xdYsmq90w0Rnq5p/eeZgemd7qKQkfBqBWgIgEMnyYezQ+iDalzr6vsZqosaCnp9H/t1aqmd6Q3xlqqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmxyCRA9TVsSAnZWagAAO4cQAJszQYbUeT4Hsb+cVpfC\n17mYtxhWco/9ydTcnALBrJVT3P+p/CO8Ut+VKVB53mp/0jamKI2F59WeMGGl\nFv4sOnPKMGCljmfx+n2pMk8aZDYRMFdvZsOCmfVJlB1QutivxfnLlozjZoGG\nYNif4LnDyYxygVeYtTroDrTJ3UId+vtI4184f/1ejRnTqJT1LuX0Kq2bfuJ4\nBjStTwz0uAS28czaZNiO7OqGTHjKa1T1zeqgcXstlgcZxI6xQZcg6YeeJwau\n5wOYfSs0zMu3smV0SvINhp8CPDZLNDmyk0FjggXBkbW790q15reNRHvV8Uyc\nk1g81TRfi5GR2fv+3TceHlxf5TWONZRyLjMCBnFLgxK0jLZHlt6GaHt7GUFh\nAZBQkX0V5ChXY+jvv+pUQ5nY+9r8GaCvhgOGlLemHCA5WOIKXPM8NxS7Akyi\nZxDB1MDTUPugH+WUVdfzMgoxPz/Dvn0blGJp3GRFJ6Mb6P+qJKIJdg3DDTfT\nopM6fpML2BBIvt1oGndVq+zzUSCc65wijRmCxzzi/z5CDYoe+Fb1AejJPLnz\ng283yD5K16np2c2iTEfIanhTy/LBU9yLTZYXuvfjmDvyZETCjWqEtn5M+kLu\nzVCvJCHeCPspjQAgd58HwEljGdz3t6EoV/vUyGMDed0IQgiPePBz9Fj+2X8u\nQ2Is\r\n=8hnd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6601d24af.0","@material/theme":"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/line-ripple_6.0.0-canary.6601d24af.0_1586392178393_0.9506318180677682","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/line-ripple","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a3b82917bc22b710a9dceb387c4b3dc0f8a2173a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.05f5e1583.0.tgz","fileCount":34,"integrity":"sha512-GevzBmZm4xLWqv215ZbPINl7tSdVfvV0fem8TK0m2WxNrl7aDOxCc8peNoWOGWRwFjAlznkQ9GjbrIxXAZAuZQ==","signatures":[{"sig":"MEYCIQDKNiHhgRma6NYJUT91l27cVJBemi33am3kwpH4WAalNQIhAMAPVtmtzqbLyw5zwDsoiM72FYByGKgVHTlP6Qx4HjU4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnCCCRA9TVsSAnZWagAAUBEP/2RNP0CpAlEK9JJ2K/IJ\nSQJP/asaZAVdwMZDx5ESO84Mp1xYCP+hFFfayUIVXuUvpM2LAKebGYZkZn0p\nZbz1V8n33/GkOpazKZRda+KnkJUAfV+eIvg8GsIKRNHMcur4ET/sR393MdLP\n7lzAqHZu9Zq2HqEwROFi8WJtWYKJb1kZtR6LQIZJsod0TapEGZUDqpyE5hzh\nLdftD/U/+nz5AhO85DOF/SIBOP3kvnb+gxZ2KP1d0m8zqA9Erk5xbIio4d5J\nOpzcbDjwkDTcRilmTbgN+6CxBiFs+jJKryxy9vQI3jLfXi4gMfiwQQeABhCK\nwLzGE9uMx3NSft+dlRDXb5cM/waSBR9a1kmWdTHy3vcnFrF63lLfTDvnfKAb\nUxrR6reCaXPahkVlYn4BxmfU/OSnPYubM1HuuomBHJvk/LCfSdSsdNwblWCb\nc2Ed9+ZV1JQh8dr/hMFqnG/lQGUs7GKIKdd2UUmuOJjymrBzfGY7PLm/6tcu\nl78j+O6Rhk/OrHzK+wZPCQD7oYiTdEVKK3gxTRr0WCAZhM3jopL47r8w4m2v\nLMOp7inqEHU60mRmu8Qux7qw50NUbBf7cHUGYd2D074WROKq6JL8EtFopku8\n5UmJe/4wgr7S+e+KJT+/t9XDvrXs/JIEdMDiq24UcJrZCqG7Y0KOSO96OTVJ\n856W\r\n=cp3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.05f5e1583.0","@material/theme":"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/line-ripple_6.0.0-canary.05f5e1583.0_1586393218293_0.31371044013269267","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/line-ripple","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9606fd3bad336e80ccd0eace4394f1ba65704b88","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.bce00e186.0.tgz","fileCount":34,"integrity":"sha512-n7Ed1K/YqbzsQybzqexl8bIN0G7P4VYZXiGAY2rzabRgKZNXv0VlcoZRNjsScwcAZD43uFvQB16FK+U4iGWtoQ==","signatures":[{"sig":"MEUCIASDOm0VS+RB0UyoIOyksDubZW9st5TqeQPMsM6TWOxQAiEAqSxmiprlsizJ0yNKu9LgkyH94jX5E1sKVKzQrAeVEg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz2vCRA9TVsSAnZWagAAy7QP/A9pm32Jd6nOO1N7HPXy\nQXu5l45XtuM0FAH4YI5fviavOqhXKV5sWfkusTDjlr20ggyRc7nMjPFgke46\nmwg8CB3GveYfWUFuMxAMuS57etCp4Ib5ganwO+vMKkN4cquGu4TpIO4Nd0AJ\nmXJUkhP9N7aLH/kvi1aXUfDR/OQ2K+NxKYi16RixecfViMymTxiuEoEpdjC1\nd+TMmEUGWizYRXMT4KScvG2iAzfSvzGAygm4BQA2R/FuWnSS02uEAUK3jP9z\nZRDNQdJlE05LVJeZN/rWU2cvdQS/ER9dnaqloSBAy4SdzRiRXJKZhEQN+K4J\nGgeXWpG6Xzkqr9jknt/otrMYlVkXB5HXG2d4O3tm6H6LJALj9igxX8qt8/wf\nfdOg1byhKzqvzeQLlXvCPbhk9Df6X6UtCN5bni5qC7GRzpDN+9DYMP14ktvR\nS6e1LloUq3BZFWVPQCID3+ZBhZ56tAD/0M1lB6JseDAAyKkpCPVxPzVelF8j\nIXoaxBMovh6aARVbI/xrL+vy1GqITy/6gRFTYkwUQ/G156fr+UqWPqgP2jNN\nXIx05TMmLZ1+usldrcKm/QkvUZISTZvKCgMJ17KrhgZd8NrDICDmNfB/WYSJ\nQqeGF/uC3zdCJ1Wm7h1osCE+dn9h+yL9tn6fF8AyHSrh0vgDNObWRELggWa2\noYMW\r\n=u89f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.bce00e186.0","@material/theme":"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/line-ripple_6.0.0-canary.bce00e186.0_1586445742897_0.4588944536347863","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/line-ripple","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"52be325b5d7b99ba53f365c20599a5206de67fd3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.927fa902c.0.tgz","fileCount":34,"integrity":"sha512-5AUBou4oenMBjuwpejknQVzlXecqFKgcjRnRePn9EPxly0+4DTtGqGMaHR+Z3UIwJcNG4dLHqwf65C5e+YjQXg==","signatures":[{"sig":"MEUCIHnwFbzV9QlUGPhKllTganeaSWBS1K4uSmTzjlGTUfs1AiEAqZT+ugwmP7mcoUF3egVz1JpElCYI5IzENN4RBBDxOj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej21zCRA9TVsSAnZWagAA7+kP/1X8LnHgk5eFTAmNeIFR\nEmP+JDKPtxD407c36yOEaq4+6rc2R/iPWbuLIMbWvdaQakTv0qZdR0d6lnNf\nUMCxmmHE5TmK6x2coVQngylMGOVVAGSSoH3FzVgWepmyu+VdSMIGhOjAANSR\n2CCz04F8s4lfEES0ubPPNlXhCD8yaO6lNSkPPZv50OoTwy47IlTSDBffxpFj\nIQwZG9KhiMpHoJVC+M3gBj5hRva1nuLj1McrneBbuRWq8b6MFgNpzi4vK8HY\nE2/5KiA0KLby0Og/VHDsJnHsY+YZ4kb+pUvzf2wDYNZWXR97wcc0L7whUlZR\n+C6OC8qv8Sq88yHTbmj43+0vYaFHGq+N3ybiElTUX2y2ZEi4ZTWFf3M0CBRR\nm33mB6d5R8xjqVhcm7ZhFECZ5mSa7QjBjAulYNhsjdgSBz4EdPlZ2ukdPIeg\n/1JPmO4Wof4rpNbgBLJq/6gBLSbggFoGz4cl9nFCL22FnysUMS2Gvc1q0SOW\nYkozEVEGjLsg+4xXhCGpVsEz1ctpFI2MiIgSUFPDnznIkAG/+n+PR4+BF4O8\nQ/6V+JvDqXZXzcLMGVRZ7tOcDQS0/znzOZLYq5qDPuVzrTw1Ss1GrX319Euy\nURN8lsbr7Iiya+0eW6f3YfQhxoXmuO5IfnyFPNjOzpv0++ZqvbTUzVUnV/bc\nikWe\r\n=QRTS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.927fa902c.0","@material/theme":"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/line-ripple_6.0.0-canary.927fa902c.0_1586457970734_0.78946916360352","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/line-ripple","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"753aeac9e831d35670f380f8a392a3870d51389c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":34,"integrity":"sha512-GvWHVdn04axQ+XnErxTvJHC5EHEkA5+gF2nTSdhzi1EMLDOKJtvGp6/mQiLSwJVYDZesMYgW1B6UZtsUc2uRzA==","signatures":[{"sig":"MEQCIDDuOtnxNKq8j7lFMQijgDgakklESJD7oJPICmBwR5PnAiBpnIcL9B756lJ7FiSqgbXaD9wrkQilrFCIikwBiu4nOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMllCRA9TVsSAnZWagAA8gsP/2cy7SmMiNucIPYmRY9k\nbVK8RrH7JjUtIeVp4FGIU7ut/J25uq3bbjLZjGPkGkuzsiX8bA3kCEwqHHlQ\n4WCBpDZ5zRGTXtTtf6JFNzo27GemoZDUDy7SJp5bTvug5+yh7vu1TCYVrQHI\nHIU7eWLUJR2yKhyGWe1MLXgrgQv9IUuyp6NiJwPPkpQMRprELdVjVUEtBRfM\naej8AN1KemBNy44nykP7cO2K78U0gvJtLkgAbozcCPlyetne5eXqCPmAKGyr\nh8362RncOCnp5vBembUxY4/4DDwQcgK+XC+M80miJVYM6Ese7yT83Ldh2RIe\nIp8lsQxdw3I24LrydpECUS/4HtiJ5rB7neNS4HFjsha5GJW0FoMBLx+lbPfr\niSsfA+Iw+cVeqd34fZK3CNZLUpQzoglrALAATbrOSz/Z38aazD8llFwxD/9G\n0p3FpUTUy5XFsY6HVMeX2PVVWXbQwf20dyO2xlOTuZW4SWFhDi1Hr0kDyLvc\nyU0ypmdKB1MZUyxblrOpa510jg4togUv8ko/Cl5bAyJjtvOLro6ODMXLFawM\nnewetTMAbbML9Q1tuG46nyWOXD9l9NV/crX7fEe76cwL27YGy95v4CN934qa\nw7SsJ3j+nPNAVIfoSuy/PsDL6lHhiANPkwz2z0YyVUNgyqED4L6mM5l8M1ys\nZSVc\r\n=xRSK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/theme":"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/line-ripple_6.0.0-canary.eb28b6ecc.0_1586547044642_0.6890652990049877","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/line-ripple","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c30f4625deb1d59221d9c785b150ff8dcd41e11b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.816a43b42.0.tgz","fileCount":34,"integrity":"sha512-fvh9c8AUFmpFKwuKc6dhjze5KD8bv6YUk6jcWCEeOp8B9xrnVEH066YdDHEfuMM9hLvETUiF+k2/TPMo0flNGQ==","signatures":[{"sig":"MEYCIQCc/PIdtt6JfR8LwDEezTD9UlcvmFFRpQKniTVZ1F59wwIhAO/uynK/n/y0sez70LpFtgck3xAKDJSa7Bh1taboF+9a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNyMCRA9TVsSAnZWagAADooP/jZH2qXRsq38PEwJdDDX\nL+Dn5rqF8mCaz7wktT0vMSYwbRTH/GlfUMPrbIb+TR2B8S7EgxmxJiCLG+mJ\n+mOCBf+d+YsaLs3QvfYLiOiUoSdJIZc9qkG82fek6JJP/gUSCzeV4aYSbXl7\nHoiWgB8DgREAHppjOs09EJRVwTEfjXtjN47oMrYh/JgO9YA9tp/rC56ZF1jD\nQGqrjaXU/S0adrJiXW2FWeGJyEqW20n3yJ2KxopUtAD95F5g3jfpZ3V2E7cb\nMUJX1Hml4y9rWWK4v5+xzK/jf/L2hc77cHlBa3+NbM2kc8Dn3Xlu+kgyka0T\nLy8O1JJ/6TwevE6Qacf2ipDVzuUjgPrZnR/CkFKq7vv40cc5gGIrrl/zqNcL\nkkLXrXVjAcHJK+A+TIpLnPaxw1UpN3A9EJ123eeVOrLAH2Fe7C/Jal5dF8Tp\nXlg0DiNiyttRMzuvdOeydSYwpS7tXr4qg4dR8LzHWSSua4AHF4SFuNEdsLyR\ngnP5PPAqqxWWAd0xdN55hR4Nsyljf3lsBsOnCHAJ/kJP30ZtYbCgqlftLivo\nTd95UZe76RaXd+0iPx7S1CuxsCykB2fODgTDlwv7fd5n9I/ZtBD++ogJ/K6z\nQr5TE5gOyM70i2HQjx8fzOocdZPTa2UIPZ4N8gkoXefHLhRCL4EzHXioPY2m\nHzWe\r\n=4Okv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.816a43b42.0","@material/theme":"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/line-ripple_6.0.0-canary.816a43b42.0_1586551948019_0.5889065498608423","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/line-ripple","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1370abf2e26e0e9e750762ee3c69fbe6b22cb804","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.008c4d319.0.tgz","fileCount":34,"integrity":"sha512-oCZSAwecr4TMDFQMRr9GXn/9ug9eUiKb4MyugvF32wDcFQnDS82YP5ziQ4dkNtb8Xw4XxOXFDyxb0vAByZcZug==","signatures":[{"sig":"MEUCIDe7PP//4Q3JJMh3Nr1jKFl5Jn9XClxtmFtq+13BsI+sAiEAjuAa2N4phCnIrVziGAIb3BTmshsNxiNknceoGelNnEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJRlCRA9TVsSAnZWagAAoDIP/RGrYntQTyifBbdf4Qy/\n9WYGk7yORmOWWnk1DL0Gv4rlPD5HbXgJSwEwpr0U33Y66sb0AFoc0Si3XleA\nz7B4025dLuBpyQy3g+LV4P8L/302XitsN+PSLGqwiIsEWdZ7+T0wApJxYvsW\njvvlFyeyBTDUvRmlyb/o1PfKLpuK88JjdaZfEgNnrlgoJGMrNLd7r/EDHCA5\n1QKsentjxxSYty/NmgOyVxrITAf4RxwpCCPFWBYB29lDOLsqMElJe0ck0gsU\nr1VeRW/rIr6S2AbH0h9WDn4a58GCK62R1X60qQpcFUzWhwmGtOJtnQSEWKln\n1MX6brzb87GdTs6c4n5U5985Lic1JdsrNkz4CqnNJ7J3YKbv+kH8mWgxPEHR\nQTW70I6Au6yr2T8J1IECaZYc/9BX80U7MLGvHZPMXwb4UKlYM4NPAvesr8gZ\nkeRAyqL7H9tq3NoIn9IWixjITgitGWrqAnGEunqXEbWDgjEvd83IgnmWqadF\n6HTvneffFSqVAjQkNw/QTKW4mmVqAlumB4I5ToKShCSiSQm4T7sJ1v+TepWN\nT/zbO4suMvUFvPFVSCzA7/zo4G198X2IrTDJoBtdwbB+Ouvq5afXBmLEqZeZ\nnDGAe7EIgHf/EmZMc910l2tQifxpwTB+wYhyvUlD0T1GG6om2q81yrBjmBtf\nMKet\r\n=JsSp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.008c4d319.0","@material/theme":"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/line-ripple_6.0.0-canary.008c4d319.0_1586795620053_0.6423052661908706","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/line-ripple","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28e86d4e490c45d881d3f9595b68adb04c606d0e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":34,"integrity":"sha512-0/EqO0bTp3NNM0rFs9aPluwHfV3AoSbwQFdmWWEX1tFXopTvXv+2hAvedBuK+kXoXhHJRs/Lfmt0rao9OefO3A==","signatures":[{"sig":"MEUCIBUCNRodPYmMdLnpyfd0vmUx/F7czbvlo2BDcLIbq3OJAiEAxFM3hUuy5GgnoORuHwp+LBbi9csn6jAgpggPqEvLeUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUSnCRA9TVsSAnZWagAA8okP/3pWSWXXGQtmLqbBXWK2\nF8lhBBln/wIjh+AU6Bf6f+sciIHTh0iLJJaJkwgCg/1DjeJpwWUdZA/z4dwd\nIEbDfa/YcqDTCgg81N1VJwm4UpNWUoNemE+IHjxYXtAsuui+N+alkDi7KC55\nN/YSS9I0r5zD8my03cHbh/XF51Wl/4Y+wi2L0C5yStzSqAve2LCUMWtsheBV\nzOHmP4LAJGw/HuLLR4vplzxIK7TXCJc1KxQZc4+VGEOJ6m1F3IMjstYZRg2z\nizwHsKup8+guROdk3fOPPckT9f2Ptul23QdRQ/l2DpmfMJj4YuqgcxpWs8vH\n8Ef8cXEQfSnNq6mEzy0CvOs5ARYjfX5TiVFPpxwOfELQXRJeGy7w5IdHVlHw\ndKoY0kdwA8frzvI6tt+OTh6DX0L7tABx6kRbs9/JdXyuVElpp1UDKgfOW3ZC\nMxrErhN/h27mvE6EvQKVZ/77PT4TDklSyhjnvUvo/9Ce+BFa6R7NDEiC/qvo\nNFssm7vVQYYiRCAoRO+rlOJ2gQTAILg6sFceFeu10xxVGgrcUgGP8aTAefbg\nsA6T32bV94xsDanLJEGrS2/rEyc0BbUjHqhrDG6y1W8fAPDPELGJzwyi0seN\nNWYJ5GejEyaq52h6+AI8rc2aaFt0/gH2MpNERcJtd5xMggusSzJH0Dgwk32G\nUNqF\r\n=sl3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/theme":"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/line-ripple_6.0.0-canary.cbb3f28ca.0_1586840743315_0.026956795925648702","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/line-ripple","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e65fd7917b9fa3b5f96714b397e65e882f9a33c3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.f172b0f90.0.tgz","fileCount":34,"integrity":"sha512-hZKB31frWocI+lswO4IChZxD9WD2IkDC4uWdg9Y04zBFOY+YYf6QrlwWZX2nrrJ744jb5io5j84QDpM49mB73w==","signatures":[{"sig":"MEYCIQDD2jwb8HAv7yj8VT/HOIi93MHovPyXc2fXIlXHHt2cUQIhAP5xlKCHYLniYMmy/lYvKZ3MsCv/gGWB0W4qffdWa0FX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkLQCRA9TVsSAnZWagAAI2gP/2QdMGLE+dY485uRAP9q\n9Pu4t80p4eJaOC8WttBtJvRCxuT40UzPVSVCkIBJfwYw/NgDhBA/HvuW2bbK\nOfffRtZd/iT3H1JvyjnGVjblBPbkuuyZh5IZe/S+KfdcE136O2UsywpHEzVW\nE2fsXjXnq1jfkipDhq2ZM3OQbBXZTrBarOAsczHx4R6KW53oPBNVz16gNyaP\nErt6b1Jl1b7SSwlpCdd7KbVNfXjvQjV4vCg5fFQ+74it5Yux93NWFifruea6\nymGT/W7U23a9R0Zj0LAGmQqUGAXu32O+A/DDfC6LRYXUs7gCqUHkAdJK1me8\nJGNNQR/ohEzePoYHxDpKUE9l5NvrR63s4IBgsktBi3c+EXMFXmeAmzJgNG95\nv7KjjF1tqZCxGk7WJ0OMobMWej3YIzjOE/bNBH798Tvo2+gZd9o1hSXyguua\nS8awU8By/GwP0BaadeNukNuB54V7OQhhfTamvzBvWStNrVcX6+zNrvXqLuX4\nAlhjrBm21OfzqWPg/JWbRPsvvrAbiJ2voPHUbISMFj8e64eTaeWzMnI8JnKw\ns2jnQz/U4erszr1AoWNLNqtc1xpxqv1bHzwHt5yPwmOpsWQuvUfiqDoj3Mlh\nKllcp+QnxqhKsrSiWm1KSBv93ibncVbo+SIpWF5QvEhQehLOslAe4rZTMyAH\nM7Ns\r\n=WU81\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f172b0f90.0","@material/theme":"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/line-ripple_6.0.0-canary.f172b0f90.0_1586905808147_0.26294211624959885","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/line-ripple","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"89e88d167c7639802e332d6a6766df151eb62e1f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.c02642273.0.tgz","fileCount":34,"integrity":"sha512-+h8ByGDck41trD6RnQHjl6JByl8lgLNATxQRrOjM+A68CmR99j9F838pgsG1zF6QVQGYsQnVBD9S0UtEHn+pYg==","signatures":[{"sig":"MEQCIFWrLarZ0HbbqsSJewVViI5DHv5p3ZBjK3XuACSXN8qTAiAUp5jz9EuO7830oLqISo9JEIM4cdrA9/2z+vcLSktuow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzOCCRA9TVsSAnZWagAAQgAP/iU6IYYBn0NkC5hehKfU\n2EsNPhLx2hS/qnj0MkmiFOHsen8BmFjSgAv+XwEmQMFQqLksJT63l167n3+D\n7VQqR9a75fHHPA4VgjHZqxhaMidEOHt4sZpYnKe8d8ZhpdBCQ97beUG2EXH2\nh53o4O+MjI5NWwx13CVbzN5izyB0JfRUEtkMiH9Da3Vs9bw6ol4riMSLJAmC\nEMvS/zJMvz/zpneKN5TLUaE/fh0R6y2htLC4wHiNzR6sUB1jWZHJoHO6gOmB\nC35fwjG5932P47sTfHrVHVUvZbfRx8A5CBiliNi1UZP0l62qvqY7QFaoBNUu\nWal1Hk0DlCJSW2Ehh5FWbM3SaxC9Q8EL0XdTM9J7LplPkrtxB6ybynOoYHWH\n0VZW6G1T+csAogAz4h2cbN/LuRmal51oIgDC6PoZh4V95dIRceoLamnRidF7\neHVIAKJUkLK72EU1CKz4jco+4ibfaV0H3XS7/OE67CGQZCSehWjwXYuThWVy\nCYjRIS1qVwOcFw9Pnjrv7XwKhI6O/OVZzoVvD/61ig5b6Oo8PeninP4tLpXI\n10v4VKlsgt869/PoWPklCYKyVcFUIsqr+zW5mFrRbeeKkGI9Cm8z/rhqCvl1\n2mYnXoIndrBb7vaomJYTCKKDR/UCZVhITGrex3a4WAxYOKfJnbe4LYvPrgO2\naD8R\r\n=myO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c02642273.0","@material/theme":"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/line-ripple_6.0.0-canary.c02642273.0_1586967426143_0.715872517071032","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/line-ripple","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"996843d6adcb2b96698d026df25aabe5aaab1a49","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.8a299b568.0.tgz","fileCount":34,"integrity":"sha512-fVjnvXCn2cu743Qzo4Jv7AKrtJrf+MUtmqKS/KNh2JUysExA5Ijny3JT3uTCpTA3XmekEh8xr9Gohbk4zt2EkA==","signatures":[{"sig":"MEUCIB0cOQqR9k6RZZVh6sXsi6wYg8rBuVuH7YljkrBdHjiYAiEAq/+wiuompPqtI+FZM6l1SpWh5Iuq1tNxD8xawpGxxSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel437CRA9TVsSAnZWagAA98YP/2LEqMTHfK1y1X9B7b/o\njLp4WoxsWXtPSf1JCMTiHrR1EG3a/zVHFqfHjZHtvfp1X+I5RkLxTwyunaCY\nZnPAa9oMWUBswyP3oNBFD6eSIGnBEx1cMPDeH3dKwsD4eggIyD03vuErmdwd\nJGS9iGW8cfGaKgnPapXmRtPwJwo3cxF5Gw/pr51+nd1uHLw3YH9CNR0NrO6x\nBBawUkQsRAxKzBOqctE+566WjrcUBBPDAfzZik+QOvq9Gf7AIRhfzj03Culp\nM1WHHOKMwx/2O2I90i3O2f6D/BeHjWLYgRAik+iurt2o2ueVmDIkJIAJPTMX\nIzihsvmxnP+hlK8gW0O5ceNFkTTv/dLz+lMWu0CV9z3tleEKj6zIsJoQdExa\nKz9qQufs4jaIYXRok1XHZlO3tiXgAmzE7wna5YtVjS19uhPbstqPORA514X1\nT829E6+26ZRo2ks7ENBKkhUe6jE4djMG/9C7iDEPtIhO6UBvpw4ohow45bPc\na1apujA8Zlypmh2FzRbtLm7V7yN5xW3+jLIBMNUOvf+q4Ra9GDPvCbV9KeK8\n1SU/Gj2IAZEEmyXEvgB9zbFIVxKQ/a/3FVy4+NlbLhFF7TZVLh583ZqZliVH\njYYaohMwD3eq/NlDghuRf9FhfDFbMUYGAVFlSrFRSfgft/3veTeD4TliqY7U\nobO5\r\n=n0NZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.8a299b568.0","@material/theme":"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/line-ripple_6.0.0-canary.8a299b568.0_1586990586759_0.40521017719966546","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/line-ripple","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3d5a57f8634cf1c97215439583592ad711bc5747","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.490fbdc09.0.tgz","fileCount":34,"integrity":"sha512-Vh12Q3VEqD7dcbRx97vC3lLouiqJjnXAy1nP3UE1ZQjIKpiswfM8JSnHbvYJ7mn8OTpd3mCTb108LaR+prDx7g==","signatures":[{"sig":"MEQCIG1CXo6RooAyi7nikruffaVWo8WwrpvF+2sv9X2LPfNOAiAMCvctZ8byoZaWAziHxs5jUovIxe8TymPhcfYqZ/tMJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/RECRA9TVsSAnZWagAA520P/117oJUMhSj8XCUL8QH3\neta2MNYg6n92P3iWP8MBL856dAWwuCvGgzGZzbMGYsEuQbtxOKt6oCUejHIp\nWfTIdPZ63zK+Bnf4rgGpygC8x4W9RrApbb0BPBeihM8ekDFRbq1eZ6K46gjC\n92nqqC4+rqDak7z8+ROfScYDjW97kx5VVlufItAvswQjNxQqDux4IsCbAiZf\nCNYPdn8myOYTNUUSpeRSWg6I76pKa/ziNbMNfq7r2PzlNrjMrqSQ/ZUPTjMS\nHLJ++mWtSHCiAwk1upfF/KuSp67rxoxu/t7X57L+ITuX9ynvbLeb7C55pD50\n6iMZqNPMypF+maErv0sYqSN/wWypEN+E0UhXH3pDank/e7gXxaCFgIBYaqgx\nuprmFZpueKb9c714r2ZIpQe10l+0abzqewvFErsCPRBJogcbfg6c16oT8CKP\niMGgYY0s8ttuK9Qj9uwhdLmXWpD080kSkRenMkg7zZTagt4Rwdikl3aGS777\nlHThaKcEE3AwPCdWIK7MNfwWW7wFUiBgmuqARd7SrkYW2YAEXWeoKWgBOpmh\nwglggkL4aU9M5G6occzLfqm3A6xvpHYKecxPAteG4tCJqslgxhBfGdfS4DTo\njZ1XtN/Xjn/FSo6tj4fdTBgqPP53XwZD1fojThH08jE4K6Zq3yxl5aZxDNea\nHIgr\r\n=UFbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.490fbdc09.0","@material/theme":"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/line-ripple_6.0.0-canary.490fbdc09.0_1587016772445_0.2644533003740097","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/line-ripple","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"924d4ac73d29e3a699da9b865296d2dc0cb173e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.f838c6e55.0.tgz","fileCount":34,"integrity":"sha512-zm9OvSnlc6AXYVOK0oT3plgZtWWd4vK6kdvZ79CihKW5m6CcQvTHq36EVblJ7PEr1ch/GhxZeUjbyUrlhFFfhQ==","signatures":[{"sig":"MEUCIQDyx36hTdcLs6LtjBvcuGhhrse4EavAagj+dP32FiivtAIgVjVzrWUrrktcaC1xj8QEkob+YZhiLn3zk3heDxX15WU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGsSCRA9TVsSAnZWagAA25MQAJgbm3QiqII4crJCnZIO\n38/2gMc9MnN/RuMyhGRIjgvTImSZdl3TBIzXkMPgPCZCM9AlF2m+cBRmUMI6\naY+KQAQam/lnEc4o783XWf+JyFAqlpQhrEHbhN6vtDKIBiAeXnYLhYSC+k4R\nAUI3OhVmK0kX28bKgX77PtQ9f4P66lKVu5amuvbhyb0BAkzmtM8EF/yshoLY\nWbLatCETg3MdVloZ0OzV+p/OwltZujdujDKSxsGzpgrW7SDHwkZ74vi5s3c3\nJKv8CZ/jZjqwJQ05EGK8EU14nuhcJu/FklFdec4IsKbEUMmwaZ2pf3QgCDnZ\ny+1lBVJzjbzyy8VIfZorgqoqzk/7KTm+ObfUXEOVlLN1aAHMeh6/cA8YsI/9\nMS14xiq6vWwDYTNXb07ysMd2gnQUEyF2+N3uPbzeWUdWaw5FtZ1+T/eudPh8\n04Ext3p4YlI3rtpTJJOq9jD/2sXxuQPEnE9qt9MHhUcnujPylirtaWeouosM\ntbX8d7Y+rzK1igJHPzmT4uajAfem4FH1w+0Sdbd4osHmFpS6sK+lbsFGQfS0\n56xPaJ8NrdG4XdIwD5XrwPbkgj8Vfv22DDdd6PDgdtSaci5Zf9J7F0O/gwkc\nKzz8E3q5p2fv+7wcdNjE9ahXtb6PgJqMZst1wLI9zzlcg81yedYI4Gw+dVuH\n33bD\r\n=1yD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.f838c6e55.0","@material/theme":"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/line-ripple_6.0.0-canary.f838c6e55.0_1587047186495_0.27279864185117875","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/line-ripple","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e8394c9e6a5150457d6d73b73a36d56919f67672","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.ce6cb7024.0.tgz","fileCount":34,"integrity":"sha512-UaL7Lu0x6X4qJ/djLqR+O0HcaIpghcUrkUxHo5nTuQqXFhtnFLYjZoMzEBz+ySlTRXXzD+x3KdNHOkL2sgd2Dg==","signatures":[{"sig":"MEUCIQDMvVwUxier9pqR69LlJBCeKX6EyK8KSz1Mg/rFVN4+cAIgUZpZVq3dPLpqrJTW8anUjNXPaUDd1OIS272mhuDLj4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJN9CRA9TVsSAnZWagAAoscP/i0BWrffOmoV6/SeWwaE\n0WQZ0YevfVp4qZ+EBTlxWJmbU6elJtWT0Tarhb8DmK1c1sRjqcj3+Al2p9Mp\njMHwns1A2aA+T0F780g3hFevEiyPxJcgkzkz09w95h7vx3EMV3JWOzxEiVU/\nOvCmg1A0SxdUUQ/vknASy5zt8djWczc58UUdGNoSfeVjD1o0N3CGgzz8hwKk\n0Xa5FMG0kDEu10sEgt+HE/6GPXW5U5e6ERRgMjExQJ1Hbl7qg6JGvkx1Y5bi\n/2O7cQX91cqHZ7oBElXjbDpOKzxw/uv+WwVw0g2DZCdW32ADLXLu3Y0DSKeY\n0LDZMGxmOXWvJ3MFf1QLOGqYSN7LkXJa9L+rF31WQezQzpWonQW1JbV2WBkT\nUflhrrnHyuOZY9zelcU/Re9k1yulMaO113xWTE7tAe8nJO7nbVCshckXXytS\naa+TuG1i5Au+fcPdGC6qA+HephAmKizvGl4cx+847Wp5ZlpdZvoYT3TE20jg\nz23qr8MtTDpyWb/0bO+lmZl/sRWIZi758ucuSkM2+wa1JgwQfBGzMMQtYAIf\ncOUjy09oNvjiJSM2IkXqb6K1SNKONncdGljAg97QpcAvk++2DX+xP3xX4/2E\nZEYz5q+0qZ+UJDWAO4XGhngKYt0T3L/zLwkZCOr7cYbClFxXvZ6qVOUnY8e0\nyXq8\r\n=lZDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ce6cb7024.0","@material/theme":"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/line-ripple_6.0.0-canary.ce6cb7024.0_1587057533492_0.8637923192873849","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/line-ripple","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"331b2673151550fe4f31aaa6e75e0cf0160e5add","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.0ab62a65b.0.tgz","fileCount":34,"integrity":"sha512-aSTIUiL6MZywcLf/Nhtnq69L3deG8p8Ec1C5vsRFg6hVII71jUpHKSQ6VfXic2bexnjEy4c8o7G6MQ1k6tkUIQ==","signatures":[{"sig":"MEUCICOvOckkRKtNbpnzD6Kybh4WHqPkC61Skwr29WHKrxgCAiEAuFkkoWeauCM/uh5ysbOXg0Wcr4Eq1/UFnQNDI6ARFB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKnPCRA9TVsSAnZWagAAD0wP/3QHGKlKaHlVRQNguOhn\nOmZrlXJL9paP1jZZdaEyCI6e5zk032ZhsSWp9NtpDqcQJsRqpyEemW73DsaS\nOppuKW3oq/UqJj5Rk5znuxRDD94WdkbWt1MbFHgqzaeu9u5dLNKCBbuLwSy5\nriif5j0gOv3353QEBoBQH8nikScR7VBh36cxpWgQ26j01iWdTdGzXwTaM1nG\n81IdqrkOLRtAlqsE7vpk6tk2CZ9yNFBu+zmSw3soG4XDm4cWibiiWWz5MD6L\nY93RiCIXD1JdGk9JzMZ0jQSIo69wBGk1eQzTkKTYnWT5PiZKx4a7rEI9sakV\nzpWO8DtS1j2tDwEYi9SkC3TTx91JTh+mP0cOOIoNNR+6n6JGouy4DB0uc1YK\n5o766AG9aQBw4WXZg3iuljtZd+zc5bGEl88QnYXwHakIhtvLS/zzlZ7CjHPj\n9NZwxfqm2KN5CfD5p1OHe4eeVxjTMwALIlR+UGnDcr+Yyw0xK1cEiqILIzB+\n+eX5AVxQMVSzkFLGZWK80stWpytV3n4qFYQeMzoQXUOUR6sUMdmR3s9mU21g\nzHRBVMMROaCZqoByOEjbCJa+xEA1C9Sbo7EOfZp9wrimZ7DMbCS1JZamsVfL\nB9H6XGs5c/YYgURMaIbwLHO8S+L+RcBF0ABNC0eD+BRnTqB2UxiGGKIyOdoN\nffnt\r\n=GGKE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.0ab62a65b.0","@material/theme":"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/line-ripple_6.0.0-canary.0ab62a65b.0_1587063246929_0.2375137100183824","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/line-ripple","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2a0d4b56316e000ade753686eafe1346ab89b54","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.ca61b656f.0.tgz","fileCount":34,"integrity":"sha512-STkKNTE9PqIuzLrwIq6AyMkmqKa1l5JFUevVZfuxAQWl3Ff9hX78e/H/6zEI/WcdKjx7QHkDLrlHLQ+j2t60yA==","signatures":[{"sig":"MEYCIQDc2PpiqZPZmSSBwcpKItEJ6dfvMWniDD2Ow+j4UoG+ZAIhAI57GXyBltV1xq3A28BmRMI5fjkQE7pJU1cxzHsTO2gs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLkyCRA9TVsSAnZWagAAW20P/AsWIsDE1rW5L+M7r6x9\njGKjVjIdb5rsL1IZdjnuSRSDgb93gNbOPWGeQhiTUIWRFnCKAXnKAdGQ/59b\nLdLlpVV6sm4kp+Fx28wlhCJiMz2egqzg8yiOriXN03I7wnSvALRIzZq+UmJu\nnk2NBlBVCzFKR8qZ6UdQrvmGn3UPgw0yv6zkIzOjgeD1CS9oSNMtZfy4tNDn\nTJp5BCShlbmXecEqy+UNsF+BtsH7XkBrzlswMGgRTiq36VeSLSpQGS6P4amu\n/I8SQUIV7HAvbgA7MjRMJBjsjC42RnkJtycuqTtW9BsfCx5sNwgZbrjA2Mqz\nmvM/suqMRB+hWOEZ3SVc5L4zl1IH5z/TQCSF2/SiHm19s5hbJW5SS2tQ4vHt\nNLNy4/26997xmjZKyUmTP3HMwmndeG80n7XJA4FqwoOOKaSMoMFnWsy6o7G9\nfipLIvzOB4/ljNujwZ4mjXqfuUdN3GAX3X1C/qO6WuvZzh/Kuayn/7rwjguV\ne41qjGBJl/6hZnvoyp3OrZZFo7ZQ+0f+CwsSmlkUNvHKb091scHUdyemo8l6\nX7ajLEI79hgnoQHxRt7XVUt5O4jPqFOJUrbYqhuD7Qk8jY8a5FgS99TlnhFF\nB/F2hXqcsYea/gvCOL+HAAiGccLkdqyZrNaL1PfzZRPjd72pbYhb2MR2JXLo\nyi07\r\n=bk+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.ca61b656f.0","@material/theme":"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/line-ripple_6.0.0-canary.ca61b656f.0_1587067186191_0.156248611860192","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/line-ripple","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f23912c0aa05fa82dd25262a50cac9b0ba242c89","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.45a6615e3.0.tgz","fileCount":34,"integrity":"sha512-jHnbkIDc0wqQLJ8EuWjFKa4Ucp7ZVmYeMfHKsNrOCujXbTup5C6lZ/EeB5eG2O+BA9EFnQo07Y6IfPDUBtYzSQ==","signatures":[{"sig":"MEYCIQC+M+LU669OO+QmbAortt+GcLvlBmOtnuIKJqCxri0b9gIhANp0G7BvGB5ZrDEwEnKK4nbYmPuqutVivYhONWayjlVG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMDrCRA9TVsSAnZWagAAnn4P/0b/ROh/Wxe2++/XNGxl\nHfkMPlM6c6TrIo1T+txukKN4PBFL7JFhJI0DLer5dOufC9YeeD+ZITf3XTsc\n1er1M5CF8AUvbELJxKA1Vs/54ioy/j7CvjLKpzPbqn1JGhWj6B/TRN4FIbYy\nN9+uDo4FBjNyQK+AUtBcfrN0Oten24HqVIXMyoP8GRa1LGfvUh+yTkpzWU55\n35WGIPhREO9z2srKk1AG24Luo1+vR4ONwcJv+Cq7qgWLFyulYICXlSj4y76+\njK8d0t/IK//bSeNtHHDgKksMPYNV5m8GHkYpXV2iZd5BXv2OwCnCJKT2svyg\nOBxrxhYKibOGdow1DKSDynsVDON7A/WY45bnB4dCbBDWLOOMosSoyQYDazUq\nH6t4dvnhB4sDHS5N46M4/+i3ec6PW0G3RNa1jRvvQ27Svc5xi/ZXOe1Camva\n7B4FsGKDil3HNAZh07T96908YK7jlyt3o5pR4kNvPRchOOUX/YBwzrUiy7do\nbSQ+LXVBxmmt68mlWbU2mHZu8KP27tsjq8bFqZXPZmBWNHqGk0OjC/dj46vN\nOx4tqi8gKtxrgw9DzmdPw+plFiFloLos0nrPuimazEZxMPelsggaJmiZiZAD\nHvMDLE4UeO/4P34lPGoRZDdslomTxH1gWK8+dbRFd/xft/7fXlFh1nvLUFPn\nORYU\r\n=esk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.45a6615e3.0","@material/theme":"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/line-ripple_6.0.0-canary.45a6615e3.0_1587069162738_0.21705884143377796","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/line-ripple","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5af59f03990d016ec20886991e423fa39acd0122","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":34,"integrity":"sha512-gDPu/4CzFu48MoSXNOii3fklcLlPGXnrrag7Ok60zs6Z69g3Sp5PP8FCf7E5BVIT97vkHZMxWX/XxIuTL999/A==","signatures":[{"sig":"MEUCIFbf2dTXRVDzMXylG7BM4fhlNn5R+AGeyISwpc7VE0NCAiEA2fIgUNs6wQN8uG6kuibs8klNASDl2TDnwqdpiqgs4Wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemeoiCRA9TVsSAnZWagAATOIQAIirc4otc2VT3Y/mSIuJ\nmJLowbiFsgOFJJRCdQWrS1fTbHJsrvdgDozZ2f7mzvI1Lhd6T2koi2d8ay6/\nAnIsiyraV3+BdyzB5G8DSN6ctMUr/Z5Nx3bQMeFYHnLFNyMxY8G/EnNgU/1B\nY7EdajtxI4CaAZPgw1l1dRbvM/gyHFxJXyBokdGU3xYbPg8Ym0BZfOIZuh3t\nTmZkcRHHp0NM9YvDssGcoztx88U+DWmJ12kGhqNYpQRHlNvo/ALfXtrA3hQh\nrD8J65qYP8NXPLjRyC949lk9BPAyKkg6bzpSqb4zqwY6VQLldW3406LOYkTY\nxd5K1jJEHmYKkWIxYMm02l8Hyp78TCRyVCMpXVODjhuJDwuq7sDFdTHxjvg3\nFabg0DGHBCyM7HFXfj1c6xqSD+ht4/q23nR56pr5fAmQ4WAnS7KSsDWiq/pA\nGJUHW50S9zbDmZZUE4gl8BAGUQ7C3mQotwrUc+iePmd2ouG02+BOcD5DgUNt\nOFGog7QjlIZWD0Vwz9/nABXI0X8i8+YT+zuuLl+vGuZWoPs6m8+waUcWOrm/\npFxZA7ot9DpwTwh0bSPzx41Z01N0IcLcnyPnZWkouwqgqf5N/N8UuVBU/UTO\nZ/aTyxVEGiDL23TSRtLNekrXKzqZllEU/icqELsvIvQygJl8csck2QYKRo1O\nOHe2\r\n=dp8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/theme":"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/line-ripple_6.0.0-canary.4b04cdb0f.0_1587145250104_0.549787287749508","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/line-ripple","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf623d0e2eb5494c637558717c993465ec56c8a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.b273afa93.0.tgz","fileCount":34,"integrity":"sha512-GECF5Am3f+85nC8iRQ3DXV9NnRPyuMnGFv8PUwYZtNVho2XCdp+Fj2SIfk/QN47zKjVJHxiicmbVOGb5xklNFA==","signatures":[{"sig":"MEUCIBQBeIZSX2fDy91LZLQdAFuXoBaC7UDHra+hZBmUIQFuAiEAjvYrIIaKtNk62KUW7W4msA/Dyr29noEtHQaW8QGhWXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjWSCRA9TVsSAnZWagAA/8AP/iLpCrrxFXGsXsKmRVbv\nEF/89DnhPBhAFGIcRgauFBMjSGgGuf6JWbhMiGbHaqB6eltKZK2raKs522g+\nS45MFVs6vI1YbY4Rv+qlDK5xMhnd1e2fM3+vq/vnd83eMu74PuC/hlY8I7nY\nkTSgBS9ILYWseuayMbkRscLizlnqgQG/icnUq8ma/NWtTyz8s50cGRNzRyWq\nE0cK3/KJrCsiihpZ6MbSCGKHy62vWxVN7AKLp7WvzVTrErIytbTdeslQeqir\nMJn3+Xq3OYN+xGw6cHS4i61VB8E2JS9UqgUhtz4MoYtKC1u9G3fFNOqBnsqI\nBDsbDK9feogAD8z4SqgLSvM8tS4gg6UxPShAGY/2ngkL5s0a5TF099xRY2C0\n2pzL16Q4UTUDsEUykVsykE0CPYSxYfIiMJ19jCYe2Neh6CUKm38xjvHcVnWp\nhhjoAhRaDP3F6EhXgVkAURdtycGKKXEgDut9yLgndIQloR6v0socOYyxlrnt\nrDVT1OSMLpATr0XzrnvWy9ndjPK6Uye8dka1ZgVTmPOzzyTKzxc4a6tNPVV6\n0IT+v/AplndSN4EVl4HnlZHd85ejwIAdjjOJUDlma1AF8KrilSaQSSTXVKIW\n587/2dvmeTP+woXarS6VRwf7xDJ0WW1hOyUp+X1q0j1B3mHNlTYayQ7gw6Tb\nJSTR\r\n=BDQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b273afa93.0","@material/theme":"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/line-ripple_6.0.0-canary.b273afa93.0_1587164562254_0.6683665717120335","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/line-ripple","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"805fcc15433c71bbc307cd70217c0493e9383cdf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.b70bc601e.0.tgz","fileCount":34,"integrity":"sha512-I1RVx5u8t1ET1riJT3mUvL4Xq3rUj7w4vXHZCQmgB96dapffgesGS8CfG8bYfRcCC2mzNkKBjR0eg5qsSIQStQ==","signatures":[{"sig":"MEYCIQDyUC3QxysoGTl3O9jwGbV0ZF8pwP/gPncYXTkD0s/5lAIhALox0YQMlTuNl8VC4bhpdB4T+OdoDZy0WUfpTbEQWo6h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjnuCRA9TVsSAnZWagAAMmkP/jx7PVJMqfVUrHP0+HrT\n2Hj8SRw22fJY1ggnQUOVQNQhrVvp0T3T9oum0YciKUPaxB2WSf7EUSzoa1nN\nggZesP0MPEfN4Wg540lHiDdhhVZTOWS1EGIH+u5msF8tFlf+5Fr4lqJPskqu\nYnTDJC9uhszBTY/vqm9jLwjXHBbjb7lPLfNJ4qlbYtFpuDlXEEZV7rC7Aoo9\ntn4VFDoe9CL3/vhHCWJtMwPiU3/is8mD3t75PLNu7RBqURU+lFC80gpkk4Vz\nuZ79h/3MOCaWEYDUqqtwFzj3Hx13M2237XJ58RRc+qI8qJjz3kdHKtg+IB80\nTK7MHyS4ohyvQ6FktJFx0ugquVnKxCTX5Us32peCpeFZ+/h7PWG5MBawQ6fI\nA/ItNDFC6EwegRqS49Xplu41ID4KhlqvyfvGsLjUl0ritp8VuKtTprWWOtvk\n6oIXR65ufQZR+GYgb1jdq71sItqaoFGYkH/cKdTuD4M3OBlR0w0dHT4KeVr5\n0Y3O8NbkwLDHkFNkS1pxIJXlTQzU0WY4dCI5V8BD1wP+6IR4r2u+IqSE8Knm\nYscWGe/2duSC1bOV8OVs55fDSvfYlmzD3Ff3QvYN5LXoIi/NBblmIqaEesty\nWLaUloiVaghmEWWtLsZVPBM8JDIUxnBWZh0dCj6ZezFwd1ZFP7xLFBFpIkrM\n/7Ip\r\n=Ay0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.b70bc601e.0","@material/theme":"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/line-ripple_6.0.0-canary.b70bc601e.0_1587165677644_0.19948862925952038","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/line-ripple","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a1e498a9796a4f889a1c6095d6cc5870e1954cb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.c4b4bba96.0.tgz","fileCount":34,"integrity":"sha512-+slvnXiZZtRfGMqmEYdILpb9b00ZoTh95lhUBO6m9EYHLma0NsxWpsG/ONh+XiYeK2QaFJx9Ia7U1pbtKxDzeA==","signatures":[{"sig":"MEUCIQDaWqAx5N7f2/9xPzGZi1xHdrW1ICIBrK1wrN1R9I3stgIgV4ZSzWmLFq03eqcJ9bOKrGXxWcXqozJxRknKqp1wXpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkcpCRA9TVsSAnZWagAAJGkP+gJyyusvD6AL/ekL2kGE\nxNG0TH8aX0VFmdwlIAbqqHqe+/DkbhzGAegeopvs5tifR11CwC6tnfxaen9J\neNXUKbp74tqAGLaHcm/NxtIw8qNkFGFsxoplnzwLQGFIGv7Bwm6nKDXNCcz6\nlE61LwunHHyKrbaHedvn1qjT4Ng2c+T++N5zbKYnIjun9EyxWqk3UjHOZF7o\nE/p37VkEP/V/dZFSd0VD+B4Pv/H5dGAdyTyjMt0VK70Fi/Eenz6VOZOOXwrC\nDfBBm9NWWdsNX34gWYI4On9tv24iYJSQHPPySc7V9D4Qy5qO95im22jEgX8G\nrXPyTl8fky2Fbk8yN5kLOyMzpD1IDN2yrKVDeXjGTMWy1JRA6tzeAH6Zik/u\n6cW/TAqG5In2xyLxe/rNMp2rmn+ZDanp8f+W37yVqNqImQYuQTDniqYUulCD\nSdALSSxLgVw/z02Bs0ljtaashTuocjwlZH2BSRTwkUs0cvEYnJjfXVL2MjyD\nsTonGkYjLOlhoO8jawh6AmMgBNq5w2H1n6CglLC1ZgGCxUtpHmnqBMNMrP2g\nJx/eU15lxFJSqz+sHcWQBoh4qyJouJEK0gki4XTSwZ2CzVFYHAIWcg5Crwac\nALs91ne8LDLTQBxNbnJQp4R4RBycTpzc+mMlGxIYJdD6C+/6APsT5Q/t4y9J\nzHva\r\n=0xan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c4b4bba96.0","@material/theme":"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/line-ripple_6.0.0-canary.c4b4bba96.0_1587169064381_0.5885328652493145","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/line-ripple","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4332f051f04ac362cf0fd98da1ff2e5a67e6a037","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.6c1ebc721.0.tgz","fileCount":34,"integrity":"sha512-VChOe8DjQsZAf6y23I7k15ezYM/3IK/VwWHd3Szu8I9QdoPduyKpAESK7B5pDiAEUjW/zJe7sVTvaUep4rZqEQ==","signatures":[{"sig":"MEUCIQDROmnnu2U0FwMeN0UaKoQ4Ws3hyQ95ST/BTiPAcj73xAIgKLgxKf2XRV/zEPp1gKqw+1AvUkzOUdG50ihYPjtHvis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf7QCRA9TVsSAnZWagAA6ZQP/Ri3eZ6HuKpXpUNBli9g\n4kA9icyc0cexkf/ulAZ5buroBK2seTlrRGi0Ce8eeGWWT0hamGB4hEZAH9Zc\n8mCGQ0v8p4SxD9HSrvUTVrjP2RlGkFQ3Jv6ewsRjgrHqRCGdLiLz7BjzsWzX\nHRj6CT/NE/pXOe1mpKkeJYw4xRJwiCvdWziDjeba8VxZ3Mzj8vnmog/Cp5XP\n6ExxfXrABOPw715nw3V19k2z0b6yVtvAUcNaD73b2dcGu8Zn0g+XPg2+5I4k\nDZYs1Afup/GH+ImGm+nMGu3IwcPsjchc4EENBfino3+X/XiEaifk98b8mu7O\nTst5PWpUKCta7S/dfOxmzQNiK9tQF39D7poP5NWZsvuboeq4vBnfRqVflzZ5\n3rPn8KKrmDOU4Eb4WA4Q1cJTt2hk8WoBmSsgCKn2iUq1ORivkNBn2CRj8wlv\nc2JaS/VUWyI+memgjoPSt8DZ0A6TzXIJ771R4wQ6qqrzWz3axJF+f8HxSw+l\nxwQG8vbk1Fc+5D0xuYg+1G0C2EBbVwiRSA5oiQhmpRQpC8Vcqrk4iNtrN7Io\nQtTIDamxGeyFq8u3zDSH/muCn9ISta/DT4lUDGksuCyzNqBsJ6yLEp/aaxKj\nMao161nYtHZCm3weXXkjoIWyO6s1yvUdNXmaSJ/IMduURr6Ud46S1FDWiNtW\n13Mt\r\n=IgA4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.6c1ebc721.0","@material/theme":"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/line-ripple_6.0.0-canary.6c1ebc721.0_1587412688554_0.9847851156755587","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/line-ripple","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be7a15983fe7bf572179e41f617b89eeb7b7dc17","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.9cff4318f.0.tgz","fileCount":34,"integrity":"sha512-Lq6CDwjGvazInaYt0FdOoYjkSJQFNeyeqbzc56u2sOI22gJYK/78h/pYf6IdOBUItwuk6D27AbjErxdzttOV6g==","signatures":[{"sig":"MEUCIQCgZdaYnm5YqsI3VDzgYwoICMWuyR0xAN6LP84bsxJd1AIgXa3V75efv6SuYCVNHbgXn/b+/74K+mXRF+ynsmbtlso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengxLCRA9TVsSAnZWagAA4ZEQAJM3WS6zaqLkBDOTh2nr\nmUFUz9b3aB/yFL40UeRJd2Ri1jep6B21Uz8qSL6CX7RJgjgr4Mke9GJkgUXf\nkd5rn2d7sugJDwWkONG8Mhwh9dD/Ur1sMe88shBmXDFR6bKpiL/NnTKyRU4b\n5gvxw456/POggrjpqN/VwDtRjCTk6w9rh83w0NEL1Bx5HLFSLsA7MU2x9k5Y\njdI9tjfZjOICsVUz7zRl31yDXaIjL+xLtpCJxFAGBgAUCYz6IrH2h7puYTD0\nhXmCK9ejsJNSxyt0Qs10kq6A6CM6UPHThiTIOCFWbXGkjIN2Mi6vyNcpqOxL\na5q1BigKXjmM+V2GnZiyW8C1kU2OFfFsqTVsKTRPPaYjNK/UyiWrTHo+cgLh\nF4R0N/WDDQ5I4lz8CFU5Ut5t28K3Pjgn7tNAiRNESbpT65Mfs4exJeF+4sYy\nNknF8MvNaVTSdesDLj5jXzUlOemLtSaCqWV3bLpkmWG/8oXJv4PfLNRqxyv/\ntbsRx13fY/mjohyw0pLAyBII+mnyjbz9RRsZ1LXoKiI7eVevihMK+B6vfAW9\njGX0fcJNj6G4k9VOkSsw3WZbfOr9Pv/rrsgH3l4CqhJ3q3KOX0ztjM6nIj4f\nJ5aj1jwPY43oiVAnxwH94p5vpyhyD3o/HQApGkRugliZpOC7Ynq1pClW3Psh\nhj5Z\r\n=Yibt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.9cff4318f.0","@material/theme":"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/line-ripple_6.0.0-canary.9cff4318f.0_1587416139148_0.4402924459214588","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/line-ripple","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2542b04392ae2364259cef77f7f4590e8fc551fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.7b4482402.0.tgz","fileCount":34,"integrity":"sha512-xWgyz8fqo1RWO69RBr2i1gBZerOWuJMoqw0LsV/X/6LwQPqjMCsHIcQJg/gp06Q4P2f10wFc/2fLZPt1N/FDTw==","signatures":[{"sig":"MEUCIBUmV2ZILYFB28+8tUDIiS9kBDv/NUKMc/FTOw4eXsykAiEA3/5reNFna71Jv+B3FmVsPksphZu8VYAkjAu0wKfzNqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniAQCRA9TVsSAnZWagAAsnQP/A85oUoBEsirj3emSP9b\nqeUrBbp3BV5+8ZKvXIxtBvljC5HBBMTY+0ITSiYUyXnDIEq7cSMGMuM8uFVL\n7uUnJVrr5drQaAB1SyIKIgGzKtmVzHZGSngdXTep/25L0SiSoCoHm2Ttpvuj\nh8UB4PWxL1Yk4MTm/c+vkTiv42RByMsYW0OAdq7/jaPtkEynZBYLDk6S5xXH\nAEcoe4RE68nL4ZCsgIORZ/cN3S0hqSB8/LLAbjgvdm1kPvK1vMPT0TlDAnxQ\n6YD4VWujGQC32GtRd44iv0n8hJ5m823emH6EWBxTJ08f9S/3QrbV2wIS6DTg\nd5hUEPJcVhp1Y8vWzb1XtT74Ft29EFI71NQzsrQ+JZHuKeH4LSeBN6uWTpiX\n8Igq5gl/uq55pprBXYuAUoL8wYwCgqLD3+d8+qv53BR4S5RdYonTKVK/q9D9\n0whdRe+4l/MNP8h9P5Of9m3VgyDe/jI1Doae74xqZo75uH9Vk4lKhGuZ2kRI\nLKzHom2oP4F6USiM3/qR/A4zlmKrpOkBVIvgSAeRCv8b4ajW2kQKh1Yv/U5n\nTCaZ+nSRGyH8t4KkSTjeocnqGLrgm11blNnJ23211YvoFWhXPyZKuXH+ZbaL\n++6MlWFW6Gu9IQ71/PMQjebprzQnmB8RduwX3D5wXM4zn4c/kfjnl9PbVJLM\nYjDG\r\n=w0MW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.7b4482402.0","@material/theme":"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/line-ripple_6.0.0-canary.7b4482402.0_1587421199881_0.5886115994359469","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/line-ripple","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0895dc9db8dc6bc16c9fa70d1c4afcf25775ff37","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.deda86d8c.0.tgz","fileCount":34,"integrity":"sha512-0nztBT7Q2QQq/v4lBlPuu7W39P8bNMyMMZnmzHZjYnyNJX/JxfA5LJwLaibL50x16BIxPTEFObmeD/3Wy7J8fQ==","signatures":[{"sig":"MEYCIQD0t5YYd0qhGBkBLEJQrh+LoDMuWAYjzADBcDp9SGRT9AIhAPO3xRSrKlC46EEKyPR64bITQm792aw22otv1XMfTLF0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkj9CRA9TVsSAnZWagAAjZEP/2hwqJqWIcQpzcCQJIUu\naVqHxwo/p6yEWAeAb+7lgy89K7gXlNle1544QjZCzGc1wsoNm4Xpv86sKaH9\nQTD239+DoSchF1srgFJeGTnDYE7YiDuuzUnAZQC6BYgeTKueL86FmmP4bJEQ\nkr5bWSZ0yYfl5NhlGmbwYqzBggaRGst1N3X7ZT5mTfYC0tdGlMYFzmMi3ZBI\nN3QQKXXN0PCqXDiQWHSoNYUB7Sv8Lsv4ttsGdgiMcJoJiR08OkAtYiE87ASo\nLLVn927Wff+NRA113c6MlAWHxdgf9hW3T646U8qKoTKRs3aPH+QhczI7MhHM\nZEk5/gHxyPnjK3tHvkFRxcFtoGjwZm30Pg+ScS0hD38rRNaMW0ns36WebmsK\nmeQDmczdf8dpQ33lUHLkQ02YfGMPAG1ZrXNwbEJqVhiwP2vEwobhbbe4lIEg\nHdttMIeYNmnBRFy/wnRtspl6iCOknm8mNeDJZeRDRhPZmmNdxAzSL77LyGK6\ndlADtiPHGw717pHLQrhwg44TaLRgVD3utrm6pvSMS1uwIXGd/7gsTmtAs31M\nx/vTxDGTus/MArxt+RTSeWmnz2GyAvY+Z84vUVInJcYJZO38B06f+K+R+tkT\n68m3l4Aus90RSc+Jr0WbxaTnuGqJznNjUPZD6Db4oAADM6IBoaIRKMvlsoN8\nC8sZ\r\n=OGk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.deda86d8c.0","@material/theme":"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/line-ripple_6.0.0-canary.deda86d8c.0_1587431677047_0.7061542059618273","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/line-ripple","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"289fffe875b5d587352c581e72813976f2e4e1cb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.d10412cb2.0.tgz","fileCount":34,"integrity":"sha512-QDeSYev5AKiNRWcEe7PFckaoBSr/BvNc09BRQwjRShY88r9onBYyBgq5K757kMDmzSc2w9D44KY7ojT7o8gQrA==","signatures":[{"sig":"MEYCIQDevJbgchPK9zo0yIue9cqVlugqgAh7wk5Xnt7SfnkGCwIhAKoJsTkh+vyLzfgXKpaVDQaKbUiTTr8eMNYqW31jKFQI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzjmCRA9TVsSAnZWagAAyT4QAINZhctvl7gJz2Rr4miC\nZ7KiBTAtQ+OZdiHkGKKbY9DYAeKVGJ0nBpdosq8OL7V226YYw1V23AX2trGi\nqqofsLt7IXbTKDdVC+p9tnDZhHRAZmxgkAkrVt6qGmW6m2qqVn5oKFLFAl9Z\nJ9MGIBCdB8SDQVpwUnaayPz2HC3z4aNgrY9A6SuHIHUNa37gpM2a6kTkAq+7\nt8KEUxwamXk2RpARn+e3UzZoAySZohZebrAHibi94L4Lrwnxem+7FbB81rWx\nltfpTPJ1350dASWLBCR5w1BuQKxqhZfmWkLgiwbDiawoBwCWDBBdE6bLR7x/\nyEuiSafQmV9rX3+AZ/abWRO5mXLWwR9fiUBKBtvVcpRUfe7X+WxQaZZrCbk4\n8YcA7723VzrUet7OVmOy0UTshzUOwTTfqnUPLGGVeccOC4oQt6Pt19kdPQwz\nNMs2C2avao51nZs52xRLuIxpaDWAMy06R91JCe/jJbY4xOQawgGk6ksqvJt8\nILA54m/oO7lEPYlPjrxuctHkgy2uXn/TEewQngewTlDd+qBYsz36waVWb56H\nrPkHvP9H6slIIEgcBMgt5JwsVERKyzUfsPncQk3rjRJ4uEOHlMsBUOHLBtCS\nBOU6TL1X9pZiEphGfXmHc2INAFS6QIXgcyg5tK8H2s2nHaBzky6n9OmKnwHP\nvlS+\r\n=z+sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.d10412cb2.0","@material/theme":"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/line-ripple_6.0.0-canary.d10412cb2.0_1587493094117_0.28040396934299716","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/line-ripple","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf536ac4205caac1927ef4d32fcd004f3e9d1af0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.c141801d5.0.tgz","fileCount":34,"integrity":"sha512-v6+s/FWbVPjUNhRc3+i45ks24h6n6wrBJ9a48jhSKIIgnEFjxg4qKD8ZzpbG8F7VfPi/fYE/eQI4RoxmzSGMjQ==","signatures":[{"sig":"MEYCIQCXnVtbCZY3QnzArL2sH4p2XCJeilLi4zZCmUmGJXcvfgIhAN/hDsKUTFOqJ5//6G2rtuPg1Aa2Sk4lqaT6adxs6iM1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0x4CRA9TVsSAnZWagAAbaUP+gKUvDTazxvfL+3XAioY\nXz0Yt3wgRkSJCK39+jyhHV5TKRnofAtyBoFF1VY4PdfYyd05UsdC2sHRWxGS\nUXY+Fi2rX/eoaMk+oOBx+G6yjKmqcSqwFFAA6f0LWJUODKaL2cGh0jtgdr47\n+qISma0t5y5gPXsspCyhr40IT9QHPkODQEJYxfHoX0VoooOLk/rEsPaui/5E\n0Ghk+e71d7hD2eZggtn2M3d6kDquZQg289MFt9b39pRH58M46cBPBNespGrW\n3VFLhw3C+BuuaNDZIrmN37OxZRelfsUfu4hvUKPgQhIoSnYl5lidGR2hQxHa\n5t2cDpmoTtaHHFOIPzsGXD5D5EiodH1Q8QwuvWBvAkq8L1hszJ4zW5bzO75i\nwMAJUKAEbhEHEcj1ldvEnVsMSNrLlga17IGXC1fWmbXqM6NQdI2vCj+teg33\nSPr7zE3NcOPGrjKRuP7D4UFT4a5y0HrLwOgGTmIKbD6Rw6+2puc68ZVWNh9N\nHwo36twXz3O3vNm4fW3ADppEHw57tZ3lDFtb4zAz9qibGkmnP80jeFsmi9Hi\nkhJ/dnnOhtBeUV1PBaDqHGvURJv4YPnN1ibYOjtB2HERDUhU5y4t3iiSOf4/\nmgMBuoGI1w5Wsv0MWhIcQDTOLGQbVrVUAzaVCBfK0OEJX0ME/HU+MY0gpsSx\nHIB6\r\n=dIvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.c141801d5.0","@material/theme":"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/line-ripple_6.0.0-canary.c141801d5.0_1587498104105_0.3065102054985027","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/line-ripple","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b48daa4e91d32f7dbc40828c88d49d730628a26e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0-canary.28d10a96e.0.tgz","fileCount":34,"integrity":"sha512-46ECP+264hI5ovgZ0ED6d5uArvlVvcxOmLQpFScdYnN0t/V6hyIOongtySS3fzuJZcvNUpTfVulQjKSTPYpVrg==","signatures":[{"sig":"MEQCIA4Gyh/DOtlLDYy/xG0+cQpVySC/sIn+HuYwfjSWpGCyAiACjHRA2Qne7FrncraqirHHoTSJhdX4aLgLC2FfpLFwzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMAECRA9TVsSAnZWagAAoZUP/2tlIcoYVYvPNmAleJfJ\nyQcaJVs06CyqdBQXhA0e8intm11uc2aMVrozsXIjh3BnDS1KQ2njaDn+TO06\nSQXMYzXIuk6k3VvzB6dLOv3np8xBc3Nhpu0jPGA3cCvV1I+tBdc4Ah5Wqa8G\nPdfN9Lq/oxE6xRdtJAUB1VEZ+eKCE0LZtfDEM4t3dw+ciWrj0hk+ywKuHB/x\naBMATtOV/ZyPrW2Cca5XyATeJwQzsOl609eXY7eOfezLSzMfH9vIEPoTouHY\nKDsMJjt32SLm8a1Hx+k9hbdtPNM883wivkd0AznXytL+sDdRAhth3Zuf9DUU\n0QGmy0/6uevjJ1L9A9akmGOpb6pO3eTZMWAROCj/nnlVVhNiBm5jCG9R9JP9\n2PLWX5luvV/yKdWUxyQqmHuJeUDYyHWJyOi1aDLNIUPpKEJ60zEwwLxY9Sbr\niVnC6ptpw+XLrBHRswam8tUEcWehpGl+5YCqQQN8SqRten7e5Z/OIZO/HVrZ\n+fcQmlQ1ci5+Nqg2MjAZ3VnQf36HCVZ2B34YflQOhe1SR3X6GVeuUKYPh43t\n6xbM/+muv0HqPW3ZA4N9NPy5Rw88LK6ujtZTCzWrwjk1WxKEZiE8J0nZkwLC\nU2ESJ/KZDXj3b1WdDvrCOjT+Ezdzn5cfz/zg551Uf0JyNNzJq1Ama2KTROwT\nOl0T\r\n=o1rj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"6.0.0-canary.28d10a96e.0","@material/theme":"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/line-ripple_6.0.0-canary.28d10a96e.0_1587593220396_0.46178781361992693","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"63e1deca7ccfb28338ed9cc75a6a729f30d5776b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8540808be.0.tgz","fileCount":34,"integrity":"sha512-Csq8h4cAuRqwHRzrUmyLbUWWa/jM/lhJKC5SjpIvsBJR+mSw0qRQcxw0S33VIy7VLB6qv5UfjMBm1t6DM7UbwA==","signatures":[{"sig":"MEQCIHFe70S9c68doiKf4W2cGpJz4of5d4g5d/0zSSF8rscNAiB3VNxuXjDTxCDCEv/riKffPwNrv8xJtImPKoDct+5Tng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+ZCRA9TVsSAnZWagAA4PEQAKDsrhoj3bD7+BYWIFiJ\ngufbVsjoyQTLyIBUrMrVCaHnOUUy+8KjwYZvH6RY7/TFtqTMoG0a8XvZeINt\nc+4BEEXjUTn1ZhRx3+e8Z3NF57Ulegxb4NgbhBSZISsdFM0iaK9SeGMkjgq1\nQno4MvW1qKVBXjZJtW/DmzHWSmaGro+zkxuI/kncNkpWtm65ekhReTjB9Ual\nbGdtutvOV5ccLQYI1fN4QCHZjp0XX+ETs9X8W3yXBEOjTofS5CXS417USEol\nCzBF4fjkBGu9NeXeOHXTM6hp5IGUCSPwTiBZoJJq2beewYVbCAufkqoIMzg5\n+lYyT18xCV8/GylrfKMHC6EYWH814h6TooQ8Iv1HPPL9rawXWGjEdG8GCP9L\nErhw4FgpuBVd+2peLGHZJeNoTsh/bovCBGP+fmmAh/FXQmka0XPzABmIQG1k\nZOIwLWv2KEe9bNnrLjwIEP6QpsOCaPheMUtvqF33FbFCkya/OfSqios8gXLD\nH9vycozi5n+MpKOsv/gvwPmw+974dm23cb2/TORjsjj2HUiq7ec6iI5LdCeo\nRU4PbRF1+3cSX9T8VIWj1WPe11qs9v8NsoBgdIMxWRQWIqMLRzFtgPX3eelt\nQoDtrNbmPDElYQfL/wazofj5NupPYKdUOdOexzeJ2oYNY38wYrW7WV1Al001\niWNr\r\n=spUu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8540808be.0","@material/theme":"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/line-ripple_7.0.0-canary.8540808be.0_1587662745115_0.7218801007572204","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/line-ripple","version":"6.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"697ad16ebc806cf6ae4044106947769ed108bf32","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-6.0.0.tgz","fileCount":33,"integrity":"sha512-LppQy+bnkAD+tyGOA6/GzE4/xBGRzvJNGJZe0OvClerBxM9yOtxd8Xa8VJ+ul1hTNR/OCB2HSTWNQq5fyqTQHg==","signatures":[{"sig":"MEYCIQCN3x19m9u8dKwlGMVJ5lhPIUQFh9H0x6wDMLI8lKbXVAIhAMnucpLRmNfNkOokZpX741AiZP2GJ15NyBqYEjQehIki","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125207,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc+2CRA9TVsSAnZWagAAIQoP/iSMy/KiG+m04ysZTDbg\ncSloqBS/7KVC/61ysOWffamo8NnXEYfcUilqLfAi6y57QbUfUZ6TCGcRk6kP\nyUJM8Qc6ZoiCMBzqtZe64rLwoIQJEco3ZKxEl60J5JbCIPwu89yN4nDiYE0H\nvt6F+JwKLzlCRW49JNe+26I5XGimvGE9fpwR//2fMXom1AEL2TThp91CtYxJ\ncuGcR3mKzj9bkzFMps+0rXwkz0qLqX6YvI0uLR14slv0tg75dlL7nec1nrrB\n5rAM++8a8TvGg4zHTMZFdIHtc94HYM7pyj4QuO5Asl/TMNXYEGc/HxNgcE+K\nRYhl97xBIa9mt4A71M175/OLJibe5naJGj/ktfghW1jXXGpPDn8fggfLtrkv\nywiOAuVCJBF0F6flmgjzufqicfSUZWhAOdo2q4HkOxuvYHR3IdgzYLj7EBMs\nt74zuqo3CU28Siv+jhIqEKucRh0pUVgrtdiZI3yZTXPvPTi+JrQvwZA6Ip7S\n0bLafcJvPKQIJ2splL9UjLs3m/b4YUinKCeS18IKnVf+57MzD0x4GP7nQd7n\nONztKh5I1sxXARcMLWSnzRTIB6veWzer1DiSYMoJ6Zs3m7oFDke9LeZXq0Ae\n7iDSHlWCo4XGjsUtdB8/86Tckt+ugYCBXz/mql+5Xn+QHUm2mWzMbmPBR9qJ\nouQw\r\n=CVFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"^6.0.0","@material/theme":"^6.0.0","@material/animation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_6.0.0_1587662773784_0.13113666182378192","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6f31d8b7d79eafe1ad815d80585260f035b1c34a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2673adb74.0.tgz","fileCount":34,"integrity":"sha512-1vVWkMpY2PSf0pAf5Io/F+eMVZp122fWEBPec+1hJ6rPAvl8wb1xR80m+1HczcPulWoWEc/U395Tja5m3DT7ow==","signatures":[{"sig":"MEQCIDtzYCm+maFtnLZQCVVxAQlItNVc05WiP9PgyjJbvjtrAiBUQyKgJSWrczSsxPy+pp9TMRPQP/G5QPkDawU50RCukA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohqECRA9TVsSAnZWagAAH18P/23OI4kKqMOg5WTnAnsC\nsWJTB+1JuKLlf67azbppIH9DTKcBSusWvkigwMy4oS/edTx3lZvEzhAi7LZb\nYVGfSQZwlWIwXlVgCNKv2DNfeG/xgLFGF/AjzsUF7UawOTjI7EI7ZUy19Kah\nsrKv3LMTycsXD6AOkgv3z7yQ1H3biXQsBiWLkAr12b4p2oRhfWnZ7BujhUQi\nhwx878y/cKNiLMMudBJupVOYLxC9kvJd518C+Nhbl7Gom4lAS+0/xmE+Wko1\nIBoFK6BTVPlAdOdmc2UKBxObrjheAMIrYbbVnyGzx0PFi+GhtbIsQ35NOLq1\n7E+zCYVc8E0T4/67CnSs4L1oO7W9o2EAZF0++3yV8yRkhq7vEbydFZsAboBZ\ncY+ZRLI9YFWUakXWKoeOH0iJP3xkfdaxY53g4oftLmsQKzql1Ablf7eWcS1M\nP1Pzoa6l8Xoxgl+Lz4NIE3wJJ99UM/skHQfdO7hYxNSFVw5h1/Cdvhw5tWyT\nmtcIqk05jGkGzwtEy+RwLQJVx0g8Ttv3Gw+oSmqkFgmLP3odSYhnwfNeioY1\n7Bj8ZY7uRdXYunizYZYa1Yj78OFdoarh1SLMGA0w1vyICkJ3+etMuzVVSE4g\nNDKYRW2qBC+fyj+mYdkZqJZfz0/kLVsE5arMBmr/VcbqYRl0uX6fl04438tW\ntpX3\r\n=NEWX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2673adb74.0","@material/theme":"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/line-ripple_7.0.0-canary.2673adb74.0_1587681924277_0.963658611871868","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5541947af117994dde688238cb66456b9f096fc7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":34,"integrity":"sha512-G/Q2kQ1y8q/wFFZd9UCHMJWY8FxWzumHqVFEROWZxzGFxOhVuyv1WJvy7SK8SEgAxHQpNDMbCgFT2qEqIlg0/A==","signatures":[{"sig":"MEUCIQCHSFFhMfgNjNkFv5urAEaiw6xX7ti8qV2gAqD9+SPH6wIgA/BOn0CsLIw7RRatE8N3ZwXzxn9Uyg4CU4m6dofaVNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojDoCRA9TVsSAnZWagAA7JQP/jCcgrVGErDnoYt1PEOy\nQCMkx6jgq8NuEMxFspFPjj3WeIlhZHHen6LA7tOUST7lpygOskotp5lIzKzF\n0P8sfVqK52qncLUqk58+gSE152eIp1aF1FqgCMwnDydiosek8kOpVUikJcAs\nUxKAPCKbfmJExh0DTAGTIqMhcpRvFsJltyVOD9iM9PzSw0n+za+Zin4Zep8g\nNTuWV6s9vsfnabEcfyBS0ji+O2rC1K2YgkyzeXQZxRcHWpKzkHLU5kv9mrJF\ndntCQjvS2ZK0E9FFLHbTMF2yyf+RvWg5kNupLNSu9QqgYpP/Zu0zVmyf/vlm\n37ySprYbwkbwmeVgw9u1QDF2tSj2MXM+sfnF98Ro04lIpdTvLsor5RyTzt+G\nDQo7MS//mxX57tYNIRRyHD1U8+wNi/ZXVDPG521YtgnhSBeGek3VyJD6OkBf\nf5kBNxOtyvzf/urygaqSLMUJlZKEH+QUSQAnAjvh5HUlsYxkKtcWQCkeYQMl\nDNBU8DMONF1OR7MhGjZseE+/S8vonCiaWi4Ad1Y9KBUti7f6UDJYbU9yPTii\nhXqUn3ci3DeHs3b7ePzplRDWi9rknu/6LYh14Wnhv328zmYWGyMBU5NOdLh7\nyJc+fQUU6AuJnl12HBwOZ+/U+vgZhi5m92wnTOprprkZY/3x7eunxGkpFc//\nafpY\r\n=3gbW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/theme":"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/line-ripple_7.0.0-canary.b10d0d7f1.0_1587687655552_0.28222837761574326","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/line-ripple","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a66ded83744d4d4e04ea374b042e20ebbf45c526","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":34,"integrity":"sha512-CjiI8F/dWIIJ2AaQ1v2Ev5jWe48IbyzHIKPyelPFL5gU+mYX0MeH2NqiqdFEBlYtkZyrP85Yke86bB8g01AEPQ==","signatures":[{"sig":"MEQCIBfpyu88KlhxXMsmdoUf2oX93btds+MzrlT7zDdOMLyLAiBqkgC7LBfrXsNEcvbZzMp/LP2gRY/rOWm+fyNOTUOt9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1StCRA9TVsSAnZWagAAy78P/1FYwK6sucRCFPifwBol\nOgjtmw7eMrANjQec5/upsgf098ND6W+kANIrfCUQY2e2uFtISp0RFfej4EEG\nv8iAm/kvWbSV6GztBCFPQW/qsPs85rzluDgBkkCSDTa5y5NxfWOh+ODgJOxI\npQUnK3dJvmEfbcHHG/JKOaLtdKIozp/2Co3C7lcOVXdvNFyQ5g3XswXggrl2\nf18gqWZXd+2P+itkJlx/NLX2aIBGagxHrOe5xawOBnqC3qVdx/j5gjXAP06H\nFhOdU0P0pMtwz7A9jt4btFd5Ip1MZK/JK5VuUQPgJbn1Jm9wiaQkINc1UUlq\nKGNcWtthMYuc1lIE6I9UT/kRHgLVU5FIzj9GbbSnDWLENfGAmfZTD+g480OX\n+DYdoqaXbA7HM/JxtnP5nEyoz0JtTj9bRut804kGhIdqurAtrvzRHqQCCr5n\nXtxkuiJOKm6FdcP6ppu19V1fs1cW8rDqF+zBKIs0yxqvEwiu/m0fwQX4hSYu\nNRlCVtEwVEaVgP+Jc+EA0oTyN6Wp6jLXZPdKTNvii+NLBmleA9YsnAxKvT9/\ndO3KR1G2KllCcc8RnLEj3ezrr2+4voiWI0UWGDdudGq9QsfLE3RZMlJiGlFH\n3sLqzPJlyk9II/ID87YDdFvzO7+GKPfkF5ix5MscXmE5wpGzfgBNYv5a+EL2\n+Xwd\r\n=YrGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/theme":"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/line-ripple_7.0.0-canary.3bd8c1bac.0_1587762348854_0.5456008974354527","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eaf4e0590d4024296e18e4e8eb5215d3fb749a67","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b83c8dc22.0.tgz","fileCount":34,"integrity":"sha512-vFFeanZbqYFh48sPZcQa9hkpAXii0v6W4fOftd9avzbUu62bRc4rmw0z52nFaglQVPUzKKER3inAfhaxVpunww==","signatures":[{"sig":"MEQCIBaydSBnOAX8STIxdfzNqHXTKI95F4bfdW0308bdrCliAiAhdnW8xDSMnbrwpMoQzumjCQMvvHoLGCMoBCfPx4dHdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1euCRA9TVsSAnZWagAAfLcP/iZOjrtPCy1SJ75Pvnwt\n+4sl3eCxlk1IemMrGvSW4C7PLSL6uX0MgD7kHPB8WP+TdrJ9EsMJ+EF7knMs\nBY0EObsZ+SYh8CU8cPRq7XO0vnKlm8Z0p59wTQbgzeDRgzzI/JES4MrEszuu\nD0yPo03PiRCydwPkMWuMXDxefgCy7NKOyyO+Qk7p7VKj1j/g1Z7DynrLrcwN\noGfTPAE0HU7gIq0Y8XFS6tqK/bRvbIuc6vxx9/e+V9drypnbfgHUYWV5D+yt\n44naauJr1wjNx1oJy73K4qjxslaNIEXFbiyRSxqiFkxG/cl6SO/wea3h4tUi\nxkZfE39bO1o/IySkqYDhkOHLwn9V3RVaX2kylV2jkbc8sj15rZofRD3bvWPo\nFhxGNMCkeyrPFpejyLeextv7gcr+rYpUEDO+hUWnnoJoBMCNAt4uomM/emRt\nf30fJYJL0qdSxV8/CV+4o0bxJsBqZNZkX9UGh/197KzMmUoyyELiwZJOsVpY\nRpY2wf3VKGeCcNLDTpwTWMBQBe0YUqZKybEyBsjbdX2aO1MX8CimbgVSn1Ut\n8YZaismcqQZsEVjB8BY+YMPRtRm/2Ik/B1/AneMmpkvttxY3E3Pu9GHN24cq\nC12dLRjAg18QjQD1orQVicBJXzygBwEciOJy+AmysWfKO1RWV1WQWDAJ9sqE\nXRLQ\r\n=C1d9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b83c8dc22.0","@material/theme":"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/line-ripple_7.0.0-canary.b83c8dc22.0_1587763117869_0.3175767653685606","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"032b5400d63a882b9526777c0edfa18e80d42927","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.1b3dd846d.0.tgz","fileCount":34,"integrity":"sha512-OXXSUI6yMgUc6t7dec3kszaSPYjiU2A3k4iKDhozvj4E2q56uEq8hipxhM77iBJnR2hIJf5+Xf97Zr+o4IwWvw==","signatures":[{"sig":"MEUCIHDKsAy4agjmiB1dWevgsen3YD57NK2/ik9C8l8JQd3zAiEA5zA/3hlfCsVi4rB3CnXkProp3by5Jy79/DKNoFmGuGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4fACRA9TVsSAnZWagAAn0kP/0BVAGuLfE2Aa97pe74z\nSzWqldKFU6gbANi1/7AhlTgtgaBYbz5fpoZTpmXvwKToEcvYFs8M/fGOgxdy\nd1fQgb9+NTRmfTa6kdvxlMEtztAA2Ste7csiEHNZFCTifTkujhZHInw02rGr\n6LFZbP0vQc1bFOjM8V8BI1A328RTv/Arp8z8LOG6m/wAbrKDxPvpCRAv3Puf\nO3P632iqyKPtCV6xVW2d+y0i+aUrRfKsvK4ZX10QvhvVz450q0+MwrSUqkyw\nh+B5BonGTXMKmzNTKg5Pbwdi/ybyGKaE7zSYhQkG5ABi6aBlmBW6jfHZDI1y\nNQZr6uzt7kNRTupat/2l2oEu6shfjqc6gJlFFPkTsaT9DTIx0VjF3Av/QQee\nuzeZIqOwuOSfe+s75Oz4nL3puHYFEkRqp6D+HdFOTfBJ+pDCWclLsxCMh80o\nYCGhrHdNPZrUDWymBU+hsfPJeqcRn+j9i8eWwJsq8GlTDss2PZflLxFUFy+S\nJ4smqxYV9ozW1YZp73+O+uOwuvhH0TAV25SPv1wxMufy478K2pX7bk1zECiq\n6q621WJP6d/cf2wsEebAfM248cwS4WtRGiuf363bYgOT3+lco1wxqV7J3zsu\nNbwCUWCPZ1HqqIhBL88UCV2z8GAMsxNMqkL2zkYVOOZ/hJng0thoMw3BeVph\nt8F+\r\n=xKwj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1b3dd846d.0","@material/theme":"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/line-ripple_7.0.0-canary.1b3dd846d.0_1587775423691_0.15984596498967352","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98ec12925379e1acdab8f3c7f4d22cd8d3d47800","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.29debfea7.0.tgz","fileCount":34,"integrity":"sha512-uSSOHtfoZ8q7+nEPoW03/ME61xwTYANbW1m9fH1Id3i+ZBh8XfV3cry2YEFPQivkUek6sYH8pxi2eBkMCQdWIA==","signatures":[{"sig":"MEUCIQD2+/pi3duG6Uuw5/TvcNk/8TZvg4g/ok+jxySCw7SoigIgVIES3dp/CWKvkILNgvpKzofaewa5/zZG0Pe74COd7Jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptC+CRA9TVsSAnZWagAAwn0QAIXRwbpEohcdsz8QIC3G\n3l1588NkeIRrPIxGnL6fNl2iC3NEutjhVjxzMOSkdqUZpJJlwuWx5znHQhhK\nMy0jWw3PsAbQPjCtPkjRt6A3/LyqcZExC9+VVjWe+6H1/eLyXn4KKIZyu5WV\nf/fL24yai2AazgZwldbIhddoDt7JIzGDeBr2fBB8UVCJWZ8ExRLShXNp+Qtm\nsUqaYtp2zz8gxLbbxv4Dbe6hcpMQGn+tG91vIB2x/KSwlbxG+/bYX1P6kAUF\njpXrbl2Vv3v7pDKhXf82F1oZ2mPZSbXyy7ok02onPzMjVp6q75pUGjbGXSjV\nhAMCG2ol29+2IF2rQJAyuX0hIiFs5ogibW0BKTbqMV5ZSa8VLEROkCnLiOQ5\nnZRQNnT3Qc7Fw49SzyZpflCr4x5kpegdzaNpMB3cy6tlIKVBiK+MUfVmo5pA\n8uOjwM5FZPx4Nuwe6tqtjc1n2+x3bnao5g5YLUUaR4fGKWeI1aZBMMzXX4oT\nFqiv+0Y6VLNCyuveiW4GeMuMmIyBDSMlViyAqlGy9teJGc4p9g43eL+6lgjm\nrsSLCzzc8ocHgmmxXfR4hsXyzLIIUxgOnNnWCsiwoe7HkqIQYTEui3m6P6Kw\nr4JgXILMw4Dp8Pb8TUapWpX2IrdkLKBExfPqV+G/NOkNVLXpMQmCvPl0zzx2\nayBk\r\n=/mFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.29debfea7.0","@material/theme":"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/line-ripple_7.0.0-canary.29debfea7.0_1587990717809_0.7268064695428158","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ee39e65489fcf12d195c2c4c9cee23f821f65f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.28d32f8e0.0.tgz","fileCount":34,"integrity":"sha512-sYyCZzEXGk0q9BDxvHINqbA6+bPYQztVXTq/qejNtfldOMTlSTRofc12ZbSIjn69hInFaYrQwKclz115e2ql3w==","signatures":[{"sig":"MEQCIExXw3WQHpqKni+c/hX8KhjrUtxutP5UFX407mO6AukgAiBW03JEwEKnkCcE1+W8gyKApr9phMuoLG+/FhZ+iuIAnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepubsCRA9TVsSAnZWagAAyrYP/1EroRYyt+5d0Es8RZ5L\nAIGnaeMilEIa2HU3cbP8+zRPy6kjR9nCEMKnehQ+bWjwY3BQbY/BhA7Xb0mY\ndQpvQwj78Ph0LfLFeqP4XodD/s1qSCTIpouRvH/xYiGHIemH219PIUfpMdpz\nqsctW2fKA8ZkqnOY3HCWibY3BY53/gS943fv+n/De/f3n9e07KYv6mtRjwEo\nNftouwTesUOHgoGec56N+R0cybn3u7k6h3b7kdCFyARleZLwcycSoTMT0C5E\nAU/rQ50tydIoZszooQmdubjUsMQKRzlxGII/3qzo/aZdiqsbv6d7S/ujqt8q\nP/bbRCukvH/53Z9i9OTTmBYjbHSZfBlYdZxRlIRuq4bQmtsqQRcfKMV3teXy\nNxjvRZtrfVX4odTi7fBTz6jXuKKjWIYkEAIEJuWog7zl7lEgM9UHlZd3AOX7\nNEsFYfcE+olOQbUNsHlO4GFTnUAz1InQaU8fn5EEZ1yKat4bUbCHaRByEx6z\nhJy3/0cQ5rOoph3RvlbrmFfqJSylRImCJ/hojaLldvpMUbdDxjJf1Kf1loIk\nkD4iUHOu14DlmC4e29xxvkWp8btV1hNVc862u+B7Rq3OS05XJW+Pfa6gqme2\nUf85k5vo09jBTqsmbSOr1YedAr4YQ60hs4jQGMll4B2cwVae7ORoNLULiXP1\nO5Jn\r\n=DsZK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.28d32f8e0.0","@material/theme":"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/line-ripple_7.0.0-canary.28d32f8e0.0_1587996395820_0.13458257367000015","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/line-ripple","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"58af604db49ba18e410ac97ef9a2984260d54f14","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.af71cfdd6.0.tgz","fileCount":34,"integrity":"sha512-+6F2XXh9MiN4wOJ/mN4byEs9p00j9WZFfNfO6uZL/pwNii5UYy+WpTqk6g4tf4YI8Ldz8q3yRxER06bX5Hj93g==","signatures":[{"sig":"MEQCIFuC7BSgbL/faLFjMnaJRK2lO5YXzZEorfZdB2JmOq2mAiBAinI5phQKzTPV9VZyHnzRhJoImzyKiI9MvG2168G7Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLl6CRA9TVsSAnZWagAAVG0P/2srqbCKPMpOFhYWtApQ\ncgvnv8rMxF6pL7eRYKRcnYcLjE3KuiIEvbuKd96AD6AztbzAa38wz5KdSpX/\nPtoVqe5BuUDU8WyyzLzX31wP3iO47DFRMj0f5JI1S/6xaPqs9kilpwMLEVHd\n17uABkMOJZkN+OVJWmJGi8GPiou8nlZuxjgYirupFUQRvnHpAMgywIE5qSJy\nLek7hysaxCN0m2UjZwZAB2UlGpdiWjdDjc6625gleL7Oe/Tq4PT4EQWfebqs\n2rzT/FIIl9FzQsiY7lsnJTBJxLD7voBzDZe6nQiVMtdA5YJDuAHGKTGsHvLZ\nF69sZ2gMV5HWCjkwOj+YY6vko3UmoUpWGdxcF9P9SqrmUpWPhR/VXjP8jqqW\nZ1BZXeCm/h+U8Ugidy/horzhXn8ZpPp8VX3+M0w5klMnkJg3U1RK3uSu7b1c\n28se+4LGtjRbrlCYhMJxHilSiCSbZc2ynPNpWrNn5X564RbCZz8Jr2SDOVWA\nS2T81ie2f5U8Kwf1bqX/SwjTynslUBzySX+EW7Ws6AvGyjTbJOBm9/YXxelG\nM336BMiTWRBjTXHv9WSe1XchNjs1vHjD7SCYYBzec42EcwTMZ+JsV8uu0y1B\naQ3DDOTcJ6zx/dnru7rP6xIPV2wHj/spVcnbRaXA1OdU2nItHfYh1u/QVUJb\n+adn\r\n=IT2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.af71cfdd6.0","@material/theme":"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/line-ripple_7.0.0-canary.af71cfdd6.0_1588115834490_0.9267355446324073","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/line-ripple","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f54b42a3abe39d704e2a8155f9f812bae6370945","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.99d2fc961.0.tgz","fileCount":34,"integrity":"sha512-IZrHr/YnGs9ELbmrXo4hBTgqBK+bImT54ct2L9v2y7R+Gp5PM4NejWHz9t8mnK/RFoer5/KX0KEnD71Hx6qNKA==","signatures":[{"sig":"MEUCIQDPP1xPTF3pwxKByH4XdBP3lVQR56ckieDX8IEckzJH7QIgQxcPlYzA97Kb8HWCXJlUmKwcuFWJSZyBxFnNyzGyuDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVpeCRA9TVsSAnZWagAAdpoQAJZk4nYUD6Y/t3Iz/n6U\nhcPeuz12+nTZgu3QdcwxBwvF0QjFGDDlMIZWnBkj2l84SYdSx9mPFBEy7CAh\nL1nR6Xfa9hp7OnvIsQUTuQWK9kWS3wNVJwsGoL+yDJj0G0MAiZOfzJgxteyQ\nDietAb8AJfKP4p+oZfDeOqMZGY3PGAzC/nsNnucRo9Y0QseslP+U+UIrGGPj\nNUcfVXaSDc1i5GRn7UoOIOsyCDyjv/c8okgS69kK0WICfBS/5qWIuWRASsFz\n0nnqxTBIBSIDl6RF8S3LWMEc7Bl7ecujVn9M25LBYPekhHLx/Syn/eFFd4K+\nahcIGwMuoCjUldC9VoNv0eL6ySA+3JOvp47sMBO/QgCfWWcyjS804qOankYW\nT23bnOsCuc/fVzeUCZm4uVgzvKTkBRehfyoJ266+ZZfjjI96nCer4S084xlK\nxt7SyzU8e+N9qw51ZP3oyaTFxo94O8Ru3Ey86iGKZy/+cglU2GntgTnao873\n+t8pb2dQns4pwMGXZaHRVgc+KUbUoteTd3D+MY5So1vc3rNtteAS4yl0iCYE\n8gS6QdNpMB5b9G2O96plbSHu2un/dbzA/QMnp9rdsl+hy6vPuUUMv1BrBc5K\nu+u9cFMGsaNMFz/Dq3ZKOkIYCoqPdSVlc17m8I3lNv4z7omdnKEAaHPgxAy/\nHJz6\r\n=BPh4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.99d2fc961.0","@material/theme":"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/line-ripple_7.0.0-canary.99d2fc961.0_1588157022086_0.2389103779886621","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"31e08cb1553097cd4feaa952e5f60e41aa557406","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.0e052b24f.0.tgz","fileCount":34,"integrity":"sha512-EaueH5/YVjhZJwWxbRXxcNjoV0p9tQu8XlAnkvUALqtrHvJZsqCiPJDGCVXL78orlhnN6lVkspwsR/wy880Iaw==","signatures":[{"sig":"MEUCIDSDzvZjY+EM4wBV9lWNl0yLXMztxBtAmTmxXNmn8/Q+AiEAyaMyInfjQrtbTFVxPcHsrLkro59/wby3lD8nBuE9kNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqinwCRA9TVsSAnZWagAAGJcP/jkfpoO5Hvhv3oIJ9QBj\nsxIh1gjCVWQ7grS22dYde4x+/fY39bv+iMHVj+ZVUfVXCb7+gvtA3ezJPDoW\n26ToWLfB7tjWozHcZAIHGwgu4Brosx4BOmO6CC03qsL4vSKoH9D2j1POwjDl\nyu+29VMSLoghtkRpydqt3Mw2v1J5gYZJ8osIJpDLH/2zT4noidRCvaftYM2e\nudXW4viQOhPDzvJC9uygdrh+2b4V/G+g0RLcKILVN7IGGqUm0KalUZvps4jm\nth3na6h4ha5I/aTeehhpjevKDgwUUrbcvc483KjNpXxd0B0pY/MIWjL07d4y\nQfYk+zZB4oWYvRTHbO+hTLwYqd5NJBSyigxhRYK+l3QVAhgiUcNDOGYKcyJE\nWkxS2egjPehK2SJozsmG++U8CJwQPXT4rVrTSI1qoHwpD3/L7EXG+DqCgTOj\nEABmkwn70c6+Bq0KGxL+fvz+wuXk9d1BCK4njbSpLTmM+lyDrtU6M91XqByh\n7XL4tfa9ELK/DhfUoVK/PlYHTajyURSsrh018nFE/nOTfVlgjBpczUu3EA4P\nVcSMJiUGXQKsyFyb1op9y3lrwfb8x+nsbnNw1Gd3R79R8UJFeY1Kxw3Gd3EK\nUate7WH3uK85iqGViFQ/QcE6rJQY347gk0yKnEjc/iPQv0hooRRCCAqZVcdG\njQU9\r\n=gkQz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0e052b24f.0","@material/theme":"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/line-ripple_7.0.0-canary.0e052b24f.0_1588210159634_0.5627539071129903","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"29eb77c983f0e20f27460035071fd4d4f22c7250","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ff4bc632a.0.tgz","fileCount":34,"integrity":"sha512-hflLSTnB83uWQwNvcM0X4Cfhu4fLdKip0dcLcXVOCY3haRRMWdtK+ffprwH/jQPsEYs+p/IbE/hhckOcZWmBPw==","signatures":[{"sig":"MEUCIFJ5jZ2BbZUUPjcqgR3nh27KXrxj+TtK5W6GcJzKU7HqAiEAoxA5LrxT06+jkkUNzyfPRpKRuiFgFTeHCEauUITq8f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqov3CRA9TVsSAnZWagAAehAP/jGYR+EQ4LTJDexCIWAi\nWLkEhs3EJUvjBUSHAAS7ejCMRLxQMRatNBeMw6LnOG4aBU8ATkeKqfL7TFMn\nBEATFxzOXCuTQYqA4pO8EkBHvCixgV1Hx5Hw90XpEor9gEOy2ViWWfl35xZ3\naxYGYgLnHiacWmC4EHrIdSeGynRDjrCV+I1E3ul4g/+6kJQyn3tnItbgl2Cs\nJD16v1/KsHiQUM0Sdwvqt57Y3ML00wCnk4C+KXG3eUZU9CQEH2/N9Dt9W46x\nAgbF9/FR4C+fKQWzDoe4rvVITMz4kQuvlmxsU+r449YreRw4MMzoD0s7Fcdi\n2/8dW3v76jAQR25VeMU50woO+iENkr70ik4LeaEkKrC7Xe+5JqSeA2DiD1mU\ndEwB7eNuc1lonSLnja0e9jW8GxK06sqs6LrQNJPYGiUYgZwkykwKWyYm87Hk\nV7uDEVb9VsFMgc5+4MAiR+BRn7kgOPZ4r2gJMbwuF1SyA/OD/HyYoe90/Ja5\nBk/rQSmlaMGz+G5V8YkiJaweqMRK8mQ9E92RzUxF6M1QagwESR3yviBZKvOv\n+kaXbRJOOw3hZe7fWUBh++35GF/T2EtQWfyuXyyx/t1GIqCBVRLSN3XS/n/m\nPt0c+DG9M2+uBIXrM9F93+NivgigV8d3ORGKxNZJch8PhS5PXa3zNgXhnyRG\n1LYQ\r\n=uKPA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ff4bc632a.0","@material/theme":"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/line-ripple_7.0.0-canary.ff4bc632a.0_1588235255447_0.5296422365243267","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f4c3af2864d37e40fb9ea433db4e7f85de60caa9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":34,"integrity":"sha512-m6AglBewf+QAWDWFeflhRqIl0brV4uTmwHtqA2j0wM699AaxwV0TyIveoqEc3BB1QpAf9Qm1BrbYGTNGkyY7zQ==","signatures":[{"sig":"MEQCIEPJLRTBvj+GT0U1HEsCNZMq+Ec9jYcxgHfdOl/lKWN8AiBumMdo9zH4Mj7T+kNpd4cXRkBBIMlsHyFg7cV1caDxSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequF5CRA9TVsSAnZWagAAZ4EQAI+2L1FHMXGQGPvtSgLj\n999HchqxSdCMZVyn970zIUXKu3VIwRwC0iERkiPo9GHji7doEPND+dLHYN20\nw2tTSSdq+euvdf2ctqsYcKKBygW0vHVo5+Crl49vJwqn8UhE40gfVj2QUZE2\nQzOr1u/VXMbELpbfCNwpMI3etXFE5ecgORYdhEuiJjMD0ohPZk+cULhefHwp\nJqnn4XbAP0MBmmhMHwXMnfsCh2EeP3Oy9ZeCKGc2t6fjNyxR2QEXM/j5DZ34\nEEWjoODoEJKrmxOGlrZKJO3QbUkvnZqVPXFkgJp9n41ZXKhlGKsPIUfJNoqx\nsEAy3U6JPufb1jQ6s4Z6Ty/ChyMXlXztzHIEYRQ0PtXeIhPNo2oOy52uAizR\ntZnkw1ntsiNDfv7VOnTy1HpxQdf7aYlydResp6VoNuS1neUIXagf9RgbjwIU\nhL8JFXEI7S0svD3CU9Hhih3IsPYfD8AeZz+WiXs15rbBlnRieAr+bGD9Zo15\nDBgJYBQSrwSWZG8LhAn74OnMHlz0ZIv1kUi59Ptec71kU8blC7q8Tw2ssg+t\nkSs3+LqVUAeazp7mQiEACCH9AZO/+SrGXukypkfJ+yOJmkAwsTOLkhcUmh/v\nxd5VHyAo0ToMmOnY2v8ynYgpzxHr8WUI3Yb8iZeu0UftrqqRf3lRCI1a8CCn\niTmg\r\n=PpFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/theme":"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/line-ripple_7.0.0-canary.b0f83d2fd.0_1588257145247_0.0862223793352419","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/line-ripple","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9d80823c9b9f342b141a814725cdc7cf03670374","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.e59906a57.0.tgz","fileCount":34,"integrity":"sha512-KtY1CEykLwv0BcloRL6i7EbrBgHVja0wQG2sajsc4YJpKtnkqHQArksgX2akyeI3/rmX3hKs46bvVo7AeK5RZg==","signatures":[{"sig":"MEUCICXfbi1o7nGBrHuroIKRw7/6IgijxlAHL5cCX3zkAsB0AiEAqCA9YPy51yNyfet4pA8yCxAtWXjTSTcxUY4mjTpUWWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerENQCRA9TVsSAnZWagAAPdgP/1zr1pM68LNzeNjQvToM\naN8I/xHXaC3EDEN0Bv847jqJWixKGdM5eDaZ8ieL0iKHn8Q5yZG06QsaTMWz\nogq6lWwzjcd1c9C6PIxgExA8NQPziSYgYBMUY7PI38633lU+gdA05l0SUtJA\npmFBqWstZYjc2EjPTn6ZF7FWY1chjH8aXWT2BIIO6POhXV8PigTAPku1wh+R\nJQhQ6FUy2Bi2hm56gBAiYxG27BxpN3iHt5ABdRuzXwm58EQGvBmVriU78xT3\nJ/dXPM718OFe+3CQ2WFCdHAy3mZJ6mN/GBXB+xkpiKlbTOlwldnRis91bbAH\nnUyPj0zOWCGSrKJn5qaxck2XQANGcdmYQtODQ5/EUhEzNCInYuqsF402P+Ci\nCb8xulB0iutEgJigpHdkTO127nUfA+MSvCsNljhq7CkRVTLPe2gTusK+7umF\n7f/E7LCOwCdmYSrwNyMqbd+aYA84PdWrPH8lVZOZHU58Fegh9bT8M6yzWcqB\nO7MN/lGztt1lQM5XzYcbHfvKmFMd/dgQ1Erfh3jdQ0onx10l+lYG7Q5nNu9D\nAzrYvCjf+pxFdLCW0IW7B+3IvWvXsxw0+yV6zaJ/GKH+Z2bc0uGPoBvWR6GH\nf8j7vmXK1vJoYLhe/9yW1hzfbp2V68a0Br65AHUj6uOyblGe6guFEOSWwn+4\noaPs\r\n=E3PR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e59906a57.0","@material/theme":"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/line-ripple_7.0.0-canary.e59906a57.0_1588347727856_0.4979882563844833","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/line-ripple","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1db8cb4a43c6e2c7dc3730d5e1ad402320e109e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.c02712b59.0.tgz","fileCount":34,"integrity":"sha512-Bv/+44m2m5OulpSOovr8HzVQgcdwaEBO0/w3LgNS9BmoOIFy0TIhuKRxY7RNX9oHuPBc+yy4rTaipNJwVvmcxg==","signatures":[{"sig":"MEUCIQC7Lm+LI0dRZtY4UCgDgEuDrB6rUfWpRewrjEA63fE0fwIgFUCoeZbEGduL8/BE+p5AOFnIbJfh2OW6XtL74GkocLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGmcCRA9TVsSAnZWagAAkYwP/1d3OQs1BIFDUjliabh0\njKm/I5Ft6fCUTbLx8ztHKRas34AZr5zd9SaPK8A5VxbsuiM6FXSc+ELBBCAR\nYR+4ZJhKXM/HfFP17JyB1wfnUG0aWWPCjjx+Dq4CWWgeJGzyfbl7N+QXDWln\nhLFDENkelu+SKdWYhFmQvAVjoH5zbT/fQ4AxmECqcm0FiJLFh8ttInze+XRa\nfQy/7DvxHFVTMmbdzfZtsySVKwSqgtvm9bzrRptxlBAlObKuk4rcUEaXy/vZ\nwK9/pMTGriuDUYBHiR6cw8yOakSGF/nrfZC46+co7LsinPjqlJyqxJB8GhKC\nVsDASLbQUl9EwOSl840MIgAlELli3IfB5M48VExOmHTOFVrO2mTxdlyvKIL8\ncfD5pSFD9wUlmV16X/huSZZNqcyZ3QY4k8kOeJ4ODNp7Gcf51lrwH1LLmvOR\n+mgkOtd37zw2g8SpdRLAx/QOssedo12b7GoZuOvyWfx+rz+92TXaLXZfXh+M\nMMQmesXB+IxCUB1Xup6wBvzl/EsPpSVX3MPfTM9kvc/7LSSphQF1wCNA3xae\ne1+U2AIQVOl6YUh0KSHVZoL4tfNj6z63UJFuAoPaGnhg8lUeVuN1KKabKXjt\ndcUUUPvHsZBPbcgnnuivZ6HTczkkb9kMhZIqNO0/3TwyX7iiIfD+F8t6ze4E\nnwcC\r\n=cH/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c02712b59.0","@material/theme":"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/line-ripple_7.0.0-canary.c02712b59.0_1588357532350_0.22146243356052442","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7c1c847489bd9c9ae36df4b28da8322171a7d73e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.15d65448e.0.tgz","fileCount":34,"integrity":"sha512-H8CipRfUQT4CzWZkrkIIB0ZEvusbKCxF8TQ+3CtPeri/gFlDQowbS8qCqFPE1M3wY0sNe7xO2L0zAiLqcV5NrQ==","signatures":[{"sig":"MEUCIH+2U1KwTxHZMNjKPUtmZdfBKivWaS/a0LqqQ5M81vduAiEA+K4Y3Dzf3T9KYBKk/Ydn19xa49x2kgndLGNU8ia14c4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHbrCRA9TVsSAnZWagAAq/8QAJOjGxIZkS9Z4A6q1lO8\nyref0TR+JJ3Pt3bulcPg/krOOwkkRICp+7i/4sCEsM95C9nnvteA2ln/9at0\nkkgOveyxrMiITiriD1V6T9sbi0tgWT8KRilfSnAhQpCN4+9LxvHorBR360BR\nCKtfZqYvCrcHK2/C0WZkRp8nOWyvb56ujYFJrvjNH/FyJ4vU3rq0SYHpEb3Q\nFVWosdOKQtQwETqi01YFDRarb1YP+VS0sznZf48SeHaXvgUtcVuZZQsH69mU\ncoEQEuBsDXmifsxfiXeofcJLcCo6r1s1Kkh58WpNgTtVjelosrTJ9TFbWr1r\nWOiV90xi8f5P9FxER1ac/+jhzipgJPYRW5sYqBowbox8DalFoVFhJmRRJqUd\n76N9ctaPCU59Ik63B8wigjGWsXpDbo+x1jzLRIfM+rgTxuKFpo+UC0q5e3KV\nf/IMw7iUAHpwbi1BcY/dD67uzUDOIF9uByelwEg0fo0p1zWHbZHIm1WrMyEI\n+Q3wl8/XPlnA/3HXoitI9KRNYlbwnCiu9S4ejaFZWc+DcBiTsb/W83jGp5lK\nCXvZOwOltuEUVOtrXoGJXvJvG414v1AwSEweoM+CMkkXOU8xAy0nTPbbZTyi\n3x8MWTnA/A9/TW7XkduroBr/AqFY39A/IhwU9UjeoUokd/AdHLX0Ahz1MjVz\n8TAN\r\n=JcfD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.15d65448e.0","@material/theme":"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/line-ripple_7.0.0-canary.15d65448e.0_1588360938783_0.8774725302684234","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2839167c214e222e9ec6d3e517829d066816d212","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.142b1549e.0.tgz","fileCount":34,"integrity":"sha512-JJ3PcTthN5ygrCdpYP0frym4WK8bKsxBgUxo9Eyi0z9oefPlBu4Gy6j40bCaNZupfGPeFYKsurIOxEOLx5Zumg==","signatures":[{"sig":"MEYCIQCGlFHaRVNoObwsnGAI0vUyW23xha9FjhUXq4vJTLuNNwIhAO0MiQGrsnMvB1GS3/KczaV5G01aT+PnYw3egXjXflAT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKQ5CRA9TVsSAnZWagAAgSUP/2nKl/3Go8O9vDKJRHVR\nEpAyOxa8b+04lwOReU3Nfbwgw0Z5HggWoHUWl4vdUU/3ECLwzWzBZocyFEoX\nqD6BtQ8t2YzvMxLdPddt5FegecuEdlg8ruimEMSMwDyp1YdKSYAD9X8LgppZ\nQlhEq8teePNbG4McD01tnsy280GtdgGGKZqPSnpkrUMIoolsWxwndq8IHtho\nqWJiMlFLnIy3l3EA+iyFxoZ+Xj/ldo+Hx4pRtU+rZGRmMzWYDh7ama+crBzT\n/XVuAodRiorfhEmZb8vZ/MDJHTCJqZjkb6aF4h52Wh7l7SFbkZNeaaIxf6fG\nMOuDBn4peof+LbaTVw7S1JiTPZ8gOq5CX52B5AIL5+1ilk8C8i/cDOG81dMI\nHpm8HgIFQXJJwx88Bdo7BGylFZsmwLCxdeC7mO5E1I6JQIHuUfayHIbTqGbQ\nlG/P0Z3GYN5ryUemuKzLDrYUN3K3BVDFUrhnpXqMCLyyKtst8GnOWBHoPFTK\n0xS+/CWrGR91qwAuysLmqhmFaUMXrrPBpViYJ8J6JkIquuLQ8euHL+aOoBe/\nwNVYbq06+dKni2kNoqrPFUj2HW7cIXkGPXrG1aU8AQ7AVeiBIXDHR0fe9dJP\n9yaChNG14z7y7up3ToMZKFfRREhfVVbsbUKtpMlqdrePwLOToZiTDR1LD00V\n5rK5\r\n=Dh+c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.142b1549e.0","@material/theme":"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/line-ripple_7.0.0-canary.142b1549e.0_1588372536996_0.08788122314181956","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/line-ripple","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0da4011d9d1ac53f0a38dd1f579a0ac6c3084794","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.524b7b812.0.tgz","fileCount":34,"integrity":"sha512-f7GG3SeQyhMPZgs7acpiIv2Dr50Ot8Jc+SgOOUbD8XkZLqEDFIwxubP2JkaPOGSCbF3KMn9N6MDkgERW2iukng==","signatures":[{"sig":"MEUCIA0IBDtLwn4KqfoJ1d5mpvCRTNKPz6goT+7SjCXpxst9AiEAkmjtQj1obn5Bkon/tODOpqooyGCmIc750Tdc+U57Bio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery3YCRA9TVsSAnZWagAAiLEQAIREhceQiUNgP6Q/QN22\npU2TwuxqHG8Od4FzY+wqVky5H2KEprhfGkJgO0dF0aDV9qMjfEnXStWBWX/X\nThnKrvnTHekDJo/0pW8xcu5gdPzmaSZgiGZ6cK5YC0DIh4JNWDBx1IMFDSU2\ncdGqmH0YW8KHGGEFtkJiqlICM3kW4PShCw3R+Re1FAiMaE4ykIuSUcAZ7ds3\nwAFXDT19Lug9zkTEMoqgj0uatoX4uszcJnvmyLuZe3gNjZn0DHvTyKdHv+gJ\nkbPxrTwlp0z2WWZUeMLhk7m/QEK8qXGSjbJ9P5sOtM3PS51gktlotn0f0kTz\n5UpxlYLh0dt9l+li5mV85ogSk3qxghqVaLRuvl+SGj2vE2NGfzvyOuBXC2Dy\n5WcJqcwReA5DX04MnuXXt6Al5wOIIOUxTZO8SI8GUGKt57jzriwUr5y1+M3O\nfjcpl8Go18lFINkaPXSqL0O4/adAZdUsKQR/7p+PiR4SERolVwLc3lBu7HX6\nSbc7bIbLkCSh9vwGfPXfPGYJAjAckdW8sZi0R0EWQW/OKLw9q+4YtRAfpZgO\nObAG8057sI2v7CdfOouOYIzmToyI81ZEh2yJBUOGKSIV2nfv/MgY49PdxF0W\nDNxyEGLKk6GE0gNPYwSuClDUnvTBeNju+oCJ9fDx93b10TEXB7pYx3c33VBe\nBCks\r\n=ARqH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.524b7b812.0","@material/theme":"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/line-ripple_7.0.0-canary.524b7b812.0_1588538840146_0.6704103417204954","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/line-ripple","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a87abfa1fb92671f43c61eb192d389f241b9a46c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.bd8ca9678.0.tgz","fileCount":34,"integrity":"sha512-v53tJGsUs5xqkNaMvUrvxprHMWVY0tiV45Jmra7SR/l72oi0hrtqfqoZydBQmQN0U8gGdmfiwZp2Aqg0KixR6A==","signatures":[{"sig":"MEUCIGxLPLW5XQBgfXr9vcuTmFu8HS3UfpuemPq9Nl5pISmNAiEA74aMDpVkiVVINH3nN/pvttr45GM5itsXAiWmLFjHUMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE54CRA9TVsSAnZWagAAu8UP/A4mXRk5YpP3U/67fkIv\n3MH3x8mYTloUrxrcHUypsySYOAyZfl8lvV7y/FdFgtb34McFCgS8TfSzqaOc\nz31UUhmSwGEE2Ntub7/rSlXlTw6P1zZVnXBwHrkjSKfTPQ0ST2OWcN1zOEcJ\nWSt/qc35fOSnN5olsdu4UjW6YsLwi386Hp/OEzwZNxqPzGD1VDygHo5HG4wE\nm1gkE0ZnW6evNguPzRxGNLaxqwjfIMZA0s14YBXfXnJCCEBv9EZRKXejE+rs\nPQixed1i649U+smKOOEhLBWljwVyuhrybYh2PEDMQ8a9z3M/B4uNHHOAkArN\n4Il/ZEQcCel9pPupjfh3cxjY1DTGLSo976QAY3ealOllIJVRvOUYqxslv+Zf\n/cjf7ouSNF/WBkHILqh/vKthnu+ep+HcXqoP03OHzMRICPcLcnufdX0bMybt\nROne4ja6HCLccM5PdUN16kChNreByq7I0BinqbE2ksQkMkR7frc1kGz+2Y2h\nFuEzsnjm25jQWCCW/+pg1vcIY3JPwYc/FWJu7nTuNkwANoGFw5jpasz4As+e\nhEhBNfgTpG9yCoD3CxXTnj7oN1b+21aUYbjAPb450j9KDyz/51UPFrnnYFVV\nX9lhmZECb1YM6h0wwK8LVOs1HGKGyDDbmry1ITtQDyS0aGEqb9nWkcMoS283\nSPk1\r\n=XVbd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd8ca9678.0","@material/theme":"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/line-ripple_7.0.0-canary.bd8ca9678.0_1588612728160_0.13420763630792854","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a677e0d822e4a8f78cdf3fcec2f13d419f02d88","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2553e86fe.0.tgz","fileCount":34,"integrity":"sha512-/czUkf3eZaio3lGKW6pV6HDNnl9B3/TErsqdFjrl7NklDA/akGyXx3fUA537xY7SED82ZoGjq1KWsDJ5RhXk9A==","signatures":[{"sig":"MEUCIQDN0eNekxjG6EtpTLKvb0NwUIoguV3Uz4JGLre7EfEVKQIgcOEIH8iwP/Sgp5TCmXe771RYqqPbl51wHzCMBPs0sG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFFLCRA9TVsSAnZWagAAf5YP/iiJckrXjcAeO+SFNng0\nWzXcaqN3Cx/cqXP8h5Bdg2ylbg1yLYs+5h2VkChrCgKI1H9Jn3MGLNbnIF50\nYqBLOjYclnEt9tcqdaMeHNHnXI5rf4kENvw1I4+yuQPzQ+LbpZ95TVHvWHyg\nSYDUuJpXJkutTzoqz4QNsfBASEcYZWH9bulIzdQhF5Yv/U37bPrA7jCz3n+O\nb1F4qfa37vMJ+Jl2zaxboVMdRMzEdCcei2qRDVh7qMDAXUeEQmh4RFLzv3Dd\nbt5ATQGdyHi5+udnn8nUPjQ73rWirelH4RoK9E8Ly585r8ZFn1p3HkL9SEEs\nKvsrBTZQiCXJ7W+jEoYno/+XM+QNuQd7liaEuruMghaJQRtIVMkKtB0oUuZD\nC2NxHJI4l5YY6V3eesJ9wUhdXKIa8rVAgOT+E4RAtAPkQabBOCyvr8bUnoiI\n/WXnJ4F8RRUYLg7QLRx8fo0KJ3ZB9WOmZjk8+AooyWtPhTIOFWNq9g8R9zVI\nrFSJPljUNP8DwcSySixm0W4SlLWT38x5hL/m8Ff2S5hIrgNXsxIsz688G+Lp\n/5nGNsnw79RIhOpF+aX43f1il4wRPmmE3oQI9+uArrMR3rUsGEfma7e/Y5d3\nQTvE3o0eE2dgE3RynT3bs/G1JHa4VqsYNOX2hZuyP8YoM8ZqAcqLzPHjtgoG\ngNHu\r\n=x3uC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2553e86fe.0","@material/theme":"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/line-ripple_7.0.0-canary.2553e86fe.0_1588613451257_0.63818498997419","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e14a42cdf1e2603661a0d4df3e9008ecccdae0fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.03dec929e.0.tgz","fileCount":34,"integrity":"sha512-kxMXm0ctQVkaGeNTUosc09TNnM9XVvjnHNABWByQE6aTwv+IbH+q5qrGQcv3bygHnCUtC1oblweRYAJAvT+Arg==","signatures":[{"sig":"MEYCIQDgI1cCfpj6IxflzgR9pNjlv56Obiy6DX5T3/w7OQC3IwIhAM1F2lMyCc4Js7o9lqko2UBQjzfr20sMT8MC9opFnWJf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKZOCRA9TVsSAnZWagAAaHoQAIiuK19hNz0b5z8dLF8x\nif/xvcrYn43kzl6y5UYYWvnrvpHtYgnWDLEgnTAR5so9wKtOaDxDs04LSuKb\n0QlCNzeYlH8YfyWD5pYAUh4eU1rnrvwebx2JCI0V34Dsuhh/RDUkIle+eDPR\nixI5ydm7I5BkgKw5IBpUjKpRW4IkaOz4l8KxDm7mhOwLylzooVUBddqV2ddf\n3IjITZVxenkzreHXOHpA/HKS0sQurzupf3VMn/g6unE9Ri4j/3pkMUP+AXf7\n+R7T25ZtgbDxNSjrWPqQQBJ8e84/yOFgDjSoRd0IRkhbnO5G/Wc4tyuswRLr\nWox+w4W5OKyJ9S2VuPn0C0iNTwJZg8ZPr/aNmgXxQ25BpMYOxE00s4Zt0UrP\nGr9SOFAyORFii+/DqgfeIIS7lUzqlXKcAZTgMYV/iQPjPiYVgld8Cki1nMik\nJ0V2svniziZR5eOCrKNr6zG2fZOfVKz83sJok/tCZlymU7m+rgSfFhhKzqif\ne1PvVlRX+a8rvHCjtjx1waJQ/2sXrq/UeuOVv/kIKP2vaZtbXMLI6N9c0eDh\n6aoI+K21+3um9oYM2DVN9DoIaaC7GHolY1RUqsIZ+SjeL1SjY17fYFPrZvhS\nT3fdH0GR9gABqldHGdLWUCwnM0MfAN2Mu3hnQOM8qSLkfvi4JPY56bUfMWxA\n1Sii\r\n=7jAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.03dec929e.0","@material/theme":"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/line-ripple_7.0.0-canary.03dec929e.0_1588635214326_0.24071710366034682","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4176859ae6c74c04539e7fc5445d84c12e95cc71","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d92d8c93e.0.tgz","fileCount":34,"integrity":"sha512-E6UIHRy28LfNT71atMKTj9uXAR9l9HhMoWdtGIT0PtsTnm2deJfIqGefI+T7kA0UQm2vYhk2ICE3keN28C9GRw==","signatures":[{"sig":"MEUCIQC9hVNwogqXHbLnoK1xt0WqGBNXNXmkbddkqW/88SXfZgIgE2x4E3ozfidqkWI1cS9jKXXPjcktJB04Ld4mhDS06IY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZtHCRA9TVsSAnZWagAAsHkP/icSwVm1eOA8jDirDmGM\naxQ+wllkPGxdoBo7EdHvy2NPpPrp9iFDbsImo35RU0JuvQEjuB/T52eUQKw1\nQW2pEV2M+TxL46U2FeofulsEC8lJIBBNkBKV30qs55rSQgGaPrdo2JuoEfsy\ng7ZIXaYn1HfE5S7WeI5sSn574UbDcsC0EEgboYP7/S8C3BpiImGjzjQBnuqr\nPsdOtlpcvanBYy/+eyeM6m1i3ng9pgs/MqSxdukn2KrC2b1zPaQB/yY1sdz8\nh0sc8H78ZZh7JRgbQNJNJj7jBm0jQMnxcj+wqJWkunIJ8nKVmZ0WggVUM8Iq\nFUU0THXqkHMB1u29NIAzSl63EElUx0VACOwzW2ylpjleEsVHfI+BosuLX1CW\nr7xAo7V2s0ff8wMWsexFqgckgjyZGYffh0JuZhkYlC5pD+lFyyticdS8yxfh\nJ83LUsJT4N47pbd1fV3665RagaQSOobo+mExIAfyuKWMHOEJT0sCALupsSmO\nnotPUKBAwPPMw6z99Uava1Op/FiJJP3t8hkWx2FaBYpMJEEW5VMZTxE+IIpA\n2umXMfU91ojRXSp5wHM+Tkzc0EFGKWeCt5/a+yxCkknk2DZiqDJr3JPQm4PF\nvGNfnu2CLBMZqz9zggy+NB19x+d9QPMu4eMWXB2/ril1EOmFpHPunWD47dlx\npT9o\r\n=m3BY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d92d8c93e.0","@material/theme":"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/line-ripple_7.0.0-canary.d92d8c93e.0_1588697927302_0.8321539909442341","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/line-ripple","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"470ec03902a4eaa1a85aaeaa92b6cb843a7cf127","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.09f591967.0.tgz","fileCount":34,"integrity":"sha512-iMDV3/Q4oaKRPQYtuxccW1F6hI4PGbVH3YWEGiWhykBGERWWZqHIS/X8Bu90TWinGlhtn/3Uy6DQEQagFvB70w==","signatures":[{"sig":"MEUCIFNZo1aV0YvOpNMffVL1voSgBXjZJqcjrCdSJEOdQ/moAiEAsOUNQ+QPu7xrlAEN5dUS7kuEkrgAQzkoO3IqN8iI+0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdTCCRA9TVsSAnZWagAAItgP/1b853hvxNEbIqQ49fB0\nVUcTBrPdb75vtonhGZZdmaEEY9u6AAQRRWadCXEAGZyOoyo7GPGjsQeQiFyP\nldFKIz5Sz6sZohuxez3fZSNkvm+3e+yFFPELhUaHMGKGYurXMVuvoTKNLS5A\n90SbELo0xoYwd7xP+dy+g4gXRjqGURpFd1lmrOz1a2GtaqJoJInBPZVWS71t\nlYg/c6izVmr3uI+VZi/gXbTf5n4gmKHVz1JuUEHlRTtI/x4GmV0cjPrdR1ia\nJaFiHIJUYnfbOqdEjfBPBsdp2Od0gZpOGJKqzClTNDPMQWHg3OVrOYc2x/Ot\ncioF5e2Tqh3EdxMPQLb/JAYicmItXx8sNK2PMCZ+vavHT8uz54onPdCvn4tw\nwMj4+VCMgWf3HHYK8NCFR1rW+YE4YtoPzU73S9BW11pRCkfkz7liqvmbxeYi\nbXNM9jOL6Jk8IrQmV+W9qnB/B7PxOhla59Nnih9SzEsFAF6stuaiETixBvnp\nV1d/m070UmMWKb74/v5XDUXLBqoRYH1UddvrMPblincbgDDRAQa3EY2ve89q\n672ooOFbgQ9C+5Bx0PusZo9auHD7VyZ59/Z5jZeBXFrCJGGpLGfmwWHCApro\n8SZM+/RLGuWpohAh/V6iG+yyOcPzCiuesRatgRxl71liS5ucuuaeIr6Rz0yG\n7b2x\r\n=h5aP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.09f591967.0","@material/theme":"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/line-ripple_7.0.0-canary.09f591967.0_1588712641868_0.6324165172167351","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/line-ripple","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0f1f6b2367728ad1acc65495d7c867b6e1063874","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.3846ce311.0.tgz","fileCount":34,"integrity":"sha512-cNU9Tls1QGPW6AKyfu5+CDQI1eLYHIBfGiMEtQAEF9VPIzMwXz/ONeB86G6WNeI1cbTCnzF3zgPvuXeYOUX54A==","signatures":[{"sig":"MEYCIQCU0lyRD7q/ZlcZM6SclvvEq2SZBEZ6+HMSNt9Tm+BG5AIhAMhFghNBOGdjpNkotOQbaNyGS8QpJdmhKxhcftvQfpE8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessUICRA9TVsSAnZWagAANJkQAJi/W7YXuE15hxbkd0p2\nWbGHftWipZlhqEUC6kOByEPSlqkqXK5w0Xac/IE+lMBT+ec1msZJnYPCfowf\niyLmFvv7SPybyCXvNmd8L2CMDIHTS7ZIwscflXyJq/MMJBpPUN9QQSqrDJYJ\nKoKA3cxso8804B9XvOXNvcfcAEDu57E8EIfhGhNcsaw559g0MFhU4iFAxBot\nx56oE3w68x6amx2nfnqLzkGzwjfXNO+UJn/b0e+YtWpFOMeYJMJUunDgOV79\nnsy7tRZ26obL+6MvCg1o5qUSIdezav954wGzNBoV57sC3GZz9LUxilzzRqqs\nddtDmp9U697axwTUZYjWIVpNsB9mEl8oN8dcX8XOCV4KHbr174s9Te/pryqT\n0LbyJ130pWa2RK/cP53maBVqMwUgWgPi3vihmWyZNmRZ1UBxGwRusEP8HACh\nMUZW6d6NrRKtusOR7rQN6fA0M0lnk2ikYEE1B4omAo1Gq9SMeCCO+EI8IkIx\nePe/DRpJnCxb+woJMkpWDwRub10zVbK/2NoeLWo08LjNl13K6vfrmAC6mN6h\nEGrmL+xDV0+g5FaBso86JkICpmvbhW4pC5v6fW4jmO7g6kCTreICcdoefEhN\nro//Vbojm0s4d/AxPybz+F4Drt2LnGZe4EZB+/u7Nvr1IKc9HugQvPDX8FT6\n+8uo\r\n=6gYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3846ce311.0","@material/theme":"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/line-ripple_7.0.0-canary.3846ce311.0_1588774151596_0.8666856619049481","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4abb2a62d37e4136efa8942a0180553ca503276d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ed7f32463.0.tgz","fileCount":34,"integrity":"sha512-qkzeND9gMT567DXbPOZAXOikeyfuuXKoW1EJSIj0VploAcE3OK2iYu6gHr/yIyCgPNDDxcRtqvR14qRdZdU/KQ==","signatures":[{"sig":"MEYCIQC5f7HvSp1sFDXCAYc+CmfxZRj19xrq4/hO/aEsFm9RiQIhALHi2+7StzmIjrSbJniuqHystgKOf4gBMgv4Qj90mA7M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuC7CRA9TVsSAnZWagAAXl4P/jkkxlMxQciTAG8bNoia\nWYOJqVS0cKj6BpPcj0CLO8gSYPwjA1nckT98ualvuaq6QCNfec3FtGEn3Wog\n+KdFW0ZfIzChzlfrZH4V8vsvObfB4TfAbk9Bk6+2uBosEH0q2Avn7zjCbxhS\nncY7vwd313EltkpwCh0gSdJngIliU0CrZRilQuV69L/BJdDU5qkQhWUegFZx\nKwcon9R7gO7LY4jENOZ0N92WBczVaBQQtIo+0LYJSjUQMXTvxQFycdypeQGa\n/OrUX7CUXvRR8FenseSKPMP3VAcTdGdTDjxSWRo80/XfT11TcwiCiDG2wcaK\nTFM5JTFPu0lkDf3mIgQJUYd2ckYiku3v/EoneEBKjxV9AViB1nYujuLIjBQm\nZNeDCMZvNwIN8QrV/O7y7BQ5qU6L9Ow4wjgsUt+Tb69/4r/gFh6E8f3Fd5WK\nXEah3a+1BR0jkW3WVoJkMBjJ84jN7Sx0b8x3fpQDkXFPcuWGEdk0o0X/NOnc\nIHRDBhoZvBJypjg9SeiZ2xaysU1GOG4pY2XtelgH62wC8hD3u/CWwQSLkKTJ\nKpRYzCN99YMq8pH7EybNTKx/C/uxWi3P4Zwb2ygdeajgMzHDt3Z7PX+/4C6P\nwnuqx/fGNAKfu3o61Bji1HBxmr3hbZtxCj0I9k5B9RmhgNpza4cHNhYti1Yc\nKICE\r\n=7pj7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ed7f32463.0","@material/theme":"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/line-ripple_7.0.0-canary.ed7f32463.0_1588781242577_0.6778807574492309","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7e42af18f3e0574f019361d9b316a249adb49b22","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8135cc085.0.tgz","fileCount":34,"integrity":"sha512-QFmT8VJkwku2nHrt73n8JfbQe4MN1qE3Dp6HkuzWegq5NkAQ/FaSzBs2vEGqixT7PgkiRrKM2spVRX50s7j++w==","signatures":[{"sig":"MEYCIQDLebRG07Nz3RjjCCc03l4yTlwfQtKKDqg5Sy5K2JgjYgIhAJmZP3IJLhwe+tYq8qT7Nhg5dJhX8QsAvNiS+0LbmWAm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxYLCRA9TVsSAnZWagAA7w8P/0ygvBRbHtxtnXfovFB2\nwj/ZbjRxNQ8OS6EtIqPh6tyVUaJAk4GvH8mr6VummXm8qecvAAPopSb5sd2D\njZUbFsHw00TfT7Wsu82vxOV7AcEw0eMxKt9KBEgNFGLMMoJ9ULOcvO+0PPY+\nEg7ujjlItLfAlxMR0Q2CRVj7I3S6M+NC/NMKzU/bHtQqZxuCS/MZcpKG3FKO\n9yjIR6kYvjc7/3HgKA56ULbCxJAmrIhpkQRk8LZrKKEddLdfT1jqMhMhBhLS\nfisDUQmBEPISe8dnRcsTjAFIkV8RxI4ly5pbqUUYK9+LF2RUICBGOHnaPX7A\nSbAw+Fl6NZ++ty80syNe5yCgn4or3r3flMvWsPN4dWhkghDMzveT7QcZQPR7\nSwDN0OEbrliFgS4r3v7yUj8rqBTYF6RlERwLL7XuozqpnHm8cNEX3Eo+66VP\natbR0tXw0uFUFs7VA0gZE44Pf8EaCcAJ+hEo9A9SlHIvYFGJvFw2YgpZqugQ\n6C+af9AmgrRSwmbWucjJEWxk/lNdGuS6xGDiNE4elqrDZh0htE7/oQ2XHkLw\nL+LEk+Eai6H1Cflvo0LsM2WGQVgoQMnWXhmbVQraAPKbDW9FKdT3mZXKFZkq\ne3UHtQ3lp6huPydzxuKYebYG+Heq3DPlmWvO++DkbpH0EhYaMuzVj45+LWsr\necI2\r\n=MRC3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8135cc085.0","@material/theme":"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/line-ripple_7.0.0-canary.8135cc085.0_1588794891076_0.02392671113154754","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/line-ripple","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0fb2b160390260f6f8c108037301e5b705e47456","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.deb212de4.0.tgz","fileCount":34,"integrity":"sha512-l7bQF+cUhfhgaAxJFmJUqwP9wiagw10FH6pwWEVXX/JMPUgBhmvcc3BVrHtNqL8D33bbjuQuQ15UAAkfKsKW1A==","signatures":[{"sig":"MEYCIQDv+EueA6CXhPPFpknsRxTwqqEyCS1kUe1OBCrRa3OZlwIhAJAFpakKnnJxMadJzpPfMBwt31qMD86auV+wmu2lD5eg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesze1CRA9TVsSAnZWagAA4wIP/3SlHd8v+taT6k66395R\nJJsC6WcB2hUN1r9GZ6LUzegyTlsFwfw6iRvwHzZbvcWnUz1eVx7KdocQLsgi\n2wrwxE/t4VdGjI3cJw4/+EIF4Z+47FcvwA8ICN2Fh/a0Jcx0HJQaIe7nAb0G\n2N0gSc2iH3GsEKuIwl37z9U3V3USasN03p6tX/vU3V/izZL/zot+nj8WD/vs\n1cVUglU+hS3GNjqUqRvrBSEQMyHDUAbiVwaRfaBEG52XDVc6lzWD3LmpFxet\nZSKorJd8aajIFafAUbc6mgxnDKgpB5f+00yDwwEMlUIf0o2qPvGwUFHTMT1Q\nM5WtDPuMtoTy+J6hfpWOz9+QnPy3+ireD1mIrYW1RjxDu+NHdO0RsYaHoqAD\n/vbZMHm9aKNBfRS8WzCl/EW6RDPhi+9NplZBed626x0mJUtae7lNJebrxuNj\nNCS/PNlOdAuoOBsvg+NaJz9QW+uo4d6EVfULqPcjLaFxsJTpaezscnuw6nIE\nhcNDtnF4VFG224y9iOF+yHThRZSss6YGUduKTDN8qcnge7lPgvhJzSQrF0RS\naR44NvCVlC1KaUMdrHeDkYpy1n/1WMCDmgrkIG3bFLsB7MqzMJ+Q0T4WP31N\nOt50YWsCScvQhLif+iTNxGBbQ5VpdZyLN+vjOb8H0xgZUO5xIDX3rOONczEb\n83iD\r\n=jGnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.deb212de4.0","@material/theme":"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/line-ripple_7.0.0-canary.deb212de4.0_1588803508510_0.5393144802501337","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/line-ripple","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0311fad7b5edf87d882123e49ea1c0a7bea4c182","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.f83e00898.0.tgz","fileCount":34,"integrity":"sha512-kcrm8hNefvYg4Gzch0/hPDe21njRASrlI6hgaPk7wp8WWxMTfbdh8f3KnPM7idI6IgSqUy5S0S3vKfmzKxsW3w==","signatures":[{"sig":"MEUCIDpMuL0YVUuDhzOe7e4u4vWna/IJQPbOzwqUPiQTsxwjAiEAs0bvE3zvXHOpPTQ3srvu+pdeRxbJsAE0aXrdA4iR0Bc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDwJCRA9TVsSAnZWagAA3BkP/3PluZW/SBjcBfruV4B+\nnENuk4+f1CRbCdCkNP5M386HYVzHbZdLiAjdq87tzjIJz4V9xMRH0A0OvdGv\nlkCFZBFN7MsPv/ux62Z9gIa/CtYLqJwYa52OvBPFR4iGPtGqGkRnjRUahdmy\nFBtYEYmmPOYi1bHi1b16VLMCcMFGcQuLJ5M5bZ8dOl3qgCFxWsqtO0nj4m7n\nZWUWadnW+/OxInEw3I8PRYS9L4pCWNu+CgNn70kHHO8i2Qa1MabAJUdSjSyx\n7e9DqqTpLWAWQVAPZP9PZg+qv30onE+h6R/3MCHMTDVNmJuEGpSKM3Xk4b8N\nSm0shuypgHwqW/zwn58/+XlGnGk/+qg6vNVkG2jMcbLkw3iClVyUt/ljn7I2\ntE/3AC4qqWZ4ZZHk04GCrzmzqpdMx+8/yeUvElN2NCu2pzQ/B7vPDg4KxE35\n1km0kD4snBebiZQS3Egg6ywlJjH4AOCCv2k66rTJJx+4uaHbjhpTD2nVyJrB\nhqS59UwR1fXXvNU5MahCMaEIwIHgzdqDRsDTBsTE0ZgzSy6inYjW70UBQZGR\nZ9E9bY3YsD38ki9crOR6jz1y2ZK96t5BockS0IRbPuYXXUQXZnwO0bvbCm4g\npnSWMxYHRy49+P0+GFCvumxr8XKLBzk+0t8oC2rKD3J/b+VZMBoPMSfMZ6zA\nRNl9\r\n=gOCi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f83e00898.0","@material/theme":"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/line-ripple_7.0.0-canary.f83e00898.0_1588870153192_0.17110187427197743","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/line-ripple","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4b94dc5c497c1426bf458ec69f27342003112d32","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.047e6b337.0.tgz","fileCount":34,"integrity":"sha512-E79qrzelN03fbMXTyCJcHbuBjXX+SYL0PUeeuW0B6tcefhOW2jCiXy95+X2Hf+/2FfE0RVL6DxjF3CKaoE1buw==","signatures":[{"sig":"MEUCIQC1E1VW5J54bd1TdWVTbY9G0v4BUQAs8LRJzVUym+lhZwIgKbZR7jcdDPztmUGXnGmB8kkKWrD+o40PxsW6VKv+3nc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetacRCRA9TVsSAnZWagAASYsP/0yD+Tw06u686ealv17m\nFuliHxq5Ky1wxOk1Fk3Jafag1nHFfoJB1gjn0Hm8xXRQ/WVR2ib9Qk9DwkqM\n8yesyxz7bRAEeMCWKPbcrTjHG6jXl0yX/BIRI8k/1tr0k5ruGTnOiN6a3aAq\neTOLp6wCElAhF9Kt/AILTMEFeUcZI0jfWgpDN/lEffA3DiLre8iT9qhyaLNC\ninbJSezwRujZ0LBJsr+c6lwu4HR6F75Ww9ugSeRxuooZpMdDa/b7pjlx5Vxu\nfU2R66QNu/oLX+D8fbtT5WD7Jj2xcDzA9dxBk8cjseOJvCp1wY0CK0gooX72\nUkHnaXwsi0T6RNXxTO+62+KmvNb33+/3UtDqFizOdLu58xRXOsdLEpUhLD/8\n/V6CktLxtEIq8DPvDG2MREKvWPCh6sH33zHsfDk6i/DEfPkOnPsXdJkvauQA\nWZQPWlr8Jb1A899nMecLF59ZU7N0UT4RzSK/eHfnwGsG8ZzDVzHC+cD+1m9B\nDgCiglfrMBC5EFfd6VZJSMZvT/XJnmWfLkXYBoEoFSIhyi0JsqrGnW7kLTAp\navq2nf7W570GWxAiQGRYHTJJl/I2z7k+jtURHFD46PMChAasbJRhuqcDxn7g\nyXAAq9jP0TEESZ2vzrvj8so8rfqyGafO3Pi8mBv7SGh238Bmt7C+jTHOaGpJ\n9Fzm\r\n=9Xat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.047e6b337.0","@material/theme":"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/line-ripple_7.0.0-canary.047e6b337.0_1588963088718_0.07877025147193195","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/line-ripple","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"39b44fd5e793daf8d65d7906a9fb84e50281f521","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.119e21426.0.tgz","fileCount":34,"integrity":"sha512-7THYUZTLC7zbHda4MIJItxC6G4tRpsxox13Hl74RmqTz2e+5OrpfsJmKTIJ7RweFS0Ren3WGmD50Ozxi7dSlwA==","signatures":[{"sig":"MEUCIHwCbpit9K08q+qee2yY1Qe+TH4gzt1dPm3MOe3ydcrpAiEAzKsvwv8e/iZE6FqQ2NDIr6pSpprx1u6MXVbeB62Uv4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb9xCRA9TVsSAnZWagAASZoP/Aj6GlNcl0DN/UwEoZuB\n28H57knILS+NGK9LZ83zi9y6jHQOAo2vWERp1p+YT0OALQi3Yjo7aYhA24f6\nz8AujFg4tUhv2vbLWVtWysDGiysZ2wB+jmM+9P5iuSuGK0/QPQgD5D5z8Den\nchDsvpbsuSmylk5PGpSpi5iPZLhhpOrNzIUFH+0rSNA+1IWZ8J7UywzgCXMR\nZDoFvLImO4WZw+u1AJYNgsWtDNn+jZkf6EKKu4kXRqsPRBFYqEQBRM3vaHXx\n/8/M0XhK3qhSnXwRYpNpGGFf+7MEGze3LHMC4z1CQ2BHc+8XN5lBAq2KUAw4\neX8IRkpD3a3Wtnj7/ZFwFJuXZo4k21LSfNAY9h7UEFuXQEE0WIZYrVO6GxOo\nC639Fk2PYR5yoU3tN5IoOwwfs2wfRr7cYuVlcomMe+pzfUFWAIzUBWyjzume\nxwnSoXuvncwbILF9AuqaHBp5hc20yioPlRV+hKXXU4slh76GX8CnqSUO843r\nDga19I+QEWCtwffJ0ziQ+Wc4bemQnFrZeCyaZh3FWmzpvsoGjB2XGLYo8KlL\ntkkcSftpnDl/LE5upFVdPxXxt9U/8Pdr3lU9g7sN1IojMTVS6A9m3amFpC1z\nUntANxkiOJgXJU30aqIcS/ebPRBUcHe1MktRJnaPJxHfiA95oDw6ffRI/F4r\nJjjb\r\n=TQw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.119e21426.0","@material/theme":"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/line-ripple_7.0.0-canary.119e21426.0_1588969329088_0.9975121672320924","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"953650d29ebda142dcf90a017dcef53d8f1b33e2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2f052d824.0.tgz","fileCount":34,"integrity":"sha512-eVLZqnGaa2pSp5P513CWieAOFmSWzm07VHCQ9eIjWPoikhWQIFmJ13MuTeEnfZkFFMjkgPgqw2ElK+GBSvCl+Q==","signatures":[{"sig":"MEYCIQCwh0jrevanhn/zfGJDhaQ1VKc9EUr/B5z0AxDB51AR8QIhAOtU+lVIUFtelZSdUF3YCR0pNRAW/wI+RqXb0j8Ypprg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcnyCRA9TVsSAnZWagAAD8AP/RhwnNdhvteFpfUrMAdl\nkCJ1OUKbGG/GR1xnMaNUA46+IqNwJhaeOIml0V/JoetxDzHsTm+0hnr1MpVO\n00seNj847oB2puQEfYARxmJY9jyXJuK0c6Tf3tUcNRW8TKnI7a02it0SacdP\nUr6lHAh97qVGb9wMqmogUaDNC5aPPb2uGEMKa3JMzDevXsRJNSGkexiEfdtL\nkQD7DZgkrleSyh9YCGL6EyIU8T79Ab5A8fcXCmQhUHJZgFODm1flyPCP7LAY\nphxT31W6rx9jSjp4u0defMKfmWZuaR8vbIUD5EHgY3SxOFplul2hyZNIHj6g\nQCnqQsRW8UkRnWRSpZ0fdrPmR7cShKz1HzFMSH9E1o/Yf2N8QLfhy0tx/fqh\nSEdJWK2EhzN+braAsq3BIY0WJxG3vO0aHPa5JRTUEm7fb/GW7L5IdgeSbxvg\ncP13bMtFSRgP2EaktVIRoMquCZdPw5C/U3fA1AyDqKCkImPPhusYAYGF+gxE\njvdfMLgFUPz3qJls+UWBw9UtOkJUPgbdzGsVhTKnP6fFth5+yRlJdzWTw0XI\n4knPlG2z/AUdobd0v/Fce9zMiRtUt/OcAOLoDaECSUb9iasA2KpBCFfiUtLM\nwwaM7JR/3Fe8oKg7ItcaeNunimqwJK9OkUPYNQNakZOMbPVuvTLCT7DO3BUl\n84b1\r\n=8KG+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2f052d824.0","@material/theme":"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/line-ripple_7.0.0-canary.2f052d824.0_1588972017494_0.8545319062163608","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/line-ripple","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"727175dbe34b7235523a113e2a55a872a431480f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.e84444387.0.tgz","fileCount":34,"integrity":"sha512-v6Gqi7/LHbVz5N3oi3+fdCi+zqE+zqM6UVPoRyLmbslpofL8lS+MOwviLOCagopS7KBWJxUjbWOU3wQDCvMXDw==","signatures":[{"sig":"MEUCIQD0iN6OuVz4g9JHGt6PnAhgqh2y4VhLtCSwn0TdlMKQ+wIgch/hjJ76tSzkw54eIJvz5nn48sg023zfO+T7f7xlqp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc+mCRA9TVsSAnZWagAAXxIP+QF/tpBJXWHkhyog2loC\n/lROhdVL6fDHuSjp4oFE9aPmaxEkHv1vrY9DvJGf4ufwE8H7DFGxPGTT/efd\njDLM4d+arIbLBmbH8WRQOdLFICHupoqxaJ8O4+uvQUf140BQpgANQY1LSimM\nHLj/BElD3A2nICKDpc23rzVenarSh2kXZwdaM7fHB5b+RN/XJ7vzVGtNsD5s\nH/36w6BpKAfkQwmhV+8y/kFAEIHMMnsyWt5WeZYl3ZkoHzJPdXAInNhqQJy1\n/SXQTz2ru1daGJVXMGNZYF7hP3S3y61bJkkjgsIynNmFaCS0QT2noVqv85B3\nl0KSmyAL/Xxzy9302PN73TdDjlO+nbB0ddD7tMV2cnaCmoiUn4uCcDWlI1yM\n4DKHBewt3VGSa5/OlyEgvohguCz5EZvtEukGVcy0bgLEFwGgTBhykzzRzA3E\n2pvljYS4v1S89yChXhrPQMT9haSPGzwIXThz6tm3HSk0wFGgf8X5vphR4sw3\n+yq20JrUgo05tGswfAg4JF1OKrofyczU4QU/CQyOrjU2QrU4lPDJOF22BfBE\nsEqWRUU8DYVn7rVl2qMnW3v3kWoA6fS79pr2yX4A3IXcAcdAif0yEWjuxQhV\nhTa4z8W0thYflA0EJa+guYi0Sysc/5IodqzrTOlpMEx0119/uUteNxlGnNv8\nijHd\r\n=iovT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e84444387.0","@material/theme":"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/line-ripple_7.0.0-canary.e84444387.0_1588973478369_0.07644607307656304","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/line-ripple","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"11ba4d406df13b2ae778be0282585960035e1200","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.893eb1876.0.tgz","fileCount":34,"integrity":"sha512-pM4JQL0xId7x2Q7/taO1+K7QBXvk75B4s4pF0ffCjPnTNlmK+BQT9M5NNnqkIsmBftK0iKt9bfmyREz65jnv7Q==","signatures":[{"sig":"MEYCIQD1yWjz261YrqHe2Pfv7soLQ9jF0qpHUYRG2mYoiA1K0gIhAPs2417WemiAIotO1R0cWvYH8hIi7nfk4i7TSZQsUm1p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV1fCRA9TVsSAnZWagAAJXUP/1+7o0Yyw54OHx/zIPC1\nQnAUIF1Le6X1JPHT7WNrpOuu5fVxo8iZlwLHtZp6+0BJt/QZfQxdMXXVwThT\nyJHMWD8xtVK0UtXnu2q36NioQCNvb8g+QE/g0LH8YVv22xzY7INM82mOUa4H\n1ULU1fUSE3WcSJ9DQxdh8x477nEyjHKP/buXB8Tct0enykfWclPU0NmLiXqH\nT5wxDa0hDeyId5CzxH8SkSefqndJ2x76nuKPX8lRhohIlQrA/gSWcKrUNDck\nlr5I191pockbkgx01qgvJ6OMNmQxk+udWbbwJUMWighlzHJjMKR2wMzH06PI\nf8nbJgU355owoe6U1X1lZNowAK+v4R6fhkm/Zwnx20Eq2kZuV+Sff48wydW7\nSJZK5jAkvuV+a2J7YwrSXaei4LCPQHNqz0W8ScH8YpTlMf2+kRV+ZR0AWoge\nSZkEFyEYU5BTKLEBx3xvDnoGWZY7iWIzlijB7P8CHRKbOoOJmmGT/giBhds6\nWosXq7SxGYmGvW6j+RibsbPA4GQs38KwMkl2EaeiuocD+0Lr2vjYE1c2FdVh\nGhZtowVGmfoi7M1cLqge9UmwN5jdbRh80voplFp3wXTyj31WXM1zlEcvQ3/O\nan0XocAbQDGsnZs/fvnpJJkDYs+ij84uSj6LA5WjitNVK71Ts1Ag0RDDBoBc\nYmD2\r\n=UFDz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.893eb1876.0","@material/theme":"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/line-ripple_7.0.0-canary.893eb1876.0_1589206367394_0.45127297174271597","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"414994d0782be6b1b18d53254f4699048e25d261","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a5aeb3001.0.tgz","fileCount":34,"integrity":"sha512-fk8Lp2BX24ICBKIWPdChLnduwFSmLuAHsAdz+TAjBw91oVH7vK1UVpmHqElhBLZEVBDvYjKNV9OusbNR2oi5QQ==","signatures":[{"sig":"MEYCIQD0vPQfMTR3XAideB3qvfgCxwD8dHlmqz/QfmCGkw1htAIhAOPurBaBlmQMqUe5A+y9FHuS1wbGRN9wJiRJGHz5+qks","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWEUCRA9TVsSAnZWagAAQrYP/0chWZVJQsHRiwqLuRIE\nNwKs8FEsE64r63GuOeyB4OOXmcM4fX7WE97rp/XB1JHIDPSbd+hl7e6XYQSN\nCeiEe0XHlPIPYgdU2Z4kzv40OAIHHjVy/IhoyQOyg544FRc2P8Cz4uGo9lz/\nPgEdYH7Z1gpwiZmKOtu6iO86pvHQl9HLS5GcXi5A5ODnKfjQ2CHaGvbpaKBN\nIvglNappYHn1VrRLPSi9igAGA78M1AKJSgjNoc9j98vKEbd56isxx5vqtCVH\nOKiwodooVkDORiXq42mOeB8gQoXD0+90Q48SFs/E34IgsNpcKTiHV8V7Gay+\n8RQ1Nzl8enP2fs5qN21Ak96+yJ45O9IktZiUB/Fi4ycHrBUy2nACjSV4VwpN\n9eC5Bg2Ez+8kdENWCEIV8nWreYG6RqTBbMW6UAQDFXsskrL0dlFeWVPvv3zJ\n6e37AKOs5BmeogYlzqWY6dMgx93kITt5kHXyM/I0qKdHNGwGz9lSbA6AihVb\nO+53RQ+IEwdmDxjaRHmu2Go+9H36E/5vRDqe66HTK4Gmrryh0TFzDwXHpvdc\nqHagi5hEEa4ufU5gSoQI7vRrcmzuR37GSghb1yltn3azrQf38wnfmIl6ppsf\nWqg4Ld7M19UWBMP36jYR6nYcI5Cl7L/GChXnB4ahZNfKpnlM0nLcdUDZu4IC\no8ae\r\n=xKEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a5aeb3001.0","@material/theme":"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/line-ripple_7.0.0-canary.a5aeb3001.0_1589207316171_0.6628364905086448","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/line-ripple","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1ea6d05d3bbe13bf06fc5e6a832e4cbf2cb0d7e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.610c68d97.0.tgz","fileCount":34,"integrity":"sha512-vp0XIGfOeJxOdfjRV5gHICEAymAsUZLGbJf/u9Wb/JlE9UyrFQzmY2UTpXJQGCI5lVawLaWExfW2UXbCRNBaPQ==","signatures":[{"sig":"MEUCIC3FrrjiAemodEVLMSQwv6DY/FJ56QqhAphfr3NT69meAiEAr2wFhpw6FZ36OMgjT5k/E2WweR/rGUwjuAlf88PbeRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuag6CRA9TVsSAnZWagAASXgP/RIHYKwdGTW+27AKHhHs\n8jp8dppNaK4ZXGmG2sdlncM2+taGJN0Egf8vQE04Xrhi1LYxQlIXrgYD3KWx\nFXstpPTUK3ViU6nrElVKvUUWZxlCpvpyYskQIw2JxwlwgsVVE3cg4uWzL+6x\nfL3Pz7gdJJrEA6iMa4JqL5Ou5eJjWsUzKvcfgMfGM3bwOZFEh/OSbxVnAFo3\n483lfSCYTh1F7MjOhd1YaCpBpk9x3/RIDtfANBr1Y4imORB3WFzDQ6faHRdc\nKj0pbm6jx14nqawXS6wdErxmZrQZ+djuz/f6ptVmqhyP4eaEE8+4bVXREcg0\nByS5wlMi3OWg1cwqyA3vfDCGhyzosAW/oqU9II8LTcj76W6wTiBZ9lbiS6mc\n0NbUzWNTjfypy/Ez7C4M7vDhYS0C1CFeRG/D5HtSEml067hcnXBxZOG6bkEn\n8JFdUkczoN8GpZ5syAMv0uJLKfei5mCSEAzJ0RF6Ho/9E+JpLDk7GEfxfPYv\ncpvvTSuYxFVhIVpgCFZiGh9vjE2ay+EfDsP+0Towhv025gvwMlKC92plk4e2\n8EKsK5RgiPRCJUHUeYtPm2ughkTxb22xf/QfZ3q8bLAldcIYCRrmRV23pTZt\nrtavNoYdheWIXAlGwMD+hcjyp/TpWAeT32YJ9fy+usGfIWOHtfp+hJ9vFiV7\nxvBm\r\n=+ans\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.610c68d97.0","@material/theme":"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/line-ripple_7.0.0-canary.610c68d97.0_1589225530079_0.29332211794613494","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e748037575ec079d8153493fe1a22a39bf7ee784","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ed52af767.0.tgz","fileCount":34,"integrity":"sha512-vjzQONVKQp4jMLHrUX+j8jENEND82Hp9rWJsl8w8Cao7DT7tNbVIOxqdYeXouBzGev6zZ/oaCGY0sDWRXVJZgw==","signatures":[{"sig":"MEUCIBsS9+CB6ro/WcP9BfYJwOlVqSe/SBw7f+IKoNBPB0YeAiEAxbdlwd8Jiz3K37RfmILDgiPErNTcq7wSbL7NY0qA3tU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubUQCRA9TVsSAnZWagAA08gQAJjKH6pTThWt8tEutH7H\nNwepmmE2vfpJfddpIK3a5SM3pjFeqGvuowkCZkuvLb+Q7djTYBVC/6sHoSiE\nVKt3l43buBzeC9zr9a/Bdy429kSanlp+ztJI5zc8qabArjVy/XZg1bJVDVdT\nOMNiIHxFnHsKcfnar49CsIcpMgwqNerolhtrS33JoApVaCLaVtvOvh04Gysj\nOZuOVIowxC2uEdY1s6lKXi9fAF+2ujJ76qk3m4ToMn41tGCepC88JH1gGk/n\nziAIU1pXYBi+03KKQvRvyqriOGo2dtN6e9ZbpVyiNurnvBYuHcqNJ2OhuA8S\nFR/gZFVRKwTvASUtjkILckV687A2SOsub5oJFJfBlSd3L7YJ7Doudldr95wm\n6LVfFgpUicu+GHyNVZEVLpXEfZIdqJKdh9O1FVhIrpRm8yqMca7l8v2u86Ba\nRkAYQqPsDDGZyvIilkwJOPdbI8oynQEafTlLnAqph62OLFjp5EL0nz51ekcC\nyLPPiKiWZpN1vOWzOIh6jYZiSQ5aJIrsCAF09MNVlHoAGd//ruG+zQ968PX5\n9k89oj0vvx+EwKhLmQ9LCphneEgUqXCam/QAiyC6EOhpIAT5qSXj0mawTl1v\nnDKGOe7SSIjCkt6HBFvBHBBiFc4ufn6RsafN9bkFGgPMRiXOfQ3CRSfj6aXE\nvGrb\r\n=99Ul\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ed52af767.0","@material/theme":"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/line-ripple_7.0.0-canary.ed52af767.0_1589228816354_0.7621996530242856","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/line-ripple","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d65724c0218e716f4783acf718f8ca03f917fe7f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.058cfd23c.0.tgz","fileCount":34,"integrity":"sha512-+lYvTlOE0/8EsaijjoG7nYpNxC3WJ0kxf25Ck8Zf22rH34syktV+xvxLFWcG4XCHNmkGP/CNkQpnlAkoDUM7Sg==","signatures":[{"sig":"MEUCIFOaylkivlgC49NOduH0z4D/lZ4sGj/cn13l87tVDSFzAiEAttxnKE1JIZoig6O+dYTtCcGTh8eAHhD7wwz7ddF+Cb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucKjCRA9TVsSAnZWagAA8IYQAKCgCV9Zr65CCOMwkEfi\nUwlfMgLpBaNDIDFoizzIgJbPLz/xcJRb4gb9YSS9ce0SciyEbotlLnkr1asW\n8MgmdHqkWzKfKVQDvgcwnQ08TwS+2TgVYmIi7rJ0S8MF7hgoKItpefx2wUol\nKHYodgcZSfGaS/rx/U5U3kU6RbrXwGunNMxLpJ6QPNRc2tbIRyqbXHad/o64\nivrTNffH3yYRDjWIJFKN8xub9WAxZEsBf75OPfKcD7yaEz3rcewS82DRqKsP\nkbakc3mvpAGHSoIXIIWdXMqJHUvIOs+WkchM9GcLEn1+Q91EgGpc5844Ugip\nYpMIuqT2T50p/mgnP8Z0FxadZ0KdK67TSW+vP9dGrx8QiupnnqTDpPN5+4ur\nFdUhJNF0rKPxQgFcwGrLeBTJ2QYU0czGHVI0YDDB1kfodRsmg5qsqnItt6nD\nQV3aNFd11ifXTigCN2F7Cwr/TkdHGVIua+ZWkU6B1w59o3chVfnZPbv7Ldd4\n5NJdXVzXMzkVnCQwueKG2Vv44QYvJSZGwQM/AEh/AAeCREH8CwfOPJvLqdgz\n6FkJcmyOfEYmFz8IfHCFG3IcBV9dyMb2Sn3Hf5ObPPqO1h4tA+PfPrOw/qlj\nmoyYNm8lMlNdn9NesFtQsmF7AUc2UTOCVmdATPzcTCK52qISocUuNEC7pB48\nDDw9\r\n=DJ+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.058cfd23c.0","@material/theme":"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/line-ripple_7.0.0-canary.058cfd23c.0_1589232291021_0.5959177564876541","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/line-ripple","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4b1846786067ebff496b655a96ca84dbb900138f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.0a371b4fe.0.tgz","fileCount":34,"integrity":"sha512-z6g6J+97vU8ijbYa1bqtkUTL76WcMaF4mmayRDcd+37xeHKBrLl9xz9PggKAQ4wReAQpoW3seW2kcLhQHCNVGg==","signatures":[{"sig":"MEQCIGy9CAhMDT/hxUuRWjJPhUQO9zVgbAD7FPS+D5I7Q21oAiAos4iakbZJy2Q6riE9guahhL1vkPYm4TN0+D5E0lxVhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy6dCRA9TVsSAnZWagAA8rkQAIctw2O8Amc+y1C0kFm9\ncibHIbyvSqMJOjIqoimu/JSyVo7LYclJ6msnKzPdi6AnvWgr/47ev7jic+0u\n1BLUf0ndU6JggftPN5aGdxq/6elMIrnAYC8L4Tt/qMcd2ANuqsQ3zzZMfcix\nea2075hG5CKaMbz8HCO4IwpYQKrussFiiU30hl+4nzwXXOwu98enS6XNe/pd\nMPQ6M+ZtbUUxjSPk+5zBnQSrjhB7zS4MgOps6J+F1iseOlwRDInxKb962ACo\n4SR8Ff2obhwsCelGulVHEI1st5ilfmgPjNXJ/Gi9NnIFn6YqoUScg6eWfonr\nuEiykHNnmqigshMFQqFzvpQX6Ps0WKFNF4ZMcVopAdm+2cmS9/2KWL+haRa3\nPoZfRGC1I2l6nTauZYqZ6IVxuJaVMN81jdT/Idv7wbxtD1YTVnj8ZDfKsakq\n7X6OX5zaoK/0Q2ZrR5vKR1C/beA5L1nDcO78J6xVzuB+lBCtQmkgktk4Nrga\ngSOHIoNqm1xM3LhuqYCJsKFotCAoRl0/RB22srlGURkBJjM1eDCuBUOLD2iA\nPN2+gshW2Z1oLZVqUFjMQMyiJ8S1apzkdAXEqNXAgcQdo8G8cxuoguwh0pdS\nm2qKRZR1T94u36OnGzuFhPE2n095FHdAUap1hDD16+9xoN/0H1Yd/l0PSzVn\nqqxv\r\n=AYtk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0a371b4fe.0","@material/theme":"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/line-ripple_7.0.0-canary.0a371b4fe.0_1589325468167_0.9119567693468416","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b24f6ad5ef861d0329a957e5bcf6161355d71466","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2139200b3.0.tgz","fileCount":34,"integrity":"sha512-3z61BvIDXbqMWQdQJw51nrBILgnGZGtPEjAqYaXFFBArcBYT1z2hDqG+wLueUc18S0et9LsaRXeJ1EGSdd5V4Q==","signatures":[{"sig":"MEQCIDoilOQDbzJ1FzygANsYsQww+SWJk/2gXyyyj9HWiQ9mAiAjhmiDZhNggpdHl6LkocEe6DYLExxZkSGgE6jcQ4x+Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAhjCRA9TVsSAnZWagAAWvIP/3cfBJVpim/CtYHze1MD\neit9XCH8NbWePpiw2I6tiueJx/nXiKwE/uXE2Juu+LwVXK01fiP6MW1DThyw\nq9ix60vPfQguhOu5gAnhU1MyI2mUF3xl5yK3JoA0T4D2+ylaT3tyzZ/imb27\nQpKyNJQJAixAVlF3NG7hRitxzbdIUhs8M2q56nE0da644DMBryFhoPCLDoeB\n8XRVYk23QNgfL+LQOUiQRCryky7GaTtBZ9wRHk4vn+90FHHKlJ4PRh7IBkkV\n56IaBjGzG7Gt4yC2A3oET0EM+UDrYFO8+RvNv0Zbd73FgP+UJiDbKXvlprrL\nTI4LbsUOWYjSrNMmIDm5BZaf1ruaZWWW6A4jJ+FEimbLtLLfkXqVpnGjL4W8\nh0VBeWjwAq6QPDqPp6jXNNcbKhqXzSfA8jZ4cbyI3/XQFoh7kDFml2XAB5z8\nPIDxbsendSvIMjAzY7M/95OfcCNCfptDrEPFnQwwX+xmTCI5MXtNR+d9X0Zh\nX4uKE3xivfv86SOb2yV7nS0/b5CFpISquYiAwu5Ftfd/fYVmi6cqz/rxhmLK\n0FYQjyrmY5IVqzugL9fT/8S3xRSTiVXvSXxT6tYVCqpi3Ck35awxP19HOnaZ\n+y6yWAZ0uc7A9jm0K2CDkItcjhB4i/CRr95AD3dxwgs7xsBH9eQ7c5nwpf8h\nqQ0s\r\n=ZS1z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2139200b3.0","@material/theme":"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/line-ripple_7.0.0-canary.2139200b3.0_1589381219410_0.8230984051152921","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cec8a5281a9d7d20c6c51ee9e47ec8b4140bf422","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.744d751a0.0.tgz","fileCount":34,"integrity":"sha512-6MSYaMi29I/DLWAVKokT+YR+D4y6L4+n5xxqkgNR0ajGtE9FdKIC44WGYvg7eieweiQNcsfaKYHZkkO64RtlYg==","signatures":[{"sig":"MEQCIFqXahI4fJf517gb/zwl438Ww1rHiObPNLI5MTuNbbpKAiBaWti/dYu93Lxh8Cq44wAmHox91dZg1KjnZHOagTd44Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMw3CRA9TVsSAnZWagAAgGkP/ArfG7eqY69+ut6pA0m0\nlZ7hrPLguAqI9biJd4iCMTYEEOfxnT/qV2a9/YEIPOEBCeBMrKRsLvdkKFXC\no8Id0AQnfVJjrnBpjNhl8VFyh3EtNOo3u3TF5+tFuG3EutiEsE+Vo/Ol+zj9\n26cGxT9dua3XOo2W+0DqNonWz3DrtR4AcQUTZn+7soNlH9sEN6PWI/sBiM1d\nhVKPpV/cJQROKpTT/6bYrhPt8uNzW8tOrxARmfVNBhtz7H6obEfkKIghFg2m\na6DKH4paO5v+omxHRAtCPFxihBV26gKNpEyalZOwChXFvKNTCjrJfhw3m691\nO09DY9Dz7C/vY3Lduu/1vfNcAc4qTdOonjIsnlaR3ir2CNdSEZQrHn3qCMTw\n279zn/1Rz7WhRQaEB4RJ/zp009CfObs2ei/tJYZDhmNV/c0S6pB5bTlBstiA\nMI3C8sN2OQI0aL9MZl0DvZM+zy39Td7vWxNybBoNwtSGMN97xqgOJS4D3EPH\nn6BgNT3hZIAaKxWEvHtMJBA2kN1UB1jV6vwffjBpHhjAiHziK0e5QxZ8zidx\nBEZJdhbfRAGTWD2oabS9qV3jZUovkx3TMzJlWfvqH9lqKI4uHOH6f+Vx55dY\nSRB7Qvo8hctaYdDlHFS59vZ2DwOxEGyJtFsb2Z6ySDfs7QASuRWQYbOgrUtW\nPvw6\r\n=3CRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.744d751a0.0","@material/theme":"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/line-ripple_7.0.0-canary.744d751a0.0_1589431350566_0.3739726880821612","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4cd68939ea924d1c6f577239d16b88e9ab4b426a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ad0c0c103.0.tgz","fileCount":34,"integrity":"sha512-MIRZnejb5/fiX6yrqAZ/VWJ/n6zBcCjQ1hFLC++ZRR6ptWYZVodsSgMaQt0CrUnSM/KGzcbuFdZ0JiE1Rsk1Hg==","signatures":[{"sig":"MEYCIQDoRahfb9gfEH4jsLwEXHYoFtZPrHqPhNEjGCaQCcEccAIhANy5K8++WZCS7WwgaT43+G7tJ8RC9lT4Je4pRqutdgog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVrgCRA9TVsSAnZWagAAziEP/AzuYNpCkZJs3AlSC54Z\nD+duGQWL6WPCucSt/1dKTTfXFUl+P/BTAeSLKnGi9OpPPtrgBA063fIsF3oT\nIVC1w60Nx34Xeij7vzvv0tioue+9hJEwVWCbcV7gUDqmKya8g0Lu+S73r2rT\nOA6B6JM6H8UcQRb4f2oSeAbjSkbRLOc2Tlppro04BwNdG8KxFhZ4U2m94wsy\nmmxj/bu3S5N9Tp+v2Pb1d9tj8JSVbKMuTUIz0YccYGbsRaX746cuQPK+YaoZ\nzMss8iMCYqo08F61ydia4ygWC/wURcXKmZEDFgL34XotScAh/Uqbl1yBKtKL\n6j5axESC7L4Hn06AyADX64bry+s89X9vFHwa5hiuayCCGdEvfl4WB7wcAYcz\nCu9Sil6MS3VNucdsdDW2saRaTSydvBdE64pFafoEGOou8OwwXWv9MJhWRwv0\nB0fbBYqHvMD9iLrrADRAolffWuJk42hY/OiO84R4HlOYU6YccNirgnHC7z1h\n5ZJwtqyEteu7xlz+sWfAdnxV5nDXcxI4KGxdsj5foXxBE8LGf03/UiI+yIVW\nLAcDL7s91DQOQrpEJGCuvbvtwGTyCIj7THUZUH1FXrCraq1+yrklQJfFdnTV\nvG9TX7qZzPWtmZUcefpDEG5C/1g5Lg+zljS6ftomq0K44+BYrSv8TeT9/Xk3\noET4\r\n=QTwB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`color($color)` | Customizes the color of the line ripple when active.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ad0c0c103.0","@material/theme":"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/line-ripple_7.0.0-canary.ad0c0c103.0_1589467872140_0.27738912025733553","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3abfde975431e03b336642ecae163fee5f4d59b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":34,"integrity":"sha512-X3rW3q4CglEXsq/XF5jPrdnWcdV8IVI4AjQ01QpXvGE5PE7eUhERpsQo57CibshMdenvXMTIiPDMJIW/Lh0bng==","signatures":[{"sig":"MEQCIEZDraPsFeArycI99ImEavIUshn1PkGWFokt/jELh3/pAiAtQQZFnNHsRbQVITdTnblKD2ZOcy++dD5Q21XC3VjJlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsuTCRA9TVsSAnZWagAAEgkQAKJuVK2e8TFfQmBL/6Bs\n9ISOJdVqzFYNel7vhsDrKt2XuoqxWY7X5lR3gA5XzxwomUMakBoKnqjxkieh\nX3k7P3X9w7dAwZA0Mh+8Ifq1S2vIslta7oztfesHKLF84cpLgyXw4oCTORyv\nUhXQ+V1/gvgvP8S/W4nUjydF2Eg6P2ZDpZwwCbz2Y+aMsRem68FeV3g+nZLe\nN9i5W8lRrv7K7JO6uzvfA9z1RSRFM/FfK7iYvS8ceQsSqqJQ4qEgs5FlAVIN\nM5d5bTFJ7JVVfQUgbAMPCsMu6UgU/gEGjl/55g3AWO/THUOrQpDbn2ozn+rr\nu0EJzHUfYix+zode4hjYJlPlzyb8MeJ0K06AvNZszWwWP/23IMmOUiJdwspQ\nbxbbGSnMVe0ch4h479RwbyJgj3liYBr9FUBZGzOb3feJtFt3LaTaQHDzXtli\n8mZL+qZAlujdv/FxwbFKnv7PG3UqVOkJEt0NPUqgwOINgU20wLPYEu5HEWgE\nEceYBTWdgW+oDQR99tx/cvG/De6/PiSpgExG1FxU3kQ3kNBjQcrsRJ2Q2zxM\nlQAuRPZORhAr9kSQ8DWexU/N71c+2fRebv7u2Eo8YTYLdA1Cvq356rau0fUj\nNzLFFoxJoJ2wKv06+ctTMLZEYybLwZIeLBWul8sdP82mGkqRHjd5YXWq7K4k\ngPhK\r\n=9lMO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/theme":"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/line-ripple_7.0.0-canary.fd8f8f2b7.0_1589824402651_0.12471519991739832","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/line-ripple","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"adc0243119e98c48121b1c23407ad7fde558b5fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.730920fbb.0.tgz","fileCount":34,"integrity":"sha512-rX19Bze1B939neEE2Thyx6VYhLPvU5gGjAVadnmALa40AYTF/gE+PQtnpozDpaEEQzfoY4ShGMT5UsSegiWo9g==","signatures":[{"sig":"MEQCIDM4j5YrL0dPCPHRm4Kskv0bCUzl7sphx+EdwDxw9n+XAiAbLDghFnu7H6ZTl+qt4j1hwcFHYowoqbWRV/UBB/mTSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuVxCRA9TVsSAnZWagAASRkP/RirHK6wEohNF+0bYUfZ\nMyz9j22ZhOjz+i1EHwb46AyorIf0qyGigYJXTR8i/dtRKU4nJZv5D+bpjCVg\nT8bAaTi++UK1qB5a1WJKwvX/sa8sT7VsB5RjlZngZ8EmZUcqjM3TS7FGygAF\n8MQYQS/szBprrv6rWgsRHXC5oqLRmrtaDeoMzQsSXFfjq1cKqY+6iz9tc67h\nDj+j0ry6TU39J42ndTbhgxhNfmxopnuo7enZcRoaY52ojVPqe2EhEt6dz2BS\n74kimKWOQ4+6FNMDcpqOtApSv93froMs6D7+6WdB5ZleehoGp6sZiblb1rOG\nSdWiD3B/+Rbd8oirRXYbf++JKXI819lWF1c73fSu9KWRigXmgYB1FwgJkyp1\nqORvLb7vwFKTqAVqbJOM0FLEuzZl3geagMKQ9WcP2pCXG8lPCi085LBdCDyM\nK+JSnPAzCuY1Nn9k887HRQS8X+mECkxKbYz3u9eYPl9LBhER3VnGxx8OTREV\nxvjiA3A8bWclJBY4WW38JkfWKwp+dKrvzPzd26xt1BWaCvVQA+x8a6X6xuaB\nwbeSmdUru2T1ooL/5Rg9IHb+wIOLd9qWhPFIrpJaJxbNJ0gAuNv3ts5Sb3a6\n3tS77DNtL/FkFK5puwn6Vf1M+HMsyjx5dpoGtsv9jxPWA9gzY2HzSOiy8gc5\ns1Ye\r\n=Dxi7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.730920fbb.0","@material/theme":"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/line-ripple_7.0.0-canary.730920fbb.0_1589831025181_0.3365898972798149","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/line-ripple","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"045643516556c5de5a8702b246a0a4e655f29ae0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.bcdad99bb.0.tgz","fileCount":34,"integrity":"sha512-jIBFEzgxKjgxLvYrDumFGOnBnLoX0K4tZrN4jOtMDrzTJ0nm2cbgA/qIonZ4T240TZLACxeP3S+oB/qvyiDVIA==","signatures":[{"sig":"MEYCIQCHlLBDr35nUv/yR4FsfZPr+itQChK7R0JHS9MSoQsnigIhAOD7cTg1mxfvuxBHpeWTCVqhAL+ZPLINawJ4nnrg5GVc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew0/aCRA9TVsSAnZWagAAePwP/2WVApizL6CqYCWSQdQX\nsB4gRrX4rYTB1/nP6DpKvNaK4TBRtBfa/NJjcAotothkGLl8HlCOM8YNIqKa\nhfkjNIJyuu2nR78VNpxdz2sxXIDP6QxZFdJPkTiihxPkgDYW/Em6ugWICEoD\nSuX3NL0GF3dr+o1fV8ui2pT4+UJuyPyDvd1KdMGdF2z3OTQYkfy5jSr1RZyO\nsgd0ee8jQk4sMr/Hm3etibVsp3jVMu/wy4B8eSXqwnAabMTO4S9uyAhC5ix+\n2VqeKBPnoBINKnrY0LoU/HPB+ZAImb/EXqP0lJZnqnXZFVnqaFz/OxXUm2rA\nIWmWxjy1K6E16iiEmrVRF2Wgj/BXexKcCeqLeowyFs44PeSxCsl2vyZqLpjp\noNtDdAk3Qq1a5V+kWc7w/FTSYLs6x/bXMynNs7bwgkc8hUHv4NyDyiXEyRCJ\nBPUZsKOv3h/WXVu/sqA6R3rSGhKvXqS1+23H9VT5PE8MaYCIDIQNbgPMuRxT\nKSsjjNIgEH97YbEpeFsJmVoa0zKtT092Ow3FOpQJfO9HmcabDhBRNhH1/YV5\natL33+x2/uW7iZ5BSp7WdQoqmCzqFZWxwQ8Eel4QKOg5/tCEJKHJ5FWX7lSU\nMhePLFpXcQrVeqVi+sUcD7CcwJzJFn5Zp9losyA87oFoEO7pA9sAiWfPVNOW\nngLH\r\n=JhEu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bcdad99bb.0","@material/theme":"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/line-ripple_7.0.0-canary.bcdad99bb.0_1589858266516_0.5290547089461453","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"976ae4c0b60e8fae8d247db3b5a93c21e83b94c1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4497b86ed.0.tgz","fileCount":34,"integrity":"sha512-zJny8mrtMPyLQFgpDKf0lKGN8/14XGrBD5+d8jZie8+YGzpdL299wIxGU9MdI4pcd8MMEc+TNnARbM7jC/e3sQ==","signatures":[{"sig":"MEUCICsO3DR/pTySWSFZPfDYQq8DcCC/P7/QGcPQ7dDUKd6iAiEAwA5OHs7I98Y2l5RlXf+S+Bp3Ji9WdsmuG7moRuWdVKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1eHCRA9TVsSAnZWagAArcwP/2tFi9WDpXa2FS+w/MMB\nqTMk8RfCeJkB8n/1XHmLOCmLy7bjfLah7BQ+DOzv9SS5zCUGZRMAXs+CsVwM\nJDYVJhSieivohS+LNfl8gZm2uvHvRX0QJTorHLEGGssD4lpFL4vd4T9xdhLE\nfeUWHbVe3l/0nkgtR8ivZ3vnA4QVf1W5Yz48Lc7n7CxBvv9je6SmD1qAN6oy\nMrdTRcKlMVl5KMMSiLJdw8vzB5Scj0ANWCUAFmG4k1nmxZQfionxJdvNrTlA\np+vo+ThU1CC7KvAfOwYYdX6EW+gjXwexE4W7ejBLbzrs04oucIygR9KU7J7M\n9hXT96ilvIziGee58uw9rSlqGMwIBE+cs5yFEf1oD7pGSEibjilCNvnNMCPr\nSkYfXh1EHiz+z0QoHnL+/VKgcEn6v7M7BDXEihiSWfUEO4iTxg9Pc4rpGO0Y\nRm1gg9FOQIXMVSowJgoai3rAqWLHQ6ai3rAzYwe4FvKF739NxtaUBHv5BGPD\nyO4Kuv0GQJG13/PlAjIzQSmjRqp2Tb8OG9JWAiQ0K2XSKVjNro3JpJqavhR+\nlmd3L/cVGKts4kynMFInN2HUoDVej7TRWnYUOzy1QPyvLyZT0BY4eb/FJNks\nID0qE45F/QHK5IW78EOMry75xLpmxVyppcxHpdcneuPZjinZjY61qmAcaHLw\nHfq0\r\n=ezqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4497b86ed.0","@material/theme":"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/line-ripple_7.0.0-canary.4497b86ed.0_1589860231345_0.6918576213614516","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"58dd31e7427237b6690f69804525fa71a2712943","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2e60575da.0.tgz","fileCount":34,"integrity":"sha512-gEzCWeerpTF3FfII5CPoS+IOYF+0PGW3+jkZh6fdT7gEqolfF37+VqOUhX7m9ypsOV6f6VagNoT2KJg/PP6Gpw==","signatures":[{"sig":"MEUCIBHg+/1M+JZcpQ8/wvssBNPI4kQuVAbDglGTdc9w2HOOAiEA+phKWi2Lk5DYgu5+rxd0ssmsttNuAy/XotTdU3pytsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAScCRA9TVsSAnZWagAAfqUP/3pCG5areHlU6qwVUt/W\nhxdLCIKnOknXqxQJ21vrBqMfyz6YjkyadVBlag72WrY2+/X4OJpa2NbGoO97\ncQo+V5BG48wZqRypEFaax73+XrTc52p2+oHT+YWvbUr2OApbZdczSkfvcCl5\nqDaEDBcgBgnFbWkZzx2ujroikj5m1Cs5BWXa6DLPbbkHJyAa2oOhAdYU7kkr\nX3Kh4517ddr8h3U+rOGKLb6k9ri6idgXuT5ctNrnGZqv2vxTApUFywV8GY8B\nfZT0BtXMtXXWmgTreaOhXDB4lkmhR42ykwck5ZAIJ2drWmde1k0emAi65uNL\nUpoPOp7ODjUYHaNUKbLbc+60AQwOlloI/+fv62UmuMTTLdYZrc2h6vJYeIdk\n8D4lbj3gzNZHoFbglSloq4DhTZSVh9WcKd80ZHoH2jyhFlG9lrXD9t1Cv81g\nbhivpznN/fIHYaOrYUEHbVUS53t+aMKlsCosUvkxyAwdd1FzGvw6mdle3aGj\npXIizrP15uvutCzMgIIbUuxYF8gQfvf7UKAYNMGS5w/y2s1/RZKXX30Ywtqu\n/1N54+Jx3A0pflMIQnWuhCJZrBeXDm5FiGOub8Oo2qMaP5nBmwMBJ13EV3Wh\ndW82gDgT10+LaHsRMtuqyb+6B7P8/9yfupwu7TPieVwMYYmqoe2tQNVUnlPe\nKtWM\r\n=xJmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2e60575da.0","@material/theme":"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/line-ripple_7.0.0-canary.2e60575da.0_1589904540132_0.6393399254804375","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/line-ripple","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"952797c10d8a757890f37e5a36795441ae8582b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.e3eacefcc.0.tgz","fileCount":34,"integrity":"sha512-DRfzgXD4kgoq0FFDXxc3b+NNWydPA9LQoqVzUZ2p7QU2U+H3C/W2LENmK4msgLx/Libzl1ZjWwPdthi83NIdiQ==","signatures":[{"sig":"MEUCIQCpQhlP9JM0w9IWC1XhwM5Otfrq15sbU2EjmI2Xn4KQXAIgScyCBki22/1wUuYBHONQtwd2eeTQV7+7Q4QQ3S6zILQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBluCRA9TVsSAnZWagAAJVMP/3ioFHfm7rpIz0BeG3M1\nEvt/oWRWipPX+GTNbyBYhTRYqbsThjE5fa9zf9K+Cad3YUW2jiYkyJj3PZc4\nW7Tbr8Nx0t6wlXFcPnNf+21RktLAxrPLKpoQa+qXUWQGkqwLfGUuBer0mJwc\nKs3SbIGKNZMy08jHP5oRVIJjFpEKoD68w7Pt1qaDy+xGF6Vtc4T8y2qZw8Aa\npAVtH7BQNWbtz9J69K7y5LNbAyfPoEEWjxq/wnc+Vuy/Jlfu0oosdSzKLMd5\niec9YfdXAFfmMMawUcy9nDhN0lXmgHLo7c8m1VfDyaF9VcpLu+Ig+SuX7ot8\nrJvXTD276ATAG/ARX29uJOi/V4zpEoksFdZ5HNdATHqVHaZM2EnpKexuPeCx\nl37htlNktDC3n1ZcA5UzmQ68I1ejHWjdn9RdFgMRR/V/P2cSWwVuBiare3o8\nE8Z6HXbqb9L7M9KhC+2FkJ+4n5sRMNPer6nWpk3hc3KhyEwvVYablaSl4GN0\nSrkSufirwS6qf5aNP5lVJfSYd0Sj3QnZDtgcWCDk+fWKTyBAUBNSJr5B+Grp\na6jyYSj4GpFSEHpcAzavWL0slbssHcZ/vmG98qpYk+NIBr5AL4Dx1qKM1DiR\nSATlH7g4eZnGyOTAC3gAInQAA1m6/diM4jB3RYtUsn/NIVl6V1Zgs4mIsIDR\nGH9P\r\n=gvWu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.e3eacefcc.0","@material/theme":"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/line-ripple_7.0.0-canary.e3eacefcc.0_1589909869972_0.812461581559877","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d2cbd4a1083e6c7f190a4c5e44252dd5b31e9c33","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b065a4d2b.0.tgz","fileCount":34,"integrity":"sha512-OZWe0znGMD7MOLQVnZK3VmjCiEgSRcEntl3IfidpOHqH/s1sQJXMpdhQOSmSU6Nr7utqUqmk37hTpp3+1FKvxA==","signatures":[{"sig":"MEQCIEwCZByWMcCNI5hzJYzg7RH+6uoYfAxOVe1E4ZANIjIQAiAskE1ERh020c1YcmE3TSpV1hu+1S4bU445XIUW2fiF2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUBdCRA9TVsSAnZWagAALrEP/3eS2y76cSt0fHoWsZHs\n9tk4gUHLxvQhddsfLxGECUQHXHwsUOQh7iHC4ye2CzsFwIg83ZIf9ay+2vWK\nIoUhzylKQshCVW3YZhIaUJdMn8jrdb6RkRzTaYAjSlSrB+nzKfXtdtu1dKo/\n1pzTGzZkWbcLK0Ul2x+l7wExxzzfzKenYh4vsmdlZL97pH0aiaBbm1g02nF2\ntZdM1chKf9zEO73Nr5ArCXznahxLk3Pg9s9P811eI3rVPZ/8yV8Z6azELOID\nWNF574H9VEwxEQO8GJbQDx5El2hYWUAJP9hzSnZs78vTBMnXVFXNFQr6nYvQ\nyVD3yd0cVAWDn0Gzl0iriGDQTwm22JhPnXsZ/4w3bASR2BFlXF5mdfoED/cO\ndsVY47WoBgxfgPSpdX6u1FfhI0HWq8lCWjYiAUHx0ZKjMuNru2ZIut2sCowB\nWCLvg6oek58QRu+SGyg7B8OTNEGA8OimsRBXSwXo2wxw157VMaz0FlTbw6WB\nDLhLfXnSJZ1ZskJo1zfmF+UmZCEOSwguz61EwKsoZTw4ETMr+N8/zImCgw9m\ntPQWSFHCE+22zcU4KMhHEMCcA6gR9HL0lqHcLlcZsCjNZVbC2SfmHYFNoLAr\n1OWrfNAzySSMmNDFX++9ChqfXPzh/whOQCY9QwMUsdvDKKShlJJaWGAaFzYF\nA9Aw\r\n=J7RS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b065a4d2b.0","@material/theme":"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/line-ripple_7.0.0-canary.b065a4d2b.0_1589985373252_0.19430888071337327","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"576bb528665934ba5adba13f60b379a7ec58cb43","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4ebce8d78.0.tgz","fileCount":34,"integrity":"sha512-iTK3GYrRXmSeB6LnCjSVunGdYFHtaX1lbR9rSeDBXcccrKzldsylyDbGYYV/1U05pKels7Yi/c4UCaegvr/lkg==","signatures":[{"sig":"MEQCIH2p6AINVAK81lmtr4oe316LFvOFWFU89OaHlZ9GLb92AiAMS2sRkqu8LURc5Gd5cjEjwB1cojS3qUELyx4UoYUzYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZgICRA9TVsSAnZWagAAhG4QAIOKM5uaZmFosCHUernd\nd+Yo1mM/QRAnGqyQXBEvy/lqeD/x2TVxxdYvA7eH1wG0F8nS0s6gRrYG1zpl\nspI7/MItEn4PAgVOdJmSJY07hp4qW33TzpI0hekGN0HQ/Dox3z7BE29vtSph\nKtJNGN8xSRqscKgth4lxzM/lK/0PzKYWpwY04wVrE7o6ML9cPddeUTO5kSFV\nilR0RCkqigBnnGXWlFQfdJdDCHkfYWG9TtSVqxI+1WFrfSSqEKPbuqy5zctb\nuokcMeMJSlRmU6rtkl5tgN1ZduG0Zg1s9+dHiiM/9UJQ09pkRbuaqcWj8bMh\nkkIfw980WEhoE+7GDFo9fbQRe/QWX4+ZtBahMmzYbJo14w7GZQm2Lr5vyOz5\n6P7wDvzIGseb9y3TOt2spXRglR3dS+Evuf9IsF6h+gQogo8nuBgjg2YCRiTN\nunBtF8aHcK2ewqeX/Vrl1T3UhaRrRBJTnH8Tjx8CPJqUaI6pPlhk3c2EvDB1\nz+nDB9S8xp2IxhILj1l/3+WgGVh/b2lvvlQKlkIg1icTGaApE/GwXIhHZV00\nZQMB675KJi4rUxwxUVzaO+nf2BK/AIs2sF+IbBbwzEYtoRw8RDbpLMiiUY0k\nTAx2y555q71ynrxCXHQjXd2vjNf7/S/ydWqiD8seWQP9wbWVfLtnVarvLpCF\n3iBh\r\n=atRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4ebce8d78.0","@material/theme":"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/line-ripple_7.0.0-canary.4ebce8d78.0_1590007815899_0.48734414873098086","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"23896a18adb027ef5247993cdf1b4d1941096047","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b0fdca492.0.tgz","fileCount":34,"integrity":"sha512-v/MQgbgRY4Td1uiNWpRugOyuwCuciQPOIYMH88+VRrg7IlOcptho5hMmPk/Qdj2SkZ+O4iCzjfghE81WHRwJ+A==","signatures":[{"sig":"MEYCIQDnNg7XlcoRTmOZ4Sa8APU5U5sdsY0kEdHbRK/PYuQGlgIhAPsQRjS1dJ1O5yhN+alt0+BIztXlHhuPbyM/FLnfF6xG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbcICRA9TVsSAnZWagAADNcP/jrrGB/mfgZ8+DlcZEBG\nOpdwa3ntRsTmpbtLlpswvYOODCBLlg34sXGB6JcBDsJBVb/79NauGyLR8kSB\nG/U11BgxQEenIUKbu0Xgv3KC+TX28A+r2wo6+AWRgeYqqjM2ABGw/zw53AR2\nrW3jqkczNSmW08Gv+vv7Kf6ibwFoOaHw6BFea44hZ913XtOOINQhUY6QNaMc\nMRP9pTH3pR1Jdt174ut0fOuaea2GUFii68eHQ9O4nz74rzttZAzg3rqwTTHP\nXK3KPZCNJFqM+xQyeJotC9OXVSd1Kotzg0teI8ogNTBovLbAMXT0pxbrAU4/\neatBj8qFs2s+uuvvtDn4ED7jsQ2G4/yVd+TuPh4uihB4GRO8J8uujXoIZUPY\nhYQfyl69gEIkk7iVj0+rNfQ/ZAJzwOVb+j2TVQ68H8Yoxw0sWXRE3FRoM0SS\n2mHZAMaCHQ8/y7SNx7X8FTBCoPZvLi0p+gFx45cuZ5vgUNF3W0C6ajzQAoF8\n/0H/oftZA6bk7sbdWzAdUwfWKsAK8a1b9gRd6ZJqC6jztpwWOaL9wEnu6Gp8\nWs/nKb6yTsztd6AFNd+6+6FuMeYkdsxQU46fuTosSVX0PaiVn2q18TFscK4K\nc0JzDFvHTDlpqEU4w4CnZGBfXnRCKXCNAzQ/CXfcQnU9Th2XmeYwqtcLdqR7\nRvxe\r\n=l4e6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b0fdca492.0","@material/theme":"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/line-ripple_7.0.0-canary.b0fdca492.0_1590015751953_0.476639807472232","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d8c4f4b6e5c56c55e17a1a8c66dc41249d6548ba","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.c67667e8e.0.tgz","fileCount":34,"integrity":"sha512-1+9aE8cI0FoXD2iBreNH8WMkTjcAnF3blex1IzL2VNJDaY5A0hvTAZ18cWyUsnkSc3+xskpEhdu/BLhGB7gsqA==","signatures":[{"sig":"MEQCIBTlV03X6A27jcsOXJdG6pU9EmaOsrTVj4VjHoXI5RPWAiBXGwaFbvJoalTIbGgFfyczwV2z+4VHv2H8Y5wN10rTLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoxKCRA9TVsSAnZWagAAb50P/1yAH7We9FgK1x3x23RV\n8r1LKFtyQdMY8NA2jb/+qM92ppfhTRljXN00YFbPiKWBDZXximqTkdCBMpot\nMXbDGsKq59EDgrxg9xNNAuzC+QnWc3hVoNph3gDMCUdpd3HtSyqSQEWu5jUb\nnTwGAMyt+b3Y5MtclC7Z7fNIHLCW/ltpXk8uaMmutCxn+3OT9EAulMqhYwQH\nVgBeVyJzIpOz1kqA0XkQeLX88yLtY2Z4ATMrRIDdOfqhHg+4JxIOjbMd1ffG\n93/Yql4ftGbbd6GONwPjvEN01qtbSlIPXS16BxaWjeKf8kID13A32kwnBF+9\nRIHpkt42HAtfHHXjmVV0QNXW/ZgnW+exlPryJxJEdTdQDbzMGMiXCf/E1rFj\nZ6s6lfraVhh/0mW1DKzZsz0HcWCKDuznp9fCxI3bXEg1UTsinHg1ns6rXQIK\nHPnEG5pXuTxsqDvfSZe7KSMrQ1i4DAQz7ddZg+gx6vU5Tc7kfP9qCmQ/9a6x\n6dCb94s8lSHouJq7z4VsK0RwTKcKMVHsWiXB0VjL3njsnPu9n1yz1ChAdxw2\nrFe9uJGY8mrP7tnWV07lwEdYAz9XhDz4cC+7I+dUTfvfKv9NFBlojBr0hFGt\nI+VVkn45GXpVt8t8d8pwVzoF61Fzo0ioDhtwiwX5j93lHZg/Hb8xjsjPcJmJ\nHhzu\r\n=Y9fg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c67667e8e.0","@material/theme":"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/line-ripple_7.0.0-canary.c67667e8e.0_1590070346286_0.27519393566268624","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/line-ripple","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cd4470832a4b7e7abe10c1c47029b77625b29268","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.62b5f37db.0.tgz","fileCount":34,"integrity":"sha512-125ofLfw6JKHCz01lOI9Z8ujIb7jF6UXzQdCVtxGig1nc4cbywnE2qVXVCTRr97aI5syeFv7IFatqyhOpREDog==","signatures":[{"sig":"MEYCIQC2PddBCNnT3hZP8ukffiRmNNvnsiDaHiQy1lL8guba0gIhALCH4+6Vw5fb5yt3MuNmEkMYSyvNkvetrpszm//KqGIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq8YCRA9TVsSAnZWagAA3V0P/RpuhlSBLoq1KhZODTuu\nJIjvgdOo7XgeF6Wg39J2nR/Y/jRSHf3zHKJCRuE+tWGjGI8IPaLVBhYVYb+2\nO1Px7KbZhFiTDkuE0H2Xwa+lLa75dgqLNXvV6Uhh5ThG41Z1WLfCIGu0bB2o\nNfZiVT/Hyh91DqupMhgdOSXoDIhwZTnnmBiNLk0YZsNKj0iOv6ZDKlr/OnLE\n2+lhPs1evicbUE065OAa74OPPjdakjwixSvb5/yPMNMc0XYD1yYldHKscTyS\nWqcnoygtKgHq0jvPTLYUGE71q/mdrGG5Jf/G6n1JoFJLoTL+W2+NnfIY+1Qg\nW5poQuUW92ouSAdWJiJJyqcVZxKt5nCfhTTZRbBY55pd5hAaKTdIzzVSFYvV\nyNcvbvqVy7fu7P6lWYzGEUoW8eY2C3YD/tfXps2ZkX6q7V+KfdBPtYd7saI3\nKs9Wsm040LR5UZophOJSIhkrXQRpm+VEQS1gvUGxVzMh+Iynx+WwAJpBrQyN\nlXFfkcL/kd9ESohT7f5Pbk540atLiw0zM3HQOMLBkQjP9kpUehcKxtLJG6wG\nxfbzB20e7i05W7Rnojf/6XIplXtyZnqwkOcbZt9c7CQKJz0E0PTlsM9FrEE8\nQKlkiX6NZZtfcNFAW2qLOQ3ygwekHmZ2bwnJF9DpPr7Lir0CKmS5WK5m6oKg\nt8SW\r\n=XkOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.62b5f37db.0","@material/theme":"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/line-ripple_7.0.0-canary.62b5f37db.0_1590079256014_0.044437853033556074","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"20470d2a28c745ee1af97ec22dda4e9ef2e106c5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2e218dbf8.0.tgz","fileCount":34,"integrity":"sha512-j8ktDbc/LfgsdjBMJB1SfSVrgOg0Glw2lWZLgt+hCBclkQAHl2QsIwovPZhuT2dQnZP//6B24DxUHtbvlDWFfQ==","signatures":[{"sig":"MEYCIQDHER9QQm5cHZ5ZAwIw2XMD37kh8OIx58XuJW8IZlor5wIhALv5OCUzLGbZ5ZjG4ATAcIdXmkMVKAOTykabqYw0BFtz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrP8CRA9TVsSAnZWagAAaR0QAKGe+Ac5OTM3GZDLaE+Q\n4zqjVlxslhtjnh8XMZdmIT/zGEFpBSfkEhPUG+gkeHyhRIBnToWBOPPAEvTX\nqzdWcREUoH/ET1ZZjvI4gg4+uoSbngCieo/TTOZweW+MedTp37RDBpEwnOcd\nmAj9/1GwRQ5NXtBX/VD21y+f3F1OXpqtgdk9Rsld93O6GNk3qFpbvImH9udJ\nwaHj4xrNkDyNr7tCRv97tII04RCH8VUdOBhnQcQU8JtBnOAUtkhuQMTW3w5G\n9G2VZogEsrVVETWG1SAAG70b6mO15W9+1ywl1nmAcoZafQB7Bgrd5mFABwtg\n7qqOg4alQpBxEV0lR/jm0PnMMJ2ZMd7PzuqQkBhql6Q1zMrjjnpXHw8UJnNs\nvbDCXRriTiMBFuOXFZUr7M8mL7oMlXAbK0hHNaRJIkqxdVkUOqALy110NmCt\nFf15z2hHDDtXgaXpGmMrM37MP3KMlrLoLOGIdtuY27yQecKVp+8xVXu5zl2f\ncGiqcokHL2fU1ZnR4bLWu7l5CP7SaEMgDIlLV/qbv7a9CqB8TnlpnxhnrKpJ\nF1STJlbbXAPFwnwBckI6OHpJYM2ACI6/4Cl7QW6b4vVsEnkoZ0ATspC2FNiC\nxc7K+15kvLQScaXpVT5TUa4i6EW/KRoXIO5+zU//3MX/ykrqsdYklX5D6MGz\nDV6s\r\n=F+Y5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2e218dbf8.0","@material/theme":"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/line-ripple_7.0.0-canary.2e218dbf8.0_1590080508508_0.5067370821192427","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/line-ripple","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"72ec7123e421eb6ed215d41af4924a8b6f7f4d41","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.7fd792bb9.0.tgz","fileCount":34,"integrity":"sha512-1SwhXRz8rMB122vbWRZAmPMFWLEikTRm3Jv64LHVeyDJaTxwC5BOUge37M72yV2iMO6+Dq7Kl82Ta7QEL5wZFA==","signatures":[{"sig":"MEUCIQCVYMw7UG3zaaBdK+KozJnQzFcsWx3trSFnJnj+kwHsbAIgIBp+pJ8qhRhm6OpIh+Hz3F9pUNWidq/mAY9pkMkhnbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrbtCRA9TVsSAnZWagAAJacP/imiWcfPrMLYkkLl7wAm\ns+cMvzKlzkkQdFuQazSQ7bSVIYyHRzs/ggQFV1ppUVWpN2Jc54OAeasBYnpW\nfnPimpDc7VHm2paRo6vssu0sZjUtDAMk+wycS6djW+DNhaTh1KzZ4S1Qxh73\nVpkMU6q102KUgVHOX/f5/YIRDwji4WacqE/e+d0tVbpAhGHWn89VQV6p+ANV\nRnxJKITDXpB1v/Ms9G7+VSOv3CfYtd0saVbbggUjjEJl1n7zoObbIxXxOJUz\nLKHzd+8IoNdkL6Bb3I0LJew2/C4/EtDbQGb82PoVZRojtGDNZ7RyC6+Tkmcm\nKuHe5CLJicn6obVyEaJKlIpkT1uG+00q/Q56rAoPc4kllSSUGnlHxciqIPCO\nmE8dxTzKpWzLM9lHDtj0QbPj5REI2+2xZM6uk2q9xrX6I58CXDOktxVILnpA\nQu7b/zn0SNac1UNXTrcDnKiU3oh7snKowEifenFcOrRITaaqtitgTv2Ijypb\n69vuW71hIELRKb5qXthNighlYuPtepcRgjQv7ZfK3rDUaEQ03kKWic22pmEY\n7ojIJ7IaEDffaawa+sHRWr8h7JifQkYTF8IsqsnwTvBgzbCwU6KX9M9nBNuh\ny1gyxpmkCwSurxaRbO9ITnHoQNEb6enZfwhJ4bBqryLim0ZbBVDu5fzTpFpI\n+g+l\r\n=3GgB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7fd792bb9.0","@material/theme":"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/line-ripple_7.0.0-canary.7fd792bb9.0_1590081260639_0.40275436372988715","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0ff6baf4ffeb211ca11630c26df6464117b17b36","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a66493cd8.0.tgz","fileCount":34,"integrity":"sha512-2vGd4K1HiLfCMEJvozAfuAtrjAWMUMNKb2BSiS+JxOmIHIt03etls2ZA3aDmEucO+OeHt+zd8WUZtcmTnAn3VQ==","signatures":[{"sig":"MEUCIQCymQKaFFE5cx4F61aNwkQAMAv1U38esuAeFcBpwNcg+AIgdBkYGpRdZgr1h1QZNs1O2yOi0xFhv9CQtgaELi3hlms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrfBCRA9TVsSAnZWagAAPTkP/11TVrZL9Kj7Ux5dfn9e\nbkZ3/ZMPR//BsGQ6UYqjFPbzs+KI4Luc/DlfxrCj61//cOAkkPsMalrmSJha\nSCb603/pRh3piDhgsHf7MXJSi65KGUtbLJTJbLZDJT3OokAuph/FtFgm4MId\nYxgPWjS8I5jo/tRcFULPt093BJ6L0FHcN68YLB7U4l37hiW+fiYV+oDtFyb3\nhMDkrO8+mYu0YBYNWepxdQLyS5tosJu9eAumrinYleSBuuJToZATs45JP/0J\nMJfsCWU1/xT1iYZtPyEnjSiyeBaLDsgGXVO9g1LUjOMT6FFGxZ8lrifkYZbH\nzBWz6AHxCDCUJNWUoBOsZWsoBHPKdVOhxSBRwHBCHYT1pHyCRmrfdW3PWL87\npjTv89FSTNi2Tw1SM5VkJ8fs7HNaOP7h4bU/kzqmFzk7P8VxzOytdi9iQQyV\nWXxTqB2+dSjwHJ1UP05hw/bZTw5GuT0tYjZHk9ABKXw46OFDGRNY9w1+4RWo\nLInpBNyxNtx3vxMShIF/99IRm565K3Ht3vqDnVoWeZTEpsnvgCalMKzPTshG\nAdLMPhTUz5W+xsb9sS4aF+/bEuZdmivlWAr4QCyin7ytzI4cRx4geQXudnnY\n+BeACYO4Ju6jbhoRIkqhsH8vM04c/t4K9pwLKq6w5WI9Qyloov72Nm5VH9Th\n4zmD\r\n=0K97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a66493cd8.0","@material/theme":"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/line-ripple_7.0.0-canary.a66493cd8.0_1590081472980_0.27311136241745815","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/line-ripple","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28a2de9c13ce95c70044583b81d38f893bd23378","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.da05f66e1.0.tgz","fileCount":34,"integrity":"sha512-MCJq6gSGVWkN8QNItBOOpcBdYZaijQVbblEp321V2qOkpG9ktgHTqPqeIy0ej+ubTwRleKaRzj4jeLDS+FHbxw==","signatures":[{"sig":"MEYCIQCmOHf5zccaZ5urhoEZxjcoGz/W6E7ANwus+ggifU6OwgIhAIPiP6miuf45XWI54R5WkeUuFRgxiu8qvDK4CYQPNaKQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgsCRA9TVsSAnZWagAAU8IP/jCMk8RRoTBRgBBixOyB\nh+lnzYhBLsReY0r0zrbu3qd5d4D4wuOBI6Uc2zi9e4zGE5jBWo0AEH4kbjLU\nvgi4VsUaWEev7ScSzUcx1PoOzIy2SephZOkYCLveXMeGyMTfuIa4rYmkqPS8\nxARw/JN9nhbiGzldzapQN+djwt8uswOJazXX7l+4TV6GdkZKSa0wL6VoQg2k\nbb4vCzpe3T2MSj5QnkPljJlllL1uwoXxAPFYoXHYTOJlkGx37aCjoUcSg62s\nJE1STcofGmlxBc+6iejwPvD1qHPLBiXOh3L1Xe+84Vx3QEMnnALXQPlP+TMC\nXQ65W4/dcfxKOKKy4wApC7ItqOYzSkBWRQaNFBDKaSqP7FX13WEubPazysQP\nWUpRTLPEu7iJSu91olRPljjGmuONJSxv+8jW7HYszBiyfX4GYWaXfpVpW0RI\n0aMpD21Q1RMLYlUU4yHFu1qj0LicMtSypfYGcIinJTjnX1CwH5L/pLbn9nHU\n7xMp2RaFTnvSHTanwzyjEYjOnErP+UlxAR0fs+xxk8LZ7LdA3yuUW5CRRSAH\n89Tq5i7VKZe/dCsmev46WcUuipSSMmqF3yCOTjkzN8bnlaEon5bxnxrThOvZ\nN0WKAi/Uw6LRujZ3pEtKFH2Q5I5oJmHHBBhduYM7khes+BxdmVeXDWbyFm0R\nZvg9\r\n=wwZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.da05f66e1.0","@material/theme":"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/line-ripple_7.0.0-canary.da05f66e1.0_1590081580378_0.879693729228499","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/line-ripple","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bc7b7400581658a3222e2db382ad5814535d2092","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.740860e78.0.tgz","fileCount":34,"integrity":"sha512-242OR0jKVWKyPX7lA9VveyIV3fqgosoXZATmlq1Eg4MYdi2myiIKLpA1+97ZugHyEKAwV9koTGuf7VAolBJIKw==","signatures":[{"sig":"MEUCIDQTXrzGK54TqbgxOulNpot+E6WB7A+1rCN9JJ3f2IF5AiEAhHW4PgX3EYo5Wvpc9Ww7mfNeD9jI5IzxHZ39MIhKRcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrnECRA9TVsSAnZWagAAlT0QAIPbFsCRSWPIDLwng3X0\nCBfRt9YiJJSmPBnDFljiXzxfA4Ez2XKYdK3IWnLrgPpNkNNVjd5Fs3Wiawus\nM7pj4ahtlrxQQ0gbw+WGqCXNURLoWuS8RqS8cZpbCE5vFFdGSLWoXRDeARHo\n/cQUgeTNppWI3xh54TrgtiVceb6CrBH69j3YQDvDbK5ODj3VZwCYGSW0cBMM\n2Dq/SsLRjq9/1pxnuCqFMziCfvziAGaGB+YLqGY/gYxMgCGxKzuXUbHj+vKi\nKYOOpanolB/RTrzOvgK+BeaViF2LAu0czN6mR9oLpK/GpOoNFQbYD0lMqq19\nGkU4ZKoI3ZgXKaBkTNvd/V0unJXPOUi5g4hwaaMvtGexgJzp9n47ynJHzRZK\nrlci7LUVjF7FCAESlSFAreFXybjlixi+O8HuYQmw5HJvBq6xaatszqv+/o7c\nu5T4vVVnjSnHQPE8d36p0hPXzwAjvbh9U6XFuWE1kh2AC4YI74R2V7lpdV6o\ntKQb+dYeENyNXKHPwpYVlfc6j0Ff8vSvNnq+A/HHQZOxvfHeE+5oh/olTRMb\nCpUvVNeoyD1cAF2Tki1BXXCm3zA15JJYy3Df7HGpxrX+osKa4tl8mBlQxIt5\nNvE5ym8km3h66ZnB7pAUfHFQL/nVh92oIiPG5IF2Cw1IwaJ+cus4o6bkx/L/\nhB3a\r\n=GylS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.740860e78.0","@material/theme":"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/line-ripple_7.0.0-canary.740860e78.0_1590081987837_0.4519731800728175","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e7b30b8ad0776cb87848c9df2337218e1c86e565","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.5cea2610f.0.tgz","fileCount":34,"integrity":"sha512-NAUSS5WBVJG7n/KvR5fjsuu1CVBG7pF0D2oxlug7huQ14jMLB6XpDGtGSkKiY/Yx4EU6uQt5933aSwJwAfjGqA==","signatures":[{"sig":"MEQCICrkHce2Kp1FQgFBZWk1lM+z7jbUEmCMV9xZNZWzmXwYAiACqiy6r7tfN+z9e3dxs6PUKEtuTpcgCS9NV71TUHd6Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexro5CRA9TVsSAnZWagAAIHgP/2m8w3eOCx6fOy+L8Rqh\nL+vZnrsQq96xEBvpJsdyY69Me9j4RcaODkmUN6CDmkNZ4wJVP0+uqoFRTFKM\n6A+9C3YOECRXgHHJojPaKDnKVZDL/XmSPIoFI8ENDhGCd4zWzK2Bi9DXTI+b\njWG6Y1ZeVg2qPdd8/1P+akLrlekSdOnBu3NVtQHCH7uDkCvIumeevIec+OIo\n14YL270r31yRQ/mq53BMcAOaRu5KtyHOGasfX27KNv5ZR2rfm2Cg6/NkJZ5E\neawyQHeBvAgrkYXBmHO+BO68nKKvqEa5l4SytXloTyOfukmnCEkcO51Szzog\n+Bh03DywbCbFu21ESwvQj27zrWRWve4IlLeKFSrr4/RSSQVd3Ts1pacbIs7A\nLExsnnK0HM5XZDhCaDuYah5lSNQhJeyye6YUnNBInZrikmgRvJxkbQGmGHw4\nuVN0w0viBD//aVDPkoDfv1zpXu+k0Hgkp3JJNkMGRBnKohM1EfuHe3oYJnxO\na2IKWd36czNuB3LZJ+t0GXYweNQOjOk6Ru/63YYAPPHpfhvOd+cK39UgWh3c\nBckUHnxWINwpY28Y7U/cLLk6wD8OG43QTccqsBg7qWWwaY4FG9NqgUSxIa15\n5WzDd4yVIgQjemdCd/V2/Xw9aQ/WEW0tY+6VN+8VaredAgmDklIYNwWuOlvU\nu1U9\r\n=2dFN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.5cea2610f.0","@material/theme":"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/line-ripple_7.0.0-canary.5cea2610f.0_1590082104618_0.9988988303361597","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e5a434c5224e5aa078880ec83e565bb55b10157","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.cf7747ef7.0.tgz","fileCount":34,"integrity":"sha512-0qj+qbOJ+hKlqEGzjT6FgNRdplFEJ2ntsBfxWcqX9TgdjRbbaJyyVw2DsQy6umDPqlge9hntRyDCvDUFBee4Wg==","signatures":[{"sig":"MEUCIED1Cn2srmVxM0ub9kSIClRnII6qMh7IjBXgjIkmMg+ZAiEAgo3XcaMYaoAlMA3/uwZVesOWoAKttGTcGSADMOOqGi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrpNCRA9TVsSAnZWagAAY2kP/A9O1lrBK/rdX7xwOIBp\nrIjGrXo+DKN7B1g7QXQ0okAKPD+9prmcm78rWVtC0pooNX8KZA0hVaPvP3IF\nTrEjReFYm8Voiu2RvawBmcLG3yhjs9qZAuw5Va8XhBzmpu9EPDOLgL3s2GIW\nL5v5duaSJxmw6gOjH2ULEx3ySepRw+4ayBzK0fpCZqly+G/Opoi6FhULzf27\nK5V/p3jjDvIgoERfP8g0h53LcSKaRx9RRryx0jM6RdG0OsC/8f1QjDN1E+Sk\n4qCV+JGXezg/oJ0ZTGP6l//0kIIvqhKvBPpeMWmLaT61DGgk2k8jeVF53FgI\n07nQqTlro7OHb4GWYvpD/tZW+Aa1sACJnl8QYWXUHblnlPuba4eAbYSC6hG6\nqfClKyYY9FCulk+XV93Cg818+7e0srpPSDZAkNvKanWIaAZ2PKp3D51H0CNm\nDPCzp8AcMZ9CEDUy2zdGEqMVbWBfEZ3PMPkS/qH/y9TDp1V8cZdKWg5IQof8\nhbac1P7QpogleOa0AFv6ZGtUtniJhiylHTplQz3ugztobih/6IvDPUibuXIK\nqzvUN+nrkrVM/i5/ful7vTdgakVgFzQet/v83XfTkrc4R/SiD2vjg9H8n7Q3\n635Mb2jJlfrcwA4aLx0tDLGAWGkdPrAmNwxgfHrB4UzyOzGOGvPpd5bBdX64\nupcz\r\n=FCiU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cf7747ef7.0","@material/theme":"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/line-ripple_7.0.0-canary.cf7747ef7.0_1590082124653_0.6729880356792022","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/line-ripple","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0522acade9053984df84290c50f45b4271bc8d8b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.862d0d7bc.0.tgz","fileCount":34,"integrity":"sha512-V0dAzNcsXAKBv66bpBj4/xzQpu3YBLHIHUR0zwhN77ObRJJpPtLH+/A6oVs7m7NUMZjzSM+TVD59QHStgFg0yQ==","signatures":[{"sig":"MEQCIEmRAeFhh06F1WmvOKyDPwrKCmqFbRznU1cSUR5vlOlNAiB+NG6U4OdPB8FUwhzEtP1kULGefdsBqmBDEDArqXzSNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127500,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrrvCRA9TVsSAnZWagAAydIP+wXGraFTBf6yna1c5LOx\n1hkPdzrpC8BL3eQ0ntkut1XJQyxc1lol4VUXq9WRD1Qd8+yAzilnAGvkkYg5\n3vB/vETqgOfSfEL1/sueqDjPKnC7NTOmbH4t/5xRpy2pA/G/4GK7JKA7PPnA\nV7n9NNxAx9KFQfT8T8EiiwHLHPxm4it59oS5CLFiXUdpieVgaHItHO6rYXtq\naXXUz2P0SgZGLwmekFrnkGCTTos49w8q+WaAIkuGezrxgZVO0lnkUGDA/NZA\nWj9T9uHndO037ZtwZ1ypNgUIvbU/6hToQNrqtGS8ceTbNtMV+8foNZCvnlKE\n0NgVaYaNHfC5Guj0EnTsVzr+1r5DJLf+3AIH/hi4ydPm4QA1rzKAaDI7llT6\nRVqtVfgM1CZXBEY4Vd+ymeYHBa5ky2JVs5nnVcTG82chMJb0tH9FlBGOPXew\nLyY/FvoybvXn4lfnLqXtwX8/7yBynLUwdtV55dqnLJpPwZd+ZfS4GIft1xE+\nqKydoNXq/BSlgj3S9t73sXIQ84HvheNcA2ft3FYvw54UMgqgV7CIASizTKe0\nT4wwsXqCMxrz+24uRT689e7C2UjYjkbj5MM2LXRKFlJEjNZyZENYPZNAoBZV\ngIV0vjg5mcFYEIzGZgwQJUFl8d8VKA34WvBN0gYQwhoXt1STAGcQCumR4tIV\nw6Lx\r\n=eolc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.862d0d7bc.0","@material/theme":"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/line-ripple_7.0.0-canary.862d0d7bc.0_1590082286402_0.7647101922941602","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/line-ripple","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bfa233faa3948c3930a71d670a0de0e48fd7e491","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.0008c8a91.0.tgz","fileCount":34,"integrity":"sha512-6SYfvEUpSJ8/54vqPsqqJfUZC/P9NA31L+mzKzgqNOcZfn2G9J8UGNUlp1hCgbkDy3F5W8JgvKPPbfpRzbiTyA==","signatures":[{"sig":"MEUCIHphu7+pplbConGeHW/ZmbHkvFq+bc1kq7FnnQAHXV16AiEAxSGnY+wsBIx2FhCm29hQh0le73Y0WFfgknspwtjk4sA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextdiCRA9TVsSAnZWagAAhowP/jkEVsRL9p9vNisxdgVT\nf+acfBr/2n305luwqvYA9ODT1oPyYqbpHEq5G1x4rN3eo0t2S8U2RHZaRMRR\nzCQJ92xDfuZVj47pWWjczhZ/HZqzQynta0G+o4nHr1LgXTAWpFp8/vaJ0k+k\nMQ+Idcd+u+exALD6iZ8+I1n4v6smSJ4GHiuTMGaVeK7e/GIBao2cU2SOaku0\ntXESQVLc7Ex2sEn+Bbio0uAWPeeNV2BROV/q5wNhsaxI3OmBfFv9PkOY22jo\nFYM6bnQPai2KomTFZ9qiwXYTaIsZXoQttUk4QPTuKU8exKn5KYF6NIUaEP1y\nnoMnz/kLdum9EA5Z75LUo6XbMUOX8akZZXNqla1HjwRo5BHFUqPKFW6xhEVi\nZ427rIVJeC5H/xBTQ/WuMVQYKn8NA8RQajQqgBMN9CZLo2aw0mwu2CHry6NY\nUTFgdxzVUaNpDJ67gMmExZYPGnkrOf8PtDM3byeLMX3F/aMhQiG8zJvmfb/C\nP7AvC9md4x86rQFSw7sjRHBU6gadHGqcJCNWmZlMJVMJg02pXnMgSwN4Eajh\n6WE13hbjmGoo9Z5v7QfHyvqObyGhK+HImXpSLZMXKTyKvY9s7QrvxBsb69K9\ncY3maCvKlhEfFpXe8O9ZgTAq+P0uGEUIHW81H+sn7HGUvTDd7TSBaFwwA9ov\nCTPh\r\n=XQpW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0008c8a91.0","@material/theme":"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/line-ripple_7.0.0-canary.0008c8a91.0_1590089569766_0.4247400648877715","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/line-ripple","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e88cec8834e15a844f0dea76f4d0c687281f3582","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.541638fa2.0.tgz","fileCount":34,"integrity":"sha512-1XFV6PinISgNlh77ppHbCqRreu/b1f5A2PhTwsLy5nmBcs5Z9XlISbBO8pwgoHvJvmz1npYWBTeKB49TSDdUvA==","signatures":[{"sig":"MEUCIEQDURCSHDQZB5AMxqscgDfwW8DEL4GHZ+sGdjES0AwpAiEAx6yaES5+hHevcz+gfsd4h5oKeYRnLwmwpQ6ShfOXRRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJextriCRA9TVsSAnZWagAAFnsQAIK40eUw8jryNifXzkoF\nWrTUCIsM6eTWoLeCypJl3+hVbd5Ml8qdg+sUhFSt/Liny0tZTpEPT+PPod2L\ngjtsRMVF1duqL8lkLN67fNhncQzZJU3cDLplMoBWK9suCNaVcMVPvAXKoLuY\nRd6nIVJgV/yQ9uIWJmg3pqN9TwzbF+gblwenV/GAxcjYfLq3yg4V/1jEkKnl\nN51fSJ4HnTmnWkk/kscHt8keXw7v51i5a+lZ1DC4+b0HuTYQFU4Q2VnT0WLF\nwNsrKFIIKgIVZTsIO/ZFsiq4qklLo2XmiRYFKF9lYsq71MkE0FPqZFv8vzK/\nB6K0hiq3OzLs1ao5Y5y4NqcEfw2X4qHfK1UpG/mkrkK6eQQo3T2LlLYwhUj6\nJgsznKJjGDjuxYzIyl1OhMJ7IfnAHiO2VJWFDCaU2EDsfyZ1PUnHQ/z9kXCY\nuAh2IkDTzpNDc0B/OPmsh+ZmciUDajFnDIakXFJ/lJrFVsjYglPE+ClO06XP\nWhKaNonBoYOzqRKqQTvTKT6LfOOODxmUjqxhWfq9f0eJUp+ICDhvFuTxmRC5\n1yaOpJwO/itMB6fqTkvxge4bQw3QSSmekd5niE7Q2CE3emgrdNNNRNfDIke3\nLLK7oLtEf+Cj0p6cTw2GI45AhUdfJ7jPV63OzVGIjYsMrBkI1m1MoN3VjC7k\nDPsJ\r\n=pCTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.541638fa2.0","@material/theme":"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/line-ripple_7.0.0-canary.541638fa2.0_1590090466033_0.36743167915485575","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/line-ripple","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ee3913076d9425d9b4fec306459b8b3ae49bd744","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.6167cd075.0.tgz","fileCount":34,"integrity":"sha512-GYOAwlmkDklQnuJgj1J96pSOhi6tfuHgAkXf4TZWdp+zBKYOImeOzUDKYlN8zTlIY4zg8LD0sIQZ12n86Dr39g==","signatures":[{"sig":"MEUCIEa0CrfmupEL7jLs9eD/0Ockw+y+IfW1XtOhVXWRvmK3AiEAxc/1ierLrFK0M52JLtjyNdsTZTm6oNcP+4icZPhswBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuKdCRA9TVsSAnZWagAAGioP/14quEqcYlciDB/x8Yys\nk/zpVSRF0njchqQIZ7w310K+pxU6jU40Nfc3C/Jgjwue++T50JW0ek+jn2UL\nvt7CZH5z94UgBQb8rSous4AdtrlTDYBQjCCGUOGXBtJgGyMS5MdfghuwAVEq\nV01Q+d3/cjx4sorxMCUlzcag28vYKpmlCaKgOWnj7q+TORmMDPpDXFwGoZMD\ne/FdpQlMK8sRF6kiVSNmUs3ugQhxy7NE0/7XuYetuBPuXgdwPd92hBtFKLw3\n2NcgkP1pOsaWaRViDHQzuapwAi4Gn+mhpVs7KgkLeOW2xtdP+66+VKJJCFoE\nuV5LhOE0/no/i0Nf7+a44ZuCk+xfZIJRrQF36wqnd/QEt6v/4VtVZ4m5B6Z3\nJXVCPYFy7Hefseo/XunI2TSA7L3i0nGCieIUGF9aY/OIuUE+WY9V32l15hbu\nduMKMuwSxxpvROtOn1wUNZR7Fw0g2akbBzRLwD/a6ddYzwVDSxKRf+sNj1s7\nOp1lCeDVPrcX0ZduILXmBZOt6UjdIl5N3g3H8vBjM4PjPCi1nWJGky92UWyO\nCU3ek8mppmPsYiXehnaONjFKBiW82brfDFFxfFMWr0ky8Bl1QBVk5ISOCGAN\nA3cDg+8+tZVnKCn1NYR8PA2On3Ota40c18WQ0hooUadSJ+UXSj05uYTLNdY9\nFaV3\r\n=fa9l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6167cd075.0","@material/theme":"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/line-ripple_7.0.0-canary.6167cd075.0_1590092445296_0.16519793933684923","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f91601d7cde8cf426f2cec229de1769b4c0b448e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.863ac1b0f.0.tgz","fileCount":34,"integrity":"sha512-eIyGOgInBktR/XgVC9+Bao9+C8l92PLGCdoqjO9tuBbZzOVWaAAdIZUl1oTR0xUFig6/azwobboGDmuOh9S9yw==","signatures":[{"sig":"MEUCIQCgrElZjIG2ssg9CgrEaZyXH3l1qqiqlK//N1sHIH+nAwIgfBrTafL2/2GjkhchHLI6yk7evc7ECH2BLiS2FZNZbvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuuyCRA9TVsSAnZWagAAeQ8P/j0vm0Wix2TnTPP4O0YS\n4URjMlAskyyhSwYqWQxx7FmvZdQghTO7Vk+R8Kp53hQXB9sCwSjMdJWe5zbP\nnF0R8DsCv8YpaNNWrXQeinuXKNjnY7NqjZoGFI/w2nCz2q2LJNPHU6sCP+J9\nreItUUAU7JmBgVk6kJkhN67KC7ONmCB/99eqTH+zWf3hR0zfOJKNBh77mdOH\n/CAb6UA8ToTzPHZ9nIP5vubRgMVcsUv1R0ygzHAhKTQODnCIfISfjgyGGT4O\nfEi8/J942KExhbZaVIqq3oYUlthCODn3/QpZd8IQsjyS08VP5k+ULzCme1s3\n1VRSs9NTNEmBLumho/M4X0sEgb/m5TedBeDpR1kSqeqpwcN7TDRGvM5C0Ntz\n0p8Cce+O19c7iviLSANYdGGR/LmFTcZtFV1kxrHqwHS/ABUW6LQ0E4TXpg9s\nzSMXfFgKuTUCXB5y11eX43r5sqvTC9DpSI7Zy8AxdAXISQ8IXvQyEz1m3/gb\nAZqao9lTVA2v7+iCB06ETmp3MxOU1Sf8ELUJMKyI82nS27ZA4R1hIogKtaiR\naOmMG5NSyDlv25ff7H1gpYpHRjsrv8UrSmHAMmjvLWIvr6f0uyL4A98qOOJE\nE1cm2uwUP9r+vdfZhuF9zMy8wjg+WetBmjxFfQt4MesE7edJOyfAbvrjIKLh\nKESX\r\n=1xgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.863ac1b0f.0","@material/theme":"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/line-ripple_7.0.0-canary.863ac1b0f.0_1590094769875_0.4118730747632713","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5a0131a1fba98c18d58ad11b6bad6fa3edcb8071","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d30a214ac.0.tgz","fileCount":34,"integrity":"sha512-/oPJfM+B9fYVd5/mTyKSTBSLKfBa//G8bI5q8jn95XWT/kcbixrktC4Pb7lWnSb5nkR/IfF+//q/uhvmEASjEw==","signatures":[{"sig":"MEUCIDqgN6WP2kdmR4qd0Pjrz4DbfAl/KNAx/56c1f6abMEmAiEAgtdPLUWOTGcR/4vGAmdohZxwTRCa02jBeZnj8+gygpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuymCRA9TVsSAnZWagAA4skP/20RI2CVpFtA1WqjaHv0\no55ZA4TiMEZ7uCaYjBiewNkJXO7G2aMSiYR1qaNc7BaJf9n/mXzEgcP3Ba0r\nawXvtd3Fc3YaxyLNuvKQiroi4Fh0Mg5fz4lGYnzADJqcNNH7eZ/ey//cJuwE\nVYTUMEpLzZbmV4mxArx5JsjjrUohkwUWPBWJiDzfWPKGFwJjsM7IAgc+aLVM\ntbMjf6mPOpClCE/nUHUVm9cR+R3tqkGXm27XwJ4LS882T4XvpEloeU29MZz4\nPgcWJBnN8G0/e/4XwYZ+5S9gKdTaSL7jovf/I2SN5pEaXi+1grCFXfhbi9ib\n8t1JtqJ6l1a0JB4NEjnmmmksnVCgoW6eEmR5Uj/yux+ipZSfYLbGUIsD1vWD\nl2rimSoPlOKFSUViEQdvHn8L7uYYwt+ui0WRQ6LFC/7GnbDd6Rkpn6iYBBj1\nVFuSHf6GqNawrIeH2AHn0v6iBu8QdU3XJT5MnXE1Q8I4tsXRG4KJwRlz0uIi\nF+3119VhNW/7wsUKxz3MnBBfWPNLANh2eU8Czw3UufBhHbkYM3K5SY4WvUad\nkPs9xqWgs3lFunjb/jxBmVh/JR4Z5mEKMmleKxFGNTNeMgVInko59yReXRbl\n8Fe/wJWdaX9x1BrKV5KZeTHMUNKxObXg2ipDY/hqD4xsrX5ORjabQHHgzcx7\nsAnq\r\n=a2e8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d30a214ac.0","@material/theme":"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/line-ripple_7.0.0-canary.d30a214ac.0_1590095014222_0.907192953127917","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7f426ce5413226c589e1a71ab585cfa92c0d64e8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.62abbc8d7.0.tgz","fileCount":34,"integrity":"sha512-CnkuEMIEaWCVgTyrIciL+DtiFE1qjVljXiv3SEt/TccidwgFkOH1aPw8dKdUFHxuRZZctmUkyTQtTMET9K//ZQ==","signatures":[{"sig":"MEQCIDYUurMg6IYhFxzQb5I/F85tnuqhJpDraN7EbCFA9I0BAiBPOP8MyMZwXmSyIJ5DvykYgxLfq3qFbYa8LUlZJqwVFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvJ2CRA9TVsSAnZWagAAjgEP/0h0wqcitwKKeAnZkgoh\nsR2lND9FVakHOKUaBKMEn0bIygprhYqQEh0Y5Kd5i0nx9VnafGyZ5c90jHO0\nfNwHqDOFChuQcpuy6M2EGdV3SzpuPcAOipxV790OFQAfUVEAz/huGqRwWJtH\ngqRzi6uBebu9w0W3TCHJnN6QT/d1Puu157Dy6JYKYOKHIUNpSzqUjWQoqmTN\nkAwX3d9bZrjd65m/OSG0qiOqxveOquAG4REXtwCPgCsCuCKg8pqGfQvcjrlP\ncJA4IGJvFcJhK+U8iQ1MR4V3MumFhx2g/xg+G4/DFdETd0lYSe+OZjSoxzbW\nqy+YIDXbu7Y9c2wDKrfv5VtW9iaaiEzcLCDOTShivXD4+bIo8rEhMYY03CnV\nKTk70vK6qwa+4NoqsP2NoW4k/Vd3d+SdPtvVIWe+MnKCOMisj2Z3gIIJlmFi\nvnsg8sbv3vtwap0s/EYR0DJ28DzfWAvkADXCW/6RN86TeK0i5D3t4X2pDalO\n/2afwPnE4sEqXCWxLnzW1XFoY09YuI7/hnO5x+29BjSNlUbU4C+5cfuLymuU\niPfOU+gL5CTqkGK4LpVxbP7T7n9NdYh/2bvQxMjXHMq/V4WaUapfrMMw56hC\nzccoCkYkn0KiaV/mtnI2J5LRM/omJMQCKdRZsFCZTYbTjhjiiMdQCMQu26UJ\nl4Q2\r\n=qUtu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.62abbc8d7.0","@material/theme":"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/line-ripple_7.0.0-canary.62abbc8d7.0_1590096502044_0.9836898238887399","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/line-ripple","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"517f28b57b595471ca3ff6e7e762689d2aff8fcb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.49bf31d5c.0.tgz","fileCount":34,"integrity":"sha512-pW4jH3GwHpudVxDjpJU//AYPp1USh6z7Ti2IXez/2JFcVfNJk+u9uib+dd0kTWZ2zkRqaPN13HNlQlHkURCdow==","signatures":[{"sig":"MEUCIB23Fn3Gl7Z4adEzdruNU7OUwP3wnw8TwkMTTEMdVACMAiEA2yymeuIBU7qXbcxoOE8TEWKC25ffhB68jG3rm8ObOQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvM+CRA9TVsSAnZWagAAbGYP/iRCb5ooXcp2NYFM1eKP\nq8uFGC4w2RiTlxxCFLzZlEJOIP4WISmMCK0CiGvJtO+ySDgBIeDwbwaLzI6x\nUgLevZ/n1cr/n1S4mMkmNBCKImsQ/vBYTJPjRkAmxX/yXfBqa36EuC0EhrHa\nqvoZBiGPwtUS7FIHQ+2CqmBijEI1/+7kKDs4HTfOOICFI05KtYAdWfhmvw+w\nzkSo3Ym2UI9ec/7fCZoUv2rVyaBK/+zCuZxUPphwsLwYKi2m1O+fz8mmBmva\nnW+tlWWke3QL5bFdNKrtrgU72h75y39UjrQuv1CDhNqPH5gsm5sUgePWR5B8\n1MKEIHiETlA1sEuY39RcZh3m8T8XOrIM80DmTHsiO5eeZK0uF3M7wPZ1/OaV\nDA5CEVuwx2DCxvtUU/5i2ldyEhsWqypb06YkSnh+2sfYNz1Hgq45QsxIV8lj\nC4arxXDJHoDb/tqDoMeIga8jIbWL/Tql23GYdokrDENwO+oQGFGGuzhyapsA\nuiTSWA/aavvZL6Ypzb5k0pw/qQDjTh55Q4T1d2Sm/OxAniMbJqY3RnDr9utC\n55mLt7kXkEUp1QSG5EWxVlXAOnboydGSrCRWk4xf/bdlZlfTrlMqUkZCa23D\nI0afU3UOoGETRtjDCKgwW4erQngtL0wuRs8vbLJMq60W78q+1J/gSqWuG8ya\nxjeS\r\n=ABQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.49bf31d5c.0","@material/theme":"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/line-ripple_7.0.0-canary.49bf31d5c.0_1590096702059_0.21032057585489028","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f2558e89d5494c4631661a33f568f188cd17d9d9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8e17857d0.0.tgz","fileCount":34,"integrity":"sha512-UwMT3tC9ce93emacQF7bKq8FqXJgSxm9esphX94OAxFEeoQ8v/3O30EBwFadpAoklBT8R/myBn7bqVit29LwWQ==","signatures":[{"sig":"MEQCIBpoVLK55e2vnep+o/njhaV0npYL4AcknPt2pd2xmpxjAiBgmQtbtPNXHFqAn6Xjz9HbKShYRoqXpYhwot691SdmTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvN1CRA9TVsSAnZWagAAHY8P/j5YQe5FeEXJzNJLqPLP\nPEEk+gwkEh7pu3GmQa9p+rC9HLg+J7X3ZyYqhc2N5dBC5rndJ3fDq62UaUuV\ntefy6BkUxFRi6PjJlzAqY9SQiWKHMm13w9Ip8HWGXAicPls36h0EqBrxzX5N\nhE5D5IajNEkL1Q4Fn7DBSkfsc9RJ/UezwXpMSVwR3hXQHKP+m8xkuJnTo1WU\nMsxTlx8JURiLJ4B2gn3Vw3S53fbzdJSUPqWgvC4lL4crBwJra2Grkb8MGkKo\n/VeCwOXSI9Fs2itpMPVVWEs/q1S5hJuaCO+nohyl0A1e5VDjeYS4NXIDYY2i\nc4LjHdRZ1TVCHg8H+62fr6Esvcwpgd3JmB7UiqzR2/NPHvehqbze7meZ2Eah\nYyxE1bGHcB4TrHw8DPQbILjlveIRXkynCWcZ2MJV3LHLYLAqAJUET2qovqrm\ndT3g/0SSEIc1SiGad1nbAvyraNwihxc+xQMbAqHfdZ8bknES8hu+abYHaMTL\nAcdzm2sUXa8jdkA2ovY/HK1hthFMH9dfCXBTXtwDhdPMFW1LODDp6e3svW3P\nvxc+sCyizXWJnNx4BpIyeHvkgf3wl8ngpE66GYdDOXa9FC/LENeb48ODfibz\nWeRf/alS2xqkc9WVnp3hbUkgeNnVyB/XB8KyNTJCkaO5Hj/xbOoH4h5GdqG2\nrSvY\r\n=F8i4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8e17857d0.0","@material/theme":"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/line-ripple_7.0.0-canary.8e17857d0.0_1590096757033_0.2028906522231133","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/line-ripple","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5b0a99ff07e783596acce25ed8f62f45f3bd7a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.c113fc942.0.tgz","fileCount":34,"integrity":"sha512-H6649dlavr83WQsHk2AuSW92N1FDKyuM+HBABQxh7bcaY1/KocKe4+MbEz/wb192m6xhg+fhgi6npvLL3NHmEQ==","signatures":[{"sig":"MEYCIQDo6sFlPrmu5e9RgHvCz7U7FsYHBwciy0rE6DgTlfR8OAIhAIZy+RW+pdCrH8hEfqxSml0w87v9/sZoBItAlhrXd6Su","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwSvCRA9TVsSAnZWagAAotEQAIq0T0TrG/lPZPwUrqyN\n2/sdvj9Beu1TtqK0ETMG31qgdlWykGOV/9FsyPltBR0HdRYzeah6jXOTtC9y\nDupDVLGY+higbs+e7pRov4GWTthebOFhyTUMPd34i9GKKQd1HUwVrN9ZqOsS\n8xvpBtHaMzPqwgtl5M7OpHLzzO+jjXwXb98qGBXG5k7frmpZjdj8PN/tGvdz\nJb2x3sBLRvQuj2bR6rVjWGm6D/Aako0j8wjsfx5jL421vYGh89RHRf3v+sk3\nmEYcrn6pPe6mVNnWwIr87EIN550S2rSJD3Ak+qEu79ZtOOIGYYJyHu8qLMWY\nWzUgWzKZBv2zzgJ7OsXhK5Cz6zZGh03/hQ9qXrFQuMTLVQM3gmE6WkjfXak5\nYQGmqxghy1vfmJa0UhWtHzsPpbmvvGZGGEz4RwEAa1KM2MPlVzOKKh24vfx5\nR9aodYm7uelbVw0o9Ftg0wXpkLZK0t4rCso7sOuPoDMyu3/sw7PvJr7X6o0n\nPKXmY3sYIi1ceQ5TB9ulZc3hhcFNXfrbPJiufaeSaAwSUIgAtC62AEtlEOoB\njjPi5i6Z0udX6ecGMuvENl2KNE9ooN8XGw6Rc1mW+cEXzKlR4IKQrrHMc/Dp\nlBralFwZdxVy+SL48SzLmcPKTcou9hsgXo6NDSwN5LhqlPC8JNb2gSv6Wfu0\n6NR9\r\n=Yx3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c113fc942.0","@material/theme":"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/line-ripple_7.0.0-canary.c113fc942.0_1590101166493_0.5568393617183809","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"33e00fbfc964bb7db225a656c277146e8129a4d2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.912d9021d.0.tgz","fileCount":34,"integrity":"sha512-fpyc1Sx6ln9sTN3nD2a3xN8rJ82JYXqNJpljASrhItSHdEKcnvwD0diykWIauIZxEVVLR9Zgu7oN/36N4ub33w==","signatures":[{"sig":"MEUCIQD1FWuaPzxKUIs43n9px6inyxpQY+s5PcAGdXrMAMpqXgIgSTY5DywUV71sple1VZxIaKeJ89aL7ftr2WlbRmW7hek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWOsCRA9TVsSAnZWagAAUd4QAI3SlznXLwjJwQxXNjDK\nmcUmRy1o6TClaHSwlDLielSJOO8Aau99BdkIYo7wv0pIyor3+sbi1mqCtcOD\nDNO5wvgYSoLiqpUP1LgG9UIAz7QhajUK9Q9Y0OWfCbIK79lKFYoaOnyDCJOK\nt9ZpWNjEffYvbIoPDee/TtRLUrYQr5tm0rANgrwQ5sMjR3PZhIrehmMkjdCA\nqonJ3BYKHa5luzbcYfGVS4gaUfA+4NNbS8O74QmGG14tTbWpab4I+ozVJKZM\nf8iyj5DERSqIxVAbTRRy+uRsByCrqdrdoRjm3YEGjpHaQfzOkoUPSqMY25UO\nUWZvcHPTvQJYwzfRYvEQEvNX5YAqieCtaN9Pc5Rrkbdgg3H2HElYTOX06sx0\ntvHcdIBKa54mmAoPXrueWzAxMi51TTQBO4koWss4Pgt2iWvJdv38l6ARmSOS\nG3sKb5wp0q56NGIh2lxDMYK9tokMMbx2SsA/EzITUVjCog8NEWEtoutaWOJj\nv41Qeu5nuWv3eFkPVcOAAej3qeE4rBlMLFj9mrDvnfdBetOvu9bPRWfoBr0G\nZn+weaJHS4c6MRkFaVLiPd/JqFMr4+iL5D+bEZcyg5X3HJzgCivSfQaHr+ii\n7qnUSb386QEQIhwSF76vIzreSbJMPlDOCH72trTrOyZWWooJ8o+H/hKTmh0F\nqzEm\r\n=X0Q7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.912d9021d.0","@material/theme":"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/line-ripple_7.0.0-canary.912d9021d.0_1590518699697_0.3545482614555042","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/line-ripple","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6bc0e2f8d138a9c46158266cd5156a69678f0d5c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.68a2af131.0.tgz","fileCount":34,"integrity":"sha512-f4jsIzM8otipM55fMm4fkX3iRgN4Gt0U1rPuXXmsbe19IijfSOP0fq7z0VD4k5CmxUW5zSwjoG50mhhNjpfCTQ==","signatures":[{"sig":"MEYCIQDGKa77u/svWtJzIuX7K5Z8W9vHIHbKXHmQ5qbSstUK1QIhAMXtzR5aBkaohz7fU+/pEN/1xt0T4Du8qkIfgblpK87K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWjfCRA9TVsSAnZWagAAR40P/j6HBcOMdU/Z+FY9o67x\nCQccaDsNM3qjVl7clJ1vl2/FZCdL8ED9o9aR7BrY0oidXD0G5P1bMIn+8HUH\nwl0RHCtnzFeYGJHCNrStAOe6uD3q8p8JPh34lcLVOSV0Ud2/lYgSa1qRClDi\nCSHPz++HI3Uke7gaTmJJpaBm3HKlMuzN2EiLYC5TrWl5zg5sH+cN5BYcA4xq\nPsgMIWHnKZqqB/t1cqpb/m2ug/Tt0JxUKxe8CBA/aOy7bzd+LRpBjtJmA06Z\ngSJZqL16QVLjvyz+hCKVbxyqEo3+3Tzt3Wm9jAWKsJrCMFWna1+tqb2sFcnn\nJbYK0EvC+DvwZSogwQeyNbl/t+uA1pikl7d0tyqHvlOxTPbM+WAkl1kn/pax\nx0Ps9fJ5068iEbaOgi2hHZh9kfHH9Y983WnP9ZVI+fv3360JoeD4xbfBEURP\nWTn/GlEKHctuPelNHiaCggFIgdeFsKcPNgBNGuVw4o+9UHwjGUNHKwwpcVJV\nTWok1BB4JIKwJPYscLePcLDcx68XDcn12rehI7puYRUOqHigEdaknxptMtSf\nFa4d8TdPCn7/wkOCwOdofWm2d6BKwdGMPfTUE3LT/4bYAY5m66BTh0WySgEE\nCr0E9pY/fV6Xs9hLY/zUoKWrmqShJbA4mhS+s+0H+8VSeHN0vC6UreAtJ6AM\nI+05\r\n=RPZ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.68a2af131.0","@material/theme":"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/line-ripple_7.0.0-canary.68a2af131.0_1590520030992_0.9621845481501288","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/line-ripple","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dd21acbb411dbd6fe790581efe34ec6ebbebfc2c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.01de07011.0.tgz","fileCount":34,"integrity":"sha512-LwHad7xYn1NdDlKj262EFasr4T6wtiHWz9EhJhv2mBxHHkoExjbAzv150HlnRVP/2nxzsV2Qc0R34RF69fXx7A==","signatures":[{"sig":"MEQCIBoEz/4KQG+wW6tBiVmDWOxaO1+r7uVGERwE2w8wvLrZAiAQqHFi7FIbjxyzUTxOw/AXcBZaMcf8Q9hI3JwysnCx3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXN1CRA9TVsSAnZWagAAWRoP/RgjbndCEnswYz/v8xRi\nWvqXXZ69DKNO3RHpDqAY1TO6mKWFeUA18tYtq1whFQaNOmPdlrMd0TuMp6Er\nq+0+tgW/SdWJP0Vln/FszrkAufIRpRXXmCKNsTpGZsU++yVsa3Zh2HAHVqmh\n/nTRDf3UObBxzhVt3mzu7E7LIIciRdVkZSx0E1MwMm28ybtpiMNrEOtTArYp\nZgiC1cWMCnmon3J/vDsqqJRPlekT8slQiuqIkiow16oN1rZgSldAs1RqGJVx\nPnxtnRG1d6pA0E4VjsCvrHYKYuDaNnSdLKBAZPDauAabLgDPtz86b2zOAIS9\noVWUdhgdlKp1Dy90CgsZhhja3wENXdXnSEcyXUanO3lFNcUd13sP8u+mzg8z\nxJavaTviCMu+fXx8YABdgzrg17T2X6aYq9aIq6xCqzXZkIkeg8eiB4yOBr8z\nK5bJlb+nMApUNAHeIx7BId01fKdeW/nlcbpTDKkaUQqhQGthw8O4uPvCD9xm\nPSLrcx6+jmCNIVe4b5A+kdLwTdzLFTCmuZYA/JMQT/6qzZj4ffM1akWXDYir\nmhCz0UEXogd/egsIEppM6YBlfZS6ZGnEGAlw3MhReeRC/pvbObk/S4ddEWMd\nLtCoqFBgLB/33RN+4hVbAi38Rh0nkVDoH+hiyXaBQ6y3RtBJVXvtcym+crWG\nSRzs\r\n=Ycvs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.01de07011.0","@material/theme":"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/line-ripple_7.0.0-canary.01de07011.0_1590522741512_0.15742648931915615","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/line-ripple","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f699dd66abee8cfc0be544cf7d2e1df01817b59e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.51d4535fe.0.tgz","fileCount":34,"integrity":"sha512-23G3QraFTm9G29v39Xn3FreeImjeCZKvb1ZBQ0r9I0W204QAhY5GhLC8qJdIBdIttQNb9R4UrQLVslLEcqb4XQ==","signatures":[{"sig":"MEUCICI3bvzCl+ZP7t17Cq6EuBrum/AELxXPgADI3QdcP5EfAiEAjhIeqWQwfyWftpXcQezR2PlsLNO36SEFVlD8RFBJ1/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYtqCRA9TVsSAnZWagAAIUkP/1evJtZ4hshr7U3MZv7I\npzHS5gUvK2CpIkG2Hv11ddOY4BhFHS9sDxhKwWYNbgdjaud19eGLSzvKkXin\nAYtbt4bQ5q6PiwKIkcjmi0HW/oVEft1dTEXcfWhoAbVPFxUCWO9YZ6qB1JMQ\n9Xd+wj5PjK3KnEzp93osms2iRG0E/k5zijpDfQ+Zsz4JDSh+lxZNm/Bs/Dza\nz/GU/w38u8wXEv+8OEstI4oGtyAH6ZcNX8Xa1p4czNI9luDIhLD7oSuVDG5f\nGIHguSQvwU+q7LpCl1l3TBCLjArsr5GshGSyPtDtRCynE6+8wFCSZRPA2Ljz\nVzgwKKbzNf50uNhGCVYepDBScp/fH74/P2ZLuq1U1rvLWjvfUYqT2/HEw0HK\nxGyJVsNAD+3cdxEpAXNv0LLm/jr0LkBu57y8Be5CNocFk6WqGrVIQQiqXiQw\nlUYYsSDc6ICcyz6UiQRBgkKSPeCz7QpNCozZrysFr/i6Lji83cMf72PwZWGs\nnCVEThP/YV/WLz7CUu7/6S3mJizubjHteZ/qPi/MrUcIPATLYaedviOWQcoq\n5tIE5dEcGP75xOHvRIogloW+FakVAIWN2ylagSa5AVtjEwVDNUPziS84fO3x\nfLOpY9wqcxF6WVU9uyIYgyjY4AjYvXMMSDwlay6xvUqy3c0j/Sb8DTdV7YRR\nKFmA\r\n=QluB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.51d4535fe.0","@material/theme":"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/line-ripple_7.0.0-canary.51d4535fe.0_1590528873772_0.781078623151712","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3040c4dfa54a426c1dfcbcc12beead17021855ee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b86d826b7.0.tgz","fileCount":34,"integrity":"sha512-fowKOz0LzmYrQCFZSqCENGJWcfPvnls07VI9LbpcvQeEEYkmTQsvvEXh4tqhPqBlufXIjbDXoLbzzfVWf2iy9Q==","signatures":[{"sig":"MEUCIQC9F0qvZIDwtxSZ9KeMgAN73skr4JwgavpnV1tI3auoiwIgGXUAoldCrf0h2O05k6EHCNMZZ47xN6q++tYIusXVVRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZSHCRA9TVsSAnZWagAAI8wP+QFQQZSGS+J/Ox9vX/VX\ne79h98lZhVRg7eH8Ogi5VM8HbBzGB70lFw0AORQIN1xm61eMCVl60T7gVt2U\n3z3w8+FJGFhW0TXWxdQfY8kTPAoDVpISj41dVM1cIeWEkj+5cjKfzgB+6zAy\nUKBtHEdQGHFRCWjF0bK8EySUhLOZXyZmO+Beu+b9KDKizBPxXSHhM0dB1UlF\nflb6n7jxWYZ5Oz263zWyeP0hnVBy0tmgJlw8dNAgC0D1W6QSqkqIRfi7aFFB\nAXSGwHakFnE2+njLNc5N9oMUfgCPa+AdhqqTWVbcD/PwLOxFPR5rwA7QA/vT\nR4y6/AGrUdU8Th2/Gqb0zsd4KMcqV97gODnkl+7DlQrZNiyFT1rUd33ZHT8j\nfy6pCJSVrBKDOLhxguDRehcsktuwVFbv2JVf7BTf5iL3ZN5AGa7O4kiVi7cn\nTgN2xwMYH/Fd7jUYenfo0LDALoyvt4BVMqEG2snEYNO6aTgtWMPGHfXj4aqA\nPbS1K7b49sNMUSS+tvz8oAUjELOwPFVDiFqomQ8sNxnL93nETn6+uIg+h+zz\nwkN1Ta5IT/I95C0ptnHP8/gJbDLeWs+EAZpc7FTetq47DTjF2O/S/3eqmyI5\nLmiLuFRv+9P8W0mUiFnRiwaePwaj28d5w8s8rS1QcX+p7fPAjffw0nY7vZGI\ng7JE\r\n=L3iu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b86d826b7.0","@material/theme":"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/line-ripple_7.0.0-canary.b86d826b7.0_1590531206839_0.0674866342673055","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"12f3dbdd000f7ca6e4215e1953b578ffbc03e7b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d91794c7e.0.tgz","fileCount":34,"integrity":"sha512-5nNGVN7We7d5wPFYdezIRd65nlEVp7ncp9TpAOjS7Ug58xnR19v6gfCi5fSj5174RxFyy0ookzRAML8U5i1h4Q==","signatures":[{"sig":"MEQCIE1bNJLQ1LEfQAwCJtvWB1/RuCCDR9/k5q1g6l0dmXVRAiAEyA2L/R++CQiSRVC38rUO7nFSmkMj/6FRHgfuJDQbcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":127082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezaxACRA9TVsSAnZWagAAnBIP/3j9P2/gbH8FW13DSfSU\nIDMinZUeYLo/RcCcFqVly9TzKdmB8/7QAvVhuibhwcgtUhR15XQoExbwxhc9\njaSZCDtLkEQu6e2KlOm8cvNQEnjt/uCwvwwxsulK3hj6BEltHJ3xfjl0/Taa\nWv7KprF8zMLTiJfEt3NG4/VqvOsKVRDVJ/kb+bBoXD0ifAgqlhM1M/SQ5Vjb\nFgXyCfHMy9FMNmsb7ZrIOAjjpmkno3jkT/FINJ66Jpp7SmDYL8Vr1gY3YW0b\nzdMqOOHxQezR1rgZVuNhp7dGdTMhr97w8kLiD4uniAIXgHKia2aMuhk0ldVW\nSIHsjldpdRDo6/Si3fAksZxLPwB2/Yki8qQBYyHIFIJw9LPO+my1u6i1iizj\n/XlV12V5C4q97bV0/h8iYmuDLPSnxjkdZ5c/59NT5iJeLbxooUzl0h5cyuWs\nL7zXH+gvm8XhxW7nvxD03C069KA++BuFJVLqEKxtZ8wsyHePxUcEHHSMFIly\nUzPOI5daTiknh4vE2CY4Pu852urawPGQre/t7ke41R2zatS54mjVilibN/8m\njCrR+FCIag0WBROkjMAHK282C/GrZAFla4bFeEIc1+lX4r3VABM7KWYR4lBu\nEs4NzszgcHSOnbFFMf1BwtocF7AI2or44SlwMjtNBILNj+pGqqcGcd5hw4kA\nvtye\r\n=Ii2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d91794c7e.0","@material/theme":"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/line-ripple_7.0.0-canary.d91794c7e.0_1590537279468_0.24610820733415206","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0b682f595e8295cbf0110528645b38365c00a755","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8c6d7e076.0.tgz","fileCount":34,"integrity":"sha512-0za9lyNsrNmcHjHtQ7kNRLbCmaageOA+38khl5XxWamjfvYdRXuYPSqQfzE+D1Bik6KVjZFdnHmsIjW0hbfv7g==","signatures":[{"sig":"MEUCIBns/JXm3HHWE4EwWmPiDItIjExuYQS3/5eo5z6PiHJEAiEAmy3JfmL8j+D62VGMOFhaYzw43MYQC99hK0CJ7WnNRTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":126184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrh3CRA9TVsSAnZWagAAfVcQAIOxqXoxCM0w/GIL9ek3\naWPNFQdMJU1qVDng+2cSwkjmnO7oqSuSfOTQfBmaZzdrS+xwC88Amp3TCzoX\n5mP1aEkEbBTWxOpFJ0fYDl/65JB9mgruR1v2cXKAYrlRG3zjkz2oAzyPugx9\nntVu25kOr51lWxrf/O8BSPNieMxGy0x2VYqVanbY9ji+6xxG3xn94Btyj3Mz\nsOCf5Wdpd1Qww1tRD3bmITwIqzZ2sOuMAQ3fZs4Ln246ji/Jptmz7ZSqqtM4\neugKXepPL7HunVIjP9BaRoFWf/lS80Wcxbw1T+5DIh/j4/dhHItSb1mvwQ1Z\n7q7fvuzjhqQ2EneKsMT1QEPeKQRbtIStpeMM3voY5amlvTvQlqy01PvEOMvh\nChwDZk6nsZTNK+npg4KWj681mFUFW0N/+0hMYw3/ss1IHg/PEhg84ZOQvUpi\naoeAnp1eJJoRwV/MfMhSCsm3/mKUwYZ7hNVb4hmFWKFLXTavmRL1WvuzAwRI\nmqkNAb7d1/GRhfTEs9WFqTLIs5vYOZZi+YBzq6+xmLZH5wX8/HqO4YWJaXr1\n7ylxkwNAw9whRiYMeaUX03LqoLhYTjuW5GeLh/WiaIqOumtaVCaFqWlfm044\nw1WEjWbkgM3iPB4N2lQU/02jKHQxZ5kQMJEmqgCGQdQVtasj751ta8CtCZEv\naLH8\r\n=IKWI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8c6d7e076.0","@material/theme":"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/line-ripple_7.0.0-canary.8c6d7e076.0_1590605942986_0.5720946347469404","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/line-ripple","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1921130d2f779d23cc1fc4d0480b69c179cfa903","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.5b5f62f93.0.tgz","fileCount":34,"integrity":"sha512-YDGzUHMhzS1Q0IJ8ujQB0ms2tNU0ADpZYiehVbwwCiF3VExpGhiNgjvVZyvmcqyMODs3VXSaRuVY0p25WaEwGQ==","signatures":[{"sig":"MEUCIQCbU/0uidodu08Nnt0X71r2SgufcAKAo6lPYyH7QyE6mgIge5gDLaukX1VjTKduVnnt/xKwWuMBM6F4WdqhOvNybN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrx2CRA9TVsSAnZWagAA4RAP/2JFl9xTvXsAzUjjk2S5\nCdlJremnLL+KchbXq7MfWvTPohw6h/PQZaaeAqDeRPwYeSy1pI7swpr86TqS\nvqzvBeyUkAJVsqBeqdp1W4O9Zed1+kpKl8+j7dYcpI7AM1ycskfSQb0CeP2l\nONalno6FBNBdCvjdTr903yqtd106kc3ZoFZmditVK5+OsQ1cqXF1RwJjJeIZ\n52VIPWzJnHqAmmpM+MEegpRQQVNBom9w9pgQ6MpS1kAIW71s7iAo1FnU8RCF\nTe3u/FDpq9XG3Mf79J2APz9V/8RsdQq+zyrKjSGndcuaKDpwNB9mhKWAP8ps\njaH6gvUqNdHz8WZTQGNQ1ArhxyIOesRIvN6eO/TBVpLeHYp5ckKSxvSCojRW\nfWT9W7GAmI73qxpsoYBzMDPuYRu/j+FvcffcMj5c621V6QCySVScYnCCXECo\nBIyEiuHpvJICwW0x8TAC8ZiGrH4CuHzRo+Od3oqMxIsmvYkfn/7mzNKl9jWu\nv822xIrMb1xDg1TBkNEptw7V9miD5/+d+Ay6+CIjuD/jnD05YPgPAkyDSSaA\nsLpPu5Wo9rdiqR5RysO1NaaBb8i2c2tnXtMazD6oMbCG/mDhtlF116dFz9PK\nj0VwcHUsyGWhKNVvISyMR1jWo6pNfkXCVrvxcxe7ek8fsYUKS693dkjqP09I\nFWOS\r\n=D/IE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.5b5f62f93.0","@material/theme":"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/line-ripple_7.0.0-canary.5b5f62f93.0_1590606965795_0.3520846044069921","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3f399afee1c5b3794ab3b14fc4c3fcb6a92068a4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d9972abb1.0.tgz","fileCount":34,"integrity":"sha512-wYZemtuUO0iOFbvhAdLcP7cBQFauvb7Dc7hs2jmwtfVzx6lXUBKlRjPfw6LOz0MgxJbzLXWu6uZLdYkNdYyMHA==","signatures":[{"sig":"MEQCIAMab1HhjWODzLx+8Nhye2wit1O8k1ihhwkIkXlgb9xcAiAIiMH/C6693qx34pjHhIP8BZp9jw32edarIHHm9C+bQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsuSCRA9TVsSAnZWagAAL1sP/RpSGHwakybNvLjbFv95\nkY0f5tuBruLDi5w+MQkL/waYPh+JCvYKh03ZTPPPkxFvzXT+71glZ73aI0KR\nuDLW3fX0ihcPy0HTDRbj5zkt2fofAx87Zxi1n9Ub316oCjFnzbjW156K9rQL\n2bbXdEYcKHNtngCxK+aO0WgdWx/r9giC6vxOGbO9anojbE/CpBmosOrTmW95\nvznLVCWY7GjLHiKWARZ8FRXx2ktTFTWMPsTYxVYaVp2CWQJuoyXB8a3aLT3r\n3LHUPiSL+l6SDsJmimUrUuRy3UJosOeyD0pC9djQLLPheWY4E7OkRNzXhMUZ\nXrhcvZYYd16eDbkBkdmXGWTk1fZDrQM3CMel3RoPJSo6rWD88lrPbnSSAJd0\nEO17hrUFkv6TW/lUdOGmWijn9705H6GUbQL1VtszNcg11ECyY7zF7gFymvfK\nQGEizuTK8eIYrBbYUhq/02HS/5e4oWtqnCUJ1gL5L4LupGQ52BwzeE2bXt/5\nFN51r1Dr2ItBdoNwfIQm/WCTeT1ThrtyuWQlT45AlyYEq/nxPO9lK933TRCb\nFmJhj4sV27wnqb1q1daofIiZnTkNFSyKpWbIq8mZgmGuf+8iyqKooyzHgVon\nHESIcXaUvMfvI3pcA2ZbRdTfPq/AB24YDbk+POeiBbBm0TokKbH8HFgqh/1T\nKmlH\r\n=YnYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d9972abb1.0","@material/theme":"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/line-ripple_7.0.0-canary.d9972abb1.0_1590610833984_0.6754263590670806","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/line-ripple","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"084483d099d8e5b2cc45fe387697956af3c9e454","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.6556eda2b.0.tgz","fileCount":34,"integrity":"sha512-M3v8EZsF7sboPhX/82k2hvCl2PFJp0dyDRK1KZ7V8k3NOte6rHNG+V5+9klVgqhlviDAqN7MUGeAVOS82U/nCQ==","signatures":[{"sig":"MEQCIB/fEYjj7F/bNnwY/WKEI+ggJdn9bkWH12aa3AZmLcp6AiBKexqUljxiFqcEKFQIqHlE2m9vLzvDpOr44ikpIlatfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs21CRA9TVsSAnZWagAA1kwP/iZy+/EmREfhCxcekilB\nPmV0uuYo0GlGJym537AYRc+23cs8dhVa1JmsNm8Hu8CNHgY5Wqxw8k6ztRl5\nUF4Uw22eH5IvSsRTqxiUcRqZ+RNhBf2BcONfuG1jH4Wgs7TriiMI85Nd2DOC\nRy7/nt6jcz/AK2pmm5ER9yJiPSY4L41KVGR2O75rPWxKE5kGJ+jGgP1ooU/h\nrpzMxBO7o0KK/McB3ywoyTvqemqFUI7wJ3vkMtuj5PlQniV1rjtGwcn3tcbM\nWUg3NHYl8LnjUa9SvL+nTo7MNzutBAABBrfmTTwfxsX12RPj/phv+mkh7KI2\nKa14y2nJg5d9L2pb2H6kW8ksCj/9BUjFYe28wIzG1POUrmWxAAnxO8f0H3tz\nPIeVGFX2N8Boo3D/SjrqalshhaoElALc+gViY/8ynBFgPCNmTyWoKZRaAeBZ\n9ERxM4uRoXkx7orGSjJ0vRsUmVwfq7ldTuG911FAFAxZHVWyG7JNAqWamW3i\ncYi+cf+ta/skrX8u07odrPqvA7pJYkJpfoxb7L/Cy8gvf2jL8GFeB6g1W5sp\nITrg0vx21d2JU/sZ1iR8ECZRV0TlVZc8qZB8ueTrkNRJE4TAUc93p/VLJdXF\nnU/qiywKzIwqvWAXdiP0JI/GnLbXPABHjOBvi8powwIQ+4Bvr36s1lPh1+W/\nyfqr\r\n=9ss+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6556eda2b.0","@material/theme":"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/line-ripple_7.0.0-canary.6556eda2b.0_1590611380865_0.4474510033404495","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/line-ripple","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ebf5827c4a4497aa32d71a2ed8f3c4eef48bcd62","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.32aa23641.0.tgz","fileCount":34,"integrity":"sha512-rqNe8An4jC98ZYq9D6+Kmwf/SWBc2rMfifHC7GPgwUV79RoOrmZBfrWDCZhuWBfS5M4hZVSpDpQtEx9gpYWY/w==","signatures":[{"sig":"MEUCIDcBshxZ48Dfe565/duLeLfiKqDcDsd5GKNZEUqw+zL2AiEA6w5BguuwHil/0cJrQ8AJsYgfLopGZLhg43FhliwlAG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt22CRA9TVsSAnZWagAAwU8P/2BudwV/7rCZP9ox6Dy7\n31a2nQN1rNgdh5PH6fpewpSjkV2r95nVeLyjnLJMFEycGPFLl/0JqHV4deUY\nI73yoLPEk/5PxrFw66lfqPSVEZbf//0MsOf4tto/l+6+KagMGEU1yDhKo2FC\nkyhsL/lV1Ajrjll0HU1EDVOr43gAiB53vJkEsKNcBvG29l9qiwx1gW7yCS9A\nZ8B5fE0EzXVY01cWEPXxEA29TVjT37vUzsYFUO6zyZFGhiXQagiF2GErIvEA\nQ6b3A/GnsvczKgD502t+dxWmWfY901y3HMNF/0PNHTqLjTfFgcJ3HdMTocQt\n7P1pMywfyAqX8DmxinITPkxKiOeJ6NSonaIroe0GJ/PCzN4dd0o+UNDVc7rY\nlD+6XBAAMfun4+cEbK0QUVNqOj8FMzmDkr2AFkRJf3lEEPq8jBPbaV+3Tcy6\nxYrwj+QqK0F7rVl5uosEQZJ6se+t6ZM9DyEtanKQ8AICZIh1HRV9Wb/5+I21\n9frHstJ7IyTGsCasl/xAlytOe+O6S8idATCAWIP4Y4cNC8iNprzAEj3d8cdu\njldghb2IC11RaYuhja2NztrIx6akISRBbG9DcDSV2MwXJAqMVlGB2e8cfa9o\nYEmqojLQ21m3/I1IVgU1EaH92zVVoZUWwbDf5cDz2hDCx+5FVX1B2VL3NxiK\nDV3f\r\n=kwwN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.32aa23641.0","@material/theme":"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/line-ripple_7.0.0-canary.32aa23641.0_1590615477598_0.6926980015337372","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/line-ripple","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f03d27ca9ab8da2f2973147c1a0961101584881b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.654934dfa.0.tgz","fileCount":34,"integrity":"sha512-fpsOsZ3GMaLdMDsWClSMyYH0NiwUkRxT9ulc6v/sOcGVv01TNG0QIeOnoTXVogbFdBXDuLDzRtFHdm2HNNRKeA==","signatures":[{"sig":"MEYCIQD5tvzj10QfPkafEIW7Buvpp5tF2MIU85x85WvoWfWqxgIhAO+SMDtobhnj+lbjUFfI5I/UxuVK7A/Wyjo97FG2PFuw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezweSCRA9TVsSAnZWagAAqXsP/07wQrn1Y+QiAvb6uitm\nqhl/0EiIaml/JTA6Ne+MWlulzmIYUxYMttPlZ67hoQlC4sBPBbu05OG7kjpK\nnfvN0ok9c01cJzl8cUqO7/JBP1uDb6+yjZb0ZBciM/ki6xddNs7saJwmlN08\newd/nUbQ5iBtgYI8vQrwGDelPMZL1ZgeNRTSkh8Bjqn19qg//l9OyNnndhlt\nw8aDTtd9IDCkPHTOcMfzd9HL6akcsXjDcdlVB7rtKXtUwbdjqYINHyatsoqc\nTkvWixlzRxhF8ADba5ckaVBcQw+ujxvVmEPdHoTevAeXMP1jgQAl2HlmxNtk\nEWXk0ajmN3PKINHT63j8vdPayKBThHB4ilsFdltoPaPKJmSdN1/xDhr/Kz0w\nsGuQS9wCEpk38863bjzTgXTQssG9U46JsRF6bseHKvaoXrwCR4Ad8+pQuvQi\nY8sHfH9XCcF34lA5c9/rUUvyWdY/U4uT97YHEdWU/jTm56EB0lIfqfgWkwkK\nBVP/JMoE8mM+Bn/hWJr5uQAkkKrXRLxY2P3hEBllFcrxMv8Z5pK9WcrLjfL3\n/fYbx7CKf9msnLEUSe6TQR/BXMGVd46JdbNLSRCMf71Wv34lzjtnjNKEwxH2\nfXoSNBS+ewiWFZ3J0GcbqwbjSt0vucFnWvP9WlNNfJmY3RX8r95104bUoSA/\nb7KY\r\n=CjZt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.654934dfa.0","@material/theme":"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/line-ripple_7.0.0-canary.654934dfa.0_1590626194281_0.3788714644759128","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/line-ripple","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aacad908596d1d33772bd0a5c41679b300553850","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.41910b8b8.0.tgz","fileCount":34,"integrity":"sha512-2/PYU5/zuPAYgjc+kpIWscPkW9/vmzHs/tjTBSxdlLvzDA7BilRRLxTjWRQ7lR7ZTCe7U3joTw6r085EdhCPlQ==","signatures":[{"sig":"MEUCIHbCN3l8LZlHAhuYQt1wbIrzrEa0MyRTRPz0pT/sleIXAiEAtrTA0LS5xMGJU2Ia9r3mCtfvt1Y3UWUwQprg4N2Slqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwr3CRA9TVsSAnZWagAAdx8P/RjEgpRt4DucIVHENPgF\nwaLvo+ZIKv47D5yWqyamo3GtzrtYR1XcLuzmUiQAJBrQnynwIFsmJ/fQhpwO\nFad4NWgDCMJaVUf1GJTilGXyDwsdzPzZ8NMesIohljIXM7IOCEahB1V2WpAK\nEwf00OBArasAti/+CI+J5yL9xJpTSdLNqMtYphNTIUpg6tSrqeNI5p10hRYt\npDzWgiCK0icWYyC5SR7KTbxw3E98pry3jwLyiLPGSSSwAGL2F64T8nkrH2k2\nNxDlSUUhqq5Tr9QiFtVzxCWh1xU9D7HdwNzVJgRrR96VsGot+kiUdCyF5QIh\nT/otTTDSI2jJDoyTYgsPg8bDaoPh+ItQb2FH3aBprI1ISWJJXL/ej9oFkJ2e\nermu5HEoM7/plo7iaUoC1seER0y/V+TGiJUdk7xMTw1n+jf+3N5aeiJCIss/\nR3slfBFPV9s6ewUT4mAlKs09iJGJNCetLK8Kujl+LrVO9q2SHvC7Q4biRcTJ\niw9PpJCiEftB4Epw8w9yKLJq7DmXdD/ByrHsP1Ds99VFix+zVJ2a0dAPOlAe\n8bLXJT8VPztKCRbKs9hMfWX9NQA+3InKMKvKA3OYzzWUtO+fCSUoiKCa/llm\nLN7HZAnDzom92h0DNYmoh/XI7nd//JPttW+/PWbFTX9Ag06PogRPONEEmqSa\n5fBD\r\n=3YiV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.41910b8b8.0","@material/theme":"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/line-ripple_7.0.0-canary.41910b8b8.0_1590627062703_0.15356010623442007","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"638c23b576d6c4d6bc11f708f3710310cef4370d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d66d22bf9.0.tgz","fileCount":34,"integrity":"sha512-cDkQhvtlXOhJXUaGLwIWbTsVr0PJ+D4I9yf/U6e7fha8DqaUf9zGt/mL4d1XM0E66d9Spn1mQbTcRRXEB4CM/Q==","signatures":[{"sig":"MEUCIQCgGlZ/6yk21CBVQI7ZqO5WGRoVEvKJZDKX/9EQKpMddQIgAI9aHXFXjY0L09nQQRvjjZ5F48TnO4csWCJuxLW/9mc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BcRCRA9TVsSAnZWagAAevEP/3P8/JnTDsbD98kgBTrv\nbiB1Y8RD5f+hmIAN49nswOZxuS8X78Ts56kAGH5nMxwfl4bivFPKmGWW+/SO\nRlGXEdWukzfE9VG4zE2s9V/wpeJzb8D2WumkpFqR4KnJSwZdk+bzsGZIp6o9\nsaZUbESr4p/u9AyYJYRJb2CVQDzFaR0zNsu3nnf6kAEDkyxN7W9DJk39nbie\ngxXO3fx2+opoSpvL4stJ//ohjDuUgzXXMKBPjf4OdtGgMSRhNF9eeKybdIuU\nAIjg6WOcHDjtHyYboLcIVnhN6I7zjmNaMB4TEJkrC1k1FAsMLJamnI4LuGvZ\n3itmG14F5lfZ6Eu/xQxFzFG967zxDr/q9cklavj4HNHukowS8PEgMTgmcnop\nen0KA52ccpu17s7GavWQ6Wm27YcxdakSVk1l2LlKVH2UgOUwQOHJdpYtFqsw\nfqEgkvegir8B+KOPlAVQukAKTETxWC6gG+3s/6qcTl7yJXsc5ccJaBmcVZgd\n7h9pMo4DAt/AlSEFf0iAFBHloCYF2LQrLB7CP+3ibD/wI22o1Ol+kTcO2a5U\nLIV52korY2nED249WSKRwC0WON3LYhihAG7YjhuYiQzKSIOEz87uRUGTIDrj\n2i6fCTp+CnMnHmjeHp4L735t/5k6euNGKEop+qJgoG1sQ5fet8DpuRW4QXJ8\n2r5U\r\n=KKFV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d66d22bf9.0","@material/theme":"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/line-ripple_7.0.0-canary.d66d22bf9.0_1590695697532_0.1938406299216311","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b46a38f9eee3d048327a4efa8ea271aec5d9d480","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8904f3cbe.0.tgz","fileCount":34,"integrity":"sha512-aWLw7v1Rhi6Dl03TE/XIk/ElXhZTSl4YTjTMEfXRMwFBmHFKcwsmCVDevvmbXM8/x+49Flk6U1pzHcZcCRLyGQ==","signatures":[{"sig":"MEYCIQDYL8S9oGkKFSN2c81IHC9L4PSJWds0sn/KfTzaiPhwbAIhAM5EpYwbW4owD6PeWrNoufRL6H/D4ykHrMqsg/4sVx0R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T07CRA9TVsSAnZWagAAREoQAJQCh0hB91ff4l6acEZo\nlT/DRkTq5YshiY5EdpjQQHLKuML4XEpPRDoBQniZ104KB2ghdgP+sT0N3UNf\n7jFeypioNaXrhxj8myd8eTyb6h4XXbBvWNdgzhqD6psn4BAGUFJ4HjpaBZyF\nGurUliAA/b1m4asFZnKryf4Th5hrU17XtU1Yf/CM/8IlGO9B+TqnfCXwsk7L\npl8/Ne07afnIv/eaxkFuB/82A3nsmqrG57VgZzrQpY3AufFd58Qo3inCZ5bd\nFgYej/a7PbFNDQgh/vGy76fs/e6xPnJPyTxG8FBgrxkgW82D0oEX0VoAYZom\nufeOGv/dJIKwjEXxEAdski5watN+DlAaoSTT7ShjPClIS4iuaw0vhF21FI9n\nWL/LqQdqpd9slU4YjQ8fFIG5bo3s24HfxCHP0OWEd1yDVu+/A63yrfsJutmR\ndze5E05qq+t0nfOlZxjbzXYs3C+fXVU36K+4ZomR4ts5q+39LSpK3Jct81gR\neHWtDF2ILgpcAb7Hgir5OVmL7cvKfJGOlLOYS6xC9/DzGPKYidpRFpYU3G4Q\njygF0bSd5FLi4xaEVf1X7K4U6ufIYiC89qx1CqCGUUksMy11TfoZlejizuHe\n63EdWezRrvRdqfv6lq6tvM9/0SZTBnmvNthwVpN5EI0AaPexhBXbZwDq0Kog\nQrSh\r\n=VVy8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8904f3cbe.0","@material/theme":"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/line-ripple_7.0.0-canary.8904f3cbe.0_1590771002604_0.9142461920344045","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/line-ripple","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1e50d45c1dcf30821845eb5799a377d5e7e5542","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.51512a4ac.0.tgz","fileCount":34,"integrity":"sha512-bo+qi3aAiaT5utA7tBB49xXTx+zFL4ikzA/gXPDykpzqWq1x7e7vkKchHy8MjL/xAEdxeYFNBamG2lcN+AYeEA==","signatures":[{"sig":"MEUCIQCk9oDcaCGnmNNHPRB2hJYFir3H4+bkJ1ZUYOr/5adFsAIgZtMxVPj5aqWq6VkH22l2cF7EAYXgNZFuammAJzVNbjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V8qCRA9TVsSAnZWagAAjCUP/RcKHCCZqVYbSUSKErx8\nWVuZ//pUSnKA/vLmLyUavNZREBJflOV/fh3DWn4ROQSdzkVwSEVB33bOFOpG\ncVk7JTrpsi8B3C24sGr1whzI36LFPPGDTDY7rDnt5zgxRET5GtsubtURTpMs\n7DoCI8gX+OsbTdmy5MLP7VB8lwRcHbvIIbzp6hgbWKfObb3HJ7MkrdmsvcnD\n+HkTUCS94NFr3uu1psZ6fCLz0xlqpw7mN2QGr+Em4+hyN4sOjJKmtg9m8njx\npyh22R+Ah4DnWFFnExrjkyh5g3o5pQq+ZL6sbwx1sHhebDOsdq7qJHtkQj3q\n9xlHWo6/dtir60ycMMHU/vMxHG6QkHXVKi7nzwP0R8cTPUdzx/8u1O/IPtQe\nakdHeCqSNzGWh99pqzfCcHj6qCpmH3goVaR55fmRryWICfewrdxswZLhQPLO\nePHeElPxEDoLqEJKKIViHOpzXBSAynetv5ZH0xtwA54r0HPmAyb+dcNI7woj\nBNOIkH88/ey6YmNm6pwSH5VTCvHfiEuOY5WhapbfG/1AY53L8R0xEp9Tb9aO\nmCm4JqH+KyHJxT3CNDzHW9JSejlj9/UGmM7vhkDN4Fh9te+53ekYwI3lAXwB\nuQvOQalAOOyW3l7EfD9xLS9rLSu/rEOhVjdxphx59Gaa2Wh4wppZn0epKKAd\nd/k8\r\n=cUaO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.51512a4ac.0","@material/theme":"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/line-ripple_7.0.0-canary.51512a4ac.0_1590779689660_0.46266525388065016","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/line-ripple","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9aa1d4f082f2bc082a0003278c97a9f20e05799e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.0743288fb.0.tgz","fileCount":34,"integrity":"sha512-0ziC1TAWCPKV48iOPRzjAWgzQ30JGJWQHfhUcvDH3iqKnQt+8JXghgt7mVwTO+DGNjws1kaIW5DPSgMz8rS/ew==","signatures":[{"sig":"MEYCIQDMLaoEVrbBSsIO1JiE2bBWj7p+KEInKAz+UWRE+qcAMwIhAKuWWP7AwMtkcZD+t/VfOFXAyoSPQyiKAC43PUWpTjCB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WrbCRA9TVsSAnZWagAAFr0QAJuYaUl7bEAgGYTrCRb7\nK5gR5cODyGUaOGsNXCp5pCEejGVHUV/iB+hw08tu32iHx2E1I6XEggmtr2L4\njM6Zg7qdZKWGx8tdS5GM5BjdLK50/LhG89Ur+v78RbL+V0aF95EnD6jhGBV4\nc+YJY6eEmMPRa4V4cfJO5IA0R3MENOyysFdcSY7t/UqbwoZfaWNlqto7pf8i\nynjvhjNZv6MgnGEXJle3bH0J1QGXE7lAUhBSLaJ8n9ZofH2BFOklKk8D4zcG\nDbhxzkRP4LmZxFoHhA1bb3EqPfnE4uSPUjQ2B+8HXqV8tl52NCFseJvK0k1L\nGyXDZYKGWMBjV5QJnggJeS5/5txp0lXYPY5m+PDfknoVatU1aLu6T5KODjJ0\nf4uPGOVaCoiv7Go3TJMAAaf27kHss99kBMCmIfK0Nc6krv0eoDrI/Wm8ZbPq\nLuSYTrp2MviP2age4PQyOIGxSvvPh1H7c96PcQwXh8RtPyl5FhC0duSqs/ot\n8A7Rh7ItOA8eCOJ+2vXRGfgw3WRFEbS1A6cSDa2gPdoDrN5j78OLQnvEYEhA\nCYRn+yJ3Vky+wPw6/S2cwtXjE1RNx9bSwNT/nOMRK9bsbriL4tkcILRNLLZQ\nIHOp9eMtmLFQqwKjD6aSt3ZoXjC8RVFaeTasdtCDjNtAH/VcxccOuWid677n\nI7wl\r\n=Qjbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0743288fb.0","@material/theme":"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/line-ripple_7.0.0-canary.0743288fb.0_1590782683407_0.6175982822128447","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/line-ripple","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cfda30f2c3f9ea9f7c1d85d3f543a38d3375d4d1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.06ef147b5.0.tgz","fileCount":34,"integrity":"sha512-oIsMwRE/HPCrrEkgjFgLsbFvVY/hlS30TA6S7HIAmieKhNSvbIfChCX86l7bvUEDlCzXmVkV41ygIfH8FihDAQ==","signatures":[{"sig":"MEUCICn7W6UuA/BX0xk1x127f9fxeFN4gU+RXdhM3ygySTOuAiEA8ZSO6HwjPo0NVguPHnni0W9aK3clyRdjZ8GJxawSs9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XM2CRA9TVsSAnZWagAACaQP/jm0Xxg3PUmPv/QTtR3i\n1UgtPkJVRAGbf+aYZ+x9PA22HteTL9MbaQ8/tZjizPvCQZoh2dx/ISoONrDK\nGaxbFqz/myTF1WCNh5sQCcnZbE0fzn9sXnj8qlcZ764BU0P4jCH1s9FBXF3y\nQ2mgNr+2NwuGWOcsWmT6NG4RYdSwjCVlp1E8mPrcsHY2JR6NUBv7yO2mxh3n\nFz1A+07ks8yWUea0hTsszcbQ9R7aqli1nfep9h2XK09VHKy4+VPaMxnGrWnL\ndzqlyaB5NsKBqTJ38Mp0dl+xLsXL0sbNA77CRr7mvMdvjufzNrkj4PkTBsC2\nTA5JBZrB6q1+1AnrOE9lQR5RF2CJIVent23qF27yRL9pyxqb5CUzf3mthThx\n56lgXSfAVFGngs9NsWb8pJdgzsEkudCCQaotago76xbV6w1qRVgIV3lyG20X\nfiEEnd+7s3yyXe0g6gEgF6vPhP+bCEzYk95edNG3R+ghNBKjX/CGqTBi4vn2\ntCuBUHbQ9IjKPqcd8841bgKIHTlDTB2xKJX+ZVGQAjDxWIx8z+ACkZRMypTt\nEbyqXA97wIR6raOL29SBDN9dMRhKiNVpkyEYlBGiR/1c7dhwXMj+uvNa4fDF\n7bXxZTF1wAqNNG8mn11q7oDSHXBBsuswga4PkyZtgLunKV3tdSQgM4j2c0QT\nem9M\r\n=hbKX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.06ef147b5.0","@material/theme":"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/line-ripple_7.0.0-canary.06ef147b5.0_1590784821643_0.16528268596903772","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1dee10f6d858ba3b2ef69b4fa2f6b738c18ccb3e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8073a20a9.0.tgz","fileCount":34,"integrity":"sha512-H2k5zSXkfGCXqvnYpRdr9+fHqB6qn4moWQF5emwrPq8LTXD0kFiaLH8juQTBSsCU/MKyCVOE9wCa7eye8Alsrg==","signatures":[{"sig":"MEUCIFK7wUiovj4VWW7WLl62+FaIJnbCjWGEtu57Ebua9LGyAiEA6ICJhC2nSG+bE9TLPFGOwOpfWC6GSEFtfVB/RaOu2Y4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZnaCRA9TVsSAnZWagAABlgP/A81utR3l2dHJyIDg1GX\n1+tujXd8lY40AQHAVbYH9MbGoBbmH8OBS6jYf9ykwSMCAGaPybWzOEIEx+Sx\nz2c4ZlfzFTgTGrKVkIGQ0dGLzappPa902EPoLIQ4LthWAr9ql5htAwcYU9MU\nEEs13nCjhSVkf7FtsxSLy/mbZNZ5mX4uWbqXubei5ywRi1gIZT97YGM07nww\n4Lrp3QkQR0VXxc57Y5X2nSlW5gR86P+JUgU1hrVIYPC7CVPScPuV1qIdcw9r\nuUX1QVIf84eCGACGO6rHCrBJ7k2KARG9V5jBlflQsG+CsSZ/C6phfqFFdkSD\nHNdjE+2YDE9Yqi8u30O7Xg0/v8xusrlqkJnPO2/6cjudBDRqg1mGeqbHqPGB\n5gPueXRm1Bz/i54ZM+a4arfDZbA7u1r9uCNDYbqS7Sb/cCVcQ4c7yyerNcAh\nr1aVI0kispTrFBboEnp3f6paPx6WSCffSkOAMwPekrf4pm43ukk+NwLHWy3M\n+5uNpUqpMCXybu30XP9pKVa7SFUcsWxMk6wcqK7lyxauJfx+E2tfZ1dHQM5K\nZtzM5VgpofWhbGYMRlrzmnh4yqmOMwmnh2gcqphsGcFkjAsKfF0qc1HsnawG\nWSbF2IMAtasNkT7EPzjNES5b6rXBHR08LZnzNrotJfrl+vQQ1TTtb4acQDQT\nxH5t\r\n=/yVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8073a20a9.0","@material/theme":"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/line-ripple_7.0.0-canary.8073a20a9.0_1590794713538_0.4862883876992008","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/line-ripple","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"128d04229c809590faf07786b0f9ffe7c1f858af","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.72ff42330.0.tgz","fileCount":34,"integrity":"sha512-onEkSDwFgXJ3uz55IYRxROJI3cC4DyBbGeLKiw/GzC4tIMJPgNe06OhCPbOwJk6x+bUviv1/A7Es1wi6JZBXsQ==","signatures":[{"sig":"MEYCIQDUz5vBUrueoVlCmHGMoW+7LNCJYBIDeUdYgfGuJ1rf8gIhAMUXQQ3Byqqy523F7qzaR/JyUCBAq/qZLGVAmuJVvz9Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TBNCRA9TVsSAnZWagAAub8P/3vwl4j04HGZ4BmGOSwy\nIQep9MEPLiEuroGfHkRk+Ewu7yVgp9NDBnDnmAS/PnO29M00WrKB0i0QRqC9\nrkQDERa6x0R1qUJexCJJpjHcZRra68/NpFXZ/YBHAP9ygTmClU7Nk/INGxPE\n3nYejzD/A0AZNAbUhSNkyEWo5MqmBVI9EGXIESkEwITu97clpSMM8Mk/WaVa\nfSMJRT/eRfxwFpXppdGnj0nuGhzDEWGFncG1odNItHZuMK8/Je8EWA5VbZyD\n7j8leo2SL8V+RAM8VaEAwlir+B8Qj7wrDMgqUh4f49iQdKaM7uQoFFER/aCf\nvC+EaadVUL1Z6FdD6n0tITWzQSq5xqc1nYpe4fVFnvWvXq9GSzrRabn8Oz+r\n/yOmlJYVJtKonaf7O6CubeeGPlw2jgTGeymYfdw2xfSGL6d4IX67WGQSvaMg\nu1UoJQ/Q4Vkjbp3x2OABp451HOwyjgXpu3eq2CLPrpLhByM3ZklkVDrbHpoC\nI1yViHl7CGPm8Z7hW0fKdK+Jhnj2Csn6kIQhBwxe/WBVnf69xgmT7MiST3jD\nCkImkVLgksELAD/Wx0YWhvlBNbcUwA4RsKOeS5Nk37KyPspxNfcRpqQi8Q2K\njo8Ug6VL+4dITQ3M710uVObEb8FzOEzZvRuO0R9nNMenIHgAdNrTlxmt/47J\ndu9k\r\n=QvhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.72ff42330.0","@material/theme":"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/line-ripple_7.0.0-canary.72ff42330.0_1591029836995_0.03492706663823397","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"180108442133c6a982bd3dfa8a762de31b6dd057","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.9ea52070f.0.tgz","fileCount":34,"integrity":"sha512-SPQuv+LLkrNZ7+Miss/IrOVHpKhuhN/y5by0v7Gd6tGVc++f9blexNfntKRoo/MJ/8o2iKPZ8mvHah7+oaFJWQ==","signatures":[{"sig":"MEQCIHndn0NvDp56AiUdnYlGaD1ZM39rY8X4LWGv7GgCwtN9AiB4fvH0ZrL7aaE38hssEs9aAEEaDRKgnLmBWWXiRgp57w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TFsCRA9TVsSAnZWagAAL/IP/2JaMJzghIAE0DNEYP9M\nBLT83m3hqYdEEU2rBVrJu/tO0XaW1ib1pUqRNxVri1i4/t+kHb9Rj0X8F1U4\nvzGnaVEdNx8P4UISPXjHkFoBfhwWY0bA8sInnrEr9jYATSe1rqdZsVO4+wF6\nHHt41xx8Q8V/d2M2IdhF64+5tF5ub0rn77rW97+E9K55sWb0ovzzJNAMJKW/\nRahOhMvKxvsIHehpl25ysDDW3S2mVTd/Tj3nF6VuvHSkOVbxUR5EEC4CdwRQ\n96XyQ8B4dT74dKBL6JOI3MJQECYla8II7Gbvdb9b4DqEe7PTz6+ugxBTOGVm\niRMFZrCilGWGcNuEZzA6BWZHHG0D+5e6vl5lelBw0VoUdvczJSZjByl1F/ra\npz+d47J7y66jqXwi/q3nNo6OL7HoERTg7ceRXZMeTc2Vn8fpaK/eCsK1eq1I\nwyQ65lGYZVue8gXHpoB6C8KZT6yjWWt+8KvxZhRxen8VrKhhmfqKeI/ZRb5/\nTQD+yR1JHAOrDVbl5fIdvwouErF86iJkArLWw2xpWtpRDfg4RVz0S6lZNMOQ\nVeGGapcP1ONCqCbEc8RIkqgpXBfnu1ygJaEj/vLg1jKKEadM6bUoDg+s4u3C\nxrNa9CY3cZLJvz3lqcX+iJFmbtDJfx7d9eTT4GYRtztgCeW5ZcQ503/vS+Rh\nJVxX\r\n=ABQr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9ea52070f.0","@material/theme":"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/line-ripple_7.0.0-canary.9ea52070f.0_1591030123903_0.38894965589622355","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7dc2db8633ba15796b783ea7c99f8521b3586b3a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d86ad3b60.0.tgz","fileCount":34,"integrity":"sha512-SGEhxdSBvcHOBUSeM7CaifgBNEjruYN/GsXPsozBiTJ/U+bJnk7XtESOU79556lvy46Plno0KZO8pGxkTBstyw==","signatures":[{"sig":"MEUCIQDaqdoy9EnA82oEVJVizKByOQAedgW25CsXeJpRcEI85QIgdvUDQs4ZUkO5SzpTb2eBS98CMrQsW6Lyv18p3EnOk7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T9wCRA9TVsSAnZWagAADYwP/2HSLeJvkalyas7Gcn4A\nu//gs6mo8PycjkR/sMTioHiuMserd/7p9rd/t4zXg/Jt00ppVAEuiM0fAMU+\n+Q9kZ35/6Vl9Sv3ENhYLnbohgx9tkKm572IRW1l1BrM3S0TdvZaaIP9DMvS1\nPLJ58vaqtxJdl/oN3a4D2q3mmREfkAzJ9a4Mm9rXGmq5GS+2EYlqUHT59eYV\n8aup7bRxHYXVQ4rLb5mICHtcMgD56vMAzcULZnQi79kNjwhpcpj+UU2Qu9EL\nKBRs2bK9hNxjj+E8PhCKS7Teddgmb5e1txcnctkGCuwFUiFW6Kd/sOwrkjL5\nP57jBmF0dhg0O2rxn0sqf/TfDiedadWURrpq3BfAVsE+FWlqVmfWkogfia0C\nzv8RevhJTKXC9IApxrX8xbCSRmN6XgwO4gsXMPBvdWKwELKch4GSfsP6990F\n1r5C/KB5Qi9T7wgg+cyi1168KNhcFcvBddK3qJOMM4ka2oUluhJWM0gEg1sB\n9Nic5vG9wZmNStkyKJ/VCWTpQKCjqDpZxhLq1PUVlolEy7ypLgEchwS7hv0y\nHKzDAnz4Iod4dXkN5lJ35LvSS0/XpHbuUBWGlQ5rTcnQjSAGKCPGcFbyg+/R\nFbxTPUytc5m5xfjI3U3ENQw/24ldeTAUM6SKVWA3GfjWWZLeBgKTi6g4xa3E\n/aVH\r\n=mazr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d86ad3b60.0","@material/theme":"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/line-ripple_7.0.0-canary.d86ad3b60.0_1591033712114_0.061589450955598535","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5ae78b0df8f8ef4fc14eeb97ed45672ce1e10208","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b9776b1d0.0.tgz","fileCount":34,"integrity":"sha512-SFwbqFZdSrkKx0gmGLh5L/FPini0sA/ZoHjVmz41lX628+PPrI3V5BDAM5ssEEF3NJkG2Hmk+GhouopDcQF8KA==","signatures":[{"sig":"MEYCIQD0QQ+QPm2Qr+79JyXow0cGAIDLuoB8UyDFsrLvXE+aAQIhALqh0vWctCmFz4DZipcnioPbi7oY+Czz2dCKxaYkClf9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1UglCRA9TVsSAnZWagAAby8QAIhKn7P2JFpalx6YGgRg\n3YrSQ8sg3JG2/UBI+SEMOheVRa1cmyHeycX3dZTSBSwp7rVDAfsejo0c2Wle\nIGkmPzDEui3PztNlSLP72m4SI03avaP3bH1WKY+YL1PO2uSXuxmoSSdL4aLD\nQtPJcJyJ7lU7GceVaeO9unCEZ17HuEwjXH5grhXy8P9sylJzFDuutwgRN4kx\nrpKMYlIyxaMT9mBv5vc4YyGALXHK9bj4Froxm9cGGqENvxqVbfZ2ucQz0+HN\nUIIRx7FqyqpzGK9WlJBRXG6KUUZ6iW21mvjfgRjBfybBHIb5WXkzVIh+Gi0z\nLQHFkVjmVckEDu8ECuciTEDFo10T3jyJiVYtTjyrAboCuY7nw3ZTwpllvKXa\nuoO+csJ8mzPgjsQNkA6imrcpcSEiuKmafZHYFUfrGcNmX9cP+wAndzUzgHGq\n58yXPuGMN2mXiaL3GBU9ncbE1rkzDXCsVB30p+W40QO0JbX1Qg8CeFWVseiQ\nATMlex5gvYV1aLlSi59zN8EUY0F/dxK/NMl9sZLty+SRRWKbNsKXGRdvZv+f\nIYimbxoC4aRSeiIT+SjseQjFeDPei1DhOUEjv0kBxb9z7Fno7uWHqvJUQc/t\nzeZmBZGRWWqiD67FWR4V0PIGqUu4rnwQqDMA2SkRDOFLj3KBLF7rFJuGve5t\nwtgy\r\n=EdoA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b9776b1d0.0","@material/theme":"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/line-ripple_7.0.0-canary.b9776b1d0.0_1591035941144_0.9801569816640965","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ffb6d34712b3fabcff8139a50d3698d73dfb79c7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ba6f7c294.0.tgz","fileCount":34,"integrity":"sha512-0NuEwlolkJ4Uy8iAYRZq6QtCAdLLGSjm8/+okRbPP+QErLx3UgLG1WBAst4BBX3sVQ+YVQfnDVyYaHKUa4Jalw==","signatures":[{"sig":"MEUCIQC25XIb9bvniBKVqqZ0kvtEAilKH3uWJF5xyfvQK8WQhwIgN1dsFem8LLofZnbu6MQP/EBf5s71ySj0/cvbSsTcGLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oYeCRA9TVsSAnZWagAAhcUQAIWnX/fANRHtyb0L7s9r\nro1Ifwl0sD2RF/r+vJVDv/bVAn+Erc0CbekJgL6/1+RQJwr1y9SjKEWE7lg8\nObIXVVR3Gzf9S/9NJOps8MyhFs4QtH+vLDd8Xn3DdPbnlt7h1X0F9QfePweQ\n+0//BiB67QKykuL80UZtEUY7JYi6X51jbU1pXIbRArS/QMmeoMr8LZP1G97A\npMixMNuqcDSuBY8uiKI4LE94Fkcf9Sc4HSYCNPqfOWzEhpJr4uRZv/9QLLUq\nn518i2NDV7QA06KdW4BZj6dTijlOwsQL951V4KN9ZqPxWZGe8GimtN1olupK\nhjcFX6Tx9T3hpeSMrCA1ubxwfgXYuRaxFaf0lmSviszRXaQPQSOps0KChTzg\nydtPnmh7XwOl3IkGcv8FWJ1wgi+ErMo8bcs5x3mTa7q77vrTfEQZoqrQuXYI\nQtBeYpzr0WxidIoYVbwI7+oaG8sUoosV9NDGZC8D7g3ACyZH7ESB8Dggwsx6\n/EQWXwOFxqWQeRq3buiP/UAlMMrTxG0Sp3LyUiB4Zyl43urMJI9ewQd4Oi1K\nKh+2E/xQ1JmJLCJPPi6QJWZx/WU1skAGb3IvpEJtpejz1Mvk1fUM7zNLpsA+\nv2+CzZR6Bmsz5vlB3KxBhHabg6WT2btU4m/4WLIUINp1xrkZ/0akt7kDWsiB\na57h\r\n=P8VU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ba6f7c294.0","@material/theme":"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/line-ripple_7.0.0-canary.ba6f7c294.0_1591117342154_0.25082273801569044","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/line-ripple","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d503e59b2c7668f1da5f4593a48b780cb20661f9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.cf3b664ab.0.tgz","fileCount":34,"integrity":"sha512-6s2Hc564n5pgzAzBo1CypWdG1oxcXA/Srx2uu1hNpRpHehvJi1Nti3uk6oT6cMrSAqVEW7paAwx4ev/A5DfWRg==","signatures":[{"sig":"MEUCIDHNzRVm7doTKDky1adAJtHSirSiJyEb2CX/+os3wTiAAiEA2MXPb3t9c33uhdhzue/UYDls7nzrH/ZFJXzXnMr26gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pkQCRA9TVsSAnZWagAA8jUQAJ0/V6PIgr0Ib8KiOH4l\nt/F7eA2GcQH1nnW6ou+KFVCO4BOIrtiWqVOtnv8lpXBcpdqP6bcFkUPTc7Ot\nssOmzW/7fyIM9+RdFFaR4URQpNTh/paGAtIlrygKkseQMGRyBlj68uOTi+FI\nZWVbH4WlVIMZF69hb/CEpWdHXnWzjZRzsoF4YfZNrnEgblgTC7nqQMSSbiZx\nk/w/U05Ep3OaCKXKkYTG2Od6aqPYDLsUPfY/ltRPrlLJXx346SZw1R8MNcS3\nzREDPtBSfKjBQRb0sq6t7NxvIXA8ZFSaNfqL4KJwuZ2R6lp0yzM/sI1kBCHg\n+OUMORyq8hcd7dENNkTegJTkiDl4+uDClkiRIyynObNco/HvSdNkTV+uhuw5\nY/llMQFErkQOL07IZ4JgBEV1xVgwLuBrwA6c4TUVn3UO9kg36pSi50rBDnNN\n5AXWgV13BH6VvK2cnUMo0EWEmjMuEcABAHou46xJG36Q07SdUtZTOwL41Zg0\nHdTHPdYVjGQgPLoERmxtSYIZGCFFS7UXrUkM8mfjWAQiSKCIcFbcqRgASs8v\nX/ssk1Nyt38I8NQEP75frbIz40Vs7Cg1aAI/HzRQWZpxa+kpaojH2FP2XjCU\nYZXZCxkDNOF5/636UifmNrfiOKSNufVtPAp979YYvDNQUfR/42EpxHqQSwIC\nv2mL\r\n=Uf97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cf3b664ab.0","@material/theme":"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/line-ripple_7.0.0-canary.cf3b664ab.0_1591122192477_0.16623052653053927","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"86eb108f4d9760f97380064c8dd7869d406924e1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":34,"integrity":"sha512-mVJAMCsF4TeWQmHpgiyyJBukyXv8wC016093MjLoKA+wMzn9ff5wvX1AIW58qRdQsQMteWgg0qcTDeTV6yqJQA==","signatures":[{"sig":"MEYCIQDMRc2nl0BbaWI/KDOOfLpMkSIBneFDuxyEf6Cf3/pArgIhANBk1DAPlreowUllYsUQuBxe/s20GubSVIvSROhqTq+G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYdCRA9TVsSAnZWagAAX1UQAIzqfg/OJ/Yg5lirxj/Y\nplbxwlNg3oeBs1zCLZUVtkuh4caj2rBlbJKRfeMycgghqwmu5lY3B3LVSr4q\nY241qenVFRLgucTpLKm+/68YhLAR9L2/k81Pv0Qdh88GXRPml2g94JLEdKfz\nrqVdKMTb32LwA91IKu+uBgSnIGg6TbBthtD3gKFrhrnMJWukxt09wSoVgWAe\nPw4PBBonszWkGJ/htDBY02sEy7iLgWvXosfcdFWuIhYGwxnz/2RqsDnXtRb4\noX4CcaMMKvT5jaCswEm70gFW/WdcSn0SncEPj8n6NVp86gr2Sky3/QKcKs0f\nQeGrnGzucYvYT7lLXTfAeHuHe6o5mDfziR59dDHdI+HbfU4bSooQkd0CB+26\nhr1nbZ9NDDy2UPhMzqQMXDQjunYrphlViLMaNUs7lY5saTepWsrCO/yv0Inu\nuUpKaJzPHEg3NkNVniPsS1vk0n3YMdNEShM/2kH51gyL80jY4cfKpNLZ1Uc7\nzi7qekFimdNXAI3/IoMPbdhHXq0j3qZ2FlWVVCxU1QuFUUs+WJSsEdtqueVh\ns+ynoPNVIRsD2iqiu5+BRvKeOyEPQfEtuvC2xIgKJudpjcdOHwOuhpWHAjFO\nio2Ohd09nMU0zDwXXc3//MvT37ySIPSubrNUjOLxxnwuv6FxvqC5p7Zc+SUl\n9TcX\r\n=bSEy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/theme":"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/line-ripple_7.0.0-canary.4ba3c9a31.0_1591141917106_0.23110046768754922","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/line-ripple","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5ad343f7e9ac02743f4dae375053773e205e7619","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.388b042c7.0.tgz","fileCount":34,"integrity":"sha512-FpyntjO3bbaxJu7z/Z7SYnDOFuucvGm6SCp8BpRtzZwQB0Vu2Ic5ntO4K/fD27CTpFf8z5cMyUYRszzy84a4hg==","signatures":[{"sig":"MEQCIAfNGn9aEDabCIHXtqCJnR9bEDO6oEEjfKdKNPUlQsrIAiBfqppYO0dD4cfwDJz19nPvs8AOtNpCc0U7vRgG3nc8Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16mnCRA9TVsSAnZWagAANtgQAJy1o449ivJjs5MpKBH7\n8+Xx8nqLO+qPT9GArKnUncK484dRU30VYymYyh8XR53Dw/84RXqf+rx3RL2h\nZI0F0qQbSt2oodmcEnWMblc80TNU7N2yQfqSIUDSyqftf7jhZGx2EjzveIJJ\n1/kMGivUeSrey6mo5ZiUadOFLU7MwJb5ly5LJXUEJp2U/YccIZuk06P7zgRL\ngVxxuclQAcZhG+MGJyq6g9lAe/VTchCGYwzEefNHG9epsyR22Boz4bjlk1OP\n+RfswRDOBqUJljMi0I9POhJHvvLAD7NM2YFhi5IRQy2bHELwjLuPYzzbfhyq\nLbr81BRLQE4jUVejHubDy+mGGMJsaM3jpxYfkyDKwRTYSl/eAWpI1RqffEn5\nHVKfmcd/reBrv+LNL3gNJhYooURJwpURx/0ULtZlA54sdjNR1KZJ8i0c+/J+\nKIWgUCxop2MAH3E+4M9dNiuTonY8Ev+Uln7slO2mZwdr4ZOdzbmgyqRDv0Mk\n9WQreFNgmwnV8r4BCkTRr2Zj2q1HlKwcY8vW2fZFy7/tsaFXx00txv6oZ+M2\nTVO7lW+1hvn7+deg/Mj+3vEt7j2qLnWPfzk3dYYwbDedqSlbi9AU1CFl7AJc\n1KW86oayKr8Q0BBXxtUQsXcV2XKucWz6U0tzmPJFnXrwavVpYPnpAFTOEpCM\ngYR/\r\n=DGk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.388b042c7.0","@material/theme":"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/line-ripple_7.0.0-canary.388b042c7.0_1591191974808_0.8368346229576362","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"88f023cb9fc3ee2aab3465f57f7ae0e235747e11","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.cca1ca84d.0.tgz","fileCount":34,"integrity":"sha512-znlU/aPPItAUGvCdqPZ98bq668hED1RM7joCqC3b/Sn5DTEtUpWzVpmbj61TFgN+FvFPdl5LmUIiu52WJnfUnQ==","signatures":[{"sig":"MEUCIQDVAzVUdo1hb0YVImlCGZAkvezqZhuIHSgBirfLUGkAwAIgEaYfMJ414pOCVw5+9jbV/ZiWQpFtdRDK3idWzZI3Cgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18mmCRA9TVsSAnZWagAAgA0P/RELJjjOaw8UeSm7PuuD\nkGjBWQzh6Cynqo78fOTwjKZDHUqNALHAMr2X4l1BsCdb7/gF+7nnPXdqtVvo\naixTwk6LR7JaowCOyniAxu4jsCA/wQstVJu7OgHj0tCEXf7O2hMVwdg8qovP\ndfce71wc1eMt74We1kkryf3Ver4Jy9PXD5cFk1nOR1Nnh4cAfa4lp0rW2Ynx\nRpWKRBlX8lwB1sOSvfSX72SD/XRK9jEadQheEb9Q1ySiWK109grlRhtktYbB\nCVc9qGt0v0NIhDQlaYWzFqmFbB5i1uGV4aqpe5ZLE93MnfxbPK0RlgrqJo3m\n2uxZKjMbYja/IC00qnM0FB9O5qRvP/d3XSS/kI+gptg2PI/LikYw8jz1si13\nx74BVX3DErKkA/+or6cggkKRUZCsTjtzTHSdYZW1zx0tBQ4PEMO2v4prOKgG\ngRgdKBND/asWIGKuIC6K6QrYolQXGPNDW00TqUPayctkC1nz8uNgzpuCAjhp\nm3OCcHG2uKrI82qhNKVNsXBwFbSoEfAMq7WA6x1F9NkOg9IWOfyv9+IqJIiL\n/Buiq0gJ8XZCtDMIU32YtHLb2u7SOycFLt/jE8N4wr5oB9KTCe9PxWgP8BtG\n1utxHeA45yK/bl7YCjRavuDUQFcsEQAbZ4B7stor/LC6Ld+CGfAZMy+/u9DS\nDwLK\r\n=MH1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.cca1ca84d.0","@material/theme":"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/line-ripple_7.0.0-canary.cca1ca84d.0_1591200165688_0.18927554533792712","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7a39789060d298d9de4d401f02cb17e9e8329eb1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":34,"integrity":"sha512-iMRhEXr+ZLslU+ApNXeR2BMd9MTWEpfuPmitFnVtFs/384eHQ0zEUVnpElKCDFlZvbBWH6rbz5WI8PEh63dVNw==","signatures":[{"sig":"MEYCIQCTPzmXlX+/EUK5kDLaZXtR0ag75JrksDvTQVGa9dBetwIhAPMr/brangjIpmaoBENTfMPRNTq5d2WvYr1TX7usOkez","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/KOCRA9TVsSAnZWagAAl7YQAIW0MIIDZ3f68mPUdqeD\nVKILoVr5xTQ5y/exox4fWDMZ1RNBEODcmwZoMZnPVTBeF51WljH6Gw6bqhUV\nw8opkC7RlowLbdXz1xhrNKoOQhtbxBlCytk3EdvL4DHx1scGiwxIuuNzikDA\nINMsbTsDRRY5H/cR6SkAbZh2GJWBi/dwH2jcHrPktGHhzcHXSh7twksOONor\nOYXYTYxPoPMzPvgo+3I2zjdAobnwnoBp0Uy4DR3yBFqz9Wx2vuDqkLCEelzr\nY9QXCDfy/0pTXaEffm5HVx5Fg9WyfIYfSpImWzrahh6DpmjrTrS02YqQPhQM\n9GB5iYgJg7K0XBd6ioLwB+Z3RfVj+2D1zdBREw7unnSiNjS43RuMD31zMHpC\n0M601kbBEZ5CcBxhKu+WWUnn+LWcqqT5eyaBTaNQpNpIO0KFHHEn4R6cdiuK\ngIeEzLkPN+EwJen4ggK/XBoGB0iEWjQwG2te9/HcMWXk7k/Ee40kbPiPX4z1\nsBPwL78IhANHt3oa5+9/opkS6uvYUHz7ghqP8nqMACoaxXEwizdzdiSKM2tE\nK2mRWKkRvPVGExJEJ0Mst0kLtL7poZIdvCZFxBorwyOvwsLZUqIHMX9qUsMv\nkuOoE/0eYIIdwJzn0tVSHfitrFKZB/QwOxnPCCiOXAQAKC1v7bmqmAA5/z/X\n42Bk\r\n=eePH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/theme":"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/line-ripple_7.0.0-canary.9b0b5f2e0.0_1591210638385_0.25402466566945536","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"998d4628e5c0e9c2df99b2e6d682537ba247d049","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.0a7895f4d.0.tgz","fileCount":34,"integrity":"sha512-uipc54htW+LpSoOZIcG4Df+vcQQAE61RuG4yq1pnrhzJGGJftww4IUgvOA57SPA5Np8UoqMD0V9kHr5dpnGLOA==","signatures":[{"sig":"MEUCIQCUtevwXoLmR4chxB3Kh3uzw+UZmo6ZJvjguHzqxcZ+hQIgbY2mcHQX/kL9aBkqFMX7HV0HY7U1N4Ys3Spbt6hdYRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BFeCRA9TVsSAnZWagAAw24P/1FdYQJPVUjjl4MzNQRL\nwGY/i8I+r7fWMWUrR6YwV7CT0tj5TrnLzE2uklovPbx0SvFcxSmuk6cptrt/\nTlrecOVNTenLxIZLEO/DBejBAWSrKjRrolR3EwLU2YPQrCuTS5nNmmaO8Cis\n7Q9i8+QOOPK/yTHu4R0PMk3aF7l7m7lHCHBtzgSIwjt/EtCvKbvz/Nlwxajl\nW1nF3YydxGZ2PlUA3eAh8mk2VT8qYYwP61Be0GCCbcN5lpyZQo0vMwhrMorf\nu8Cn9+0UPIXQjCTk8Q21gWzYR4EPCKkcoM9fnfgBU7H/FiU33p9Ike4y/rjS\ngHAlZlLX6aSZ7YQSdoxuT411TcO/elfLHqbxoT9E70DxUtoMP91hC6WAVcV0\nC9fSHpDhS9fGy9DFHozeyWBi8pbJbyErhMCOukcX5Z2xWGA2Tc9P05QlZNL9\no8IkLvLGiIQSzR0qSL9xl+qupLDug5q4WAiqorR02K7GcJq6rPghg2i79ap3\n3K4sm1+APMA7t94KxD2eQKgrv/8dqx1gHJ6pRotSHyaE9PPvgl4VTm36vNZh\nowWacCezPpwWZoYHtuoayrOWCEsR8XNlNUBh/1Zgq5nYLaPMQe9IXxEY6lLE\nl2CMNwlq4JlVX9TOcfhsomFGEFwexRBIQPuj/oQ9njgaBjD2HkrmxHhyuh+n\nj4Wn\r\n=IDsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.0a7895f4d.0","@material/theme":"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/line-ripple_7.0.0-canary.0a7895f4d.0_1591218526050_0.4698408311849229","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/line-ripple","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f5a25496c27ba1b1a93aea1c7bf0168225631c48","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.7461aad68.0.tgz","fileCount":34,"integrity":"sha512-nE/5IxAsDDneI85js0LTN80O8nG+p7HoyqKk5x8lZNzNjDT+pEp6IdYM6k0pXHRUK788tvep6lF0zjoQPtB6GA==","signatures":[{"sig":"MEUCIQDzMoQAjQ9EuHWA8Paf+GvcSdaV2s/0MEhVfpkA+ZROUQIgG45xWTP/QVJnWp6Fkx8rHFGiJabDtS/1qQo/fBNBgf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CAvCRA9TVsSAnZWagAAnF4P/Aw9mQ1S3IqQSFz7oIDm\nozNSgDHmGF9RGLTOmzNIRLy33Vr4HlOo8g8m+54glWfLEO0GXnRqbdErlQ+J\nrZnzGAcFPgwU5tuAqKfMJ6jE1Yh9VOivpfj145WqeyzLYsvoVgvCLEFByFQe\nrdrDQXebkfrnfa+80uMXG8sKNRxpmXH13IXxZpwvpQrPuBzO7NQxQR7pHq+k\npm/S4GHdvMUY+OX7Y3wI9J4OtVFP2iw4oSnnbAAf9H3+JJ42swNv+EDgLAkQ\nXMkFloNc7bLFupT7IXp6j4BT+FT1t+degcOnwbKTtHUm2tI3wI1tuUclw22O\nEFLK1lROIkYQ8awAdgZebA6xEyymi4ua0Uwfy5bNIXP40Mvzq5uyyj5W9bkZ\nWR5jejZ7Js9XSfoiZ/ER3GIck3HNxg+e9ubs6A6Yzh0AWGHcoqBTSDwepHU4\nmIl+Go1NunaZCTfs2/lGfcTbv3BXb5JJf5db7kvmIBQXfE7vi3o4+MOMoL6S\nOvGO/bZtmMAsEuT3AIWoTbe83uCDCfhxuIv9wjMowqZ1Jkk2PeB6hbJ6gXf+\nbSBlzE+y8thnSLE1pdKo2qJn0I4XzU90/nzlhyjhqA503qkydRNA9XqjtzX2\n3T3J06htCs/k5myMcZZJ6BbzKV12b9PC/CxoHuMdCNTJPosPRieiHS3CfZsQ\nQfPm\r\n=cigg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7461aad68.0","@material/theme":"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/line-ripple_7.0.0-canary.7461aad68.0_1591222319094_0.7259918618959489","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7ce1b334d9fb16fd96876dc6a92a22838f1b18f5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":34,"integrity":"sha512-LEl6FlmKybjmaggq3QccyltmK4Q5UGkJaWlFN0P8d23LcL65j0iDHBK7D2MhtcJ+A/9TlqoFnRKUTbwVznN1Cw==","signatures":[{"sig":"MEYCIQD9gRCU2FI80qJgFBWerN8ZnU54Kjd8IKmPkNBKl1rMAAIhAKofmivPs+jYIwR68to7fDJ52FzC8cKrGgTeSmE2MDEB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WQECRA9TVsSAnZWagAALMMP/250h4V1SFTreb5ShAeZ\nZskmRF3yYSxKw8Bjic0N32Y9j/TAytK2/Rlm+WEBHIA8TuPsoBpiHVdudL+q\nefE61+C/4EB1T8Syfce1Bzi8Gi8cFAGepXK3N73wKf70ePAM40F/ml1hSyTX\nbvXLR3Rg2/uMMon8SH25OdYUr0XGOOpSjv7iB23VBg0fqLi1McHqk4zl+6Ix\nPgTx43FyB4cBItZjjl39ywND5iQusR6WVNnOy2RF1nTXBijX+lceCw+lgnKC\nNJoscfTkBFLrLd4ei7Qs2fJlps2L0hnEj0N1hpCfmSNFXJUk3R/T2AyBh3nS\nT3x2cwFoYt3P6Xr+2pkL43Vnx6RmgBOSkPheKD5dIo9ZQE/3UkxLoJzch31x\n0qYi/zc9vbwMEw3KGk4UBt7XcrFykA+MXG3l3kOotfA/i7pxB3sVwqcKs1Kd\nRs4G8qWaieocuAnxifXbpXMCEfq6lqk4QY70ohZ0sPoEmLXwJvkEqzs4+X7b\nUEwsQm0ZBitsl6T7rjoFj/OJkSIIgIGGx7x3BOKLTGA3Wx9BWqa9mRHjO7du\nm5Bp4JHNlG8fiEc/nZG7p+FLN+H/9XwiLLNOR+Boddy41lBr0w+mUvDloIwB\nF/6eJCsb3rRSkWzsiKROlcWo7T1ONeL4Wh/h2sF3Yd1QRn3Ee2A7Yj2LIL4V\n1JaM\r\n=AB3G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/theme":"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/line-ripple_7.0.0-canary.a0dc2b5c4.0_1591305217438_0.4779610314882097","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/line-ripple","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"735d6a605779f0c18a21976db36a7cb8a34162b0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.2b420c5b3.0.tgz","fileCount":34,"integrity":"sha512-hla28eY6NdoUdGVEI78lBfgCrY1/PMD4Tp3EQtET8QiadPFLqJqdG/FErSbttTeSTlGmI/KLl9n9hcdUx7Y0yQ==","signatures":[{"sig":"MEQCIBl1hUYu7/MILl8+yiynZS3HLrvMC7yFwo+SnFDZf8oyAiB113kFeStZ7/8g+mUKAXU2pV7QOwbjQuwg2GU9xy+mdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mPMCRA9TVsSAnZWagAAt5YQAIuK03lt2UDSjKHd/+JI\nKB59VjHastvueK4r/gekCHA+4ptnBSNDY7aj9wurokMAHr9K/QYuQlxCKHrf\n2ITlShT38rgwwLJY7B76OFG657+dJXvCLqeBJl8amsUuE+6uQXUu/t8IeKTY\nWrcWLEuYjgbr/rSG9d+MVTQ/zKwW0QDL/NTVEqFN+792OOEPQ30Nzo3oN77j\nNoCEF16HxqGgtATsiWIShjBsJYeAE7fKtJLFUtbVBMyCN1AFvfR3smUqLnbL\ntSk3QLSLlQVigevhMBluWNQHXXg+Or5HXiBmD3kL2DPcxpyNdQqXaIYf18Wi\nLP7VfeIp4N6Z27mYX8Ixl6+UnX2K4Oe2GbGzEE8JmYPgbEBnXHJ1fKoW2iCY\nBYpCAleFoZ1/LAQjbIUerXH0lUoO8y1IdL32Y3NsTw2FbnNieRDKQjQ3cHHh\nq6XycwAPBEV+ssZ8K2FPHIADROpa1vAbxcIcRQ+omPBX4CaTn1sisgYt85xR\n0pnFSKwgCQNfNuTrCat5E9vrdgt+rA7XGtYSwJ/pUs6EXEurZoAUYkvNwYLk\naNM81nZ+K1Vu/K1uCPY7i/q2/YPAbJZ21yo6kUWZdnQLbjJDFd5g2qCuvSq0\n0ncDWbUgjoTMKnBGHL0n89oF6cW1TF3f3mgxNE5sc/IYNtpsiYRCLvo3VEfn\nYWJj\r\n=mIh7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.2b420c5b3.0","@material/theme":"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/line-ripple_7.0.0-canary.2b420c5b3.0_1591632844390_0.30576097288360615","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03824aaeeba7f976aeef055e05887ce60a2ba084","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8fa22aacc.0.tgz","fileCount":34,"integrity":"sha512-9d2hnPawpfI3/gv7vIHCV7mXRwJaNEtsa9KAQB1Qn6CsG+cxrdSG0PVcyM55JquQpST8fmeFZXLWmrMRQ4Q62w==","signatures":[{"sig":"MEQCIDPzVwpHlxO05zD2fmJhvpKtsYRzJhte1sm/jHuE/Vi2AiBs6Vif6c8fSmPMHMb8NwT/5l8W2Ly+qKIH1bp718R5Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n2fCRA9TVsSAnZWagAAy2YQAIyd9tw+lqn7cElrkrtZ\nX8LU8yeyBC/SckPJVbEiurAIQYGyBVFiYBhyI8RdPdz2PyEXoYXDCQBga1Jv\nSeSxmhe2qKXp0Pzw7tn6mw2wXrPaiQZr1x/zYbwuVnA1DGso6Dnd77zGMPaL\nVNNxLIEAFAyVWrrUaFTtxVk1Q+igboBdCfnzfDS9H70Ej0W1d9Cgpf27FMKI\nsutXxslOq8jTStCoYEojLseXrM5zM4uMtH+EXMIPIRrh9rPjGmN2Mliw+X3s\n/xdy2q88YgIUxgw+guq5K3Owy8NZubw80vWDoR/T0lju1ZiE5ei2cA9oD2nP\nVW9W2I/CnBgXW8m2Nc7ftWJavq551JRvFoIscNCMSnOob3+Zpxf58IfVb4AB\ntgH3FF8qD4h2z+4jZjVZDwYOb8r265EJ1CNqnBkSTavivw7vQF9ArATNtUbK\nGoAwxHiY48YF3bBLI5lyHzmHN8zHTKwl611NFXYE9oS2sk+JKcjb1geBsI3T\nOZuEIzXeV5jdzWQrlaBEPLIHL4/A0SgRzqyVDpjd1/FH9/g81pbSvvxaN9pv\nXG9U+fvGe1pNYJjXMdK357zJncC+q7pfDSycotqjXQMvNbT1rS6Tbkm8LXfP\n+S1Gt/D35njUqmIGLEYvI02DxuWRn72FnBYTwN7B7CSQGYAG5cS2YzpV8CNL\nvNU8\r\n=kQnZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8fa22aacc.0","@material/theme":"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/line-ripple_7.0.0-canary.8fa22aacc.0_1591639455318_0.8519652350748852","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/line-ripple","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"095c911099883d13a81de71ca3c871a82af0c274","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":34,"integrity":"sha512-Coi2wm78/n78WnxaCVO956IbR9i15f4SEWN1aMiDrKIPUq9qZTqcNhGcxJOlq8CUW1YSCnifpjtWAyGH0PNYXw==","signatures":[{"sig":"MEQCIAdbJZvW79Yt2tfRYyaVsORYmYp0dlzg7R6lTeB7nO7GAiBWzzggCnIp4clxnJdP2Q4DzHuYLZHn1KMw5L2CS1wjZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3obyCRA9TVsSAnZWagAAY00P/2Ru63Ox/Z2zm0wl/Pzh\nQC8UNoncnOtbXmgR+69ERl1EE9BySh7lZ0KK4v/MdO9I0WdqBjeV5rTibwR8\nhJ3g7SLiZSKlW9a/kLBzjwkVVl9l199NGI9gIYlabG/5BFNmwk3fzp2eA1gC\nXfZ844X0d8Bk0TeBACT3gGfuN7b2KKsm6p6lzA6MP7tmmMg+GGvGU/khyDly\nw+QOicaBebWYw9jcugbcxRFE2Vw0iOQBr8PHP2rIT4LFnPWc3CE7IryF9gEi\nRQCOsLchEzSh+LKKOOZ48IWrs8cqpvE7E9bYGZq3uNJMutPzXSv0Ez6sDoeH\n8autfD4xL7zR1ZPp1BXicuHP/diURVUUKqfxGtmHjaMrv2W8F948TVKAvo4T\nbF2qA3w/Rn10l2fVgZdCYvk6N4/RO9pWTFn9dVVNPZ0CSsLUZdgzd1pwYkYc\n/iKy3JSU8Kz8WPc8iHIJp8RwSmghr4J5NYYfUwPkdrpeSANRNUfn1hVXFOZV\nineqm+Y+Rm6/4S1MlCWvkKqFPu0WFi3c3HFtke3ppPnzcWSeel/oP4HA0f/l\n/npKfXpsoivuZb8Dhwd6CNR9ZUrKMHQ2zUIBfLlxgv5RNCXJgAlQaopi43n6\nbjAU1MCIAizaub7z8qpsy6nrZdW9l55ksQcbUeqKOYOxOXsYX1bt4ofJJepE\njlMH\r\n=SDz8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/theme":"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/line-ripple_7.0.0-canary.21c4e4ed8.0_1591641841886_0.08507411101905804","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/line-ripple","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dec57c9a6aa22ecb81c5aad546499e4d3cc7867f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.dfde46516.0.tgz","fileCount":34,"integrity":"sha512-PuxyA+SZ5n8giWZusSECodaosflHmX6bYwZMcLuDszkHclhRtsNQGYMasjg9hxTYthfmhX7IjF5ho/1kDmARZg==","signatures":[{"sig":"MEYCIQCMAMbx3WhE0Flxwhy80VDsypPDNb9q4N9Jq27G7U6yFgIhAP94YJEivYOAZxgGAld+PFY6cwsT4QnnbeTDiHVJLW5j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pRsCRA9TVsSAnZWagAAOQEP/0hwJXwszz4ForHcgf9d\nZaSYh+EuUWoQj5BfmSyDId68hWRlkuKGvQiFwzypcfkiFDkErWwnH9qreJaX\nomHKcK1w+FVXb7LaeIfeyw0xS5P+BCUnIJ+tO66nRgDK/HPCDCRSuxjc1TZL\ncpTseHg7PCYgCu+371/vllmDHr/dJBadNJMdmw699w6U/TjnhsVJU8UnwZWO\nINY5llfxS5UBpaBj3Iv2dxwA0HA/p+hKzHlXHuDoYfdu0fJHpwymex1sbOJP\nqVXgEGGheSKIuEJrgBhExjll9J2ZxoxKQYIuqVjBNvpnMmunKxWHtOss/zoB\n1oYsRh9I353JbV0RmKlCUq50Gau5RD20Cm/JIagIupMG7Um54MrBDbQD4fG5\nfIiTNt+mrOAUSP/n1X+F55stwasFx7AZJDFMHUygkLUtX+OEIDt4yqreXSEq\nJDX8JfFGVFIFyyETOobGqkMWHZbAXFQKOuWk49yqI9WV+H9nJda0+5z+mdEp\nkm8W4zt2nehcc+j1S8WaBcWwuOMMqIHYK3c+T7wvAIGgKfAt0goifNBaFGVQ\n5sLw5dPnlhBxNDeZvUJgWkWiHfiXMoZAY1uPj+3EziLPbSNALdm55HOMok63\nIwyig+jGxm0QkgQsjaHRKtE1OKayb+CpzVcxSDMYmV6tm1KvEzt4yaOemMxA\nT8sm\r\n=x/g0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.dfde46516.0","@material/theme":"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/line-ripple_7.0.0-canary.dfde46516.0_1591645292339_0.7681754854920999","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/line-ripple","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9bc885aca8042b54fa524ab0c8932e7f3aaf5413","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.05cc5c206.0.tgz","fileCount":34,"integrity":"sha512-PdZSZFpcWQG7csOusKoMwt1WF469vVOzlptAGKJGcFBRqmLbzVldUo53VFlInB9I7YseAovsc+OWKHOwU2ihww==","signatures":[{"sig":"MEUCIQDkoj/X/an8C0OBy3qiadUUIere38asDut4JAhPfCnFmAIgDCsBAoia/rMlT/sWRv0/wzVF3YV541cHgUwBwFjiEpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qX5CRA9TVsSAnZWagAAYngQAJVWCQq+nNO5McRmyCVT\nHVNux4qVYKPgvDgrjlEXAFnhryYIKyK8lLxD/va3bQNhmrErXnzsAJpk+Fap\nbmYIzqK0qczCT10cgyuL4a3czTMNxc1/QIWoDuB5A5C6WjjJJ0G+ObAUaG1O\np56yEXWMKnokZZlXuZdrTim1hUkc1E72lDCTBfSuFTIVLmFyRCi0yKVg+HiX\njDFgZeNxZmXK/Fygdn8PhW2tj5zve8CgQbu7sT+QQXo/Eys3fmhJy65uSzDF\nwYuaOihPh5eorVacLRyRN8ADjHdd1Wt2fCbKbtUjs2gzjMNRTeKugibO4AY9\nBWIZ9IsbGJq7iRgFmWhKqIVrxtLjgmjQDelRwA/woJAqM16kGmv4T0Quqe8o\nFh8FO4rGZ8nwyQvRE2+i5AkCXPVSvNKCTAUGRz9do2o2ni2PgkhxyslFlVA6\nMaYf4e2ZQ6MJm0AeUogYgjcemVCC5sh6n5rE7twM5OvWClWqq3qIXiord47h\nkY46iGf7qupLro7Yl7I4Utnml2e5p3qbAiGLBF0PHPaaLeq9XAaLi6/7bASJ\nbBdhp7lWhDa1SWhKnJkJ74keFy0003yCIivESPwW7w8XPXGpcsx6Fe2QwY2H\n0Zw4UEDeVGxGU4QvcFAJpFN419Pz9VspOvyjMNPKCIzUTbOtCdC7mb9NiiyU\nfW36\r\n=rAc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.05cc5c206.0","@material/theme":"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/line-ripple_7.0.0-canary.05cc5c206.0_1591649784846_0.27912659997687705","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/line-ripple","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"22928fb5f65c1a673d289e7e680b0b84358f3bed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.3ee488f1c.0.tgz","fileCount":34,"integrity":"sha512-l4yd4m/RbBNR5SZXYkyAAIOsR7AhltIS/9pak32of0Z1mxB5YKbBVWia3224KZ6n8Vpp7/bS4eKkiGUvloSN7w==","signatures":[{"sig":"MEQCIHbfGqWDUC9oegBf71bDxQ+1pUv4NrGrqgTB+54WzmopAiAzV+bRC5Vf57Dc2LnszYGagkyo0saAdvIjwDck9Ipoug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36JxCRA9TVsSAnZWagAAFdcP/jT+DBjB9Vs/Y89b0bB8\nM3j49/tlBkBqU+ovvAkPOqSlimRlW4Xh7WV97vT7qcp0yP9cuOHlbd72RIGQ\ncAflToIQzUVAq3/CG7h0ougORVyDxt8EuDcathI4qGyLY2TSfiR2b9ROmHAF\nQK2ZC/uCll8/YjSmc8jqgaOKajSMli/74hUq3qh0m3Ncid75RtzxZath8PpT\n4xt7R/c26jTE3wBVd1wSgyD/O1/bHavNc6MsYzJ6SCaLSHWncG72BEVH+WJN\n+0LViqrLs/J0gf5evYcwdZ72KH7Gstj0qiiyYsS00CpBXhLBFJTFBoyWtb3o\nblm2gtubFf0zIPfBaSnFj9Gtd7BMYXp+qvLpBviFUgjvD1jLeQe3PSgawpS5\nJXKYRyTkp5c73GuwwfLIaT49xma6bsYz3No8bl6TZ1HIIG1dsxLhVW/fQVG7\nxd9nBNQvr1iAbJU7uR5I+ygY5+Rpd7CbBrdrK3YW1CGN9sfT1pu/zGJxJbft\nwYxBicWt37UOqXkMMJEQpM5OeHdkBbobNb52gWTqpCwjFXCSghI/KfGrzakd\n/zJDRgOyMOzOoRQg4CgGkXXMh1Z0GrCm/1L4nQjFmwGwHWdbtZ9SzEBwpWn0\nsTpE61l7LgxwvyCYtCCMoeTqtdZLor/e3WSLG4OdFsxVvyDTdQD1vRypkJxy\nACoS\r\n=GMht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3ee488f1c.0","@material/theme":"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/line-ripple_7.0.0-canary.3ee488f1c.0_1591714417507_0.2885374415025239","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/line-ripple","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf814bc4a7230651040d6df0ad0f806a943b3995","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.b83d720ee.0.tgz","fileCount":34,"integrity":"sha512-o7AQIsXlAIf6hMb038qhhFryzVq71UIC0Ls4ExbNp9vPsunvK3U7dq2K4TC2kqIiWNyN2k0SvUt6dG+AaxqmBw==","signatures":[{"sig":"MEUCIQDOpZMx9EpWYUuKTcuyFK6FW52lFF9mLRVYIp9YSwVHtAIgSuz/YN2PvTo4BsxE47Q+vMLbfl1KXwKXS04NjEI34yk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38YmCRA9TVsSAnZWagAAaa8P/ioqN5Qh45ubA9uXSQnG\nRjJGuqefb/RkdV4tFU2rXYCMFek5ITilqqV4JOn9/8+h4elgjbB4WSNOCaWi\nDgWa5cYN6DikPKwLieXvnZ8qtkqzfBQbMZQ8x8LjokYptjWUjKZYrhp1KddX\n5iakQOf1rrOr32GQFTIUmZhoRoXLPNqv2wgtyFgkW0RQ4h2JOWQfX1XuGId3\n9fPG85w8a6JWKARtSrb+uZ0xG2Y8sph2MX/IQQLnL4YdCTYVXhitaPvSob3i\ntFLGT9ALfvJCRLb1AMgAVfRuOF1m8BV5yQx2wMeZKREyf7v5f5xHn6s4yg5p\n1OmmVV70l0AWmbCQ9DNmFX9X1EsqO7oKHvT+WpNah5pTKJgAGKYsIcQYDdm+\nChLyc+H15MRH/Tsj5nV6n08d15tFV295c1pkXu5/bKvM6KvNvVUYtNLx1rId\nmaBWeEj27vLzx8DLNGcmkX6p7WZAEh0etvPyl9MTxzejKxO+dLCRBR4KRveW\nGQw0cmnDIGZfVXJcsZ4HbeM5K7fgw0z9t4wMQZ7bcwVzyTABdBccO6/6CBTO\n85ajZZP0aYXRnnclZB4WwaQpLx0Hrby9hjmoqfIJ9TC9qSf2SbRG/QvGTXC5\nhoAtZDyRfgn6foFIQfc6F46HgL1VjyKcgskdsYRPV/ttkaKm2jkuAI3ST2Hf\ngwmC\r\n=k4gm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.b83d720ee.0","@material/theme":"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/line-ripple_7.0.0-canary.b83d720ee.0_1591723557474_0.19098159091541977","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/line-ripple","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9c0c02210370dd10720f110e61c8c18c00b74719","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.afb1c11a9.0.tgz","fileCount":34,"integrity":"sha512-bJE+thaUDCEL791JmkjciwrAkg0elEG8OhLG97Ipn6dvDr8+rZsSe1Z6RflsU5JY/SYV951ZBuyvS5v1EKZgJg==","signatures":[{"sig":"MEUCIGSAIZ38+14ZtuC3LEEjJ3ha3Z+SMhankpJA0OnT3YiAAiEAlHwcg21MrxzqJGOg68Ed2UFpCM+5sdi7ixGDiJvJC4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+4ICRA9TVsSAnZWagAAg2wQAJ9hB1ubFkGhuD8tWvEc\nO6SyqyH8LdFaIjXqez5NZjVlbybGBUX5TDvP7WDVkkrNFldAe8xKz0gzPyJT\n2jiifhTIrmRSGM0YK3W1DHZ7FXVC3FSdpmV4ZdTQxQJqEe/zBnx43RrJ4LJs\nCDNrg/r87Qb+4YgMjFVDitzfIHxm0R7a+LdiVkHZxF+slAsrpheViH3z7izK\nMBHB0XNwit+GdSMr04zjawbyUNAwXjavfHdzqh/R0eROLc20EV47KmK99bSd\nh+CywSrdvHKSMOVCQHcv9dKSVU83jBCmtYN9q1fg+VjRVxz6yDqyZKnuLgtW\nrunmRU7wUttbnjNWcQIMwDPDnjomqfa4mmMD58pkKsqPRT9AzZK2BqZWF28l\nVF8ZhXDpqNmepxGLGoYIPePwOjHuDZKQEOZryBunEslUPGW2AY5LAyLdDduz\nkgyKP9o6dNLekejjmcNq1PYhmALy3gW3BEYxxta0R7ue6NfuiM3ubYjXzbC4\nt3eFC607ZcvxuZTcmLZbu5NW0KUGzb1ZoUk6I92EaPEg77iwEiVVVLUWn1Rl\nbhv0sabr0zhsS4O1VGGGL7pdg6fxMF5nCzNjbjdPGILx0/+eKR6AC8sCalKC\n9+gSaDLzEVPk3D+qdZvKw+X4LPCADAWi6lTm3spvbi9I42tGaTxsScZDcBbW\nzahn\r\n=rKJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.afb1c11a9.0","@material/theme":"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/line-ripple_7.0.0-canary.afb1c11a9.0_1591733767824_0.8056177549294856","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/line-ripple","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4dcd3666f1c1b1a541181627dc0523fff6c52032","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.39e6f71e2.0.tgz","fileCount":34,"integrity":"sha512-RQv00BEyL11OZHZwugVMw4zFOctkQmMT1Q6bHvYrhG2RHtfGlk/lJnXa4PJXF+t33lxowy/rQrh8SZmdRqWhsg==","signatures":[{"sig":"MEQCIBnz5XU6BxX+fiSN7/gr4G/Mf/vGdLVMJu2H5chpvEUAAiBI/8rbNq/wWmGMk1QSelUdc1kdUH7oKgZ7sFS4I6BNTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B2nCRA9TVsSAnZWagAAKEkP/j7xiy4HUa2089McHCLy\n1nVqAmfyx570qCK5afT+wIa+rs4Fb5MvnWu6qnL9M8hhG1+VML6wSLptsbd7\nGGbTTDN6B+cHYhp92HK6GV+czeAJ9aCdG5t1uLU8d5m13cBG3NCpon0UpBkr\nVln0GmAABk4psta9Aro2jord2iSBEvqW5pr6KcNyV8kv1y6pMxc6kN62N8i9\nPhU1hSOVq6n1fODN7M0EYDEvWutLfVLiQVrfTTv6XiBfFnVnyLSsxuHP8Jf0\nj4ajLJAN5kSFn5AB6T0nlWCY3H/lYaVgNYL62Gqc6K/nfyjzF6hw4kTmD3aw\n0OPBfayOcuLzR0158XTAazo85pqrWSZ45R518nM26bDKEL0UAGTQs8WXUcIK\nfiPw1ONydNE2xDGU4DBvjEJ9Ak67w0UmxTXTJDeUSpXyzFtuFeAQroJYeRj6\n3piNLoDggKRqzESTqxibheYDPAxGwl7E9OQf4R+PkeGAu43S9nYVB5WJYkrT\nyTL+JdxoOKXkHlHQvwZ3xKlvsjPgbBNtKMOJEY8xdQ6H6FYChTNmfxYaqywc\nll+9CHbMEakEmmuixDZ23cP+TvfI2Xp8Q+jxQpUvJ9Z1bq2JSGvoC8MEqqiY\nXcthLK8HGYALgp8Iv9ZrR6QIkZCRG/oQv7HLPLhtO8HcHEjVgmZiXHqEskvq\niPBH\r\n=mlc0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.39e6f71e2.0","@material/theme":"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/line-ripple_7.0.0-canary.39e6f71e2.0_1591745958584_0.7902434538018688","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b541ae531a2f8ee59bac9f255f8a6c7738eb6ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":34,"integrity":"sha512-Qdk2+7pT7Ccizwk+10BdLwlnDgfuAty/xuQ67K84REXJoAXa2FAHOI1oviwR40Zdn3TrZ4wLvs1lVGzMqUe45g==","signatures":[{"sig":"MEUCIQDYBOCpwFmrtfcTqWGwIg78ZatjGsadh7Au/tlbb4PKAgIgIaHviUYYALSA0/nxIDYit2m1UPW3T1x+c5VlmkB5/W0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m3DCRA9TVsSAnZWagAAJz4QAJJq1IY6bsNiI0ug+b4V\nkP8oMZEiYKwDYNgJ+7h+/9vURLJhU4LnbE6vNWH0WHV4f+1f6yATmw2tFNyr\nqJ1SIfYMm+Ug70pGLJZi6e9kPrDqohALTfROJp12BOYyt/LqFO8RBDe88TyH\n9pjnWs25Zidqm0O4Lb+9MuXOQS3TBHTKWNk4Aei2CqnCCPbM7V9oaig5qRwT\nfcdgjiGeU419bOpLp/Kp5kNSfkv5bGE0FcgD1bjqDbljuqJC4iVKzNW+5i+W\nwSo6pOHr7N55WZhr4bBma5RrLuDJGC9OUv4scW4CeFejQRdVsaQQ8f13Gdtl\nhNVZ6Ic+80jl9r2N+JMuU+Zq2zGhNYFEtIzloSmWAMwv1Sr9AcB5l7Lc9S+0\nA6mIPfJm0kmdp9mM4cd2WhufN6788Hqi3ei+gSK19NR9NLjwZdWd4Z/2ZEg4\nbLrRH0gGAvBkYm9HhzhhLLlD8ahk+z4sPDV7r73YRfs9in4lk3dpH0kgxtju\nJXKtoDFk7dSEYBArcBj/EndYAUSSc6eewdZ4MAYRwD0pZe/e4cbXm1akt0HM\np6kGTNdXzm50O0xeoQEiSGASa0CgU+dxxC+uTEsHlb8Pb1uJuYJz7wG0oLDw\nlCEuc0YMT1EOMGjvh1Jt9maxXjqTTzT1vTxsDb9TPHmMudnNfZQVRoRXoWEr\naR+r\r\n=Mjbo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/theme":"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/line-ripple_7.0.0-canary.d4c66dc7d.0_1591897538871_0.7832976108271985","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bec0e73641fb92ad785123126edb471587dd4b93","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.be4a19f9f.0.tgz","fileCount":34,"integrity":"sha512-KmJUAqJ3bA9IU43somhlMn/AqbH8YFY8usqPyMWy6ngydkSDNlH0ev8y3JbPy+bMv+27Sj4Czly3iE80CguuVg==","signatures":[{"sig":"MEUCIQCLeECrEzALlMzvRB6mFGUCKlZ+KbbxsT+mQPtoqhAf0QIgKG5lPxjgYJjIdFC9KX1JjXWe2Dgp4/3dkUg6lfL+Vp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xu9CRA9TVsSAnZWagAAZFsP+QH5blp5dKSjHx4p9V+g\n5x6wc6iyvK9SCVv0mVPmQFtQF7Nsta1qEp5FwOWdHcNOLNxnWvAoqr67oPUg\nRmu+GR/e0xfJFBkylnNO02q15dZLaPwSwENO5f6q9xW/wBcFGAL7yXzEFixe\njK58dMoqLoOfuAFuWzvg28wEY1AQjkMLApGS6gXS9KgFs/wQGHlsPYlY+MYy\nAC5wALXLLQJYzm43ufazE+gAcPBLczYvRlRJJykoh97NGYiROCPs87QN7it+\ngZN6YPrXKyn5NLfFpz2p1D4VfKTvUJqUfRA+mCtsx3RbO+Aqf4Y0lYfv1zDj\n+QBu7AYRvRQBIjTTSi52u1bdh9yEsC+m/+MEZwynLkQWAEx05dvEBNYCSjp/\nPn8VhMGxLew8EctTWfE4S/4Ax/i6SCVwz1KNChJfNM/vaXaCEF5/DtoBfupD\nWozbUJhZTRVuNxtBXFDQPgrnPzFPWqvR2Pb22rp9pe21y0BWQmd6ZfdWtsiQ\n60Un3R4sXNdtkUmwKeUthc0f6Qha/zRwO0gyEXhGt5H/TzSalDoa+TtHqs0K\nEg126VQaOGfg/6nc4jKNnXSP7bNKQdywoh2X8Mv2nz54lV2AqmO9poGiHxYM\nKt0fkyMzA4eYxwnvBzdurZ2KvHmdHNFRplQAQdCZG4mZEpLP56eat6xXrA6L\n0fxW\r\n=/0iE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.be4a19f9f.0","@material/theme":"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/line-ripple_7.0.0-canary.be4a19f9f.0_1591942077138_0.1381248515365039","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a8b9247af9d0f92a8e935aff76bb05a466535b5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a6ac8f629.0.tgz","fileCount":34,"integrity":"sha512-nKaxW3GrxkJOLpjm7GmSCpw3FOwo8swqIx20bDYr8+BNKQ17lokTdsU6fhMFdcu2n/TfJa75LMnzc5ajDQAhSw==","signatures":[{"sig":"MEQCIGRnQl7NXHhpy8mUgy/kFtITuBzl9+wLKccMva0tzTdYAiAWmw1CT92XOBxdKz05pxH56OAwYsBWxP+0ZmsXiDd3+w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+hxCRA9TVsSAnZWagAAplEP/RjJoabxijtvZDXa0bSR\nkFjAkVevHAyw+Cd8qtXtsFgBTkwSOXZHfQUWZXw0WoPV62335R0sZ97ssea6\nwSCcuMb75y2ygCtLvrjf7CFqWnQ002YkdCKiwo8db8q/4iJoKVqEIG99+qTg\nT9I6N6J3LnieT1odhP9DGdTkxUipLgOGDOzblgj/HmoDlvzef8icgCCx9au+\n1asSAKsaaz3ZVaMXGAYpKno5IrFAyYAn4vhLUkvjfl84g8SdqXqb1lQD2Xiu\n6ktE+v6WXkv+PcI4NH/SInnpicU00bj+clxtWvuUZ5kFdzWpC9klJjsBA5Jm\nA0EpXtUVAoQzIHWoS5dIjap1fKpN5Xl01m/+Z8cJPy8FeaTweDAKsdQu+yyH\nJWU8mMmfxTKoY2U119CWUptO+qQnZ5kuIoMs8k3i3yOP+fsBpjHIlGp2/iE5\n61nSdNzj8DH22Af8BkcnZst95nfzlzbqizDZb5AEwfwOLUoS8NZS17GJCCel\nzWdxJ6Mfxji/ieXEBPC20BVt8BeoCcHtTE8WRsndrMs3VIzw7SUq9MSXeEOb\n/H6IpEXUxdqIcr08zt2JHiBm9pCVVjnwoz6gla5b12MMMfe2KD5q6IFM49JK\nP/ozUU1ESvVcilw8DaiSs46yURnDb5g96a3V5nVfktG5mntLO1LukjHLNrZC\nRrEL\r\n=ZDlk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a6ac8f629.0","@material/theme":"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/line-ripple_7.0.0-canary.a6ac8f629.0_1592256624423_0.27949727712980765","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/line-ripple","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"62ab4863f4b0a9571e2787b647a22dd3c5b8f017","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.9833dc287.0.tgz","fileCount":34,"integrity":"sha512-sEmBs7siXrYeZvbEoj/rU9CvNkam4dZwJ2nKkW0WecF/UXmdMd/QBid7SMgK60FwY3ptGGooItkSEpgRu880lA==","signatures":[{"sig":"MEQCIF43cUFE4m4fQtA2K7TxxO1zLrnBznZaK5BGCm5ZWvBYAiAh4nAiYMp8vrQ+at07z+SMasFnr08Yiz4pzpSCRp3CZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SIsCRA9TVsSAnZWagAA9GUQAIEtCcvTOy/cyioMYW3D\neYogtLJIiDc+8nVcXxLrUy1P1MX9dKcqiSkFV3qavrfocUjQl+cm1D9kOQHO\n6ys91PqRFfO8YczP3tH+JU3/lapc6BGI5eql0axI3SstpN4eUqF3j0Acs12E\nPmFtVri14b3ypgBxxq74CytoTybYXo4U3am+jKXO70O2kZcI6ReR9hVaPK97\nr+2/f9wrZlHKD7QEdbtDKON0PWOXfGyJh0HKePPeRv29RJjAn+Kp9eO/hwDG\no4DIT/Rg0vrEfzAl91cSczG84O6ql/QsWQXCk4caVxQghCCifzWzecWYEZnC\n3vdKyQ94A/F5JyH0Cjj+pi61dPI3mNTPRrAn6fVpjnrOKnuy/vi2RflHJock\ncA3hoTG1VjBD9jt/e1GK/7lKZPSfeBj4ZkoysUbdeilA+kgKCtDxUPaVUM02\nbXQwSf1o1HeCLNiCZyQ5xnU48xrV0S2TZkjZb0tEyOxL8l/dIYbSm4fVm4ww\nIDNXgdSmxbM7Ir0V1IjIe3RK6Hs8RCZTBIkZ3p/ATqQoxwaXsfyDPMrETPnm\nS50jwM6HC2R1COZ7F7V+V52g533NJbOCW7bFHuPi2By20leF4eXrGblwRFcy\nal9rZ4PtsTB3Ary1HD1ePyg8MKvBQumvonbC8qHizWpJzqrXj3klim4EFpA1\nSaEN\r\n=HvRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.9833dc287.0","@material/theme":"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/line-ripple_7.0.0-canary.9833dc287.0_1592336940256_0.7510402188388265","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c48772781ccd5c261930241cf84aa88379bf59b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.3aa33998e.0.tgz","fileCount":34,"integrity":"sha512-sIHVe0zcRaLgT4nlGvfJkRKQCyhuUFkFIsVqKaAfTWjEve00WCJiaeOeg6Z80oXv2Vt1kxRXI/YuxtnP7nBl8Q==","signatures":[{"sig":"MEQCIEZCZW32Ikppw8xQa4bK7sFy2H7XN9dStktpOdNy2UnXAiBvhCW8tUUWHLPdJvGyA9aCVR96AdSoSikTCu0xcdbDSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SmfCRA9TVsSAnZWagAAobEP/0DXsxwFMorhkAeG0iE+\nW2SKeOCojCS7LCroXHDXP/tC8+7LXyWUsAkDWFtj9Ti48ih5YHrXNbDZxv1t\nxSCXk2Mn4Trpzva46Rm0RWY6HeBi53o93x2rlkiu3kMOLHuElz4mjnPMoaGL\nwc2va1AUv78yXtXoaD9PMYKTlfKJ8QkAjYFh1sRfn2ZMUxF15BScD53PXqhL\nPl8W6u1jVhxeBB+Z+IgG1XJO+eKHy/Hn1FK4YG+yabK3w/aaBVNPxEf/9725\nfbDIWNOHn1T9qg51cH1wnePGrBZZP8V9pZ1qVTsgZB0dDdH/cVxni5F3NLm2\nu5GU94TT+pOI4rn2Wa4yLRsULEPJuDm8cfEXoKSmnL5tYldKJ6R5HXS1Q9O8\n3E36NABl4SfNHhQ2mTaEt879cvdycwMna6CDJ7rJZSijOscNUPRUJa71neGG\nLW1yZmVupCzPP/zPCtEJNil3cR7qahuLteOJFXEz8enGC/oBadhZAlNkQHdM\nobMuklX0WXRiU4UdvizxWjILzr7jcD6hgzM37Ej9QPvFpsjjs+Zpp+FMZsIb\ngcchcEPdCo+cfPxQ/4/EN0S3pnZssexXKbp4NiK0srZzsHzORoX19s9uaRtq\nAcpWISd0TSY1v77V+qi7jW+XMdloPAdurhEuxfruIYzTKyY7MmQOs8ZnD/1k\n8H+f\r\n=IQaQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3aa33998e.0","@material/theme":"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/line-ripple_7.0.0-canary.3aa33998e.0_1592338846679_0.60790456524856","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/line-ripple","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9c98b49fb451af20135dd556652ba7a80c7aab0f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.d2b54d183.0.tgz","fileCount":34,"integrity":"sha512-LKAdTcj5XMhYLtv3TNvffoAmsn5d/GQ4tpQ+mWrX+BHGx02VUXBh8jQCK26Bbp2sAY2E1GAiHLhZ53BbHSUUvA==","signatures":[{"sig":"MEUCIQDqjP9DvGerl7G+gm4oyE952TkbhxjxtpPRTtfdhrB/lwIgJHLakZazcehFIkAEv5k7MaGg1wwLGURxaQWGTt9wSMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sAuCRA9TVsSAnZWagAAmAEP/01VbxKWzConGw1vMiEI\n7ySTe3Q3atTnhaAbe/1JaxXyVjPpx440OUtOtbIairdN5N/pu/K30sjU+f+7\nTmYbHAOILKB2RaO76K5QY8YB0ApTsN2uRBI9NQqkcsWtT5G5RBkzgp10ntcg\nL65ypZGxByS5YYbVq8syRcvhqzEgX6A9pm0MbR3jIv7C4hj4LkMefg1x1Y4h\nWF0an2vJL7thLHvNK2yhM4noZD43Ez+3mz2iuHFdLZTjTi9n0pXrQzBcpBNV\n1zywWT63kBELzV1/AyGB/dtoN1DOWv5+ycSq//SBHTZQi7YwnRuu2QV0ZfFT\nScCFD++mTbyPsTuVsWnQIh6wLe74QNnKtFGvXEDAI0IhSYel2dHpmONdFV1O\nEBS+0iefy98WPOABkVJjuFrll5B9aqz/7tLkq6O+2JJyAX9vzLZcsSOpSFPo\nnAgjdo5YSWyqOCWByHF/3b3jlDyiZIXv9qlQCCBW6XhpzC2CYlCIxFqicoME\nzNcbR0Q1Fnuyi6FWXzQZkCpEYn2mN1cEoe1vV6YNxYq54UaLhc/8iPwOJ7h0\ndaQW9g1IUuWarAxB27K4Ch1CBTtpkiNkJx7yyyBHi2vJbviKYRJIcqvzlhiO\nV2XOKq0xLUUQ5clEnY4lxMMoOMhTqiyY3DrCKuY/yPvFiTFo4H0qJGslBXjt\nqgeF\r\n=Rpy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.d2b54d183.0","@material/theme":"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/line-ripple_7.0.0-canary.d2b54d183.0_1592442925473_0.9592811111356885","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/line-ripple","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c8f28046a13f376be26f8428faff413a4a80452","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.f2a488e95.0.tgz","fileCount":34,"integrity":"sha512-piZEGjMAZVDv2jzLR9vkV6M+Au76hWX9UsD2SRTIH4mEbcbIQY1PSeVCL/aiK7OyoN/bKjTJ4hBbZzB6s5E9Jg==","signatures":[{"sig":"MEUCIQD/tRHI8Pdh16R0PD70c9i8uKb0V86MZEbyOPSA/adEpgIgWK35sLktfzDBLduS1W/2sTsoQtlqliNbuacRIW2151E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64JcCRA9TVsSAnZWagAA1poP/15Ia8zgIPqyISGPYp4/\nKqmLuyxx1vY065xf/UW746FLlTK/jvx7H5UYiLYTuvIiHqTwZwzrx1GajF83\nb9SL8vt+ZQdBqB25AvoeyRsAHoBzyO4d4rsPMwVcVBFzaGQ6u6Rb8FUgpzPN\nsFgsc1weTLxlBzIERs/OgpdgnYBRE48z1sCEYXN3LiUNFtlWKatIS0BzurLB\nOL3c7vh2tUoOLmFdGvrzTsDP/Pe2KEbJYwxnhUNDxxr25Tkj8asELWDnG43O\nYEOG0zww34QKJwlYGQcnw75xulIpjWq/TEeMK19qJMHp81bvuKjeerDAqxle\n7vpMq39YhvxAh8JOm+Op1ib1000dR1rfbKzpwbdTAGfTBDMfRS/Zv2nSZByc\nD6rnsdl8wQfi/rGtOh2sJCs1wnaqKHEo9OZJrzOPWrIVtgnBIRMCVCn8yeVC\njv1yAZWs/EXMzH/E3uQ3Nyfxtu8g6D8t90Z3zB5IioPbAlXSapdWZr9KJDH0\nKhHb8W7JO0eP91hNC98n33n1cdtNe63TYzMb6j18JfQns9aLHSyZCPh/Gw4a\nMnlsQUh8qsR7q1kYWOG1f33yLL9u0AywuSV6gW5B/QouINX/vp9lmjJv9J+W\npg16mWsqN56F9v9cadLEtXKuk149/ktpzWPbvlY0sQfbPrkqqzIL4W0H6Ede\nE3nK\r\n=lnoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f2a488e95.0","@material/theme":"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/line-ripple_7.0.0-canary.f2a488e95.0_1592492635462_0.7476412047721677","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/line-ripple","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c3d5e67a077118a80f05e068209ac960556d8161","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":34,"integrity":"sha512-z149qLwQUU+SxnpTQihi4AXPLQZGj5VcbYgotpCGokHqKRy2gl4Ik6hy06luBKz9emqpqfs2SWeg6iwskRUp5A==","signatures":[{"sig":"MEYCIQC9U3iL/a7ovZuz7ZsMWjoGz/gtsY7tkYX99cHHn8lsDAIhALD5qaDtitgVgOqUfWOXdjBbWZUp+NtOXD0An6s6sZdq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64UwCRA9TVsSAnZWagAATpoP/i8DoqQjzeYyEKas0nDC\n9dXIFVf+31Q7Xi4ESMyxqw1ETHTZG907OUk4wMAu4xkUtKOS8QCkV6zgoGKU\nBGDHJL+N/wgX97NHaSz1uPWwcywxyVAa53PAvvxhOJf9oegaM/r7/JOS0F3l\n48OuqTaLs9H/kxeClqqlsy/zuncRvpSxIFPLuBR3r5tV0pRaBhRwMaAlXr7Y\ntsEVUZl/4qRkXB16eN0jTu0XCLgShicbKtAQ/uFJfczyf5HHxTFzuNxfGHE2\nWSb4p/h3TtsDao9X4BMxIU4PmwpNWchui4BCrRdpmY4hlKOCrnrTlujkSvJN\nWPQ17MqiIxO3jN+wif/+3zP7fiR9CnflO3agtMw3vUggMULRnSInLigb+kds\nLv1+Pvq2am3huOrmN635GQ32cyl9bm+9ahEIbQpAjjngE+K14krwZVKlb3fQ\nluzLEaT8Zety+aLmOa4UruvCnh2Xt8C4YeZj/LLnCOuCZf8Z2v7F4Nsw9aCr\nRj1mw6keZLK29T/Jh/0HN9DKDn3hTJRcSlzVMH+YXfHKut316EVhC/JnzELP\npptTsWMWl8PeFM7hhAmL7A+uV5kEG7ToWT9tVdgNEbpeyD3K2Ai4ZOfXwPg/\nFmBG8aEASzz2YzZvRB3VBAUcxTLccckVyW3LXHkuuLo3qm1YyNxGgRzGZWyN\nvlka\r\n=E6dN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/theme":"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/line-ripple_7.0.0-canary.bd8d1aafa.0_1592493359880_0.12075118902737003","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/line-ripple","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fec796f820f9d2ff66405169d2b2024152f067be","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.1321eb968.0.tgz","fileCount":34,"integrity":"sha512-ZpeTfSRtHWv2ldKRjOhXQuShms606nybGxRRydO9n8mr17DDXR+6XL8fo/xAd2OXAa6P/zd8p3T7acido9cM1A==","signatures":[{"sig":"MEQCIEFghSsf5QZtyuBNr5zc81+LijiOqWyRftgEfyeDlelKAiB5wj6wsCh4u8LnI9zbNghLuAtNyC9zih7Hi3vj/5jUpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RAdCRA9TVsSAnZWagAAtZ8P/Aml+mKpVtF3YQnP2kdp\na26qzRnAUnwy1bTrdC6xUMEh3AEzFY3Zhqbpe1MGZn3/m3U5LaddQFw3Rl3Z\no2o+3hlpI/g8kqha0vQkccGHknoDHqUgUr9XNIZvW9JPZDTXLRi2b/gyDCqc\niE1XrANDK2xlyuYXoPDgrkiALwzDjCcgJ5BS1MdoctG9G7D/LqGBKvOwpD6X\nNsjWCSzV8MzskVif6SC4X8Tf2WL4d2Y4VszZjSc/ERxPOnKSX2m1re3wtdmm\nG4h9UZSVTJbicJnPFW8Yv2f1A1F6abVhZuws+ncDIy02nq7umIlzqn8c31Y8\nwUPMwSiNUTuoy9yAO1gdaFJcg98H+mBUVsE/W5B8AMH8SciX8f0ip5hPZ+q/\n5wZ98ojajWGWXMgs6/Z6omZz/Yyfap0sdBRrgBADEV6EsEGBGZyHOdPzE2GK\nhn1npxlHdXHbjV5dvRi1pOa0pO01gG4N1RQXuUvlSWbXZuOHQJR4Z2vUiVgd\ngYAS19NgBrHYpaz/+t7d0bw1t5BLhCvXUsAxZuFvjfhPHmBmmHbG8RmkK4Cc\nIy/iYi39Uuh2PNxXIn6kH2XzyUOYuvvG/ohkaMZZ0lYtJToh3ROfaSLdRRJd\ng8+J7J1Ik+rVsZ0ehASJcS+KOzhRB5iYDnP99GlAtVJuUZY8OD96J/mAvdw7\nMKn0\r\n=UNfG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1321eb968.0","@material/theme":"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/line-ripple_7.0.0-canary.1321eb968.0_1592594460691_0.3576624777457633","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/line-ripple","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a5f88c3348a07cae66a60b6afb5398648c097c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.db5cc0382.0.tgz","fileCount":34,"integrity":"sha512-BmKh3qqXptdQ/no44evNGBhW7eeN1oMqociHwlN3ZjkhtfLKDP6u0oRgyN/1Ay/H9kq/hCjGkUD+wCTdyZrSWA==","signatures":[{"sig":"MEUCIE0lnVI/paqP3gEHR7m4yYurk8AoR4CCMzcE6/7mSNfzAiEAwe+p4IQAC7VBJJTvK88Q0wkjLEyXAZu/nvXLycZ3dj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RGdCRA9TVsSAnZWagAAqxMP/RueQGmGe6OZtxwnrfbl\nrWKSjyDEtAu3fXRos3jysmkqVVZOibzvbcwZN1n+XXY9XW0EN8D1i7jI8QDt\n7dMFq+P6skP5DeHgHZXIxuJVDaHCMA1BGKWleuTNvwpTMZREZWitB8OuhkCi\nC7ShhqJySSK2hFEgQ8KJbgrOuFonJ4U6ttgdTD3Hy4IKo7sbXNUhpBZSDkQU\nASb5EEQ1RZc51cgIPSBWldfZLQwBbZT21GJ8KsqTUTClfjpyVPpDI3BIRdD7\naRpeZsqA3RetPFVI5F67SLCiqqLAKEr2lqfP+gw4/h6mEcJ4dgPxt1RHS1Lv\nZVCYm8AAII8fJUOhL+Avg8lxyRYZz44xKh0pZgEsCt+AHA1qzv+jNn3BA9ME\nImKZfj05o0SZp6HB3mfb9s1fsCHGDC2qWg9odqOLe+ctcJIgsM687YNlYOZU\nkXC/okycmDYG94smlNwNk8YTx11FKi+4a4JxOdaA8j5WAr0egRVDqw7iSiUr\n/G8crIyRqOe8+itVHTOtrV2UV60aMB5JAtMA6yrpF64PNEHGiHaJEasVGp5w\n9lzSXfAOZP0jbIHgUNdEsfUz2KHULFKo2YDNfB6so6ZO0SgaO1zi8T0gWMa5\n5gAZCxvsRU7VQmXh55oJTLq4mxgN56MK++fdThqlUv/7yufgxOO/b1zFm8qr\n+b7R\r\n=kmSk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.db5cc0382.0","@material/theme":"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/line-ripple_7.0.0-canary.db5cc0382.0_1592594844863_0.9642188675808376","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/line-ripple","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3bc321b1ec40b671945aecc7153784cc78718923","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.6ac9bf031.0.tgz","fileCount":34,"integrity":"sha512-InIDcEO5hS7s+NyMTEB0wSz7zJ6QZf4ehBqnoIR2huQvGy7OHyME3vOkm65dQQT8IdZsggrf3VAUYa8bSsO3rw==","signatures":[{"sig":"MEQCIDPJF0szHzz4s+95ah9fQ0+Gx0JautM3uXlhGXGwshRRAiBaXZ5H/2HgDDEsVKzn7lE/acmtW08Xhtc6e6lB5LnbhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RZlCRA9TVsSAnZWagAA5I0QAKG1mFHoFs6vm+uyEq1J\nxFxaLo8M3NgoIftXccKxh8WiUmtF3gz1WTA4t3n1WIRuXsHmeGdg80Zm9IKn\nqk3zL6YCuFEmJd8CgQ6eGbC44IkQt/0YosCICDFxfjamj+XefVDdidn9h+sE\nM+K4E0eD9VQnLB2yDlW+6wDec9bzlPdfniP8NIOhSPGgo2N3QiFCwLAiGvXK\ncwxML/OweLEdhYksa9xf7g/z69LRE2L+1H3JBor395WJ3TnLO3kv9Jbj6D25\nvCJ6XPUfYkScxVqDz48936OMFPwEa8RwH5p2ReFFuQ7C7eWzUmKK6AgOL89T\n99hTWsyleu+gYWLLH3V8rBNPINTsXg6WeSH7mrdZ01EjkEsPRZVoL5xKnRRu\nFZ6TslPwcvDeox4u6OHg18pLpA2X/EQXg6s2MaiWdPab2YbJdhC4XTcaJ1tJ\nILrcS5D+FBEyUt+hqJAv2r/ceKnVDRI6J4M/94sZSd7jndGQp/ZXujAFw6pM\n8QIyqQlWnGWLmhsDE+u5sbcv/Td6RGxkTr4QlsVJ53b3mcxoHxTh+fwfFIJi\nxWtmVFBe1zWKKOgleAEDzMSE9Txg2La2rlaLDkrk0C6zlZGhknsbQkfEraRf\ne7VaOq05JicKS7adWKZLW9rcbU3yHON6gg9bKbvFyzD9XZbteDsLYw91Skz/\n67up\r\n=gMrC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6ac9bf031.0","@material/theme":"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/line-ripple_7.0.0-canary.6ac9bf031.0_1592596069231_0.9762857596225274","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/line-ripple","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eef8719a77e62d8d788c7cf73e55343bdbfb49f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.c21b5c367.0.tgz","fileCount":34,"integrity":"sha512-Wglftu7NTury8abkyROFHcoZDBpueMOOR+5W/wHh8TsFIMEtoUP8XHksRinFkH2a2C9elT/xpz1oeSVa64ozgA==","signatures":[{"sig":"MEUCIQCKp0o1AWn8xX2q1I1ReXxJcqWDcN/e1ov36KEdE631wAIgRqrkTsWw5TV/5ihZ3qrLnLDSafwx54Fl/2a8s2pXRc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RuiCRA9TVsSAnZWagAA7cgQAJ6RSgnHVpH58dMFf8l6\nFdrmgWNChzmxFhAvz7Un//bH4W4xABfKQ4rCTA9x378TZVR7/P7LdHMpZN57\n0nkRQ/bqNoyS/r4PD8yR504Bj95YQGp0WFuhw2ATqb/YlxVBb4jlJHlb/4ky\n8Wulw6YocWCOicgFKnVnAAlb/Wn4bU+EaZLYRVlJRTajYLyA3jiCMhaelQBL\nhm/n02Z5lffyIg4XePZwV1whb3ZMc2jC56/FTxHYIcVatYI/X37aRYH7i2Y0\npP1Bd17fVDQikRAFvuBW7B12OGNVm0te6DGHN1GXLDOwqpsA5PSSFj9KjGgu\nmfQe2ICVKyaHEdgl9ZHAIijWxyePS6F/QuVsrS5jGOP47maM2xF8+OUSNRqt\nAbJLJiCLgf8h77kaXBSNU5tfeymPCk8BRml+aeeIFyucXOllalTybLfSUUUm\nnSSBPCqd1/7eDuk9oWqgLN6/QYMA4AlFNo8ggrUdKEWgjOR2LqPicd8n4Gja\nNuK9aT7Wb1PJItLhqh+01xB8HrbsSlb8cpnAH3hNls7FCaxK+z/xER+6GZJP\nGzI9h+fTkzu8SEFCdwxP0bBSgWwv40fHpdcSUo0EDCmF8VL3pMC/rvIoarQN\nPdwePhRvd8Cjwr8/fakxzj1YsP1SjB4P2H7BFbDp4ObeHTlKTtG/40PNwE+q\ncMDk\r\n=62ms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c21b5c367.0","@material/theme":"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/line-ripple_7.0.0-canary.c21b5c367.0_1592597409758_0.7094648429778181","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/line-ripple","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6d73f39804f86cc3ba7fb724b7f4419fb8693106","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":34,"integrity":"sha512-tSScll9nYUgBt/PucR51uSSTYeNfOjBDscWZXcmC1obrmI8ZO7b4SMZqB0b0rJgNYYAZSlGOmu4uubQQTYjQJQ==","signatures":[{"sig":"MEUCIAjBLh9rOpwrd7JpdI9hg51paDL+0mD5DY1SpVdbTeFOAiEArSLJZyADcaY2n69jhYtrGHGj1mDRAfKnnxXQ6GlqgHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R3YCRA9TVsSAnZWagAAfjgP+wTiXQd1dj1jO17fHf+l\n5/xspTsdW9+3zb7TbbIlMurjm3Q/BKbfElrCj4nVYxfCj7EVAaq9Ge5kOPtp\nLiRRoApk81ElAGRUrjhjU+AJejvEtfco78FTTbKqtxFNQTE+VnpNpe9+Vl50\nbv2cnXlrPc4z06CMpHN61LweAYlTg/B50AMG9tn4NuxhyKop/q8f/ZYhwmdX\nk94Pv0OoC2RmoL37ktzao4TYTDCMaVCjCqXp0AlgxFJWlflvu1OhbeXqME0O\na9pHa//LKn/JCy5Qx8C72F/59b5LQwHRJIYqjS2qfQzF9DzuRffCovg6b+uZ\nd9bEn4C+1+JFRedUssnDODiV/tJruxubtUql9XB/vgYrB9yTyIGU6p2xCjjW\n+IEJTRYyeL9a3OUayN6UyxmkgDG/y86hpCoDBTLH3DyJ6EZGr1Y678cky47E\n5hbxk1QuFrbSX9qP0J4hO08QMZXq77t5I2YbdiZOVSsL6wX7ETGjGCKJkOI+\nim8MpkCldLoF6WanlitXN8rGtANnE12ZA8gA2Slf7ol9ocvvx5YXYgengWXv\ny0FugvYcoM2ZGVGth1VC1gXEx+I30S2/SDg/DU5COQlt0OLtB0KsFXSchybq\nqtG467exao/EFVBTGLSNiHid0woPUw4SROTLcxwV/6pgACgBEZIEn6YVwayd\naKnD\r\n=uRlZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/theme":"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/line-ripple_7.0.0-canary.bfdd7fd39.0_1592597976141_0.13519893177385334","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/line-ripple","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f747ea87d3a120b2dc3dd8b6dbaf1e9d5741c601","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.10b505785.0.tgz","fileCount":34,"integrity":"sha512-5qmI9dM6phjPwOHqRKC8e4C79RSnfADa7qebuMVHrESCyuiLsFWa5Rp/ch9d2WhfwIT1heBjrhSinxt07JhgEw==","signatures":[{"sig":"MEUCIExdnvIy3r21NucM1cSDr3D3QRCmIdRvs7hul5tqKapyAiEA3Nea/mwYaV6Qj8bHGRoTVoC1hOSc/L+AzT1IjYXEjk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4uCRA9TVsSAnZWagAAC84P/3YUU66qMn9Vnr+VmEoZ\nla29TJ3imPvAqBh7r7dZOg6IgJEUgOQUPbpemacrxQcV9UIOV/aOodydlckd\nwN2E+/7IFwLlgyVamfYTsHQb3saT0OsnulqzOYGy78zNLfFTvzkmkJARYNi6\nYZbk2p/IxEREfzqUdAVaH3ITdvzVwabBdQ/wGHsajd6MD704fDMUnEGb+dIu\nFvb3ZGw4Myyk6UDwRc81+a8YyFN1v1+Fir2Wv+5ifRKoX8KCzbiNfKEWfjqo\nAS0k/b+plWrR5kaHYRwd+8d9ZAlJq0OdGqZvBQPQVZA1ko4jyBDfrd2PPgvW\nmFhqD4TthArQIj0e3GFDmpY7U4Q4MXXUbPQ9+xXwb7a029xn3egFMbwx10Pl\nw5sKZM8KmN3KOS+p6/HEElxEx6zrBfIVT3LWYl4yzjuKg7coSXILo1c3KHxj\nYo5WI52ZFpg9PcmDmf4NyXzLcYIQcmghmHJMSJgT8wVDXtG3/olzqeJj/xJV\niztTu8HoYz9IXGtQEN2eFV6+UoXnCKvock+ePulKbuAFXu3z+jtSzMtgDliX\nI1Y1OB+LkGrw/g4tsN3YHTW0D+q7YPGDyefhqTxBSf1gF0GATV2GOLfAlbXm\nhMHWjIlvejH3OveyfJzdXs5AbNlPMON7OktFETPM4X+6ihs0RGvvn3EUo4dR\ngUwe\r\n=kcbf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.10b505785.0","@material/theme":"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/line-ripple_7.0.0-canary.10b505785.0_1592598061502_0.3036915889152323","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/line-ripple","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2157b0c600853e5b40f89abce44419742ee7d975","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.6483d3f44.0.tgz","fileCount":34,"integrity":"sha512-WYFHV3tDwXBl1rAtqeoes3PgBhtfRZZ//VWG/nQKQNqhCqD40QdbZZTgs1s5QQBT0bAHbJ6ivTLHHWMWlv//Nw==","signatures":[{"sig":"MEUCIFHYUwKwtz0Ah1zMSvHdaVVnvTyulli9odecvk7Hv1gfAiEAq9Q3RpY2xwnB3x+5eKnT/1LiGgBAhy1QoMF97VvczWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SH8CRA9TVsSAnZWagAAAQEP/Rnfu44hn+W4z0QUMOxl\nDUZw0LUQ0g+A+DJ3Z+HGwfgDO4PFb3LwItu4xsYrcZbdXhBKwEXwGyll5NYr\nE7L3mKrBaLCXH+mspYTHU95vuojQY9Cm/QpEE1csM0+Ek/GASbaRLfN6e8J9\nMfMx86fhxOSJFVpDq8wXZMYG3C2A2EWKx8JkRnUD1sWr8vX+jIVe8iIkL3YW\nb59R02AGScthviX+4lm2swaQxwLl/kVuFSSFDfADo/NEfk0s6fUCvTdZfimg\nTPKWkG1YQ1pMrzRmK/GVFpI6yrMhs7FYCQHGmM3yogAC80ZJMgDlBxwiCtSc\nLDdCBI6EF78MIKyotV612jImnFg4oc6hXMTvYoIxX/JZObBRIw8D84zMFIDE\n69xYR4ksruE1cRe57GrtP75kT0EwLJxDhvM5Azb6X3Hn5c98wLjztCOMB7eV\njGGec2NtUZ0JNgTI+WDMqXKcUOpHsOpNv9UGwHEHa/AhCYkhWUdpuy1pSav4\nswpYdFq7g6KDukgqw/uRaYv4h5FJUBksxOGBxJiDQdwPOk2GL7ZOJOfhkGh+\nf4e3nZL4fY6OSLUhDFUtucRkrZWwXAJ8iIRXIZpAEG0iL4xUSIv7Qd3FQTBa\ndNr/SswmW6Mu9/b2jjLkRm1DOdJfK8uY3MHnzkD9GZnZsjhJPtWzGO6/oScQ\nBkN5\r\n=SG1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.6483d3f44.0","@material/theme":"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/line-ripple_7.0.0-canary.6483d3f44.0_1592599035320_0.6147477229156659","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/line-ripple","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a6fe1d08457bf36fa83edd2241be956e149f9d30","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.30a74e921.0.tgz","fileCount":34,"integrity":"sha512-8DDhWy2FadP9yCqK5qSo+pJmjCG3xSyU6tgdmZ0jPxyJaRq5CGnImSeYrhEe8oTC9ndiC4RuBh13PtJelhU1/Q==","signatures":[{"sig":"MEUCIQCtIdxOK6wZWrFb2B4rfQNc1boVXnfP3jjL8nUr/JKcWgIgHuyxA2k/tUJqesE0BD+nn+TDejiPY6bUd1eWoKz9Mmg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SKCCRA9TVsSAnZWagAA/IoP/iEfwlv9oNKaceR5b0M1\nSQXaw1sr07Hd3XlJsFMdLKUfmq3WryW8PLdH1BhERNDvnSXSp4JTXmhy2thP\nbLzsVghdHk/ZWtR5Mu6Nvn4AGwzvZH7OPON33ykMarnftFnFC1UAV8Z2bSwo\n1/HxTFaZOMaGrnohhB7wPfb7LoCPF/Z2VLVg8NIdL/NSEgHcyb1SweK9Wqk4\nPBC2GFbaixROTZ01jm4ltPGKHO60IXhD3Rp5SiVDIuoIHi94o3Vh3uIzxnPh\nid/eT5yGuAiTuFitIQL2R+hOpRDOOb0XaYMUHfWOEy+aM4TO7sNfb3efRMTN\nkqotkv5BS5115aBun+wS8su7NR5FDN++bNNBTk/ahN5TuvSimtBJtsXIcXqY\ns7skCTTR7PFpB2zP/rOrZtd8OQitFE2QLY9oW9/Ck+CVzrsFipl8YtK+vvJB\njCK0W5RS2L4yxIa5JCQSh2TamDiVm0iNqN6kkX7FrYrKh10NdTP9Qp13upzY\nZKgFYv5814+ipGHqOs90t1hza2oV2necSMvnGJwb4+eNS0UIrRc2d6fRwyyT\n/zNbv9tfNkTdeD5Zkz/MpibUhVfmGixedZzKKieA3i+NnC/Rrd+yIilAAOH/\nAbqkqD8PPtzqTe/JAjRfuOaMx9TNJqLeWqLRuaseJb5NMF6eISh25m4JMzSl\ns4YZ\r\n=LFrP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.30a74e921.0","@material/theme":"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/line-ripple_7.0.0-canary.30a74e921.0_1592599169588_0.4499126983951738","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/line-ripple","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"05fce533d772c851c8b43158ebebc0c17de9b039","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.c20727498.0.tgz","fileCount":34,"integrity":"sha512-dMbt0SgSOd2cZCNE1SbBTHAfIiYmC6WitGS9IygXEaG8Y1MROyX8DHQx5N2hBgzoB7HN+YzmPtMUg6Xbipsh+Q==","signatures":[{"sig":"MEUCIBdkoJKqBh1WrFgMGybEpv380brrQ/0/0/tPWPx6DP5HAiEAgl4N0132X0Jso/mvz4LreY4gmQ5QJmIdX8LDxqv1jh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SMyCRA9TVsSAnZWagAACJ8P/0/NNb8QkyJZ8I8uLBQX\np7Npdqbf/t5J7SGXUXxborVB9vAPEPPAai+H/BtuqBCQsJcHsgX8zwko9U3E\nnWkb2JhqjW+UX4JHsgsMtUrJxjyEFAPGMwf7DwN0H2MEhwNG6+Z1wEfCJRg1\nI6icyh5N9woXt5zJBiasDjMySMUekSB9/dji9JT62KL55qB1CGFpgX3zK/ik\nAtZl7Q/7UIaOqOhErZw+Huk90p+d0ym0TqA7XCCCKVZrMJFDrvcMfv5oElq7\nJhDF41pz+FwyukuBUaijhSJIf8qa71hcRy4k3Jh+zXW5E45cvuCq1iCx4yny\n8py+M4md5APNySijdO/Wp1IYXm7Vjb/OstK5F1SOtZHPtpUfpoyPNhGJcj67\nm7nXYhFS6zWWF9sxUdpYWq0t8fmTioxthLvqqEY691eJZO/5hMYhZ9qXPQiv\n9UGmy5ZT8O2BBxT3Hjpj4vSbZnEHFodbiiXylwn2SJUqUt5IrGm2Y9/ae85O\n9uZuZHd2pf4UKFmH8CkvFk0zdnr/PNv5LZ2YTQIuYtWk540+BAf1TtLdavVZ\nupRQZsvw6Bhc2jojnLfdzeeheERNOwyQAG/Tewnc4oMD83zpz+wexGzr6yVz\nCj3WLtNDqO3RwIPIdGS6nSjz2bHJYI00lmYu8vGuA+gzShijxXBFeX9GlDbw\nFWwO\r\n=oVnG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.c20727498.0","@material/theme":"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/line-ripple_7.0.0-canary.c20727498.0_1592599346073_0.6852707828383813","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9555005d618b917f8b47877ebc0eaa196f8c2c4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4e360ae94.0.tgz","fileCount":34,"integrity":"sha512-5Hlc2MUu2J5PVtTl3tcqJ4w8cRzwZQ2nqGCrt1CC590lMWSA4myWwVQ+lwx3xWcAayaxnmoI3V8TTneFFlGxEQ==","signatures":[{"sig":"MEUCIGvZjwMOKXVvFoVTx8fzjWxBJFOeRe6d3mOoXBqsMRrtAiEAwqX2awgf5RZGSC2BUuSln2C9biHhCDDyBMwE/hE+r4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SccCRA9TVsSAnZWagAAw+IP/0OF+nslwA9sQAkWuL0i\noSae+rlqWuXoFUAdTasvVr0AZlCV5dZRFZA2PC4xj6t303AnQdaHS9KrabJN\nUN2N5E9+AVOZ1XJjADRoE/Yi+QrmIKqlog4LpnQd758PQePT3nKr64nSFylJ\nHMcjEdxrgS9+cZjYQS5Ic6is43Wr8oNOWm/E2nP7+Iu89w3BUC1T0wfULRdn\n+mKe419PAouSlMkoqlp9+78CqWfhj8XsUjOXcnml9xaatyt1YMxVo/7U/TBT\nMXJycnSBvLVgHEVWSmMUzb2gqvpLwb1lXAAoURWJI7HTBnxOuWgFbk7zopN9\n5V+INYuXY6DnhzzLsu9foddXaYq9Lk1BoawnTxiOaK49cvgMSg9r3Rl8F+Bp\nGkAW8+4cAzsp6lnDHrhWAHbxKpbmVXYHlXY+/r5ZgkEecAxYmxYcrAVgGEdE\nEHM7yjB1cAZzRQ6cBcPU2CTGvIgKZ1kt4h6JOoqmquISI56AxV3kbAnrLOjb\nPF/Z3f5hpth3pKVe8qFX2FIpgRdlzf4HZQBpFIxICz3n9Ig614CUW5z1X6Dq\nOsUUFB/uJI+PonEuAgpCXoTSH9ITAipOtw0aXxYlpBVFtG3dv7kaMahKQZog\nmPnOlt+T3VslFSGsIvkHJ4qrfnwx0iD1r/wfWKiopwyNLFXndVrK7ySCgWi0\nleN+\r\n=6p0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4e360ae94.0","@material/theme":"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/line-ripple_7.0.0-canary.4e360ae94.0_1592600347718_0.08276994411745431","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"90d7e98a501317c8762fac9ac0739be647f4f0b7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8550fa53b.0.tgz","fileCount":34,"integrity":"sha512-CmhjhuZrH+tQbqpGUprHaZsLa2LKgDfJE04QGRK6CVnPPdcGPohDySIoqbY2fk0h0LRO25A4WleHc9Zk+awHZw==","signatures":[{"sig":"MEUCIQDBnAboEPSPp+s8ABMPvOzLy8KRjnQE5mf10vAMbRJPJwIgfCQNqlUPVXHn/nAf/qQ5wmDUZGGEEERqnP2rgdgJu+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SejCRA9TVsSAnZWagAAER8P/jxKd2Jbm/BYpIrW1A7m\nqr0IWMyZ/gJ0gBQmIWQ3e0x1pYpMTfecYk0uOsjhazZtukDsfbyk7dpvk2iC\n7PaH4SxiEMYWk4x1I0WjB6379Xaz8tAYFz8rNsbZlj//xHosnofd3kFy1Q36\nxweHigcCGI3WYCvzEf8OJrFeVcIl737tffkqow6UU7Mxz6zQYvNidXJFL1sS\nmtJg/VC7YWYLyteVA5pMYOnWVZDLgbFshRsqCjq6q/uMtashR72YI4s6wX+w\nOXPRFPjawYK1axWyPY5N27D15Zzwq0y/8VhMbZ2gN9tow/eUrBsa1O+DelYU\nfrJncdWf3MSxCFUd3lDNx2Cj2+M+ubisnneIi7KV5whxHoc9lTfaZ9QLEDrB\nwe73q2CBiJZ7Fw0raQm1DtY4wnEXu+fdC/5WiHC4o0vjD5CuDPo04NO7FNBJ\nQSvzlvcxP7I/YiB1xZzfPGHlr+ayNcZma9PVc4yGOR30Oo2HFK64BLuNxZkB\nzY5HYzTY9Pfl/6aTzV5aJTGSKfaWdEQzsOEOFVyYmKpzeP3TNbQosRKkl7IC\n+jt566sqB9GSvsfUY5QK40famkOQNp/Ot06TTE1kbH66vImYOGxnBkuft8Ab\nWF8eeHEKqIni1Z2jdy1XRAp0qPtKKQEPkLxRSsej44F6Nm3bxhOY05bZdbva\nIOEY\r\n=c31L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8550fa53b.0","@material/theme":"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/line-ripple_7.0.0-canary.8550fa53b.0_1592600482981_0.48353595432078333","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/line-ripple","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"363bf175ba6bc4e9a15ca2808d13aa0d7c5e15ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.93ade142e.0.tgz","fileCount":34,"integrity":"sha512-MMgZag6OcxhzsOUuxW+cySk92cbm+8ONvS+EpyvVeOQZKseHgFUai6ftLxPFd3axEhb1obLnrGphUOu4ZiV9GQ==","signatures":[{"sig":"MEUCIAjpSu2p+xE7FBOB8voyWvsVqscrZKOHSCWW0WqnJZskAiEAoI0jyW2Utfu6tQ837NcsGkLzNPWqGrM0/hiLV5+pnDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfrCRA9TVsSAnZWagAAkp4P/iB4Aykfw2dZNWMXKc5g\nP4HU3GgpdwQshkLyT9GDv3CvAkOrVslsL6s9F+bdBHpCYvzWRb55BRq+GGrc\nIgbtH5e+BOos9N563Ebba6nCIhDSWCiFA3a4tIPyutpyDYp3xSOMFvryUZ0m\nKlDZrHOvER/NQTirL85U9psJyP3O9gcz+UbwiKPZ+wHwEYTqh0ef8OVdl+So\nywhcmm0SpgVgObgF0Q4Ufe9cMxIQK5SCCOYAzsfHWJ5wTUUtA7VM1sOwwSFW\nhucpplIz0yvbt9myjilG4nb6WAUxgveHzny5ssCZ/XZ3fmVUVlx/RMTeCm9r\nk5N1Qz9EIg92Nd5gcIv4wuAFeQuqU/8tqpt1qsZQL35dTirzzOxQEBs97PPm\nxvMUvBcZmgo0ZHvDCvUJego3q00ZXQPSN9I7loEBEyql4/yRVWZD24fa5ryO\nFAFnmLRr0cdNa3IQ2jX3j2ZJXOQ6UU4WUS9ezp3zuupW5vbcEdLvSvSNiBtf\nT6ufXdPGXklvfZ2onw+1qu/NVSht+hSF3k1DlA4G4QoeTWkmPM3bMvTH+Gkn\ndukzN7QK9Pk9ydhO4Vb0cudjmitIKb59356gl4g4SCpR4lgM1t06YzrLF7e9\nl9W0pYv5NpGWLGenEW6KAKm55o8/exM8/BQ35YsvmnhVTbLebrEovVwbR/b9\nXVky\r\n=kW55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.93ade142e.0","@material/theme":"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/line-ripple_7.0.0-canary.93ade142e.0_1592600554932_0.04518854483707058","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e2680718b276a2d4f3f9031f250952507cd84b0a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a0032f5bb.0.tgz","fileCount":34,"integrity":"sha512-XrnoLuMLs05gbbXG9Zbob8XtmYxczV4LYLyP3bZ1CD1uC/BqTbDTsGg62fpjIc0yfIaKadni6UxjgsJkAmp5fw==","signatures":[{"sig":"MEUCIQC934IUXOXmtlspgO509QocvXGUxIf6UdNjbuYrb2JXPwIgAhlJOBc3R2UAFuGI5VTlb1Br7i4zlN3fEyulH31nTH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S3ICRA9TVsSAnZWagAAdeYQAIHF8MiMqMJ6LuDt/YvL\nYC4RorGCILXenQQFe23U7cdrxUGrfDb9w6KEtR3qj7eXO71Lw4nDsPS77gUl\n8n60pOrFaL7+nHJ34spsNdTuq8qoCREus3Nekeaxnq0GAXPnwB5Rh0affckH\nX0mVAjNw1YS4TQbdR0jzX9aOARTqx0ts610toq2DysRQn8OYcVDChQpBJVm+\n9xLNOV9CEsc1DOCpXXEW4XDZAMLutSAoKN3hVY28A1LXm/zJWto754YyWpj8\nPlN1zEDsZUZEhZwlXS1iUBRY4gOWZmZd93f6y56GQWKe+H3MrP//VmAGWfvz\nYni5NluD5uCg152YiXzN5Hw/yfQX+A1C1O0ETZE0k0El+oUrmsLlh8mlL4yE\nrTws8fafPpCNE6bX9FTg1tIXwiQIGlBHSt2TFz9pNzgUSqNF1QNQgE0fh0hY\nFycAyTdEKB0duznHv0KVabyvwIhGGCWPcl0kwtp/MjIOtnG7EmfavUlXKdQg\nWyklUU2xsMY1RymoMnBnuDL3rLvbiADFZAdv63W0hQ6MzHyJ+uBvx5pw4GuI\nN8EdyGAi++YBC+eEXjLh9hB2MJEtJo8VHV7MsnEfYuw1YbCi56x37NfmB6qF\nBNWUiRhm3PDmeAglEFpz8LIxNcQVGSnqs87+SKdauvcptDs2+fnVYMj7fUb+\nLBVy\r\n=YYIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a0032f5bb.0","@material/theme":"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/line-ripple_7.0.0-canary.a0032f5bb.0_1592602056125_0.6571077214749552","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/line-ripple","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dcf07e15cad0e56ae72834c67ce636b91c461d69","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.3f342e721.0.tgz","fileCount":34,"integrity":"sha512-4/7dsNK4V81VCD8RfU20Vxdb5InNi4ckZeqgwjAJCqio5OJmGixYS82DlVlwVIQxUwPmzFt20BGtCGK2KTH/qg==","signatures":[{"sig":"MEQCIEASzGBoZ3keAQ0JGJkO4PvYO24CxS+KSrUGfTpbt0GuAiAmwTRaWO95unGu+0ekMdsvzoflznDid3hyXUIs4nd5JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5LCRA9TVsSAnZWagAAO8QQAKIXcivhOQOWsTquDhdY\n+FCvPfiNIbIUObCWn5SRFoz6yoQOAJjUH2Juj3uFBHb7hBalGE9E5wqVd7lr\nAjh90oPhuJ6i/B3jVHC8Sw/qnOG7u0SEr+dSUfGc1+QPyGyiDi4zGIirv0aT\n+QqF/w6C1ZDDuHK+KM93Uam4WxqCXd11WNP/jFSe53k3WG9JuKpclrc5tYyP\n+vHwVY6YU2oK7rasp3PKZCaAYW3QYFltdg6AJQQ0RWyuPgPruxbiVl0AHblp\nINPbuI8WmRNdhb2s/HADjSprbKG9QQ3TrACMFCX6Q17/dTo/Jn1XMB8s9haG\nxI9eINT9AP/HgbI+rBw9/c8/5T1HxZQEKwGb7q2u3ezE3B2RiYfkRh/JO794\nO2qrHXBQXyzFH80gRWOU5cTUOFl1YYd8Af6L+lsGxKTpvKRF4w0utqhFbKP4\nbbEzz9EYGGx1OUogCgOdkbipJhb4S4wWwPTZWYyZLE45gD6pX1bRkbI8mUMs\nBWJvkWfns3UGB/X5pem1AxzXgkyCaqXaeqk3H2TsR+4jMFAumfx9uu11U5af\nQZxayPuCdB57d+vUmtG4mSKJbhCumUuWERVSKwTcPW8rpz9jiaOroq0+Mpxi\nZdNkA1GrshGImcnkid2w7YrF6ZzsMl5cXLnijApTh0ncjR2IYr8qvS1JcVfA\n2Uzo\r\n=bvWC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.3f342e721.0","@material/theme":"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/line-ripple_7.0.0-canary.3f342e721.0_1592602187432_0.8777885264032492","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e33ecea1a5e3eac8bc7df8728a5494ba34bb6375","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ff89457cc.0.tgz","fileCount":34,"integrity":"sha512-6FkMkl6G/Kdcg43GvsuY1hihdxns9NtORxZRARhxsSizbHP4msG0YP6O7ELNgu9m0k82oTqpqkRgKmlQOZeCsg==","signatures":[{"sig":"MEUCIGKeQa55CdVrIpO4dwlVrx/RRXgZAXUqn6jj++UYK8qXAiEA9+qc+2xhaWyYYrlnE5QQ8HYshXN3IjBFYctBwckVvJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6SCRA9TVsSAnZWagAAB/MP/iC3/Bh3oOedARY0Q+0b\nvwrEDAb3PZ2PiyJZa8smfqSnWW914bgCyOHaDMNFVwP9+r9FZysgwJEVkxwE\niA9GMbYoaOuqVzOZBOnirINZqWZabx27mhPlR/YvKd3jbMQZxn82/AAafriY\nRJeCnu7Kugz+KqBzSL5/C47G4arUoxYQ7DjzV26dJDXQlqzIjK7LW5Av+RyR\nlHazoqnuS357cVQJTRF952aPBaYykxTqgwnmFiP8kBO1gc24MUfOES+3a2PF\naTS9+SYBQ77J/gjln+XJ2U4ccFh5mJqmLQHazoMjnSOJ1n1ivNQVEN972v4e\nQS+d1Z0X/6Eotudls9HFylf+IOEy/xVbPGlLLigfcDwrKqFg1TpTLHinPlrl\n3KEyF6ARRoHa5s24gGAV8tlHQzWH73uKd1wvv4SV8jP/LHFPJ82g/DV2ZIFz\nbOYkzl0VH7t5vrAEpnFaeH9fs7xNOxvY9plGbCS8v4T5UBcaBshcujWYmZe+\n20Pnhzd25r089McwY61wk0986mLxNrL4GuqbVD8LRbn8+n/rAlligeHHV4vU\nJha6R2vJtYQkHoG9HbEtj08/QHVAiqS2wDRtXRApenND5lZioviikz2p7TFM\nHZDqsGCnKLPH3/cqGbwjFVGYo5BNA3wQOAeHt275dXKYscvRiMK9MG2Xqrkk\ndnEj\r\n=mxiY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ff89457cc.0","@material/theme":"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/line-ripple_7.0.0-canary.ff89457cc.0_1592602258452_0.46638645267707024","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1edb12b70bc23aef4e494304c0caf93a035a8baf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4a1855cf8.0.tgz","fileCount":34,"integrity":"sha512-oO6Y+4YACwHBbDCugKtGJhOo3Bt0wk6ai9mQloTJAM/uruLw/9CW4zZpA7U3wqNu4SaoKYF9NbZhqx8ays1FWQ==","signatures":[{"sig":"MEUCIAtyrcEH2qTRIIE3Q2dY3F7o+1DI9hv3CPARkThRBnjEAiEAlva4J2d8ScFgIUhvhf74MJcHv0R8lAywKYjvqMn2S5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S85CRA9TVsSAnZWagAA+gAP/08gFFhuIZM7E88ZbdLz\nPj5fTS4t4NsCLYDSjvtqvI6DG2D6kHuY9TC5hcBrEAK4O0G3/Q1Vj/9BtzTz\n1AZblr1MKi8kjWbCc2vmrhN1Y5G2K0Q1zaPo3ieI/trDZfaOgjZQefsGQ4kB\n58qvlmD5QVte2JllFXratmrMxHh8JPLaVflvtfQNMXRKge+GDZNXl/hgU2mD\nCU2vAXwfCHn6lJ/EckVJmBg/TEuLphlYHsoon+RMVBsJRoBiOjQNwctAlgU4\nvHNz5AJp3BtXk2tmfu/maPJ4cwQ2nrStKNz9IVoEPbb64XrNGDypVnjT3SKR\nEzYCxejOV/bNLEXWeFcnLPMf273tXBklLy7rfUKsvCPMvKg5vAXB1KCAfz/2\nVuZnZQrlfK5nYT93v5BNNDp/LL8R6aP7RyTyilg6uCluGpxEyFq7sLU/7NHg\nxDtVKZfj8rzVl+UkFrZSEBHoBZ1vUk67XtCG5/wOgUx6RgFp3nidxTpRJcvR\nWDz9W3ftoCn01LbVql+9cDscMCCLuwoc0nzJxzkTvfOcXGB44fRKOo/FwP6d\nZiHl1Xn93GTIM8jLk/ZWPV/pHJHSwL+BVZxTHxgg6JL0ea4Kb5QbPazPygsu\nE3rmZ/HUcFBcKyQ8CHD+DnKaWzYcQwUnaDt2pIqu2O4C7YDtEh9Bq8qAb2pY\nCYca\r\n=gZyr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4a1855cf8.0","@material/theme":"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/line-ripple_7.0.0-canary.4a1855cf8.0_1592602424587_0.7008660024507731","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f92e6a1ef5d2cae3cb6eb730f11a09a4caeac70","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.8602f1b4d.0.tgz","fileCount":34,"integrity":"sha512-W5fpDDQfS0llwqXT/f4eCyq2j+vTYRCoLagfSWYuKxAz8Gdy/RoWbYCZ7HZf0hZBi9Y9Op+a+088xqsuQSSueQ==","signatures":[{"sig":"MEYCIQD/0gdN6WndjQvoc80hQLEIVMuRUMv8sX5qnnfRQf4GrQIhAOsowl2BsSjw2zDlW7bX3LfeXUmrfaeBjFKCn5mh3mz3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OkFCRA9TVsSAnZWagAA8CcP/2BwpHZxyBb2EyZd+glp\ngtQXyH2g3rtreJp9yJ8wXsnTuuu1+3UusS35QV2fukb0+mushB+O2Eotld/A\nyQc1dSkSVmFVsAlTxiLRkcpAM2q2QagyrnKduBDKGKxsL7jMCQyoZIx9dymJ\nTVXPSbcAc7TRaou0PAKrWzH6ibdWCdsHVl4hheICbeI5Tnf8jAYMBTgSShGY\nhEndT3aIDqfo9kzHkI/cqYll6Iag8gT0WiuUrRKsQoadXeAoUZnhc9GrxA0o\nkXuB9Qi+diAUACwesuu5tHQ8CQlWFNx9NkM5zm9kh0dSD91iitjZdMJBV891\nlMYHfCrrzzR/hd8busTqFKQ2o0l6G5Jo7CwXrkDlo7KaZVQ2uokI/5CeeVqr\nlnr95H+xQ/wYcGqx1bZ+VrW/J8Mv1o/s6/W7r9mrOpeWT9M8h8lF+JGM2o6n\nSk/vMTTu9agYV/bZ5/TbwR2/b2AGxRHTc1ktnY5FqaSfyoURJLLMpdS6pQr+\ncEp5DsrcZUKSDNIosQsxsn8FgMKoN1h1y6eDs9Af3hSBQGuJWezjaRWo+5ne\nOQ9mwuhlTqE+2GGq+T35vR9BGwoZRgd7xULxjEaXUwG8gyapoD7B1hgZtC2s\ngCL9+U6Rh0Hj3juzvU+IFLSLS5rWJ0uBur9u0ulxp4+qI1tEcUO6gWosVffV\nsJho\r\n=z4aX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.8602f1b4d.0","@material/theme":"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/line-ripple_7.0.0-canary.8602f1b4d.0_1592846596999_0.06874570310871864","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/line-ripple","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c048b3cf011741b59188d23258e2676e16925bcd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.69f9f0982.0.tgz","fileCount":34,"integrity":"sha512-EhDfLwK1/htFV9CL78piujtdpvNqqW+OIrp4uIand3HRpC0tPx1vSNMKhHI7mbDy+vLSlIKlSPORDrJG64Dupg==","signatures":[{"sig":"MEQCIHSHdgNFq92D8rPKitMBJOjrzJgZ6iyUDJcNdBOxeyeFAiAMnoP/lrxjyfdO3M9HCUuVeE6bt2WlR9oaitJXtUlWgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R8dCRA9TVsSAnZWagAAfK0P/3r8A/lSVfJzOuPyvRSF\ngJC/VVtAy4Z0gK8V8KZ8FdfcKtDS0U1SUbgVdaSU1Z3s7PiBvWXmvIhrcLrg\nOokWvhj3c9IygMctrWGruAvlyS5oHZAhU2ZrCD8/qNteNtEj7WSZGuMXhikB\nm+RUCYa6DLuO5Rd2yytG7NlG2g9d9KtjyDBsjXB8p1aUVQ1tckEkoZsLpNW5\nzdppmgy8CS3r1zPUHGar12OJxg4NfqV50y6e0OTRqZBtX5N5TbWxuFG6DCQW\nCe6mpdwHJbUzAVoq0ySj+Viaqz/5dXAr29k+GVtxNccdElcbjdWKmmiA0XdS\n3Wn5pKMmUWiXBlWKZx04BNbysuw2reSO7pI5dHQa9n9iZGjTGkaaRIm5ZKh8\nvs5EWL+er+tgL3dRHR1nLWDyBvYrvgaCuAWdBYU7ocMOI4eL+QTFV2uOH/Ag\nsLxYu7MX0xCyCDp4WVVHwUhtnpvkiyu5R1NdEmOa+9GiYUq7Tzcm0xLdg/UV\nlSY3y7FdJSDDRp5WzRC62b80gPhQF57+2miZvM03vKsAC4v1KVnZtyrqqnk7\nPXYBEiFEiV204HKgN2uHRB63lB2oHKbd/nAD1n0ralxmdgjcAA+yHc6jMOmo\nMJlFMlW6D/xkb0+fCxHHJOoH+4IFSbsSlwFV9RaVgUwQyZA+0AnlU0arHS7p\nLMNQ\r\n=vuze\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.69f9f0982.0","@material/theme":"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/line-ripple_7.0.0-canary.69f9f0982.0_1592860444672_0.3425949132585355","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/line-ripple","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d379bc98e5d01e43dd88af7ca4aa4e2e3abe916d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.369a293f0.0.tgz","fileCount":34,"integrity":"sha512-xuhwJoLPBYcKyq6HPcm57glrkGnlYjLQwYrHGlUHHVdfIp7rRF0If53RE5toeDTTwcneKBW5rXSBqTrB6x9HkA==","signatures":[{"sig":"MEUCIQCO5dl9Nf898RxzGZN2H0Mg5eEN1WT+z9YIemxCp3cXyAIgcL4FVVHFHZMY/oGitSjaXAdJJ09FfenF3hETVAw/cn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R+jCRA9TVsSAnZWagAA+iEP/3g0ysfEevQkSq6wsVF5\nMJ0GYv/QnrMZDU6OhTFUrGzL2r87eY//EG/CFcB9EQegOMFuqo3/5GcNEG4f\njLYnbeFljzOTEQsnwvZ9DEBD0vP1LA5HEFnZdnp8TEnYJG5wtOBihHvwCNde\nB7GinxxeEeJ1uJT5ih67/MXxgORL3iWTkTksDvmPKIKGrxOZrfLwdtpsdjaa\n025LjpohemUojkMa9iUAOwE9E/Q5CHBE6JCSnMrSxXcBi9Sx3gZR7iowFeQz\n+VsQ1jmLGXRZ8/9eSrMeG6/5M9kRF18c0DaQnKYExjWwch4rIuetPSExWDKp\n5+Qbt6HHj1jT6nmhv4vI31suAvzPtxIu9GsN220/S9qhB2weyFIkYcy1YM8T\n5Y+oqq8LFEy9SHKzKQ482G7Q1xf3qwRxiYILbJj8BL3q4V/UnmlK+oHGjp7c\ndeVxTJCSqmU+MjSznL2Wi6YI+40Eo9dfaDtnSykw14GoJ9giURMljiu2lUv9\nXxs1ALgIJ7unocj90E7Wf6LF0R+UfjHQ/f2ED8mnrF+OlPE1I2zFUk4QN5hp\nwl4UMXu17SxweIuP3L6YDfOZ7/BNqnkC61ADsSSilULa9Riq+lIem8CXp36v\nMJsoPB/ci4sQRkwFUrQE1/A5u1T0YtM06c8C+AuK6TTEckwbjKqo/yRJzKVh\nbaGv\r\n=Dd95\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.369a293f0.0","@material/theme":"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/line-ripple_7.0.0-canary.369a293f0.0_1592860579131_0.952509756603545","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/line-ripple","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e19c7c0cef01a9b5c50bdf00b78f872bd09a8050","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.f1432b5c6.0.tgz","fileCount":34,"integrity":"sha512-LtROXNBf/uOg/KIN/9jYdRXI4Wicrwss6KDTOsleP3ktXuqj8KGr6IO5w5g/KvO6qphUVzjwo0GqAcRbb18GQw==","signatures":[{"sig":"MEUCIC91i1Gj/PS1d9Ao42aTMZ4pxtHxgTlLgMpuKitZa/izAiEA9gZIE/0T1j1pSkupDsR0zQcy6/AV1xFiaSpXuUzy3KA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SGnCRA9TVsSAnZWagAAimYP/iH4u2ME8CsHuAXkoVcc\n6fE/3rxbkoe+Dvl7ELzZGBjvgVtYh684w37PwNvz5lRJQc7W0dnzKmN13Ijt\naBIp+QQLerThWGWWxTdhZYI3PBqQv9+VReUi653sCNCXXZvP5HAoRBlUigV5\nnd/gCfF7THV9Q5Jz3jiAu/jyKDQSn5SUaRtaCI5zmW+KSIRtUaYHb1jR8oz0\nX0jHXVXr7zUOh6WSSqonK6dN+rzBG9OF+sjgsq9NkzW3qGjJhzgDnGO1w2Pq\nQxLf2RCxQ3PUEzGW1K2L027AolDXVDJfKFu/7xLBHoXWAUme8BkScSYVo+MA\nKYb3KYrIIcUyPIMdvTWjSDjmm2B9nt5PvKfEpAz4J8IkACw4n5korNj8FAQR\nYcI4XCxQIdezgTjplvJBjD5gc5okoea3CvL/A5Ay86y8r6ax+hSt+GQRA8J5\n2MD6Jhs7Xu21eYdfz/wk3uz8gK7G+b0XGpq59PiPSWIOU9ksANqF7WKg5YZi\nTi6/gD+qWSRtNUdIHg3TMQGGdcmkyFc4DAB6dCC/xmHLbMNs7yKKWl1zSHeH\nZrjtA4KRSuTbDOcvOSckOK6+rIR3h1l7wB7rbkFBsjCgiTzUPk6bkOdvoWLo\nh+IV5mrVTyHYeGHt4sON9qAT+QSwkOr+DVm5LHXeaTjEvzLkiARJvbYBYc4H\nLLun\r\n=QU0i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f1432b5c6.0","@material/theme":"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/line-ripple_7.0.0-canary.f1432b5c6.0_1592861094923_0.8324176327862531","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/line-ripple","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"56598de6dea31f447934e6bea14e07fdac37fac2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.4757a16b4.0.tgz","fileCount":34,"integrity":"sha512-TsmXfbHpcBFsMpaz2X2bo5W57sFRML/3MqxJJkZPLy2B2Rh/Yo37o7Xusp3wrWJKQ1GeQ62TXp6bQqvZaASppg==","signatures":[{"sig":"MEYCIQDbr0eOklaCsqWAooAUGXc7PNSXpcevudKI/GAQ8crjAgIhAL8tgR6bk42yWOjrGp+9ZUZrn6FQ0I2jRnv8Ws/QSCj8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sg8CRA9TVsSAnZWagAAYG4P/0qvx8B7PyV5fjUNZ+0S\nRiVVf/BpQ97nBf9MB1fFKr0YzcyoXhNHvL3FZMhTpXmC4U5rEyu+dRCruZXb\nxoFaKU6oKMHPxuX8L+8y/mDRPKmNnrcP3TBwmMqi/jcSQiaQxh1e1B9krrDw\n8iZuFekzwLbL8y+DZvVkL9QWCK2DqeXxEak7h6f0a/uNa5e5vneJsBsAvgXD\nUq8Htcba20eFcO/uNJOWEhSthHQVfL2UI32QZXVMXwZat56Rd7vEO/pKBTkI\nMDpySX1jsvnSIVNlqh4F5dgLcnXYBBIJPkCKRrMRjc4zvPKiywBbCOpAMlE7\nD9ofMNf5Izqk3JcHHWtfXBWAIMsbtV9dnOaJhw4ypBQddTFys7Qp9QGyljsn\nIdBPmUwm1484KSeTF9xXBu5xZW6l4eReenkQgtTHN4mTUMPgabk3TyjZJpLa\ncLfmjSvZLzAZBNQa8FUpmm1jhSZLV2AzFLJ0LPb5H7xEu6XTZYT6n0euNJSl\nCAjA2LNCgCB45prAcQMMF9jRoGHTDh5vTIPaW0JsrJid66Eh3e3cpoRbuxAn\nAQx+bk5245WAh9A2g8qxvFH4MuOBvdgv4dm4H6BvpqBpZu8MYFyDcWkCaTwU\nq/OU3bH6gfd4reuJWVHLGlbyKq68ryyPUjlknixAJPrXuBPP+MJLj5atHlnR\nB2SB\r\n=Dxmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.4757a16b4.0","@material/theme":"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/line-ripple_7.0.0-canary.4757a16b4.0_1592862780165_0.39366985840055047","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/line-ripple","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3a81f6883c9f691571971ce2f085b1b83c63a915","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.f8f472762.0.tgz","fileCount":34,"integrity":"sha512-xmw20TUe4f6kxGrz/vl+YJduOskYGkjWtWyVh/anPqiALVlKsXO57ttCrxaLHSsY8T2lTdc+j2GorGuDf+3OSg==","signatures":[{"sig":"MEYCIQDUmJxa3wtlP3axydTpT8fMWmhC0eFrSu2S5V0FyytKwQIhALLitbZG+OtZ6mQ0u0M92m1kF1WV81PZaOKYL/6vk9+H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SkuCRA9TVsSAnZWagAAqNMP/3OHPH+tWEWTysxnxZAB\nAuOsJ4QgltK6vK1tOt+mGPXB/kkyw3N+xNx5zY0U40J2bf22OBVhHfhu8PlU\npv+Xf/hCYuZtcm76dGhXWubSy5JnDVfQ8+1wis6bqAdXMS7GZBmcNzIrIrVk\n9v9AZxSJ9gOhy6Pv5XjHnXBdLcdpr3ay8JeS46jbVubzfe7/ogJfaqaw6I5z\nMKQhV08533Hst8dsDQwogIsN0sd5TAs30keg6sPO1iEEs9bROJid/505r/PH\nPAh67D83dITR4C19hslhCcfdfQluhoEvpfHaYac5iElUy6LYVTvi05GUVVl9\nMkT9PC5tLv3b0YgtTTKd3SIZUEP6jZFhOnSJHHxy9uga9IzjYpay+6VnS3+5\nWqEWNbAeRjPO46VHdb/Xlk1eL1JRigpPw7I5gqukqX6NJnKUOef1I/Z9R7uF\niZs0rfHl7agtg82eXv8GUg65JfTYe+njWBdB2gLsA2v/KcIeFbtcCuneEldW\neohocZz9GWMemXSTZ3h+5xU3IF73WMWhXrTxYF6+83G3AFHgiNp0Tx7FoQ7U\nJXkqgZZVagwMupdzyeaugfTLYx/Ng1KZWlVjvbVN7kHT+gJCcqb6f383Ozk8\nDPTej8BmgsND9bt13+zTZ5RVjQZn6mIdxFDGsYD5wIZDFaJv0B0IZRwwQinG\n7qVA\r\n=v39j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.f8f472762.0","@material/theme":"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/line-ripple_7.0.0-canary.f8f472762.0_1592863021813_0.9641738706664893","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/line-ripple","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bcdbd44015fb37bc2b65b904dc92440f6f993ace","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.7e4d55c34.0.tgz","fileCount":34,"integrity":"sha512-2Xm0wKp1dK2Nz/OWXrF9DEvY9YQG4UkM5ufHwwG3dcZk5ylHdIAuMrCqKozftAnKG6bH1uwUNNYSMM2ouBezrg==","signatures":[{"sig":"MEQCIG+DreyELAVsIn8ZnWWwCCf0/OHGaquKwTzgkNiQeCZSAiAkRgeJcyl/eR92Y6KQrfM0RilgEH/Lw+Ae+mvpdcJSxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TCtCRA9TVsSAnZWagAAhXwP/2vndVGfY0D+a2la9aSK\ngEjEertSx9kqFQuutmXOoRD+QT70AsfXNqoplMMWKc6mQDGj90W4JUw+BFpA\n7mDkZJMHXO32NRHQR0AwsA2atBBWW9TwnHKzcIyGfBItGtllL3+s7TInc2Jf\noXD9NrN5V4DMJCKdI6IYyLOakHeNzdWBfwEWtyTzqj4cRf9AHx1svEyPg4Ks\n12xZkNL+oO9BLpIC/BnLiF1ZIphnMy2XAZMMZvQ7IuFvTuWJm2AtpX+Bcisc\nBam5SN/WwcBJeUwBYSusGmRT/Y6MFvU7Fi91oI3W82vLJWf1kg0rog3sfyB2\nTg5+/hRxC5Hr3XjeeZpm/wRMO36XReyoc3IHS0jlJzLikQFz5xBKLtOhzycA\nI4zJ5ySS7edZTGQVEvZ/DZVxw2mq6ADUBATzSe5Y0DvuHL66qLFC5axlbiD+\nE+MIvjGgKfK0j+Rxh4s9jjFu0CAWpXCvNTSgb01r2z50HIR/vxUHXAbvUT8j\nkFcL6+CRP5cM4jZNR3nvT2Vy1SrZ9RdeLFRTg48XTHJ+EeNaMFTVZa/uKAg0\n5yt/z/GwjIngDUDQNLwsRMrc8OCMSk6GZR4LpRp1uFNv1U+kQPCg9Ij0/Loj\neRRIOJjyf2uDzSUbHysTR13p/jcdXqIMOKOiFRq1qPKMqwha7lC7TiAZTz9T\npAMt\r\n=gmzi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.7e4d55c34.0","@material/theme":"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/line-ripple_7.0.0-canary.7e4d55c34.0_1592864940677_0.8247215973775757","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/line-ripple","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"26927f4e132de57a54c16d724a6d71c7d4f8a544","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":34,"integrity":"sha512-90ghQjNuoDS7qaIADKdjUze9684IXNk9GWGK9GPKyB9X7i9gvpIe43lFHtTI47mARp5FqgyCwKPGSvhYr6JaYg==","signatures":[{"sig":"MEQCIA8hwWpz73QuGGlcBxUHMiSv8izu5TjyFxEcDjvEOtzsAiBnBF9GP33n+pnc0dq0o8aRDpB8lAnhjJ8hfCAlTUbukg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hFYCRA9TVsSAnZWagAA4fwP/RL2KJ6TSsqjzkB+S0Gk\nd2viKbNje74f6wCQUWa3mge0B0iwOCXmTWh6LQs6bnleGijUHZ5ozmXbFAXb\nFPdFSte1hWtjDGH6IxKk9ZHXjSHOWjYN3O4/Q5uwylEX782bO6hsCzcRS3uB\nZ213kHAlq/Wc2lkoooyFWY3M51psf/Af4kVtaO9EWhL1h7bW92PintwoRCFL\n5RnWkeStOaoeXpankj+OhLVQcVP5HO9tsSD4ik06G8yS/dx0bPlFs6DnsiY2\nHS0ynuLmYUC6pu7Ob4ZrcgRlhui7SwE0JwNvAuqdj1Pk+CaowPei2xDVAyXP\n1GsKAQC+9Xzx1uFbchL2V9erhlUX+5mqxqt4CsG+q3DjlPD4v5MePAXeF35M\nC2RQx6U7gEIO0TWYQ04DZBHD5O+v+U3rbYZegmN+PQlGNC5UwHxGa/5Ykmlz\nB/+OpkxQEHCoaoqTR+UuQQerOKezcA2UkrNz9n5ygKtp/r0bldTNrExTCCcW\nJZ8h2TGbWHnvZZjtpl2WOak+VN25YB+dMv+uUeJabN+w1pu3mrWshlMtRaGf\nY5m5e1fmH+n0YXjzkvmDXtwDRb9QL8pFZR8MBQlrmGJMgSg+ypoWcClJQetB\nBitRQ86VuOIcEzs2iJA8v9AV8mi0rIFuEmSvaXwPu/5uTKS+yHwtlNn4Ipod\nGp6i\r\n=TEgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/theme":"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/line-ripple_7.0.0-canary.bd1dbc91f.0_1592922455661_0.5789443396973741","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/line-ripple","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"10ff6f7c94d69a886d0e66da2def12bd9ed4dc43","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.31523bc62.0.tgz","fileCount":34,"integrity":"sha512-1s5Upw0ZoTA4nauR9wETjOAA+IciGryLawZJMHoBMfoAZbyi1/0UFLQPGHr+WoiVFnj8GRDRoU1BD6hX/eWkkA==","signatures":[{"sig":"MEUCIF0G0WFUpYKFIhc+LEvi6advxLhNjp+0hCMTyTT6G56eAiEA2tcLsdQsDMBYjQwF4gb7JgQgKJqO2/SCDf2LftTc14s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hKdCRA9TVsSAnZWagAA1RoP/iuenXJZrb5LhuR/Qq6s\nbpdrxyx0tqXIpRsaz9qP0v/wj0MsTrCmcu62o9mV6rliFLArLhEnS11DdvjB\nEPjNzDUD4KEsMB68otilsFLJ7elbPSENABsKjomOO+6NGnnhHvroy2TLPDdQ\n9zCRMZt+LrHlPyC59mo7A3DNwgrqTRBug5f1RUuOHPQER641+B62fntrotzV\no4jWATkPo+SaVegNcUQeRj2NTCINUfI9wTh22dcC/zlseAxs4K62Re92zukN\n8pwy6+EVM+w8C15ebkaJgpoLquC2cRI7GLXPFKarYySt+5H7N57Yle7QDQRY\n/C5dGsdy356miOdb9dOcWjfV4zKKvlejkZE3kaoNxOj0FcNhUX6whsDMAWhx\nB3rkgV4/2idiHBq95f0lZfRBFqeuW2nvoZPH9xGk4q28m8V7LRYZc+iIUhH4\ncFTdlpFaFflSF6pN1m7H42dq0yX06EJejj4ubXsqt02YWgKLbeSsJiOrKCf5\nIHGa+Aiwj5CM/oKYromsnB3EUHOVl6ze/j4qM8RUWrsL5lGHOP1izv327sOm\nkUm6WBcY2+bWWFkBjie+mLgYqN5TNa3h2XeSMMNZieBx2vSsfbqJkhp6B6PR\nrwD44D8lcmeTp7qPnIpr1IbVY/RvrCaZSzQGnq97tAs5kyDavUKZtcmtHoax\no4fP\r\n=oJ17\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.31523bc62.0","@material/theme":"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/line-ripple_7.0.0-canary.31523bc62.0_1592922780739_0.8616739204308979","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/line-ripple","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"df62d4f3ee043ae24cf2ca2465f64fd906ddf6c3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":34,"integrity":"sha512-hNEVPZgjEhyknm9QPLktEgoYZIRTMmHoobdmXdBQlSTIQZ+je++fkU8Iy3AKdPwcEiVX2Bq2TyaMHCfa6xg3zQ==","signatures":[{"sig":"MEQCIA7j2gv28WBs2dKsNqbqv3paXIo2EtexZVnNcOW00y+cAiA56cOPOtUDUjXgw8u/tfgJsE9BAzfLDc7V9Mgf4r9MBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hQkCRA9TVsSAnZWagAAFX4P/iAjnzkY/HRaJHXS3JGA\n2E2OPdQ/3MBK9idico/3qA7to8jiwut64fnTC5Nz/HXHePQi9QTsdRHNspkQ\nBMylN2FTugswSeBueFxaaBDgq0KVT5Fm+OVFNU1E8ypN5xSKxxKH5bXy99cZ\nDodgNQLyjlkRL1pFc/7M6FK+1ZRP20hasVSyLpB1ZzSDX2E2qjf0Jz+AT1af\nrUm7XXBWAdHoXBsghpxTo4qBgmidHRYufd25h3W1t4RNIhFoxJhohBslmMPA\nyZrTPscNlasathx9PWAdnFencwubkc9gYCdWqxmR/PO9A+2vIyOeYGxb4xNo\npTAIst6+DnE3IAawG+BVfNMGqEMdzh9w944/c6GfTxBd5NzTTE2Vutf1v5au\nt/aRLn5kQM9Pr2LkgaI3s6nEk1AuAxUN/KUjG2092/SoZD9Xp8RtBkg5ibDp\nWRBvBHdqD2+3+zdqFq7qzYdlFbACA5KdLAjwJ8RVeHJLb2fbbaIfrsKRt2VM\naOe4Lt4A1bSnDP7oYH+spc3Dmsgf3pTFZurYPWIUNbp0Ic1Rc6+lg8fvAnmT\nRwyrjlngMnmEAlk7lLwFO717xxi4tZbgGom8Sm46pyy7rWZpw2sBS5KxStGh\nugajocQif1k4nV8LpUs/11V7hmPGCH6ocae/7Zb2hOweYAZcTsxJqsp9RoXy\n2ahh\r\n=stps\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"ddfc88933cd9a6210bdfc449fd3fbed391abf4c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/theme":"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/line-ripple_7.0.0-canary.a96b6d4d6.0_1592923172403_0.4211572148598848","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/line-ripple","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2691cce94b8f53a7e4e356b17745f7174d7d17f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.ef3a09533.0.tgz","fileCount":34,"integrity":"sha512-Z/hqNOoN0Y3DFygxJ9jLT+aHiEQJdHiIqgqCGXrRF2hLjbcGdYev3dXifaD+zAJSQC51O4LeouJsBzDd38lZvQ==","signatures":[{"sig":"MEQCIG6Q+c5BmfMEsjk30QaD/FZybwk8iKF3hWbAou0wlGqjAiA6R4rI+6xL1c2kbHh6+lh3ezHNnmBK3wB0MNvf5ub3Fw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hYPCRA9TVsSAnZWagAAGcYP/1rEyuqaa8Nh9Isfr5QQ\nalcwZmLQnDJweM5m2R966k9m6CW/zU/EAsK7R/oDh5o3DaTw8A7I9LaHPKoO\nJ20HP+7kQ8VxuzKQS/2ehxEfVqTTULjSAqwyXcDNhaUmQ/wyyQ8T8iw0sV9r\nzFZsX7Dg8LkXECVdjNua4wVDEFlkLcDMwJSJrvOhMNHeFfd52TLT8DSZNx3U\nP1jT5Bn+23/y9X2QcVz4NvzfdI68KgmMJ9xCNDSh4hW9WKy5OYhIdY/uumOZ\nXCFW8XOCCuEzQ4KUTyUqtZgTLqc+QqTKL0kTbZoFNFHyfnTLz3wfURk50gqE\nOEG8SINUZ7a0H4Wosl+Kir63+EihvYxHAikRhe8uqEF4pH2XnJ2OiUQAxtcT\nRDvUEH0TQDw7zDVafOy5WQW2yghisFXFI7RuBwz1iD/SZmKG1bAm/Ed4cG3g\nEiFaXNHxH4NB+GfhI0xxrBc54NGqQid6P4rlqrV63ahmtzBLcRUBr4BNsjOP\n1AYMe0Vi9Ll3vpsOq49wL6ZVFpbcwwVqC7q4xLNddFQAdBciXVAc+lq7p1/e\nDPSM4DIN3vkGiexRNFVDAaWOPSPnpc6qzwDbnWNEjOEmclp/tW6F7HlQWeU+\nIiBTxQMZ6PkD+3I0SthnuCmoD9xZIRN/NcbxaUaxSRFV323B0PrUlALZk/hv\nEVmn\r\n=p/fK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.ef3a09533.0","@material/theme":"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/line-ripple_7.0.0-canary.ef3a09533.0_1592923662889_0.7294007630810115","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/line-ripple","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c0e0359fd716e79286a42f984b78d5290ab35e3a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.080965f39.0.tgz","fileCount":34,"integrity":"sha512-Uhquu6PtSGOaFW5YsN6Us2dKD5RTAX1hjE81uWIHAVLC+kCr6IDJJcYzEBJ7KIHd2woyFPE9Pe1+xT1Br9JQPA==","signatures":[{"sig":"MEUCIB1H6xeY8I1Gp2SI2UPS0wC744u5UDoD0cQJIjMiOtZNAiEA7dFGrjHzcHhiEr0E+Te5qKANX3/pB66LdYfQXta4W1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hz3CRA9TVsSAnZWagAAdBIP/3ZIAig0+l6SHAwncewj\nCYWnXzs0Q5DazC7BlPPYlVBbKr5ajyOMrMQr4cQ5WJqog5PlBjvblp+6375I\nSKhxfVTWrW0aBZgRN3jhUm/J5DgcSrTW0Hebd1qK5yeIbLb0zJub2mzmPd0V\nsg0Wxkzh365RQQT5HcP+NM9Lt3ALPWAERU0y0C8b+3+YN5rF0nLoBy384SFN\nWNdHup91/ljGK2jqY/V7eA6furRY0nvsnE4/wKZp+L2E34MnkNPcN88p5nIb\n24rchIwSneyBifdywJvp/e09aChe6oArg5Smqq7iUZeLh3rBtn5lKmcMRFfh\neufGb3uAlAJG0x7usFiQ4iW/B5x2/XeRPJPkX6fPJwhVuAkWdebRuJW/MU7J\nhJo7OuHWnjewWAXNMLo0lMx5owfhKmqiPP7M457VZ0yFPYQ6ORDZdmZESeRz\nZDZtkwJdh7+dbNB4cJsxGPN74HYBVuqgANz+SRj76qtIahH40hOiBauxo0PA\nQLdUmnZJ1IMwwZVaNm47Yv5rMlBl6hoZDqSKJNNfiPmyG2GU3BPRnwhlVoIF\nvjalNR86bsGJmFTvpjy7mFfpR2RUs24GxpH84EOQxl7QYJ/NSFHcs53fhEfn\np/IuqpXJkky7Ajl947ydOPK+5zvbbQ0lKvYG97IzajGFXn66asVRJGSiZexz\nsaaN\r\n=67Nm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.080965f39.0","@material/theme":"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/line-ripple_7.0.0-canary.080965f39.0_1592925431176_0.04095033852251717","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/line-ripple","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f62a5c4a35918ce4b4c958bf07c0a8d578653a4f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.1bd67b65d.0.tgz","fileCount":34,"integrity":"sha512-7QM9Q+w9xnVVRLaZ8z9gGRw2haBwUqyvZ/2kve8yxyGqPk30N9kg4id4eBhXZtUhCDg6ulUYXKTfTYfwjQn2LA==","signatures":[{"sig":"MEUCIGFFX76MzEHKwaRA1ZoZDdJ7i+s6H5FiyGJ+UG0Q5raCAiEA9gL7JUCwii/HFzKxf32taR0UB3TId/p+ZzyKvCn3QNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ibnCRA9TVsSAnZWagAAJg4P/1+t5Ou/vhwdvi9BQOTk\n9+SmWxKeW10UB9sIbUBICAt3gf5f2HsQEzXF3tCGWAsoRwl+okBVA2nXijOc\ngNv/fpy5+G8FbpYLKJsFGjeZ5AIrJrNqTuFEeoMxP2RVDw5KwFjtVgfCac6t\n1iZtvTnOi1fJGzl1rx7XqNt5aC49yistws/uALeCm8sEsVpf13SpbyqmWldh\nlWPfY1x6ntloIu1+CC2Yt2xHME8Gm1NsR2Hd71zhXKPocNduQ5ZM/pIj8Yw8\nCTq5LTIHB3/+JaCFRv0sg9QP/bm07Lq0LJB2otnfdyTksWPqg9vq2RTsuaEQ\npppJk30KuwGWwg7nfQtZ1/pb5AnOKu5DHbrYUD+OyOWPvM+uW9QH2jbtZWWD\nYqBnJKRYOh64ya1PB51QfVHfYVDOlnrr2B18IEgjzTQatK/osS7EfxGo71uc\nHw+Li1e7z2v+/j7/K2El8yOd3FV40YTnCPD2roEuhXUiaD+dRnGf5NINlESd\nbn1mxuDVAOrEvYEK4jUQ/qpcB9UH719G9JLCWiVlcKjp6+uwrtGozlAojFMz\n3QgelYFF/O9nDSADPOQc1S/+mTf37T+Be3Qn7BKIeteHCeJuudtgxRCN3BcO\nSMhWgNgLJZy6Q+R1f7vJCJ8/4NYlOEihq+zec8q/oXRZUkYbY/s/PeGA33CL\nvN/J\r\n=gUmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1bd67b65d.0","@material/theme":"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/line-ripple_7.0.0-canary.1bd67b65d.0_1592927975003_0.05986885079870219","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/line-ripple","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"203d58368f22f8f219e015d67844353d53ea6523","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.18ca31248.0.tgz","fileCount":34,"integrity":"sha512-91aL1UfLhwZY3jWM+sr34PNi3xbxRg4Up8DV3vQzQJ/WpucUFpG5beHQaXeGEtqzC/qH1IOuLcRIjFn3aDwAow==","signatures":[{"sig":"MEQCIAworUZTtAxvpdfFO1rc02kDfeDON3mOt8qlL1pfsBzNAiA/rLKjoCOA3NsJIYvtuocg0FqN6yb+0JaYsyyUcdpjTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kjhCRA9TVsSAnZWagAAw3wP/A8v/WwqNJletCuyWpI8\njJ3IgCO/M/9cC+rzHnGaLsH8mxOmhCfxTD+E8S3zqoa6URhdYOQNIsB1bCqo\nztyBIVzBlgnQmw093AUhDoN1cCrcpvlKzLrVaVupdMklgl1Cnh+OTA2/yMyI\n3TGYgrgcsKrFvPc8qeKvsbIUJjIPfFmvyF9xEvMF4Xll886vVMnt4Et+Dr+V\nhRW1CYj2J3nbV6lzBETrSRvpO0/OccdZOjdnOan1O8iu+1Jzgy+XJqwTi9pH\nbxdI/0KAg9CROxiYggdJG4D2gPFVIqvV0ox4aaa06NXD83IkLbyXzVEigUZV\np2a5W1QqGsNhJszjCC1RY4eCY4tr5Z92Gu3bp4TKyyYcsRmNDC8ed25t3UhZ\n03VP9P2r/+d0e+EdrGFjtcFvDovneB3OLoNm4O3pAk7bRHswjF920TIilESS\nyb2Zd6pBvfbQ73SDASL2Pr0HhKEnNIDEcc3PPdM83j9mWIMCHzygANnRwqpK\nSMOWWgGEaTuMkKP4hgkcw4J5ymKvw8xVYrj4/X/D/r3Ccqbm6xGDJFkzeBOE\nkX4ywboUVEzEHrIPuN7jf0Zpzpzs75F3syUVFiNOZ6ooFZ1IsAXHoVyI3b+f\n2IpfbLOGaOnCIzTcKiJf1nnZcJZt23dTMknLeL/AknwFV+ojATeaRzNTwX5d\nScch\r\n=9Z0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.18ca31248.0","@material/theme":"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/line-ripple_7.0.0-canary.18ca31248.0_1592936673506_0.479565504234307","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/line-ripple","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"658b4904496a2cf68a34a636898e1cf884772bca","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.39cf00836.0.tgz","fileCount":34,"integrity":"sha512-3HrtMNHsoGx5/4hXXpQeZt35vrHbcyO7Ja5SKONUQDfTNxIITN0arpPCdk89E8fTXGGmCWcNWsC+tSoaVh9pSw==","signatures":[{"sig":"MEUCIAr31IRPobK0ZLV4m6MIXtGCG33F8y8WOeqSMbcLgwdpAiEA2J5/gatEP2D+vPwNZtbgg9YER/+XyEHBU+GjaMAxI4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k5ECRA9TVsSAnZWagAA/GYQAIQzypGAflCnMWf24dCf\nhTrLjX3U3BhcZUoKNBaaE1aLLInuO04UFiCiRIQ9S0tD1LUqF8G85Clxpo3r\n9qgTFhwJaU4/aMjEZNnGNWAGbJSBhYPG7W5O1oCPt/u3OyFuwFArdnxYI0bi\ndakpc7/O3aaSrkbckr+x9lnybCNQ6l+8Dsqkf5U1XzhKYdMklv5e2LYbMX4L\nsxNABNpY9GDmTgYnWv+QAXLvwB5hR42ZIj1XneDysExwEykfXfkP2GInxMqG\n9gZLIoVvFC20fZ0zNS77guo+IAsse8tyZMKrLUwgIoRDR1EbyCfamKjd+3dD\nSb4M1ed364mJcfICQK29FT8c6Bp6aUAn85HNK30bHdWPbfYK2ln9XqJsqrRX\nUpsEvqGszZBxNd9VV7OG6pHokACi5xKEsp6KMRkPFVmYGFRZuZ0NID/vm/AU\nDM+PkFLhqPzkziabWHme3Dv/MzF2P542dAiKg1LeP9VzGmRyXa67Jwh0/prG\niuJJdK+ps/Ld5vG1W4xhAqxxnc9vrhTV+llHrbo6pfOymMVHA5IoubIJ0fO8\n05HPi6BdEqPCLcF48mwHuLqqIUT2mVPsR3c+v+eVifC1ahhbDI/PHzQHKhjX\nHdmidJcVrok0dKMG5FSGbWphra8Vjhnsa/M4xCU355D4jkSk/sQ1xPTZ6VFp\nu8cl\r\n=xLvU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.39cf00836.0","@material/theme":"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/line-ripple_7.0.0-canary.39cf00836.0_1592938052121_0.20343007198886776","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/line-ripple","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf4982c3610c60d8d9af45dbd5ac5e4cc4c73c6e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.1bfda9e05.0.tgz","fileCount":34,"integrity":"sha512-Q7Sr7ggE0VCLS9OrAqgligHevU+ZE7kUOTYaZBNZuRSV59nqCXxfivo1glFOUMcjG5T4PgJcHcICB1PbxW+a2g==","signatures":[{"sig":"MEUCIHOjfGUkaQn74tQmzZvAN1+7/LroQqJ/+NIIUAHJ16xAAiEAqol+qxWr0QF8RuvcjZ7JBxqzrGbbSB2CDeoiNIM3kQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lE0CRA9TVsSAnZWagAAh9wP/jvbyZqqxBvu2UCYryyJ\n30ti0vXLmnsL5lhRlKaykITKbh+WRXMZJ2HRXuCTvMhf1sywf4s+3Gm2ekeA\n0O7p8JS8DEIWKUtc78nx/U1jddf9iAio6EluzyqjDmxUsv3AvibSZrHnqLgc\npCrek6r2ZN0m65fiddf21aSYjiP6h7OhTtUPDmYSZ9B8Og3iwOfv2RXoA7nW\n+b8wZuVwOM2a70wj3EpxCdJa4phSfK/HZCIXwcnUp0UoIbZW+hesdP44d81Q\n8Giv9B0m9IjRESi6hr1+eY3AJDyha+CF0Thv2DQrosuSYdBha0owNVR9Mpsy\n/FiOIgn7LhHcXXVx6LaebYp8lA0yTh/1yTEb54IXhfKpIJmqqq0aznn8EyVx\nsAMc5MEjELSGX0PblATPWYxTyvGe32PHgYNIY5P8vsPOHitv14GvnVfLCLxr\nzrcsZ44K8cMcEk3C0XD1zmfj0oJXYYHH+1Kl865PQelgUErvYd+B1BnkWTMF\nneaF2rxGIgCI3mQO+cNaeESCMNzSC+FJgJuxTpAzHtbpGPUcuUg9Yq9N/xQU\ntC10ts/bEBmV6w+N2fcGPpSHkCm+459P8rlcybDc3zh1rlqt+0IsbRVtXRM8\nIn0WHvtCBmOLG0t3mmNruELZrlRTr1pS2nqnWnxFiT3BvqG87JTC92Am637u\nrghX\r\n=4SlW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.1bfda9e05.0","@material/theme":"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/line-ripple_7.0.0-canary.1bfda9e05.0_1592938804386_0.10290570824385115","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/line-ripple","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8714f02d664d90b70bf8f8fd8df61987dc0c0a23","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0-canary.08731bd95.0.tgz","fileCount":34,"integrity":"sha512-ykRZ9tdbd5p+ySbBey//0F4KgCLcp3GQ8SuVfWGnpCUqiaQrlDpvMcL4LGz2pngYF2vT3aCLJ2QGx3KbOygtYA==","signatures":[{"sig":"MEQCIGM+/g6A5n9ysuBcDeTGSghiUsVJ8GWAxRhRKfuNVurkAiB8uHNAhmF6na5jLr67ZlfAtE1KGPZEJbMuy2QIFVOQNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lHQCRA9TVsSAnZWagAAxGgQAIulo1/KyGSk9IzCPeWU\nOq3hnoSmZ384crRv76hTYhTxezSLFWBELo/w4k+G9WNDUET2/D73J1KWO6DU\ndNGbcNy9i2sswXq770ch+1WotH7z88dm40RsYfN8KM3WqOb316oZsT2wBK88\nAzsUSLzH6dMhnAtX2u9I9iym6MfuW2ZYnnqGxyU0brDV+Vau2bEEldzIjxOc\nIW0KjNl/jPIQeNhlcn8T5dJ/NvJUcuz5+rFeqBPXpSbZkb4R8ie6D4AIX+61\nJiaQ4j9bm5n1oK/YFPHWfM7C8W/1Z0ZGKRrRYKngglsMs9SGsxIOwMjUvEuq\nhzPpTjsDysSZhvG/6V4Od/nIsahrLmGJE/sG6sCefp58VF6V5y9PHoJB5Dcn\nXp824U4fCGScdeB7voGdtw7ckjj4Q1t+IpkY9vBcrX0BRZe6LfYjsE9ltE9E\noBJ5apEioBfMNNJsJP9NPakQKmRdTtfYOOuyS0d9Em2N3sMmqbzow0zzRCAY\nNRlUDJJU6CxncfZgG7zcvL2Bae2q1AUL8J/AiQXirGuM4IUVNXaOL3Wq7+Pu\nlIUFSxUAK2DLgVLdshlLS6h3WLLmPf/PDJEa1ZwULyIgRiyeR+9JMn5yB7Oi\nXPRbhT9hgjIgVoc1uhmT/sZ5Pkxscjff/rPIy2pOIeaZGdWsiRh4ZWb0YLrG\n92dS\r\n=K4f8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"7.0.0-canary.08731bd95.0","@material/theme":"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/line-ripple_7.0.0-canary.08731bd95.0_1592938959628_0.3035506521944167","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/line-ripple","version":"7.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3a41c4237d28e10be3433213c7428e396af5a2fc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-7.0.0.tgz","fileCount":33,"integrity":"sha512-oU/TcKa/dVnljFtFPKHmcfBOsSD5o3bjYbEAD/FXR9mCOIAcCmPO6TegQWJDJ3o9y+eBc3S8aDXN+p0ub+DJIw==","signatures":[{"sig":"MEUCIQC5EEux0XuvbLLEeRGN21rsephoS8AVdtlCQCfapnNGzgIgRQNs7cTmNjK/DSpTM9RcklpUbvYXww5bEsNiAmKfO3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lObCRA9TVsSAnZWagAAmHkP/jOg4H4t+SFxQ2qwIWDQ\n+91YGUuXdrCM2pXhnaXjtdUCtAWostmYy/BPYuM4+9Q/RsIglPWiQvlMM7Lb\nOQf6b8FJzh4pTYCi84Fx/+nd4CE+Jiy60JKMZ66/eNFtuFfUJMoX8uaRgcXJ\nLkU9yViPdLw6hFerOm0nktDyObgcG0ocr4xEIBs2QtDqfrabbaebhLA8ViCg\nWAhFPr2XrjorcxT/r/HcM1jzZVZY/xheOw0Dwzou6HNvuth2OSe7Wu9mXb2k\n2Ly0+YkHZaoM9jwjuSHrnz99qZfzAivjji/Yk4roheAkxRXsfHHgQ291GevW\njRPD8f+bdQOxMjOv07Q2r0bbP77QpXkE1RxpdjJk58yENTw5wNhpHRN0zS2Y\nckMc2y4ooRxPvrhdqN5yWJ3Hr7bQkaSUnukwf7Bj8+EsypO2DGUATiDnQsLV\nPoM2hgCG+pGAyENnLkWYyPKU3w9PcVO8b8H9DdYmHUG65tD3I5AfaTRRyDnb\nc/STkTiJp530GJrjOWrno66lUwr3DkQODDvsOPRT4WXg7YcnGLSf5eybNtfj\nI/Krg4n7qEEyqgqebLndVM9Rw3fkkcD8pv6csYN6S35sPYNMNsLQVYqo1Bfe\nDem/KZivuXOPRX3KikiBYbrvcmbmkzBxLEFNoS/kJYP0WosDozFkFdbk3cip\n4DjA\r\n=EJ6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"^7.0.0","@material/theme":"^7.0.0","@material/animation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_7.0.0_1592939418740_0.9744497612856957","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5f0400e1b20b61c9141da28f576e44e7f98d0ed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a3212b209.0.tgz","fileCount":34,"integrity":"sha512-XfBDixQjSeJK+pj6ybgl4p90d2p7g14lYVhhVzAuWNv55xxzMU90cvZH864zxMGz22ksCkB9r4nKWfLeAfSl8w==","signatures":[{"sig":"MEYCIQCRp+AdiC6hEX79CRLLl69vIG8fQ+ZusKZGwJOG83I7OgIhAJOYvyuUEZXQ9pblXQQRnB7mBavJNIXimix6j1Myhu7T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPRCRA9TVsSAnZWagAA6CQP+gPI7c5GlSm0z1uFvnDq\ntcUNvWOw1aBoWXQJlfsMeotZB+dteL9SsFMcp/JMzDMssDNk8fcqHR0O/vhE\nPfoR8wTQANjOP+ZBGPRBHHUKcs+vo2OsKeNVk1eIqu0v11MDXSStaCv4dR/2\nPf3xllLEQpq2qD0BCd3D10DM5mZrYWECOhBM8thNYuz4VLg8ObeC0K/yKGSp\nVfzKNfOT4MyBp9AJMJ40qjMLiNpOgtWHMpWi4bUyHU644aM1ZhhSM7dYKM3J\n+ZOVjOi1XQnFGgsqVh66ZkLMCHV37Z3gCcO24wQx7cVIOwwYiGx6e+kpAASn\nqzVoTUmKKnOKCAUr8Ce8FsJwdxXSo8kEvp3NAYts8GjD3LgSaerEK7RCQBV9\nd/3fRgAc7EOGPkGzRTkL9l25ccvANuQ2/yXfSbI8cRhBjJgbAjekmhXRBA1i\nMPorEqyXbW+aZJEhN5Fq3TLmCKuviy9toepU+Kf4MpCUKjnbeAB1P5RcpBCz\nVU+o5U4Kgn5HC4T3lpY605303BwlKCiIU+iheq/VKcO64bz4i1gCBffjA01a\n9k8RlKCwka80TEJplaMO/J0X64aEuX2SMDr8rSAeeRXhXVEmIa1IkC0I7rYM\n/JlHRXtkJHNc3X8r6+x5FqdX5ibEP/vQJJold5iA8UJH1FdJd1r5bmiFjAAO\ngLyv\r\n=lhlU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a3212b209.0","@material/theme":"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/line-ripple_8.0.0-canary.a3212b209.0_1592939473183_0.5610920306212834","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/line-ripple","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"67430073d0cd0e8df7245dc4fdb844ac51ca6707","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.15e81fe98.0.tgz","fileCount":34,"integrity":"sha512-v0cRF5RnZ1q4Dr6KlzXKT0VZ8JMDqUS6MTdkT1V0d+fcpP7/vTevAKGqMPwStzH9qJHTYqmaIoU7wtSf6W903g==","signatures":[{"sig":"MEQCIFjpXS62qFg8rArkFMCcN9I8JyyVhUBUZdkBoBUMhtqYAiAu5ofWKF7c1soA5lbEZYB8DxHEY3/T6+L+jm3QHKG7lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lqnCRA9TVsSAnZWagAAV4cP/26AdCLghFzgOhYs7c1k\nAuyUvh8Ch0ydbU6HQdGOU4aAAe+Q/oxbmxZvl2zAGd9ZXG2IlsOLx2oFCmET\n2YChCyJWt4cpPh5cih3mCVqVC33vYU2wz2YGL6lLCMTh1FjZ04p5+OZEcYof\nl/1XdNYClDyF7SyFC2ElFGh6haMylqnV98cjPILKYBjO3G5ex+Tl+NAqAatT\nEENk8Hy7rQEVKhGB/PA4KOtYKB+wRux8hCvyWomfyEZGxN0BvN7c3vifRft/\nRVf52coIegNoYEAjQZweg3MaRA0VX2QaXTBTVrmdwXzQvBXd60BM5BRhhcvN\nB7Jmm16rP919buDTRs9oFf+jXG4sEaZqYW1vCbG3NaSZIpDzgSbJBhnI22dn\nNyM6gzdrxbBoPMoYNbyVzY53veVRiGuyRbaqfRGf14ZigJvq6cfuf1kpBhou\nHmTXIhldE5/aKPERSiC457Hgf55VjoW6Wz54/ekINj5u0B+NPHvhXWm2odtQ\nTqy80ke2N2UhrNe2fFR4FtJ6jaerNxOzMvGJInI4Ix01zCoFyGvCxJu1XZOQ\nYQQm8acOg40MdkmEU2I+XfFP2hp3zF8bHB5KnRy+7P3FeTqZkv4N59z1aOGO\nb6MURy2UeH4ZrPf+fgY4u0BAibCPwcu5zZxXGObepByYfBAUoUeYSFX+Jt/t\nZ/he\r\n=/pFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.15e81fe98.0","@material/theme":"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/line-ripple_8.0.0-canary.15e81fe98.0_1592941222800_0.48293140637557874","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/line-ripple","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1df98d9cb8bb67e38b95a89dbfabd8177613edc0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.004c9d392.0.tgz","fileCount":34,"integrity":"sha512-C88Ij9O63IPp1VBDllPd6x1uPdQD6DTlVV6N5InoJJLTaYFKIeuWjCFDxbslvOpDNTHpiwsAfLTEpdrtYNzuJg==","signatures":[{"sig":"MEYCIQC1NszP3sCffLKlIgD7cgVKqyNfXCYpqBFjfZ9iHNkNQQIhAJESHX72EKBtZK9gGbVX1zq6WMympQ6qOF2zr2EW+ylJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ohoCRA9TVsSAnZWagAAGGEP/AorMxUuWM+wUVI+NfVe\nS4wWFWQRMZkva+KFUurOSkO2nAkvNmWSX0M77dSxO6yGnjqGzvTIsoK4WmvX\n5tkYZmJ0F4KLewoa+/21w2hVsPaIpNcsUVakUzQfXon3vaGogdPUcQY4Y7Mg\nteCKzC3Gll2N9muu172t00pWiLr2rPMCLGppKRbPBwkXwMMW87LYjwXJOsUV\nw2TQZj8NnnEpazFSdAYWs55fTzAn6GzhCNN0AhrchyYXKX8Lpk9GBj2BgyB8\n5ZEeALbgm6UfLlm1f7a8cpYO1RgGIjqPrXpdUbnlV8q5svpxBQY8+BifrGBx\nzL/t248YOT4BwKD65HZ6RBJW+1fCaTNzzJf+7Rf2naxmLgd1B4YmOyduuU7M\nYKFoGESlDJZCWQMOke6ZLOc/uo4sAWyWuOfJEXVu70D+MVnDgp+s2qgwh+Vw\nM54/7/gj69rWRLyqohOB0AKHFe5bPq+mSBZpQUUxmbF8630wCUFGGzXHqXXA\nEX66O1ZW2jcrcsgueKkHWy1r7yGdDfltHOZQD5f6vnkWHOIPjJzMNoTK0xj9\n5UhdYzYx2sFQFy9kaLtLy2d/S9S9VpAHPits584o3F85TsCxpmWe68yidNuF\n4Pu4HW5xfHhKojUQaGPM8GQ2AngVGzJkR6nKFnTve9pZBC4sDulZkMQwgv5u\nmYdv\r\n=r95t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.004c9d392.0","@material/theme":"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/line-ripple_8.0.0-canary.004c9d392.0_1592952935885_0.7039028580535525","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/line-ripple","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8805f6a79cca92ce7cc04f109f29550f21de6438","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.03bde00f5.0.tgz","fileCount":34,"integrity":"sha512-TX8yd5HF8ExG4t1VaTkv+Qd3mzbJ0F9uavckF8qnNgrjeOUc9ZYDVeaXTPsBzeZ7HRF3p5hVn7Tced5ZKvzcWQ==","signatures":[{"sig":"MEUCIDm8xHqo/n5WzCu8JxajWYXPW0rEIjWgvwaKFj5iE6XTAiEAmvvLOiqlwFjDP8ntBuDuFdnKvUH4M9VtqOiLYe0Q/b8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p7UCRA9TVsSAnZWagAAKWoP/1M8Fuow5TACPh9cIFhN\n0WPng8u4U0onVzMcrjEu8hPk9ByLWXaoAOl1gP5GQJj6qM9zh7dCIxxmTD2+\nwb34UMs1EJ6NGzS3h8B2oWYKBvmw9dKzaCqOiMRj3+5VpKyXUigGU4dI1kvP\nHPR9EaYJIkVIxRwpc05Y57PZq3gWWmG5IAK9bq3HrvO7Svp6q1Mv7/fdn7nm\nbuo0TLPpaoaxv/Caub2jM1Q/YhGA3lVrvFXYG7/VZmyk1sDAZXqGsJ6GT0Vi\nDtxE2cLnCTyXGop+0zEsAj7STwsBLMC3yGkOxwS6t3HRf3iwOk8edO7ESgYH\nTtSPQySozt2m4YRDsvGEcd68EYhfqH1ePHD4FFP9Bl+1OLxLbZi785IxZl0e\nqEsu74uZZseo31VUhLTurHaWBFge+vTRhVL0FA08bCT8XGr/3zqRKXXrJDni\nid50o6KIdbPuzaedSUh/L8sxc4BDqpJNyS2Fs58g2v8gAsv7cEkK0mOOsDmt\nf/Iuo7L8wJkBKCfUp43R7+gp+FKwecvO2Vx1GhZnosajZWZidMRCTidO+Qty\n9SP5ap3QCPUfe69Q2BSGm2Kn91w0mOJoiDsBz+qTQq975uYTD56mHFcv0CL2\nPF+oEnWJ4awI8O/7wE3YhgIm0+JwvdlfD42GQuAwb3JI40o2UgGNewIwb+vf\ntNwJ\r\n=tB+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.03bde00f5.0","@material/theme":"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/line-ripple_8.0.0-canary.03bde00f5.0_1592958675984_0.6141234206747275","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/line-ripple","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"873f6ce4b3ae8e934b44901ef49fb7d9c50332bb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.599b8c319.0.tgz","fileCount":34,"integrity":"sha512-pD5zqScsXXOzBqMAoLgKw8vGOpHND6L1TiHrWOc+WGRjD7kP8uaIE1kV9ZU7eTOM3VUiccI0DrAYuUuV7iW/mQ==","signatures":[{"sig":"MEUCIGxJ3pDB2/9md6Nd1awcMMYPEuo7KwG5mSk/Lp2ufg8RAiEApUr0TzLEkIgQ6QiwxR/xiogO7UAcHd6qH6E4B6u84J4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82l9CRA9TVsSAnZWagAAEOkP/jPaq3q0ie1sclFxkwhM\nOBzPAM3tDelNIPciTX4oZcBfO3CRxw4euyphn+aSF1giimOUbPVBVn7ZfnFK\nkXjw1r/CJO1v0npHmf1dsD/+iCBA2i89+N7FBdaxP7674m/P+GMvOiDFSunk\nfP8vxnX+0AlKshfh57D6n2cIGOnc1JT77z7e3V5afM/4tY1be808z129plhc\nPc462Vy3b6V3NXlYqapcxgg+o2CzRQR8UIJNs8mSkc9mgzP+2J6E5FpIWzO1\n5o7DjxnkU1oi50PSkyb1cyryutmDaLNHT15wRouHFuzxPbgssIirL60UnrfK\nGRhqagJ8PPqAZdCljPUQFmNhlnpNST9qyEJd1QAiVmq/Pb1cIADtTTw92DbT\nU99wZB/kosGJnBNT3xBQnLdPA78yscHfxFxJnX6ZXUrv/jXtOzcOU8YRxiTb\nfB91wmsVhx+7mwM0hoo3Jp9gUopdtA2LKoNSA33QkL/feYnFnRGPFKqkB2Pv\nJLfGMZLWwU0Y4hHJGjtcxbf9Gh2jgNdULGyewKNSLx26JPS7Vl3fIKF3rHer\nWlt0F7BjsJPw6vPxheSesKjYc+OIFj/nznJgrtnJ1jhnWpeIlXvgA25rIgEG\nS3tUerZCWW4hYfIeXgewpkJZjULkPWoZXdACfxVYI0dteGh9wjyyO3IAi22e\nRMp5\r\n=gF8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.599b8c319.0","@material/theme":"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/line-ripple_8.0.0-canary.599b8c319.0_1593010557009_0.39565041807933565","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/line-ripple","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"405310278c39810c51a7b13a53cb6ffacb7ba5e1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.87e3be418.0.tgz","fileCount":34,"integrity":"sha512-oHyt10eK5BHBt7ZHGcd/veQbTzlSV3MsBhI0pVcNGu5B7YgpwGum/o9+PQWdx67xItGAZnlMo+iTbeieWgsVZw==","signatures":[{"sig":"MEUCIQCBuk4sfyLueGF/r6OW/3QREJLO/ebiyLCNTizZD/gQ1gIgRRO6N3J7b/EPpgp86wdqUvA9vIlbptQJfZfmWxUWfMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85L1CRA9TVsSAnZWagAAVvIP/2l/erJjeqaGLqfJuxU6\nEO2V9BoFeYNz7IjXu/ZUda8Pcy3t1yGYcE+IMB1aLZg4XhgYMdyGec3wmE1F\nj0ltMX7Z1TNZz5KJ8tk0N5JaJiJaCNal2W65afvKreWLjduh1O0q3mMj54Le\nq/uarwlP8UESJnDdPG0JihbaZ4RZrrtq0QuCyJO93NBH16QtzDrouIrD6sIY\n941RzWa7DDKrqgGCerVk4pC2iRgAeeHwnE9mCwXlj648Y6q1yMqtbrGQUC8h\n8c0E7Le52tvmpA8bZRIOkCVT6SfnquXJloL32o9eOlstCuXa/0eAgCupTnEH\nIo6ZTf6l+VTfD4Jx+o0e/jOEoM8yeM+fH3+73JeDsK7q35i8Ftlsm9yCW/Ni\n4qPU+njd13JulQv96oUwHq3dSJKcPT6jv3rGf3jrU9s/Ivd7+ultvf+cs8YT\n1uH5duG2c9IGPAWjBLiDqN0sOsf6zOy9MlrTvhyXUA6uVgIx0ZwqR5gbocSB\nHrurtmlqbfz3BWhZFyclZTCy9w1Y58fQIMWbUU6qNOAe1uFkNKJ+p6k1Zf4f\n7f6m2KkuWJqGFk5C6caB1Lvsx7izCyAAtLQgD7xmYV3cvqB4AGN9Bez0EEzh\nLKmwMUqc5WyxF3x4aOfFZvoR2bDqGrhH7lRYxP+5YYuQu/IyrPwGS/eOIwo+\n/e5g\r\n=qfNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.87e3be418.0","@material/theme":"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/line-ripple_8.0.0-canary.87e3be418.0_1593021172958_0.5325780425517315","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c553c2b6fcc09990c394420e1b994c95e898ad8d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.035cf2a6f.0.tgz","fileCount":34,"integrity":"sha512-RSmsToSxUfzAaKZspp13HVw0CqSN6TQRgGGAotZM3ev6pI0uLIr99irrR0WNdnMcwNlABh9ma08grOA95LI/eg==","signatures":[{"sig":"MEYCIQCbjdXbbEpm2+ASDxEHPzymy3GO2IFE6omvHYGw1aRexwIhAIrHcke9YzXLIPZpbkP7Rn6Z+mi8Lh86bdmuwy0OHyvA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe852cCRA9TVsSAnZWagAAGaEP/3I1bYGUFI9DaBk57msD\n6pC9FjL1a+UdjnJda/hTwXqiocihL6K4GQfw+WuzdUrIP0WTijLOsxv4dHBW\nOycwLRpPwYX7tzNdXxzPbVe09usCPhFL4QDrikdbKrXWo1nwVVLTN8QOtrD/\nCM6oiDIZ9LIjmYY5G54yJhH0AnaGP2vfkm/hRoAD9Id3F1/tzwlTu/IeBHfH\nrLe1t4y/KRRLoQrAqwLa590Gltvvf+ua4Cj1MeqxCBuEuqCnQ50nkbOXZZm7\nJS70apbo1YcLJ+7pgs3C+1lDTb852jX3vLPguwt/WBmYJImNV16GeCQNNhgw\nDt9aj0k2NTOoHXNem61Mn33UATeDnvURLn9+Qyk2QJkXVgXg4w4IEjT8/hut\noMTZxo5FJ4rDOiGqACtDEQ9m8qbDA7/Zo89xMmi0lsJmOH4wu/1RyRaUxGXT\nQYTBoxsgA9C3pUOwZ8ng8VwlpP0xF/AENus84WLUh0QpUNRK5kGpkVW3UAQH\n02g4WtdC/a+nkuGU89bsp5RjX6DoAfFtN+EfWpuxlaxWFQ/BGw81JMNopW4w\n0ZJSj00shB0vir8+1VnZQJDfKEYu4NxeN6omeN90A4jpAmqygtZcq15rpXqa\nR1fnaoW5W7lkxTXBtzUdETVh2POvihH6jxLIEJ/WQRxN9p2Scz7XNHKeKF7M\nfAzb\r\n=Xntt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.035cf2a6f.0","@material/theme":"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/line-ripple_8.0.0-canary.035cf2a6f.0_1593023899560_0.1688686635885246","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0e35c4f7aa9a5d5ee11c697bda1afd9430f588e0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2fed2c12f.0.tgz","fileCount":34,"integrity":"sha512-mFr+8cAZQKUR572Qjb5Shvq1MgTnHfgSTeFRTnsXaoD1TAMd2tPY7o2VnrBQ5UKxGieuM8OMerrL21ExYA9v6g==","signatures":[{"sig":"MEUCIQD9jEPDJSSOr26v2LU2bJnmk9b6womV9FwYqWK1tByy+wIgMfWOlOMggZ3970RZd7tZHm8ilMkjDYHP4YPujtmLAuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QKMCRA9TVsSAnZWagAAvTwP/3CSqtwWuUQkC2kjg4kK\n6WKW9MWZ4H/ISlMm1YgUmLO2W40uweQY3YtzNN4TlAuAJ+5Lb3MNaYxAKAmY\n/FfF0ZrgiWzILGlHlhP12cBjU9NhSfNJlu41fHdrLSH820WHqYB/Jxc00v8g\nB4QTXGFynp3pkMLTn9T9WDtfb+WgKBc8do7PdYYQjEs/WZo8y1dTKArBgShx\nZwRm6o49XU2FxX9MFFMun3UoARsZ1eKn09waZj6lhGvEJXMFfiRi7jc1r2Uv\nNcYRcJYhUFCR6Nj2yBJqwsiKkXmoKgARabkPueVMLBbObfryDywI1dwza/+L\n1a0zwnoriY2Hgcwh7XxAv0MAS0NyF6Z6j2pDCrepnv3+f0Q7TLgLOphZGwtS\nDpXLj4BojvejQqzwlXc7Pjdoz8BT+/OKIAZfn951YeBzqJHDYSttTP1eSO/x\nBmnC2hnjKxzEAqfvNxkJQ6jeF7c0updYgauUtNj38uyXyxZNingGwryShrbZ\nnbqk4sJBX7o4UI4SQ1uQOB50eLSF8fdo3b99GXlTDEAoo+FidCzU4dTi8+80\nua/NKsQ8Af3T344g9M5vrqtQmg/pDikUPiuyUVh1k94zbh2JIeI+++sEujGZ\ndqMwkJBZNaMo/57gk0YjLeLdag0GNikF8gZLQcZCeJX+HCmpcim5GJC7x8KY\nnbX4\r\n=k0/a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2fed2c12f.0","@material/theme":"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/line-ripple_8.0.0-canary.2fed2c12f.0_1593115269484_0.12011452850657589","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/line-ripple","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fc9b9b63cb862ca909264268bc0a38747034e2ac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.38197b443.0.tgz","fileCount":34,"integrity":"sha512-VqEy3TPF3WHQfTtPhXh4GvU92Mxr+ogbVcEMXkmBDzbKVE15TBJ/EGiAgc4X6R8YbMhcBd5isrXrBLSJ3FTrRw==","signatures":[{"sig":"MEYCIQDF60ksogz+yJs9/TZbMBnuff+naCa2+3WfdlSV7By3RgIhAJ7krQK0WA7yTk63VAP39TnVVOiXlNklhT9iZsNrfTAP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RWBCRA9TVsSAnZWagAAneEP/0TL3rdnjnheMJ2hf60B\naIbBOXBXBcIveSgae6xFvP7dcK5kHJl/0xhBQiNiGbnLllpX47dZd3wIp6DI\n99RCDvHeEH70YqVZxSNNwbMw/DRqFZ3FoWZyuIPAWyCnj/1Wn7ldpLnku2Lp\nT1nxD+AOqwREJJkkI6YtX6S/MmI6gpruJo7uOaFg6DW7SoskjWHfmoGpwlkr\nNn0ZeK3upj79c/Ay/0qCifztdUEK0pbd+FnXQUu5nhLFzH6X4CyykWXqKpcq\nAXvTI4nXW5V3jrlMrN4oVqGomXHMUJqrldyzCAGGtBQXKebqDM2kIWHMXnVV\nQ4oF7faFymTFHO6UtPVgjJHA3QHNoCyoPVaf1+zhR2fmVsXFLWSKOCn1RJQs\nUJpykS/gIFYN29oE19UXlmXwr4oN2WXnH73tDUGjbCa4mAqmnvtT2ElvC9Y1\nrMbZGS1j2lyTNq7QoWJz8MX+86cxVnbOZJE8nXnz8V9sTRo061PQayOqJc8z\nk7OHBFaQG1XEfKgaFfv35suNAe11koo2zyyL2IAgpMJaYSmhK/ShskPLlsDS\n8gAbNc6nkb9dTY/vzRy53O3ngNqqC/23RWGGHV2oZHvHkAEHhtHdvsi2dYkd\nEs3VmRxTMllusceI+3ikQ2/YhDcCo6WB4WeksZfZzzG4fai8cCaFLkNX9oIy\npuyG\r\n=WABL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.38197b443.0","@material/theme":"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/line-ripple_8.0.0-canary.38197b443.0_1593120129134_0.08363502755108532","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03491e184a201368e5d54d173dd06968d759fce2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.69a35e80c.0.tgz","fileCount":34,"integrity":"sha512-iFBR3G27//YtpgnC6qSjVYdROFmK16Fc0dBurNVMx26hM4akLqtmp7DePl/6HPlVwyylnSLqOje4PjsuNC3pXg==","signatures":[{"sig":"MEUCIAHumG9huy6XqYEW4rS9v9GTgpzs0B5/C8e0nUFhDxQ5AiEA+JzIEkpYIChR8EgvaVTEWbgUHRlH6R9Sa9lSyacrpos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jKPCRA9TVsSAnZWagAARP4P+wRjJBACIEdgHuIgoY8b\n5h4vsMTOkLAk3K0t1Wa5jZtnUTro5x3RIi9yCllfoYCDR5qaJ49vmSOtmv2P\n4qp+yHmX4ShW+yrcXYyIRy7i05v9TQQE4ywJ5QKy6uac7GlZH4dbY9BcNHDG\neaPcHPu9bt0a4IaUxCq1aLfniZFcW2K5ayYvUXqNyGPIpwXfD2IKIFQJqo5e\ngCKHNMp24XufZsQ5ML/y1UYkYAlLwcjYJBsKjsbuQeidE4P7OGT1KkZSAAW6\nKb3lneVupM4dhVDg4QTLejCkV13AL2vf6StBEcP7UAd9TvfJuScElKevPjMw\nAKs0HdtZ6lSNRELb8ydSEuclY5eN6cAN9KliS6FpUyA3zCwODF2FN/VS+wyK\n3rLoAvbynIvQcWKc1dzg0w+XIL3V3AifmkpYO1miFEM4SJRUWL7ZTeXHw1u4\nsOf8ZpQJqyIBSHbPqarobxn1gctiA3DA0Dzcbf5/9EjFk/6pbXwOguNIiZNd\n2I2lG3DgpDdkORo9B83NVO0iz0mjl65VRyDWlkU+L8JBJMV/fqgQKrrzN9LG\nsBY/jsDZ9XCTMbCoL/R1R7rEKDC2lWVRooOIeWxmacLMQhwTfl2fcu8pNHPS\nSXXOYpjfUFrTYaRKT+w1mTAQH+1W0SIqzjRJXR6xkm6ux4/+WqJthZWXMnx3\nKWhN\r\n=4+wt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.69a35e80c.0","@material/theme":"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/line-ripple_8.0.0-canary.69a35e80c.0_1593193103130_0.984255243244571","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/line-ripple","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d88dc1101777b28545d912e03c6acfaad5501812","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.df7154fb3.0.tgz","fileCount":34,"integrity":"sha512-wXkow+RlfHnIYDexDauvERGf7r8e7WvaS4B0DF/Jq8C/Sp07oywAOaSDCIteaPq+ap0mOUUsI1lTUXz+bfVNvA==","signatures":[{"sig":"MEUCIGsbf9JxWJgTfz6Ktjd1RF9NZtWNDmdymrBKDn60Xiq5AiEA0Q7qX8Fqg4y+hVwATbH1XimHo+fuQkF5ow5nfXQ8+Qo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jt4CRA9TVsSAnZWagAAJSkP/1DGptnf4SLhJFwtF5w2\nETCtzwsMYJ49gBTetVX692WkW5h6+6IMNGBE5MqL9QRpilN9cROFftooemsg\nChhenZWZxEbJt5fwY9KfU063mJhp6hniL7lbi7o0FxKlkKVlT+KGPQ3cPzEC\n4Lb4BzSp/9bK2BuVGISKCbGFA9tUtveueJuvQgr5QH0b2R+a9oun1zJXahfu\nHnDbUFLEyPCB1Ya5GySH8t6Q+M3t1GJ42Uyosl3c5pryRLCAy8k3K6pso4m2\nAH4xMeQEhvUoEGy9VujES3T+QbWPyyX5kjqoDgwWE6SGPW5mm8gLNZPKkbQf\ncrTF0XYQ2rEjieHo4cJ2fII08dyclhZyDDB1KQbJoas8DIz6JxQIzuiJuiuT\ndntOfEpqccXG/xu3mZQ32T6C3CNnWm5FPrx3e/VMiqUvAzobBCWSAj8/rnaC\n0x1EJg0NnSUoOn1ln6pk467HPSKPUD1y56799yXONwYpr9SiOLIQ5B6MwUue\ngW8XidR6jHE2qwX4LsHvA6iMhO/XivTtFy5MxS12Lh4Fla2Y5la9cyE/Q9Py\niDnE6ssiW/1j0ES+zSB+KBusQ41SvkJnBVJuuLIqXH1YrltPnTSd9zCNCPUe\nS7OOUwMjhYvjI39EUipPCM+LoA0jqu4FbRwGvIYH11olAdVPtejYkxwqpcOS\nT/P7\r\n=0WOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.df7154fb3.0","@material/theme":"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/line-ripple_8.0.0-canary.df7154fb3.0_1593195383611_0.5435269590474237","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"df2121d4e34a764558fa6e4b0af58369ba9f2dc5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d5618602a.0.tgz","fileCount":34,"integrity":"sha512-Xs7a1D4aUcdSHMp522EFeGGg4G0Ha8FEjo7DQD0MueuVCASpvLGV+g1HwMjt4mvxPseXsgbeUt6E3EGbh9NPLg==","signatures":[{"sig":"MEYCIQD9aUjVfkIqfK2wxMLOCEvaRG+a67iw1+3jvNy3OkAubgIhAMUwDr/ZDuOMXGBhARWcTPxq7jZmucZosNeRnzqofhmE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m0LCRA9TVsSAnZWagAAHQgQAIWapuEivZ1XEwtJ9+FE\n1yOw3Mu7PSxJswhOA9fM2nl7FU2aFa9CDl7VyFln9b7aK4sH/xNDdI651Qym\nucQ7Um0LBB/jj5Fk9RguPmfdCjKYusqybn8Ai4KESac6DNVEzTWloeYHAgYR\n4MX+pulOq2ay3hB8tA6OE/e74m3Gbmn7x+gHoCflviekE8nypW6MmrCTvklt\nUZKqnYAXNt/Lp5/xPZ83DLgTdoTAhSqT2yH9eE0dbiWqLQiMzBh+noNZLXVq\nstemy7ZhPXqIRKSYJKvPneE7ugzw9pNdOztjXoAoafd/PhebDKNrvBxUYJe5\nUHf0gsQzMvpwZal8QPVUwswTFD3fKC6TpRbNkz0RjkSvDVreWkoEQECHks1t\ndDYqr3kymME9fiGB0lPHsMdtp/CS7qgfPA/o+fYzcYWJGPD6ijUEFQjgv4kM\n2Lir0j1FG0Lc+chwRDbfAyj8e+r7oKpRtGMXNpKiZRlbhMqcK9S59E+CxSmy\n+XyCCua8xMo77g/piZOKv0EVjLlodgFd1V1x2yNE0ir4qsE+Sgyu7zYnPMym\nlSsKw8MG/3fsUbulMosNNK4uKyjPKCATDkQn6aIB2g/U8vmAQ0MmAbnsEH68\nIJYPQHYMULqYIux8ih5CAm5TreMa0gEJKd+bOAsuP82/w9CGqwhx3ucDqOzS\nxpBT\r\n=Sr3+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d5618602a.0","@material/theme":"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/line-ripple_8.0.0-canary.d5618602a.0_1593208074188_0.5115537177935916","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c5ed3cac82f980a3dd431b2f2a671bafca833c6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e590b376b.0.tgz","fileCount":34,"integrity":"sha512-d8SDC9BwL7ZukYqgnFYLfiiZjxRPqUZHOm3Jg+O7Fql7reqG6wgGGGzLjLHttyKa/BtZuX/YwohT12fNkYo1aw==","signatures":[{"sig":"MEQCIGH1fIqM09O4RODUPF6c6MFlYNxD4PRwuo5iv/iZriwJAiAF/DX+oMimVeTPt/Se2cVIvIvsaT7412Mj7VTyeCfsLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oNfCRA9TVsSAnZWagAA4aQP/0Kzntq7b2+wZlTzpbLx\nMHDbEHOLWFfu08B2G+WPFT/X1WPkvA3SphoK2Y+BhdUVSwCc1MibTpgjadXH\nrIiyVZDN4/ynK9huh0fcVMnBBVJK+ojwTuj/t66WE/+CarhQlalLth4KT8BX\n0rk1Xud2F6BcuXAcYqjYknNHR/UOcysfXFpEHnWGx7G2PgKjWplg/GhfB3VG\n/uZN+5UdFjEIpC4SaboVIuSxmCU7T6sL/Soge/EhaOy8mq83piieQXbmlTZq\n7QQeBoRS92tbQEGvYzr0tplYHrdnvZydJV+IQgMTQ7M1wrAy8DHpEWdDRLKK\nbhe1GWSMA7S3HU1M3mTYWkyHJJ3hGtCRkncVAberIQXVQ2qs3YUItoxbrM9q\nnq1Ywh53S6ASryWKzD/VCxYsSWg9L4uNmt6xncD/Z7/IHMhy84h0k74TnkuN\nTlCpX5xe/v1pJAxBNM6/lGib+P1TsE7AjDKhVNkN00VsCi7nZnLzdr4O2k4U\nXZ+xI+fwaG9RClHovAm3iS9H12wuUX2a2cTiPdabqzPAgikqi47iAU0h6gzf\ndTBNWcEXQEdrzqFEHQ4aCu8Nmmi9jIWjksioq1oSlUdoxknGy3g12zK4n+f4\nxeWa3qyCFNuRKlKouuW0JipxdffIZ4FviloGuIvRzn6ZUHT89c50n9kasY/c\nFJkq\r\n=qtTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e590b376b.0","@material/theme":"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/line-ripple_8.0.0-canary.e590b376b.0_1593213791141_0.022417320022847465","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ce6167f237d5cadad8b984809a7922e8cdb12009","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":34,"integrity":"sha512-z/VzwY+M+qz8PACESLpNacv579g33c9xz4layoDsCvEIxjSQlekQ7mVpPomKPRuAow/Fphunzuq7P3lAru1WBw==","signatures":[{"sig":"MEUCIAyt79SEp3dG+qkCBekNjKFMhXhoPDDnaO1n/HB5SmXkAiEA4WCSud2YGf5E+BdzJ2NREat3RHczSl6OOPV3oQL6VGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iGSCRA9TVsSAnZWagAA4eMP/jPMF4BkrhmZ3B8nbkC7\nZu3V5S0C2QQ3lgbgLvIutzpq6rqjDFXCCrxzSV/p/JWw/xnJzyKl0nwVnYSH\nzG3AtDB0OTFpAKDkmlvmUhj15X9D+WJ0+8/Kn4VciUT3cVDcT6JECJ5Ywn6B\nASGpypPVMIqB2OYyADsoDABleMEepsmM7GL/vgvsR7mSMeFDBgwXi3/gSGEu\nXNBAtWHYJKOqcoIt8XEXnF0n/avER81v1DSeiO/uHFzWRhDN57u5MM5PXOX9\nLCi7HD9SNXuAD39iqR5f+lI3qd3wQCLbsjLn20N45YrJXHAQ4AAi7+hd3Eb1\nFCPtPveqhLCedScL1CMxmw0h1BY8QMKZ24xKySsXyU2NoLOI0MmALbo0VeBo\nU4NC8mmwzti7WPPaZbruI4J22nM8dJcncWN2itSjE8IMCcgbPCZ6iA38a9du\nal2g4lRi0/DA2dn+X+MsNgMXj9R/C+5+k0DErYJOqooWcA0/jARKzw8ACi0p\nSaR8RXofhPphloH31RlvL4UxSdXigDiSnxrrfNiEaruT22g013Aq6VC+tfu7\nrrj3sltf5ajkeX40F3SQAcmORGnqywwtUFjdGMpYgKak/tEHoGK+t1CxJrmd\nPVvny3VXELQg2Q+4UY3T+jhQJgpThERYZGlc6vo2Fwmu2ORRNyGJTk3GLmEP\nKNc/\r\n=o0hW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/theme":"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/line-ripple_8.0.0-canary.0c9d6bd2d.0_1593450897861_0.07409149168975704","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7805e242307b30f46e183c743d0ed0806ec3d065","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c1fec4246.0.tgz","fileCount":34,"integrity":"sha512-mgv5v5zVIMdgtKvxeVKHyUqBgceEPvnaO5Rp6qMNMxD7bxYMIQ7SD89V4pz7VxvUtxpB9C3FBnAeiyOjBubKmg==","signatures":[{"sig":"MEYCIQCwWee9R/4+a+YANR31g2fjDl6O5Ach4/1a2tLxksIlVwIhAPVes16PelXsma7PWF+mB8Tr11Bf2BUYE3L9l388epNg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iUiCRA9TVsSAnZWagAAAocP/20PBkUfjpOCfab7bZM3\nDtOFcIg6dth5oxnhd3Zp6av4jGawT1vGjskNj1+9oNiIu2Elz0G+AbmoubMp\n8sPdsohBM4sCGWGVkCs/H0MsdLknpN6Hem3ntoAgtxvNYGuI7kv8Zr6GYeX7\nVe0D/1NEAPeFLQIdxIQ2mWQEN2DYbvo7sFQbBsxXqqs4P4ZFWCmm1JK9aM4R\nABveyFTT4tO7VqTpNjYuoJeMZ1NZlRmv9hkXeedWY7sIt5/3LDPttQySXUC4\nPLoo2ALoEuxXU9gfM/A3xb4aEWhWxwUCdOusSe1HLNh53u45qRVWO0nxH8ES\nMoD/kEzcJt13Lmazk1M7b8KNbbqE6cjiSM7YmE6XFaxYDmL88OJDRfrnsGci\nX1eP2oldb7jZnBAupgV/9j+i1Ix8HzYzk0hYTJ2krtiz8DB6iMyr8mMAlGwZ\nHKmX+R0Q0sCgpk7bD8DzZkpJjKDEUnjojw1OZyi/j7lYXmtI82KHdJncQZ6p\nnuE7hTAN6o7fJz5vKmgcRz32AbOptNTxUArT+64g7wSqzmPNhB2I4aKVZCHu\nN+c9fStlsR2uQ5yXJcb4NAiQWX/lRoYxJWQN97+1W2oqPZgAX3QQARm0dbdr\nZflYvCUIjj18fJn56YAEOW8NIambieP3jEenlOTkos6ZvZ6SjkfxUg0ahgXF\nn0p9\r\n=vHUE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c1fec4246.0","@material/theme":"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/line-ripple_8.0.0-canary.c1fec4246.0_1593451810296_0.71766016164496","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"175ec81f33ec598443f9073719017980e9258ea2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c678a9d34.0.tgz","fileCount":34,"integrity":"sha512-aasqE8U3eHjX7ntYO/PLE3ionqr+pDeRiyBcxEiuPgFClsCyX2V1RumAy55mBuC5RPr5uPFmD34c4IErwIPK6Q==","signatures":[{"sig":"MEUCIGVewHrp5axBRG1mH3za6SEfv124bk7Agmnc7KGDeo5FAiEAok39Pu2RHpmBMXGeJLtda5IFZB7dbQEv7c1jQDygqZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+ioYCRA9TVsSAnZWagAA+k0P/3Wu8uUdrZGwwCSB0GTC\nMzmGn6B7cij3luy8KjF9h0jhDuQZUezmU3m2f46wnC7qZJLEW9AQIvIwN/jI\nrmTJ6y0WpsCl2lzjIMDGTa37/HQpWXoSZfPKWbjTwKtTX+h2Qrlf3LtQjFlo\nIEE4ga3nd526dEoGiYxE3SbEuWUFfIv/9JRwF02yGOXFbH1trR9G8UGYEsJq\n+VRQ6uGQ7PBQ/YheadxrcyUqqDOw9EeFzV6SobdyXBDVg3jGgFCbubr2Yo7h\njnBAagtR5tqt9d4EKmP7UgDdwRKcXbKBwwSBLjW9N6llTxaDgxYUVxIOEiwg\nGPbn8BbW47chaWVr8lwxbSUn/lh6EY7zGo5WFyKPtUPzMfv3uRSLyzWJmd53\nuBXBidaMEhaoZ4Sswuxs3uLux58/XR0JzCz8nW3+x0v31HiMXYzUxWWH8jzB\nM9yu49aqq4H8x7ZWd0s5rW/e3rF8CCnlVThYkFGiVjIUOHie54xJyXfLumun\n9AT4CCz+yoYATfjD4EJghyZEO3jlDaFP+LVs1Xklob5Ck9T122nTz7Oyj6SC\n9fEWg51A270jkp4QCYz29uwzNHiE/TlClDrvwSAK9mD3sDXsNbCxst95ZNYx\ngEQEv6Wq1ieLTT7pyD/+5JoK45XgFisZBhO3+M8bvSSJzXmhjvsGYdBmNjki\nEM8g\r\n=6OBh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c678a9d34.0","@material/theme":"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/line-ripple_8.0.0-canary.c678a9d34.0_1593453080346_0.06619796217036455","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b892afbc06c110c3e9dd89db13f552dacdfdcbea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.521afaf6e.0.tgz","fileCount":34,"integrity":"sha512-ldfVCCIXBp15NYONN6+hL3cFY/xHEgCrZ0fyJ/b2uyJ8sBukHWZeGokxGaVH4NnGUxT4WfYwGPH+sMIba8AuQA==","signatures":[{"sig":"MEQCHxoIklEuLmhS/awubfGWsz6+hKjQFe2vIBwcXyp/rl4CIQCnhuspA49BrS6YsIqwd33vm2Ci4FqsdGSAtzuXqWAfVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1SeCRA9TVsSAnZWagAANywP/3oNpe+g/nfhmDJYwU5+\nqJU7Qo5UBZmWE5O1AGxxk4rLG2sCAeBUfZouBobszvhpdu+eVGV2UD//OB1I\n4R3NwQxGGbhkY3Fm3N5GobSClndPbs106LWqE0owhMZtbU29Yp3N92c7Ek0f\nL7vjj+Izxni8LP1NO1dGqvOc+84AATG3iv9DBScunHz2Q3GksC45XOdfSUo+\nozg9Qhszn8pqI/TlqmpEOssQ+F/xAV5edRuG6lVDYy74N0pQxgKB8KEcUQxd\na8G+4LHx2tyV3Ngokod/fmPpiNitrVAX5PLrsCCZlkAu0b1VEsVTenHxKSVt\nRHcjdJpY4BVIw0kZ7NRf6e5f5/AJvgO3YjUaoK2AhgKSkRyH+G739kJBU0tL\ngNqTzc8yXfnu3MvqIfWEGxQi1L0X55cT2jYtUKMUnhEFuGB6Qe0CqeN+D5dw\nBxKgfaH6eyKjHVE5QWsHFox7WI/6wBOtPWvKd8VA1kEEv/71B1/J1LVwtDZ9\nBzgs4c1E7RhzF1Ly6PBM6K9sX490csPv15p9CZxwsKsoVfnaM7tbZQ2pOLCd\nh54PhP7VVfj7CVDPJ4tOiG7ooqnZgzj423FXZoz0+f8r++any4NwZ5ERcblC\nAOoLQLq0yJvfFi01WvJ3tp8iULRPVW9ZovUAzJSRlCmEugi0nvH6MgonTv6p\nCKJt\r\n=ERLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.521afaf6e.0","@material/theme":"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/line-ripple_8.0.0-canary.521afaf6e.0_1593529501834_0.9978316673619192","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"059db0f85e65ee5b8eb0e90b63335de40f55dbe3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a2ad48839.0.tgz","fileCount":34,"integrity":"sha512-vg8wvqpIRP2dc9vjB9SQU1ZdmZotA/YFuefrOPJEzc5D/Y64Dew/e/zfcjtIroS0uOz5vEMqb8EITvk6TgaiHw==","signatures":[{"sig":"MEUCIEZG/DSnD/QTcbfKLa9nndqaN+Ls2key9zvQWW9mjQmuAiEA7FN5nFGQd+nZKE+nPVazyt5kTTitKpVEeH8IdJKkZH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+471CRA9TVsSAnZWagAA2o4P/0JGLpr7NlKJhZRBpbee\nPu5Vm6NFRBotsmGFg7lF7kPigBAbySk9wa8K1QpHc3ksM43LpqU8bF0bLv15\ni+qVeoLH5JtU3ZHfToDBo82FPOh5JXZpMGNIYDCF8baF0D7bI6VwZv6PC2Be\nhMt+thdeSlS00zn632fWNAkK3AcOguXOB0tHoTQPklZcAEBXkTmXvGzsiQob\nuVtLLJxPaQGpyPMpBDVRFV1hJ5RbV3SMgGOyhM/fBYTctNf5c+JsvTTTsPbA\nuDyr/BnjQ5OICJD8dIKZo6y6yP71U26Qku5DiSw6G1mQHiviGt+J6OAVqey1\ntdBuuGqBNu4a24+4BZQvnZqVrL9m4EXUYVQIf/HSijGxYNpT3R2vDKhk+TCX\nNE+LJ9PTIjqqPlD/cXIX/mTj/QMN2LbM4SBsZ/cnlf0w7uAV9Gxu2BTe/svw\noku4wHFGtUQs+NdFqGq13JyRwm3cFhUN1kIkWgDg9rU9rXYHGUJdN3tQWf9W\n/acBPLKONZSkWkM2gPJJjIkYP7W57zJmpgzqC+y2LEv/FK19FeYC227B4k/7\nrzvpDTiinHODv9jEcIEx6hHGNeotUUVYhhKrLXTBa5sxJGRrw0Mczs+ZQ195\n93Ck+asmpbZ6ou5eMVavavCnUI1jl3XRzngqBpMABKEjqHE0MnlDrUWUXo4n\nWtpe\r\n=0lh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a2ad48839.0","@material/theme":"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/line-ripple_8.0.0-canary.a2ad48839.0_1593544437049_0.39596777107837644","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dfb8cba2bbe64e9964d1962bc70afccd23de5645","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ec2385881.0.tgz","fileCount":34,"integrity":"sha512-Fu0eYgv/Ud2XztQk4AyD6M0C/Z46Q5GnBCIxnZPbWIrC1cTbuym3lJpRfan/4nGiEm7s2GZiXLRmYW9h3RMlcA==","signatures":[{"sig":"MEUCIQD/GTbFjQsHT58aYLD/3WeGAuwHiW279YwGagsw1wRtRgIgPxzlop0iZ09ABpNBhN1+I+Ti8OX3hX/pVG65DKEmr60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7K7CRA9TVsSAnZWagAApBsQAJJC4fGawa2IDMIe47w8\nA+uZo7NsaovQcAE33LgXCi5Kwlph1amF77KWPVDkvdZ7NMrgqL2qnHeJ/i4C\nHgf2AJ/9ohwZ4f4FUKoOKpz+5Eo0X/hbzD2SHdXxehz3xWN5PO4RGPlNBt0W\nDECLIZsJX4lGuHZnNGpmmncohfKdc9XNTKRKpKh/i6JG6HArp0OBv3Swh1fi\n/XB0/sNyEayMTOKxChUpe3OC5KeRNsPWsMxwnFcgVFCPZrkZNTYfypxCkBRQ\nTQFqDWZ2FgtwkhnO8okCmUHIsLf7Ti/HzKIjzCdbZ5Lb9xlHZdttjI8upP3G\nI7CvD/XhF9//FBhAI8MQVnsa6Fxl2b752J/0vdF2+rVwKluw1/aimRrPQcfJ\ndtydXBh5Zve5cYFVIGyzQSy1MSY6ZKV2vpEhqIIsp0ZatGSvLpyjrFeFmL2m\nAzCgpQmOtai1GY54J+2SURGO7K1FojzACIanuXmsTCU0q0yOLn6/WZbdiOVe\nK10vqtuVK/8fQmQLkB3x2Fo2eKvpyXg++4sNA9sZWxHCstY91gwmr5mCnh41\nw+Wi1YkKRG/cJ8GMzgzIiehSpk0mapPbLLPh27sa1fCdo/yBTQrxKDRJw8S+\nRJMQCg9wv52UagjhTATBcyQ9BnAKjNevwf3yWKwsxk5wWbvJVX43HXbeMPHv\n7Ymo\r\n=ER/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ec2385881.0","@material/theme":"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/line-ripple_8.0.0-canary.ec2385881.0_1593553594658_0.6639041268741146","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"abb90081bc8da6305c9f4782e3d9379d29363023","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.610c26c4a.0.tgz","fileCount":34,"integrity":"sha512-8wEdb2c1bR7N5Zp4uuOKQW1TlBL3BAkOSesLti2GglWGHCRQDOS3C9z6LbbXpflXLw2GyV3AQHMklS9/xFChyA==","signatures":[{"sig":"MEYCIQCSD5HD42iVmP6Pqc9Y9h0Nwen5FYBxTZ1lnnHyPceJyQIhAJO5kkaGdJ7Rd6Ou7h2B759+uTjzu4eI26fzdSFNTvSs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KPvCRA9TVsSAnZWagAAuzcP+QGd1HXav39GLfeiPMU3\nJ/4Ppya4rBOk4XlkEKJVyXUPPHGP3KtV748gBX0r7q0X2PVqBMzg67QRNxeE\n6b88hcEcT+1gXrsrqqieuxtOEN70fjY/xwQBLCTHHPRFvjExiHvHOW+uRv1Z\nLpw549sh7mzUbKQ12q/uGVtfAg/6adKgOlDKVCCKNP70Eke8vevKnra4jiBm\nxdAOzG+SUN3Lt+mb+igAYNjj6JIyjWPB9rADUMym/Mn4C1nrZ9JkHc9ZDD7E\nwMu1pW0cFOd43gry2BooCp9CR8xRs5s9EPVUbun3u7rgBiBpKDz3Oe2mUQ9C\nWNb7r6fZMZpQkRQ8BJLyx6Gh5f/WvhZAo0nI1E98LYWZ93n+gs2Bl1QM9bw3\nrPLfweEL42Ipicug9xJ7ajsgmfPtdVMNm3kENP48ljkzReKJ7cn9mPwErBDW\njqg4Y5vCUGc1N8RnkYglG/EMvEmt84RR1ei+wxf6VRsTrCuGxFyKW/jOd/LJ\nxeBs2PIpWoKweubypfHvYJCJb28Ci+uWFFMV5oNKmGPBKlwa5GgvtLXIZDqL\nvFamLoCz5Mihd7W3v7fiV4UoNVpRHUZP2CuUj6G249OwxHGtI+GXaJNld5CE\nRw9KIv4F47I0tbKzQaqGtacc9GdgIGZfiqnqv/9y7xQeT6638FdMgeKvS5/z\nmTfA\r\n=hOqM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.610c26c4a.0","@material/theme":"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/line-ripple_8.0.0-canary.610c26c4a.0_1593615342913_0.6571611529156058","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3e4f9d4cdcfc3abcc9d98af5edc5418b267fb786","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":34,"integrity":"sha512-OaglgI+PNWLbTNur7Fgz3zCZGDNoEFvKoXtIIaUpXWBBOzbeB0GJ2GsTiBVzmemc2MLTfIw/i2KD5HvnMhRuHQ==","signatures":[{"sig":"MEYCIQCFnUIHUnxHL8qTel/4NINuBWSla7IFLkImUSAP/IyREQIhAPG7uvWANZis6bRQDtTvteLyrK9o5/kLWCVJFobRR7Q8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/ON4CRA9TVsSAnZWagAA1C0QAKIcOn6Kl2Egp1F8sxEv\nAPXT5bys29OGs01XVugV2X6dAUfaQWgnJHr0Im7HkqFWLWUGdX9gtiRqkuUX\nuF+grGrqPy9XCSWxCMTtBWGWsE9/kvLIeuPfzgVhG2yBE9rZQf6PinalJYAu\nhTFOakhPthEkdhTB2BbjEivrRl+ER/6Kqttd6MaiYhUbvohjyQP5yxSshGpq\nwe99yl8MQnspZYqdmGXgun4GWs2Djy3l9qpPbAyo3Q9Mt8pX7Z09oPwuJpRj\n0+dnZ9+odObcfkm0kWJJG23KcUIGwRDIoTOlY11rAf0jrjh2bvpyq5dz5Xx9\nWfvq5va6C7amfV9aHDIgQTxtkswNC7Dt/PlFLKMoYRb3nW4iZih24vXOLipR\n8Uci/T4TVYO5lvRp+ODp4PC1c3P4yvwYSzt+necfi6+w8SLcqXQF7Y40JxzV\nEcg+D9xOoS0W2OtIK8gWWHc84C+d+O3SZMUov8sVQ1YYGFNVxFQPl0sZzjVv\n0xkKnksNrG2ssij94T7VQQh2gmS74U1Dg1c0CdOG/2ODjXe6eruS033TOhcJ\nd9cAdv+yTz8rhyMlVERTGnB0o8vd+zGMyPgJDt8a3N1AHkr34KN9iAGvLtP+\nrdCEmtUF2ovJX3saTLGaPD0g7Y7nBGbg6oLMhIO90xdoIFN/mmflYYorF8S4\nR5bB\r\n=/YaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/theme":"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/line-ripple_8.0.0-canary.e2ea4a99e.0_1593631607547_0.5580030895140575","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7a7fc7e2430a47480f9851cb74192c94716e1b74","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a78ceb112.0.tgz","fileCount":34,"integrity":"sha512-sWFB4njnz+1bi1UVKKBRYtXUAzYTcgNeFVu19Duo9OPxzhB8KAwi4HW70vVLN1y7SSE2a2p/UrKMiW6AzYmoZg==","signatures":[{"sig":"MEUCIQC3R2ZjmvPy72vyvomPzY64fCsBGmXRzqHchfSoAijfIgIgYekcXD06w5OwndXLp1rqcwaXFLkfHJFOA0MOWS6OW6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OY6CRA9TVsSAnZWagAAH0YP/0n6RcCLo9/mEcwVynx2\nQTatKY9i4K+NJOOrL+5vPLGNpAyE/bUZcdEsHEgUcXHl6A59w0jt4vF1CMFi\nuUu7XSHlA7w7ZpO7B7u4LArpPX/HV6NqquZ67p3pZ58y60/RPZmTHGyA72ao\nEGxy0XX4EFEYaHWAuk8J1CqBfSzIngVKrwO5yypdffsCG4ItKn8mvj/kTa92\n0l/jMuDN6QisTwjSqotvEfqoW76647sR++UX9IKJokr9Of/65aNy37/WvBtl\nBrDiJbhCRPcfCXD8wXH/sa0mdIGjzC3Avi5FNbmonMc1uab6XMUTMf+nw0AG\nUbdUPwLkMFPK5KmARnxRvjhklM8hodI7jxBEFlUUuJULTDjDKj0u84p2cM4M\nWxpwjs4nUp5KXVtC7QHPwDp/LL/22Gj8kcQUkJz1ve6hm0YhjZHUqXnCl68O\nwaimelZjEm9oEhH6IG7sivJAZDNTdanpsS2A2LNjSM2gNNeWlghrrqsDl0fq\n/4t0pE9pD5QSUp9JF3SwSnviR2atAp6i4ULQtRdGyYlRb4SSFbac+0BYUZg2\n93wHAImiGPG8Iht/zuUcIK3STZ1a8Che2xb1M9PbmQ4tKuy42DtJD/2JI3vm\nmzZDKA5OIj23euKgsJ9JhkpkBsaSuE0jx0RjSEckn12vW2Fr6fStfdXSxMwg\n25O7\r\n=6SWJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a78ceb112.0","@material/theme":"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/line-ripple_8.0.0-canary.a78ceb112.0_1593632314435_0.5845627615124656","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f2d24f8a5358e414036eb6488b33fe498ce6084","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b0c456d33.0.tgz","fileCount":34,"integrity":"sha512-HXB76sQGC+WLnpQY6FsY9wS8Zjugfd1oZe7j5CNx4uS+b2g+1Bt9lH6zT5gdhiv8b0Gmchb/uv0Vu0PjQDN/kw==","signatures":[{"sig":"MEUCIQDLMD6ZbSveVbgzz+Uv+pZ62bciiZ4ihttaRzISazZJZQIgPYXpZ9J7aA6D46mT6/EXPhlNcvOaIB3EbxblHN5CidY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6hzCRA9TVsSAnZWagAAH8MP/j2k79uUmHjABm/jNLs1\nrZHnnwvP6YlX0jDq0MIaeIq5srwq/XlflvBICuk1GsSgVbDiEoX+2OPY9jJO\n7LnPXppVQ84yxl2k+ssnlRFfBY0RLqjmXsNEKnKqrFR29SwfeZC1TNdyf+QF\nVfafK+7EQK7rroqSS/la1MItMqd2gD3BhmBYOTJrI7sJMlcHuX7HXZJEFQvP\n8khF6VwEfEeBdjkTkteiEdetlC1CG9WqgGFlm0aKRo7eHt7IGvx0lxBP+h4L\nbRii+Nyk7oIZ29y4lupdTWVGISdzUJ+7LUgQb30/5tbmDM01ndJAiuBC3+FP\nFMvBtle1HjcQDwvn01sZW4Vp+rruJOidgysf5Mwn1ctBeAqvkGBjXzi9vZJw\n1FbT6RHyd9fmFdY08cdEeEu85S7pemc/2sCIcD16o+bMMsxpQ+mp07FSVEbk\niJ067U+VDFFVEfCaJoJH/GyCMoM7u1tBP3AGDD/WBO+4YPff6E/ny5H+FXFo\n5iJ855kNoWL8tuDO2t8yaCYf1cTAsUE8EIdyAQsB0omysd0g3fo9ttFynntA\nqk235yKrBGQHCFxB2VvHO4LQF+JC7F5Iq5eJcGNKdKOYprWMLE6p1Cn1AH52\niwENkU1FVGhEXiwmIvKdXjq1qBgb6HpKgKbFxoX6b14cddk+UGPGrS25lq3f\npH2J\r\n=e6uw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b0c456d33.0","@material/theme":"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/line-ripple_8.0.0-canary.b0c456d33.0_1594075249537_0.47198018748616555","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"10907d9af9c78864eb55762d20e6ad1c97df9b86","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2e5711e04.0.tgz","fileCount":34,"integrity":"sha512-sGwV884M9r9UpUol0PCimHRLn9uLGVFJTjZBUGF7QDt3jVSz2Fw8Cg5H1K1gKJAMleRhtz/g3EImtzjH0L9qAA==","signatures":[{"sig":"MEUCIHPHxDIvDWGkempF/0FdIqVI+GOi79wpufqIMHTnp+HrAiEA1hgRx0CkBPuDvkGkXenGJIQa6i6e3PXYZth0eOKsA+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfinCRA9TVsSAnZWagAA8NQQAKINS90YBoPHtuy9sHnT\nZikDNeEv76jmj92EQ3NRCQIUEo/RVpr4vtKkpznQzxvBa5lLwjq5req0TXfv\n54LZ8N3HqLFZ1YGrwSfjuxudTjIAJVm1nC+L9YBzDzYH4OoEGr9J9k7yth/M\niSiW69ibcUBrvaznKccO/5mh2iMcNdS+/IV/h7Opvhsj+LV1aio3RREticBg\nBVWFRuMUI8YnnkCupVNwQ8mSZOusL+Poi1xFAIfnJ1c8/TxN/HCykymOUtIl\nH1OoXZ+cJiPqRKaE/jtbc2jhbRRKyJZsxCcGLxZWgYagkfigw6DHIaEvyoU4\nrnz+m5vt2GluCVIHm2PwXoLr7MKTyRX7Xf7dFZTL1rBRV51Nc9dMF9BpPlhP\nGd6UNwkKusQeifvnkFZBM30nTw/SPwL6gWqZgijFMAMM+AEXCYUZoxwQ6IJG\n59sQ6DIL198hCfAfHpDKDfJT56Tzt7iJFgJsNdsRmZ/4+GpCKwO8L6NseX9T\ntSPv1dHdVEFRI3WJgpyEAQZw1xFHrROgHBbSc7fJs5SPQmcX/AWdQhm5zAjU\noQ9A4YzPK8/YJHLhg6AuEwCYSJSRHkYPZ5pKhLnw2dcaXSQ7pBSZDwhksRi4\nHfoqhj44P7oHxe8txP01MWECo2wkH7XjZ0TdxzWLDTUNWyyYhu+qElQ4Xzdd\nkxXx\r\n=fa00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2e5711e04.0","@material/theme":"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/line-ripple_8.0.0-canary.2e5711e04.0_1594226855396_0.6247242048595592","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/line-ripple","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d8925b07de047d9f9755bfd19030c08150688d94","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.811fc5d24.0.tgz","fileCount":34,"integrity":"sha512-7F7a6vysZr2UIwrhlrWz2JzsaNgfFJoMnvnPlk8rIWou0+Zby1Q4PofNWySDnQZq5NmBAOpMXlLqG5rAvvUSiQ==","signatures":[{"sig":"MEQCICLXsSLLpxc18+E14D/kw8iebLcxWpZOadF2cSWSuHZSAiAg7wadiQBwXTLEATncZRbIhDYLPJVjO6VdrOAcUOC+2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf8tCRA9TVsSAnZWagAAjn8QAIwgowIVQTR6fGbZSiEW\n60I9Gy7YIHzJ1xWasxUig0Gt/upY731slKdYHPQYFGv51vx9RTfDF/OVbt8b\nWIPNo5OEqwc6Pv17U4ITb+FwgH9nQ667snZVcn2eMg22bywe/xUaAxw/yjb5\n1rbxB/lbhhSO2yAKI8asT0xcWRLawlZpzwqQP/3CQ5jUrCGlGQ0p5UNfOlyK\nzVhOm47w9dJr/7Ths0Fq6yjXBp7lqks2ZIdlK4zSmUeE5NtYlGxrM+9scNYe\nAw70BKKA9pUpemkumsmw0hqZQa55HiksBzH1whEqjPMUdnixqUiEldndRzdi\nwjhwOjuUcIwz8d9LdR/wNUv/wrNBspUVbNDbYNjPX8s5ZR0EpGf1BE7iV8yI\nEgTNqRrRB7k0m9XBEdu1B/xcxtq/5SI5Tn1NMDfQqSPKMqilQJ2VGugcBlcB\n4mAX+AhzgHp040SIS8CQcgpjjoyz9itSq0+AXXZYxAM0wwSe1mINvaRF0R3E\nStUi+dh6NH8/EEWhl2Zz+pLel1obGFwGBTvMy7UOvqqBFwvsJ2aclSElvL+n\nGWNMqa5ThFkGPIwZkDbkTqJN30+NELDL+kOlxkJqqFQcQVvwYkCQ37aged9b\nXny3T9ZnGV15HD/e5EKLJNO+iKDll2Ja3F+lUg85x8088AtT+UtGHWgLN4cd\nv2hj\r\n=lDRI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.811fc5d24.0","@material/theme":"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/line-ripple_8.0.0-canary.811fc5d24.0_1594228525065_0.7987438449619388","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/line-ripple","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ebde17d0d25b243ec5c25a2e6b63307f7f4bb3e4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.6ed717ddd.0.tgz","fileCount":34,"integrity":"sha512-8k2Hpszvo8kMHcFHMYs4b5Kiw/Mpcq4Og2Qi/AVimkck0RxBMag//yGD5efCoJsA06AJ0xSBOBTaepXwyI5jbg==","signatures":[{"sig":"MEYCIQCzktgnHa49PtRi2BlOqqdP7gQrFqRXuOEosBmm8lzyXgIhALaOnci4KnEI/4UH4oHcC9NBexUx0mrUQ46JnripsR/q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiHtCRA9TVsSAnZWagAAbPUP/3fXvI/gH6MqzisKrsTf\nk9l8MZibNMGAhdrll5ia8VTpNvWCqY7SFqUHAef4be+XukrdbJa2kjq4inrS\nYB85r2XLNmS1dNyzKC1ukQ3YqWqRd2jNpP4PEgwm+skNCErxtlGpUApNhoEi\nEo2iiXOT8nrdiif4jszAyCKdxmiNasTejzlwZu43O9j4g8wuJk/G0ErPyOzj\nCqY11rRQXGSUyBf1nowP/BhPrZW+ErsTi+mwKPppxbI4FriB1UWpsL/ChkN6\nUwYnjYbYXxsfURp6lfsa8JDHc3gcZTPbPrtLtL7I64uVnOG8p1DkN2t7aEsg\nhNrrSKMIOjC5vaY5xxxbTT7DP5C6H8/zq+42rIu7qTpF00FCtKSPd53fI8S9\nerenvwgdM9eupuL/A4vl+bRvcG+7v8EENtMwMPhAttf67G3ifaZ80ztcHEkb\nOAZ7Dj+/oX62IDKDloo0rYMtGmS7GStyTToqtosFGDFO82Ek4CdANN6fsGoj\nptehAljLrS2qVhLxv2JzQMQVoZY7+5HrbpHERjwjV4GHt4OwI5L8dCaHngXy\nRrvKNouqilygDQZfKScb9OwtRzG8xNxohF+eCGVw/4O67peMBZ+C199oQ6Ny\nr6kOvxZnoKJGlmtd5+949rjpn1oz6p1xqh2s7gtCpMeL0DMSZgOKnDK+/oP1\nyFGp\r\n=Y3qH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6ed717ddd.0","@material/theme":"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/line-ripple_8.0.0-canary.6ed717ddd.0_1594237420898_0.329169772537554","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4fe406c45ab9ccaf15de13d5d16150cee0535d84","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d850de590.0.tgz","fileCount":34,"integrity":"sha512-nqP2DlImZhzIJ750zO/b1nMMDvZfJECKSSYXBPW35pHG2Bztp5IgaZaGErWyLQJE0C0wUVp1+Otc62ZnwSUjuw==","signatures":[{"sig":"MEYCIQDUJRTpNQdg4H5kI+JjuY7trqmtG1QpDtRy6Cpkq+CfugIhAP/6otAMKGk3VqG+W6n9zzhX0aSwoyJ5oR0ctROv7QtF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1xQCRA9TVsSAnZWagAA5TMQAJT3rBr25IA3YNrC7q6s\nqnugX7aVmeTbN51mNUksb+V2DoD+dvYAlYWpkmlVndkCENVd0Kcmsb3KQ30n\nn6Wxz8/0LHQ+r+1kiexzSbicAa0cDF4GiqCpQoQAZig0Szm/c7wxySKkUiBQ\nSJ/CYfqlCAb7qTc6zloSDpQeMTdvglEHK1zf36xXyKwt2vYtGnHtiOZTa4u6\n7Eyxg1NRuT4dQOpk9XVMq2zK6OUeQwNiXRCBTjV9m1YVcDDsYIeHLq5fJVrY\n8DJNV6SknUBddRLlxYveUOGDT37kTRaR+53KROo8KE7CSzw8yK/USRf4b1bd\neibV6VOxZfOxZB5zVyTJtXKXIhRauLsP46t4VfLpW6iioL3kwfz9nRcB1x3s\nR7itv/nqUSH7QvUfRGTomsEWVMfPt3s2KuM+wv0Cf0LsnQ/Ok0e8Y2ypzlcr\n9WYSHGMQziEcujdfJRLupLFgyGoo78+j7MRy7FbHuf5HYmXWuNv1i86XtH+c\nwEV2jYilkfe6UnMRdsIpUBB49/tbrDyn+R2L75FRoR4/C+Llo8I2hSXHJ4zv\ngyonTdLEYfxPoCOmsI0SwzfBFqTEkeol1vye6LeTZ/9v3Q4aFmezG6yblsVU\nGAZCMDhABIqXv0CPfTRGSKbo2xGXZ+A/skvQTbSRUHNB332wQAF6ji22S2aw\nGY6q\r\n=QPgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d850de590.0","@material/theme":"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/line-ripple_8.0.0-canary.d850de590.0_1594317903738_0.13099562907588513","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b48b7776808b45d6042b3c53da98b02cab1fc353","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e07a70841.0.tgz","fileCount":34,"integrity":"sha512-DreT5RbWcuP5aYmRJYxaXbkO4oosf5iEvoQf+r4PHt6LwWY7qib033zAYKOfFtzXTwwRH6rDae6xprAsFlGilw==","signatures":[{"sig":"MEYCIQDc+iykPoIbJnI4EirBYD8FxVW4q2yKbmHae3FaPkr1bgIhAKPTXSU8lK06YxgEsmWjWpegQuKalc3nS56LFQP4F/0P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2NOCRA9TVsSAnZWagAAGawP+QHRBoUbu8SpwpLIxJs6\nByhs0GN1qwtYzWb1yGS/gbieixqo3cnwqL/dYeFS2i3W3rZF4BPcLuZxO6nc\n2YC8MrzgLdBGoH7fNva1Ry+s/uOJwih4jDPn4ETfRHAncFQ91qFPmdJG/2l/\nxkHhCTMNyfHSpAqOFebMZNBsdDerk1QBRlAcuV0PeiRK5Nqy6eLDOricpihA\nukbnF1JGba1Dg7ruvuBcZ4sn3xJJTYgFtddumNKZM11gtQ/3zs0x0ejGTErH\n4dP1olxapn8LN+rFR8aKgEWnT6KTB/yJksGUX4AEBls9KbV5V8qNzkG7qPjU\nH+pWkarQuh1nBFKM/f+auszRy5SIfMp6+Qg6fRDy9u00bpQM80GZi0jk2QU4\nkCs0EhxUxTZfehYDt2h0i57rmou89Ap7pkWFMX4veL/fC4oPQuysUKN0/qsn\nRtA2EtukukOvONhsp7ZVNodkFU8QYfHi9OlJOZ7XEtyr1VtEMtoSG5OBaDrQ\nU941eFgDOGxBQrC0nKy5QOMdmaLq/cswxZNtpukMGE9G3XdIxxc84EJAFj75\niV64gkYe5TbccV/vBBAKNC5w7TtGVLZ2g0yMUwGq7OpsmvUo1GPv7kSiJLIM\n+eLWCVqdYaGtGKFof34x2v5gdwSGaJ0jQHyGW2zHNxXY2z80euYJSMn8rNQf\nCZb/\r\n=tIEF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e07a70841.0","@material/theme":"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/line-ripple_8.0.0-canary.e07a70841.0_1594319694168_0.5288369630716625","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf5c31d3221b8cd3948f43a42f90f1ea1a55a24f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.37947ed6c.0.tgz","fileCount":34,"integrity":"sha512-Njz2tzIlfgZYN8CgP8RHHK/MCvECH2FRGWhfkyEhYhpqv8xBRbMq+IyiA9XA5kWvvq/64aMfStFMbnb8XFN5lA==","signatures":[{"sig":"MEQCIGDJuFwY78JhZMLQBXl7OKUlalh2bJYJWdlq+SPnGbPQAiBMAXgSLP5q6AMWZFADl6DjCKKThiWIHRY5+2BDCNDDfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB3+iCRA9TVsSAnZWagAAmeYP/jL+9hzJp9Olv46FGqww\nvqJpNqOcyV7uQpDVpj5Du4/6Uil0KXu+bshvWhyXedevqkpuY0Of8tKK3mYV\nhlZGUhH++GkMSFjhTvFFbuHhhb0fCCko4kRrRK2G7ME6tnYXuwTnTB9ITgG+\nVB05NPZlwXMmgLLgIKSBAdicmUH0z1GINseGS2WWGzfXpxeQcDQ7YhSH3DlZ\nPVoAxUKnp0DWvfh7aL88m8V/6akowuEIyukButfCTkIx8HElqpiCm9GUgSCv\n9gxz+Z0aGdsP36h+ngLqrcja4Ba+PBfSBtKczICLgxPPqqS61wfxOUii/ym6\nCqKetBJLXC+J8Kv+hAl+vYlOnUfIVvpCRZp4exFHAHB8IcGu9fVKyvcPKiaI\nNj+w8HgffIn0rvat3Zvag00ZeGTja6VlGA61Xdw44byngar7XUTewWdTbEyg\nm++NLvBjnM8WBotv2rIna3ONDZiWW7/9fSSGoOg0gY/QSYm+jq3+U/YiL6Z7\nRPXWvkaKgxdZrZ1cOBu1fMl0G1K9oX5P6eLKSVvHG7E+7ZQqaKikFcFfxQWQ\nYBT0luvCPrQbiIlzVrml+i1SD4mMu80wQhVkbj5asZs1m5vuMHnv9JrBkilt\n/yqEB+yFRDdwT7IuhYgZDQi/iAjeQ4TqS66fEYXwA+D+4QrJkYhndYAs+6GA\nH8+L\r\n=aTtb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.37947ed6c.0","@material/theme":"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/line-ripple_8.0.0-canary.37947ed6c.0_1594326945778_0.8409353228692571","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"deada385322b5169c4c655151fd415d3d71bcdf2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5d443afec.0.tgz","fileCount":34,"integrity":"sha512-DuhKPDm0fwJ9shtbSJRqfA33CiTG5csiZCMEtk63zZUPlWz3HSQ0mp7nrLO73WbEI9bK6EVX2+Htmrr/RKvXzQ==","signatures":[{"sig":"MEUCIGO5nJHpOrOLAwrcFSuFlYah3P0cfxHgwwpwPNvRxZPZAiEA5IoooI044XxpLQMGBH2Jvt3qqy05jt8X1ihqLljbU70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4NLCRA9TVsSAnZWagAASIEP/RrkNAdQf3qf+c4jhPUS\nzuRWfyPi0KdBoFY3RKhi767jdHAx0Z0zcQX37FAsWZfYTch6vazoDCTiQruV\nag7rO7p4obzaDxEWmq6FOZcPBMuN206cTRZYs5K1FlDdFXlaRxFIYXnMo/ib\ntjfXfLIEysPX12bohqiC+U6j+8j3d0kpj4BDLtDvgKU1qJa0TetDfe5NADNp\nKPj3GWsCTot8Bi3t+LfQ3AknLhNn9JfMh1nLl1Q/UIS1ACZDZcTLcOhugQYB\nXb4rrSjPfwtA1kMzCTHt1re7GbfH6/b9ukDvK9Aj3dqzwOG9VqS+RnhF0tVt\n0YENPFTViqmSuad+RK6rlKn0BBOUmtO77pKq1XgUdt1XB5RuX4iKtZakhP4y\njuvPrzdK85eAruP0mrkCeEZIIrDqktc5coUIffPkzQVyU64qkeiODT1rp3j4\nvWzTwApEMUWKr81aypc0p8TN97unk9fmuBh4qpV51TsFdTzjUYNmfnLWYNhk\nnDeOgIBYajBrE9wj5phX9VxLkjyv0Ur0PiyJ8b0dGRR9cGYQDqiWRjecY5Ji\nc+KYFIQLeflE3HuWBK69OVWWWD++IA0/f/cdYNSFQ4xnAQ5b+rp+EcZGEzK/\nh8naHPdvxPp9tqvmHOgGiLVzgIWD23eIV4UMNho+IOtBlZgmlWDMr1gTg/v1\no+Vk\r\n=DW6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5d443afec.0","@material/theme":"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/line-ripple_8.0.0-canary.5d443afec.0_1594327882614_0.08526298438113655","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/line-ripple","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c500f932946b4f9c0e4fdddaada9926129ea029","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.9ac1ed914.0.tgz","fileCount":34,"integrity":"sha512-GjU8r17jvtHgKL0m+Cpn3Qp/T1fXtMeoufqZRBXNUkRhJfWll3wCYnlffgB2fTBHyiGp1pb3vK7lPJKXbR7gew==","signatures":[{"sig":"MEUCIQCIT9LMragTha+jwOkhVn0kANLdeL1PdQQfdF5AsfucIAIgHNLqDuxBifnY9vYY+ZPnbMnse2R+I4AxtuPgb9OIkFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4oSCRA9TVsSAnZWagAAh4QP/A9G5kfY37stHEvsmCV+\n39Q5sIHZPugGofhhLZS5/KPUlWcEVWhPoMMxF8zwBgxUy9K/6RqegHqgIpyF\nzUeOtdkZZoUPo+4nBszWdOWynSn+qOpL1N1zXq4lUzkV15kCwbcOxt0V1bfv\nu/OcDaRoIA4ioHUbReFbYHQU+OFBFQxFaOsk/hGJWD9q4J9rVZgxeqryc5Ch\nREE8VJHW6uSRSdtS02tsKWzNV8hnYFWkSyIXF5oUkTRqbXHyG9uGj+kC1Ep/\nJgBGG6QFggsUFBAsctFi6NVPIrNRCnjRsE73ENUGX6dqw0AJIlyJWiXUFsr7\nM1EIQqYqXtggejIAM35AFnQTofpGiknE59Hs0sEF6c9Vx5uNRZjnrBJ1x+uv\nq2qD+Nag1V/mUrNuG7jUKkktAcUWEWs0LFebtA4sLzZ9le427/NqwN83W7MJ\nxwMZ1CdZLn1raX5lbdcXA68V65Sa9n4QHOb6MLYIWUIzI2I252S/gWxBmfGp\nRN0iXzxeRxVZI61yDZmaOlu9MGwNmaWECPwGSSRs3zcx0AoIFm+0cKwGFMua\nuu7HdkbLdbt4W/yPEYn5UqFM2/fhhNO5RzM61SivHPHd1OX9gje8vPVzSmvm\n11XqsC35OvE20v5mFcsEICH0BM16v4+yJS9RPpWD+SjMQsvcv8IwhOxcCSlG\n6la9\r\n=VNcH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9ac1ed914.0","@material/theme":"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/line-ripple_8.0.0-canary.9ac1ed914.0_1594329617466_0.17523383275532045","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/line-ripple","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b251354b0b6e0e66ca8858e98e4153bfdab7011","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.1e7cb6198.0.tgz","fileCount":34,"integrity":"sha512-QcL5FUg9+r4eGK9VJn8GPKdrVE1qF+7YGU8f7yyNCHW0JpB0glJbYVq3o0zkGG36uDV8Ejz1ouF7indcHYUhQQ==","signatures":[{"sig":"MEYCIQDpmZ1eS51Sk9Kx5M64v4To3Bi2Bd5mln3uruOmskPO0gIhAOdAjhbAVU7liS1Fp2Mr0bya/oJnhFneCSJXYBumoE0X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5Y0CRA9TVsSAnZWagAAlt0QAJJDUcyyYIYCeJaR701w\nTkXwq0pEGVM4mYAo9TiVPWwdZDeOW1atz34D4SUQ8rMU1Ceuvij9PeUJbTzx\nXD+tm4kkpZmDDAR90EU+3CGNa5fhC+ZumoGtAy7uVRXdb0Iy6PTCsKiWZYMV\n6opupJLPMUMnfqmopLwMuRg1qwwNhrjBWQ66hA1qA1K+0ARuS1HWA9x2ygs4\nT6XdCcXCUis1ATXHW8vHa7ZRBkuaNQW78LChIvgc7tZm99/JKJnNy+Ifp1Us\nvMZh3U96YG6fYP7qB0eenv/ZeHWEVlbp0l6VW+n0LYq60/io//jJG+kLvHAE\n4FnLBjpDkXqoEudplXg8EHlcnY8kLqcKh/y3AF1OjrFj/x05MIjSMmh3zrOh\nO4TFyPVL8Wsg/T2Mh0RJqkYKAuSdOekK0Sdo8omAqVu/lCnGUWvsTHxatqgC\nNePpvJ+Ln9fVrnJXelVC+lGEmE7wkIxqz5J7cMnPUsuljkiNG0dl2h4Wquai\navciIJGglDkCDjMvk6RmY7mWnwqDur5hudJk+QThUq1PIh/dfOhrU2AyUJ+2\njXshNQ31U9BmW7RUAj6amt9HhINemwrk/N+cbAvOkqGRbX47Le3h66SqhV6K\nQhYyEE3/kW+kFhaYmBy11IEppRPLXE/6wn5siOBlQwfh7iHLGKsnY6Ej8W3m\nMLsH\r\n=HFFj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1e7cb6198.0","@material/theme":"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/line-ripple_8.0.0-canary.1e7cb6198.0_1594332723892_0.39414744619764575","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/line-ripple","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7755cd368fc8924f8d0578d281d09dcf853816ef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.843f636c0.0.tgz","fileCount":34,"integrity":"sha512-gUcUbgqkOrJJhK8SspOs0a3WHLuQRT/5z/T33L1cN7jysu4kDaxCaujePZNtBT3kYKNIkucvHP6YwpAMwwFuvg==","signatures":[{"sig":"MEYCIQCr0UVfnkK+eTjIRLsaPabxcuPzzeAQbgUx3cyZhbjprwIhAINSJcnp89EEQgmrF8Mumvdm2K+0uOVCZjClqdDvDCwS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKh6CRA9TVsSAnZWagAAED0QAKLwQ4C22rmNZRtMjryT\nFh6g3FyTBxgikaWxUbNEO3woP52ZTkNwofl6GkpvEhTo9S6m0F531+N/TBWb\nALZ3ZvwxdjZXlft0ttumVfiC5C5g+uUMQC+OmTsPoiDSuky3W58ZTGasFpA8\n2ApYmxjWu2yDUgyH/zdHO4qvMynt0YaALSmoRwhXUzFvSA+VCzItk0qOpnmX\nNoDVHGdF7sxbdmQCCAiP5b/yN59s/dfs1HOeOTd7d1gENMmW14z/HdGdm9sV\nIdeWaZYcvMOrkWuiG8/wGVNe2a5OhQUUpMQnobczQrKbunYGYMHPzO6Ptpqp\nKZXmbpChUhqbGaRTL8Vhp6wWXZsXgdEAVbrgOKQXRzpQI2cmtapgUdAOmhhj\n0MHK9z9kr0eDwzPpFwyG10SIjRKIEj9qMvC4ZIBHK3AfdeXb5RVCmuzY/cby\nEQO7/DzqKXrkF47uwUjs3PLiE+R8Aj056yXjPnGtCeRgpEOK8dUMjn/d4p57\n1MphltK7jnQA70ZkiukYPzG/RYTsrziGK6sDsCJhCUHcsD5ndqaMpY29GaRH\nJdTnlmddV2/T7DdIIgBlUHGie0xEyoAxbGwOiUNbm07bSR14JnnT2zpI2bTb\nbOdF3ekzoIHbZUO88CDDq+rNJl+dOx/MJdZYPRyWcizFiasMoI8sSal1pmAp\nbkiI\r\n=Jtp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.843f636c0.0","@material/theme":"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/line-ripple_8.0.0-canary.843f636c0.0_1594402938471_0.6267782393316663","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff03bcc45209baad4ca3a6025be5d74981e55da3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b2edaeead.0.tgz","fileCount":34,"integrity":"sha512-PnOsJ3+UDAdxxzvCkuFpczpraXeys9gicB+JBgph8XhqOnoiV7DPbgeycGUQcftjRtr376qwYFNw1gLm3Uv+ew==","signatures":[{"sig":"MEUCIBxLyanj7Kk6Gw0HFvSqA6lrqtfUUw7KEIH7jlucI8hzAiEA/EubfO1tXzTFuPNTWtEjti+sNo8vOt76DOYbWOdraZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK45CRA9TVsSAnZWagAA5PYP/04PKto0b9KOgfdrXKXL\nU+T+PBe95MLcVgSzhoDI6lWBUvZ0n0roYOjuncDIuD4kTR6k6z95Jp911Hkr\nDWlKCv5TJpHyqr0resQJeVgA2pcGLJtnwjTAWLeBH+D+9La/8KOAhP1egECb\nad7dpj/JcpxTC69KYdeRkqS5s2bqjnFQLUzamp3dHT2dqQeW+hwHsc1f9VpH\nUXQ2G0gOdh6ZBuivGs5eTuWuww7c3rqiDgRYZLepuw23ajoGHHwx/zVXERXU\nmxde3N7czhcYX5lbxczLvaDRnga6r8Pozy9+1qiKvB7Co7uChFtV1dy/470z\nqXjm6EBx0lpg6r2jRrGUy5FI1pUoB3Lk/C1zjXENhcNEeRFfFYh+yxdyudae\n4Y8gGyH8rFzzefMg2W7kT3UwmEHQRtF/7+0fVQY6JxTTfUbuV3c9IcTTe34N\nFLLXZLxv7nPOdI9oFR5Uxl0Jb+dtWSScDmvClhVoirrKTiovK+QjZ37BWI9+\njaj3yBJITN3fnlYyPTqOqQuQY9IVnh5LhKIz0gdJsTOlCQ7kyr/rl97OWa3n\nQeBPB6c7ZMXnROYvFf9Ibkph2ujqmK7fQ4XSgsjxrGQ9X7hBA2Xv87W0ZEOu\nvIVbLZZuDZ2OfnTl8BvUn/tSoIKKYwxn00MlSg6HDkMp94lp3YV2hB1ANyC+\n4RPL\r\n=wDQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b2edaeead.0","@material/theme":"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/line-ripple_8.0.0-canary.b2edaeead.0_1594404408665_0.7519191119144684","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3a26f499e4661282d10893b980cf323e3ae07667","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5dac1f624.0.tgz","fileCount":34,"integrity":"sha512-VesuLLQMEhcFs8I4dQsA63mhre4lJwM48icW9UAPRuiW/rOBCG2IkAkHrsHvkov6+ejt8hWo11Wi/RP50FY3ag==","signatures":[{"sig":"MEYCIQDqU6r33s0NfwNejfNRCQhwuI0rB1U9nl0pnh6wJLsqmgIhAJ1PncbcsmeBBG5tKhGkZST53T+MH6nBAczGh0gOBN4c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDIzzCRA9TVsSAnZWagAAwjEP/26WZfjzf/bpyvUY4kE+\ndyTr9JCWZlrYK2nySrWZvpxIGyk+tqCznouR3pypK0CqNJuJ19KIlr9H35v2\nMrxH69avWktmmOXlK8WcjbI/4SgwUawZlpyyadBT9IYmeEljjhv7p5/6WycR\nFmsq5MXTSLKQD7WD3ClErnLNH3Od6SxkW+GdGjCcVlzK6+f/lhCjMafdxnsM\nXWbbnAy6GY0YHqAe+6KZUdVsPCH6IxeYq/KTx9Z+Ku4dws9WaZLCHthS7ym8\n1UDuWaixz8dJ9VO9CjQoRODEc67d4CqfMUuo3199iQ+WWdAA19TOx12IopqY\ndJAkne5gGlVMc6ZYsHVWE/Zt5u/JeGVE+h0sPgqn5C/mgoXH6T6neICwYpqv\nVmQsAreGOcoYgnk5MyEptAwoZ9UekmxPp3Z5ZmHOO4z2KDDjOTv8vr1IA2FV\nXDn0ssWeSsRcIUDM49o4GYk+5pF32478kJ6jdoRUrzcBoUcGWOkjLdgODyfH\n5wC518D+Ou6wm4wDYQf5/zGOlXClw1SwyrjycsIdBOknjGF7nVtkJotYTm6o\n4y3r7jAmQa3vxXsAYjG/zikhVeDMylOxg7+6apA+pjH+HXl5u59DrL9Hw0zn\nPB9zlSNWMcEp0kKZ6Myhc2Li2aXZ0VMaSZjPbLPaynlrEMFsYzVadwWopuzH\ngrCM\r\n=V1Wp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5dac1f624.0","@material/theme":"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/line-ripple_8.0.0-canary.5dac1f624.0_1594658035150_0.15004939824522645","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2dfcaeac0a070daf5b738d50bbc9c995eb1d4923","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4497acef8.0.tgz","fileCount":34,"integrity":"sha512-IiGQB7QVptc8Czek8vXRjHYfYig16gpNfwNlbPO4cGaO7N/wPCBb9ggdL0CTNzgGQvwnonjjSOSmYiB9og5OSg==","signatures":[{"sig":"MEQCIHvMS+Um2x40Z0nZjI4xa/M3Av6caHHchfkWdsx1+SxxAiBqJCDO2KUKmH1LApEwqd7VNicg2BULFC4AfyRiwjDkNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb73CRA9TVsSAnZWagAAtzUP/i20VnEe/kmMvNTG5IQI\nE4uTgcnagq9PDVgZ10XoAdpqqqEOsMWVZojS7ctKo3pw3Xe3y/bzSKev8FKQ\nzngKJPyEtrSLkr45kNO41mnFyDE85FyUuk4sj1jN78cNeTJ6PV2WWe8xX27l\nozTjSEB7PRjB3RiKAg8wgaY56vzwpvwf01tIx8ZggEIEZFW01x7s5iAAW757\n5mfItiW/9Ou2+NF8b1fQ4dsKVRKWk190l/fh7xZa5qNfTrUN4XUgFFDI6Ql8\nrxHDe9jZGDlCHClgSbQRBBEc5stLSIZbwdxxNp2XXc3tmhfWqWrm25KyZVgX\nH+nWHq5QsKaIlKQHePXvEdJ6uH5cph28kngTb/qP4RLNs0fPxk1+KMHb0z8e\nrEmIrepKZCvQ+FyE6vlqLy3tH2Kz8FGWZMElAu+bzE7eX9C8wJN0CfR4y6SK\nZOU+nsNGE6l39PNDueD7F8r1FB4i7E444hbtQsdr22ZI3ngvRG6GhnGvCLXJ\nRhBa1U69Y6dMLRkL0DldvEwKWoK6U3NwKtJs/vMY6uoLUZ+eBdjtvxiwcI3l\nqty+9y3Zp/+l6DZdI9o3ULpKIQ9Y7LLXEMGl+4GFLJZEZtXa2mhsLGgNmDDF\nSGlBK8W8Hl9AibF1bcCiKnDtFhwHoqDrtRPLODg4ue2zmK0Rq/NBquxQoHHP\nbxvb\r\n=xFlC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4497acef8.0","@material/theme":"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/line-ripple_8.0.0-canary.4497acef8.0_1594736374865_0.30155350056236685","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"df0c4dbb69b8d4ef98f417f2e6422429a48577b6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e6e23019d.0.tgz","fileCount":34,"integrity":"sha512-tWlmqJXbVBAujSZAI6hMyzAQruCMgUgpXGY0SKZLGaloiZx+YkIysiUtZojfRMIO/prKR5qkPDMururXTua7bQ==","signatures":[{"sig":"MEUCIFgfs9lcq6vJCvK7qBa2N+2H8YXyf+6qRn5A0RYep1w5AiEAhs0xIbEU2tSuDPbbyiunPduHuES+8Hk1vIKd8kMXgrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhEcCRA9TVsSAnZWagAALMcQAJeOUYHmCeWBdEOyY0M6\nyV5muwTrpoDzG0eb3DlR7id0QNbhnmesD61JSmgxq8B+EfEmfG3wcrE7a3D8\n2VTpPASWXeF1/ak8nYIbYDbQPrhYyz+vy1rMTz8ZKaALqu2dHXQlvxcR7rUK\nzxmdz5VUZ8sC1elNElDtpNVpnAHv1wrL4DTMcst7i64R4SE9+ySYPg/zFfZT\nDQiZwdV5vDSEK6S91NRJUiYMum+qWU+ATPZCO7e5aKtAtobCuzCPCtHKbHNR\nmhUjWKK7xGM0hpqlIM7e5BDo0vXaNZHvm3c0CAAJqAtV2ThcG+p8RWUuHiHX\nM4kDKSMzDCuKCcjNeJBN/j4DbM3rJy15+1YhnviNdzjodNZxaHkQ1LK06Yhk\nRVjjjBFuxLtkWsZRM6sa4gaJqFP8j5AkPv82nQeZttb4zGi5dd4d7CjSqEvb\nbLc2/ToZ5kt3DPdVTYcMQ1UhfW00EbZ3I7KBzHw+MTEwK3SsdxPykDl5dRZc\nbmVvzHdYg0dNtt48R8R7hbfixekYlqb/h90Fr/mBRX9FMpLm73F9YuUeiAtD\nPe87vHBPphKUZo2BTT/U2Q428rQ2mAuNDVTntY90j+780nWy3ukwhJDtYyjx\n3D24mCvGhExu1bwOPDHSiPYdfOi/sQKzemBGDj0vglCPg9LmlPuQtOVtUfby\nmYey\r\n=EwuE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e6e23019d.0","@material/theme":"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/line-ripple_8.0.0-canary.e6e23019d.0_1594757404418_0.044635025663565475","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b41c05cb54f4040576134cd582563fb6698d145c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d548d7a92.0.tgz","fileCount":34,"integrity":"sha512-BaMfcti7MZ8ipydpx/JcKFgVgSD8DalgqPLO+8tq2lHfDhkrGMFpqxyLyHokWtxOtBcKyez24KLV3GyhGWBWJQ==","signatures":[{"sig":"MEUCIC0ncyNySBT5TEVyJwTAQHPYrGTLy/qCy5WlAxozrCRMAiEAxG9QrJlnkjjyseTG8fhan4WM0DPPtvbuG9ihtsri5GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDh/KCRA9TVsSAnZWagAAAr8P/3M8ifOx+kcdxw5I5nyJ\nB8Yf6XGLF+25u2YXtcL84PJwAl9m1459fnj7QKdiaoTepOeVLT9Wcjxl6lRJ\nVmb2XPpFGMr39wOHHeNiz5AN/Qe3zAMgnuGVzPWMAjg7Wa/i9uPGk3Cu8wLr\ngLfDK3aBerGHUuvxplhglAT2Abl6feGzlvflZmEX2mg3WukJXvXymFLEn/kq\nsmtjoVEMHcNcxydta2UY/cpzJJibmk7RQMn2oaAt4ExjOnGphf0NRVpPdREr\ngdfL9A8IkMVkgrAMtY7XnoWiB2ZCz+zYdyK5pVG0SWLkPRfHJ9qNIe2q/rXm\nFdFCDNzDMDPPXOSLQhHUo3fFT6Wd6tT3oueoHRvGOLxb1JuVmGQYkiqHo8y4\nSSIywB2fGNisqt5TA+oCfipti2iSf/MdgCWYilAFxtnvpldpEQQR7NK6RL35\nA6NhmXK6y4UHoFQ3JTBLJv1MYIVNWtGO/lRrNwxS0dHfskom8+t4JQQ0IRke\nnbxYV2X8xE0E0pt8kXpt2MYwcrrF4V64tImGMYhJ8pzQMEKFoaApQdadgNov\nmU3Dzm1Uj7q3UD7ShfluVl3bLgQrHy+0a6HKc3bmVmQ+QXvEobQq7Wsfjyrr\nyUYiTL1LOaAZwHc33d+RyiiXvamPrEfa2i4HePr3a9fF+RaWeUnoMOUPKgqa\nRh31\r\n=Y1vG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d548d7a92.0","@material/theme":"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/line-ripple_8.0.0-canary.d548d7a92.0_1594761161982_0.9443736608860098","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/line-ripple","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b39c4012791ac38d63b2f5a048fae163b6ac705","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.58ce529cc.0.tgz","fileCount":34,"integrity":"sha512-SS3WrgcTHsU5B02Jt5p69eTs8QwTNJ6c3KHukYd2qqxj4XA4o5XVBUgJsKjzJPH3uCmhgmENVG32Du1HAWepaA==","signatures":[{"sig":"MEQCICzLyJ9jf1hLXAr+ykHk9pd4QgR4/f+ogA6EY0JrYsPZAiB4S1vgEaE380oyYBHWGGTn/YUhS78b1SwdxKhN3W+4BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiA9CRA9TVsSAnZWagAAdIMP/RL7ihjdROEEcdeNopXK\nYDFrTIEVDZgFvWqjYtFBEVH0/qlgUUfs0hPCZI6nDU3z2RxTDXPejL1tAojL\nWtnpDdStf7n43TeJfkjYwntDKeHbzgUJGD/z4o/t+TNAuHolJk/JGZhHUSfk\npA4snvQVsxgL0G3M/oTS9A2Z7nue4X+ksnqETeEy0+rQpOQezkM1ibvsbjXb\n4PRAwhPbtQ3Zt85My1/AOHdL1nEy7lAJQ6fezQpa+YcEFFJzpo4n0OFkkNur\nrdgn5bOgtiiJcbIp2CmE5dnY5TpxA+Ri3HoKRJ0JZjHdYBrTUtu7Apmdy3lN\nAQAhIOM8YbwZpjG7hW/3dZsMXzR6Z/SB5zK38VQQ6LLJSDGBT5XxF3bHJIAy\nh3zAh6zdHFzQzn0l1RuubmJXBjHLbLEUWbvSIexnIlhEKxMSNAbLyGcRVsmB\n4ICGZZXdlDyxY7sacvdI9GwZJHnqk6RFmnlbq54Rx6Bm4kNmIwuZGEvY3A5Z\nraSC3A/o75CyAlo+y+oaTgHirLB6vl8H3ViC/kz7fSsgqoDtklL+2cNzUF4m\nPsde3XsqXIUm/uyaK+DCGX/ygnNckk3TSCnQie7TvP/LcT3/0qyrR8bKqdUr\nrXAXzGP3hG05k7MbJwVeipPUMum8YfBVe7Lop1UmMDBeDLMHbt1U+8APBhSw\n/8TU\r\n=jyeV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.58ce529cc.0","@material/theme":"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/line-ripple_8.0.0-canary.58ce529cc.0_1594761277041_0.21792547000504903","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"66db98b447dcf1f0e440cd69be8a5fc646a02a0c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a0f1202dc.0.tgz","fileCount":34,"integrity":"sha512-Z/oORlsfgOxQY8X/WVYdhvRKKu2pDOKZ6rG6OD8ld5nyXuzvpk93WRNA81IRdSWs1G04w1t20JvHYe5u2CGm9w==","signatures":[{"sig":"MEYCIQCe8Fai9CVvWAvJ2x8ofKhqBpikh7kOekk+3Qa/CcP2LAIhAObgsJwXnW4xfhzkNMlzBe3rCrgiaCYBaQcZzchpPWT7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiS/CRA9TVsSAnZWagAA8WcP/RjuIVGyssfpWPXAjccv\nTXrxUD0Nz94L1jiB/MV4mlpPb27oa6ckU9rlODb8b4GbIKy6GbGo3qZKMdE4\ndURzdfYx0s99D7F11tlFLw+/fT5I3CcA3H99Dz3ej3nsN/hoaxzSnRdTqPKp\nD2FcOrTuU3rLiYESrUuRejD+4YVV8ZMqAGTgr4VKNr9YaWMkRUZ1bkP79l07\nrVF2ZdZgCjid7eZXMNWLLUsXqv5TfOnssVHgXrvZXsBsIK3te+jkp5M1pn2H\nltAoTR94yj0hV4gZ3W2zfDrPO/zarxvkZ/zZezx+088fFNGqKX6ASo3Q4kww\ne5QtqX/bE/Dyr1bxmsus9tVzxxaeQMtYiFIVHqmZxm7d0Tgeu3Bw6wSFQa4E\nUdDgq48HKFS7hU+PNQJZzWi/s6L8+1QeyRXAZkxRHJPXm74YUW5bSwOSQvmy\nLReXIJKshfyu8+KmkYDoY1aMtv5fjD5b3fg2ieFSwvGAxeA5LWWJAsnviF29\nZZgRl7c7sVj7N0SQwmTVQ/D62h9s9sQTKpe95u81CAEGtM50+T6hgPip2BO+\n79Suc86JC3t0y++PYOT6aBid/02RTfJiaXRJI9VKwiuu7VO4dPf58J3GbrvA\nV30xy/9S562Y1ZG9tBA6G64jRB5mEmyk2K1iKHWBGfSHVfVfWVp+KBf872Ox\nQrap\r\n=lCe8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a0f1202dc.0","@material/theme":"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/line-ripple_8.0.0-canary.a0f1202dc.0_1594762431121_0.02449827741957944","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fdf2ac0ba017d415dec39a6a73af95c41eae12f5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ad4df58c1.0.tgz","fileCount":34,"integrity":"sha512-29s6uEfUaRCqbzqRHtzQorgA82i4x4A1bXKaGXpM9gNR3qKPNKDFU88V8l6gaXI+BjERVnPLrLm+yo74NZQHDw==","signatures":[{"sig":"MEYCIQCiPGbd4OItgQQsfMhC84nPd38oIiop1Y8NXihZurtq0wIhAPaHwH1rQvqk7dI4W+v+7srQm1aR9iKsZ2wZXACGWMDq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkkbCRA9TVsSAnZWagAAB2YP/iM1zSOyNFF0/OwBTmTY\nkfCiwjWufQIGS/8DQvaSpRJxNIm6ZhuPlOp8CHDOOo7PKQty+PRExQLl3FjN\n9DJ8Xsv6AQ9jHIisxo10BvvU1WV/JZ9FqeKcUO0J9MYXsnRsa1orjduoMJF6\n2Pf5cXnNRyblI8lQX7DiCR2DwqQYyamtBTk/cCJprJvk/7j1FSv18yV6wz9M\nuk4K6Lyiiw8bvrlX9xuEW8cxRKdDlxNQ4eesa9/6lBB4wtPTRz0p8dydocol\npEM9Gg49cLwCLTP91okhmfny/h62qiUO8dSVjTKILS/IOFh/i8r/vh7O3KXb\nNmGYdRYJndxTbx2yQWdVLrQp5H+IVQ/uBkpMz/UqEzw/1tUsPCX3Xv7IXHuy\n8r+rv5lHUI+jjhMgQ69XZUgG2q/Y8bzdOuZls97fGqjPcyZKng31zemu+pLY\n0ZpqWb8Wtw+7sSCFtraSFfWEGTPm+aoyjWtHWzHaEdEEaz0K8pgzV9Sve6+c\n+c/ERhsa/g5IoySYrLZILJv4DUxeRqKVXTZb/sixHs1a+tXUj1R62jT9oP0T\ntmstQbDcYxCnB2C4S25E7seII7L4OW9bYdrySJcg5pWpB6CyVE4bWC6y9Gju\n6q03eNAwUti9bCPCKnVsdNwuKOPjqj52G12HbdDHF1i549i6zocUiER608r6\nekYf\r\n=UNHH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ad4df58c1.0","@material/theme":"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/line-ripple_8.0.0-canary.ad4df58c1.0_1594771738518_0.8633757688262944","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/line-ripple","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0c8c4a0f6388dbf817459b75bc8b2703c1cef353","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.01db89053.0.tgz","fileCount":34,"integrity":"sha512-zJ7NEawEI4n+7Dxnx82ATBy+IcjVstnq+cxcP35C3ImJXYSYwJY40nCdbgGpXAtNysmx+E70EypsJbi8h6P4rw==","signatures":[{"sig":"MEUCICsKA/OPxKWcKxhPe0VcBVJrodc+4BdE3HEuTyEn/A21AiEApU2VV4dbYmm9w8m8bdo06NHHRjMO1iZ7gG04IzGzj84=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIKUCRA9TVsSAnZWagAAT7gQAJ1sOIpnjW3dwjNQqddM\nJVZMCAN7qfE0pH4/sKek5xLG9nOnmfccGszL/QEicxtgoFs1h8pXBugz/mqI\nbELI/uTD9X09Cro2mvTs48nt+f1xHwFu9Ww3AXagbqPDE1btM5I3gAqyG+7/\nHFLDPO/9T2daPPUD4apZCNmTh060ya8DOnfNAMz1haOcSm8/wD1cYvl6Tbd8\n6PPrf5v6VI1JS7093iOKyo5RRKmlzDN6MBo0+FzhW4R4aspoppFCLWK2BVjK\nZYeyfDYsM7S94BFq8yq/Z4AOD4UtDQSWmjpH0XmXMtpJVrJfrDIBsmIh2Y0X\nUCHx11B78hgjVG3pXe51fyWhQyBdKY3BeRDQfQj+WdmglPakH0NcKZL4dJo2\n7uUZ0CtWdX00EDAvC2Mt/C/NIibITjAA+c1l80m8EfVR9xHVxqY3Uj9a4a8y\nL4D285LB3DxBclagvfNAeiiXHz3kU1h70h5YgIsxhY2oGeusWAlK9Nt/j33W\n2zaykLwjNGHwboyweEA6nIV8YNnUgw6F+u7qotaiKqy7w+XHlKewYzgJrCd2\niLxVSpA3fhsQx24gvgdLtn2HxBKeT80hwq2AEnVpD3aIk7HcSR/nJcnUOwyH\nodp3/uQQsuYiXfU7C09A4cioNb+pXtWZl8Lw46aYgXAnTC87pttSTAJcnvL8\nQW1z\r\n=S3EO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.01db89053.0","@material/theme":"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/line-ripple_8.0.0-canary.01db89053.0_1594917523679_0.7939788359504509","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"16f8b7b3426b84db8443a83f93aa2921d76e26ab","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":34,"integrity":"sha512-lLLgn7Ksm9Wq4zEnMmCh838nbdko3QRtIxwrwzm3eNpCC3agJfhA4gRYgyQd60LpV8aWa+bM9PcPR1Rt6d7QjA==","signatures":[{"sig":"MEYCIQDyLn+YJY1qdjIRGUat+CHZiYWfyuNUUwbLR4E3mnxnRgIhAMkDfRjWXras4gZMF3q2Jac/OePH2qK05LnpCNbi9S8P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe5JCRA9TVsSAnZWagAAqc0QAJAf4zewvqk1wA6fgWMx\nElbhMC4IdU+/bnuESqMcx/HwVQ536n+gLC4P5IqrER/fUUgmI/oxpK8zWhHP\ni99xRjUq7W4O3kWRUAgU3nO3qsSUsxIdbuUfQEkLTsXf4NSpvNmp2sLRTfXH\nP0WiWeh2gNB5YSJPCUd1xrkcqnB0lkduDQp1fGw9AP2sLeSSEeylXgy8WN3/\no/Q624MuBN1zn+2jnkodFS4pxcVrir/9PRK2GIeUdY9hPeLBTgoFOFS53WMP\nZqYIFerJqK+rdp8jv1s9v7Zg/Py4sKjNWGtBkgppQNRhYe8p7SayxBHsV2Dj\n7AGcnHEfrPvqjwM8Ta8quIQRc+ai6xgz0bCQL+eAXvlht3JldDKfN/5KWSop\npV0XkLzXkp465ID2Wpmhne/5UDDXu/J7YucUFlCapHiSxBT1j7NZs3R4fGLy\n0M81HRFGDaQCYsv2SLlsc702wlXYeGjJXoU22FDVkgOk31XpDpMJB9BLdxME\n6uwypKOzYsZyJd8CKgbDRSBa3TbN83eFW0PTgJDMt4VDmHNnRSB+su74rXl8\nky8YGvOsw97f1slGz6/HTV8B1SEwgNtqpZsqz/FlpM07wgfWIsNrhjw2WVxj\nTRRGRpcOj9/enzniz+6i0+ZOghJh6ER431WMDJ5qdVY65ebEU8PMZoZvhCdn\n5KcA\r\n=/XHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/theme":"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/line-ripple_8.0.0-canary.fb5a4cdeb.0_1595272776811_0.3808298519949562","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ef9b540b1eef06261a5974691a833908cdae53ed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.8df0f517c.0.tgz","fileCount":34,"integrity":"sha512-SfPllOGW/ZkVlww7QgQ1OY9MfZzen995bp6IykOJ0sMaUXMIPw0xNArLCZPel797Y77dXZ3r70pkguSbH/IqXA==","signatures":[{"sig":"MEYCIQDBiUDYMhjLsBk8hye75kuEsAyLK8dTGu1CKJTLSiz6gwIhAMTs+KfHaS1SzvSureEUFGzfS9eTxXU5FK6QNFlt36Ux","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi7jCRA9TVsSAnZWagAA8d0P/1JIVoLk7e+9trcEako5\nX8Z5My5pYsJYLA3/Hg8XmWpbu3rxvEI9PNOJzUUWw8nsYKlBvNqzR7sfqqg/\nnTsGmzt/Ft2UYgwD9b74oaLqd29IuOwiS+WoXHwHIltRPDSlkYStWJe62q+y\nvKv3d0VcRh0S2qIACDsjaQR6eHxhwDrU3qlzTZS9lQomlkykmBDruxCJbvqK\n8iLgajzoHuIJOmOhgzNZFF8vMQ+QR290kiNIp+VKwW0nQqFvwb8weO2Zc32V\niyh82pqiDCx7ULd/u/hA2era9C780igziFmSmkOc9uOyd/H5cV1ecBr/gbhT\nNKRPsyoxAcgFXVKJAuoEr5CUyWam3l+DJI+qeg8rzMrfpVdJonm4rnmbytHW\njaEkLGl6L/CBtXlklBGUmIdrY/6AezDztj53Tg6A2dRDMuN4SD5di7eiLg+Q\nKRNxPUXrt8Ntwj+31al6dRYunZoUn1l4h/poAqDCPM54PWVTyDvM3N2J/hUo\nfQI6T//8Lrgi1EWHNd5ou9zwMc2DFcTkOpWPuUUPQSw9WHv+ShTyapuQtDQo\nH2bSQpviaKzlQp9OiJ4/UE2PHr3GF8QcRuhVoBne5iuOApZb0q58QEDgb9Sp\n4vIdD1G/0vn4RNZSMj4Y/HQuvnhYRax/z1x4fcm1Igsn05Tc7ZZ/HUJwLsH/\n805I\r\n=mU8z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8df0f517c.0","@material/theme":"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/line-ripple_8.0.0-canary.8df0f517c.0_1595289314714_0.430453864912546","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"55cb194f7b742982627686cecddfbc38eaba9c5a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":34,"integrity":"sha512-qOQg5pjc/u2NRP1oBuwmtv7SBnB0S705eLMRNwK8ipgk+0AfzhqvEyKnRrjkvz/JHH4WlurbRlGZETE+yl0MWA==","signatures":[{"sig":"MEUCIGd1qy0HbZNuBtGcSgVssvoO603k9C0FqMlEVP9nr2BIAiEAiYVtVmJEFx/36FejnyOKQT0DzqgOEmBQsRCmGdZT1Z8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjurCRA9TVsSAnZWagAAa8sP/RJ4zJaqcNW74Ap4hJWh\nLvtm4e+qrlWuq3vchlYeIhv3xiNZeEfmq8OC57GaOtmH1ME/XQVB2xGDS6wi\nKLAGNB/zYgVgiqB4CEL1Ahn/O4C/p1IQrp1PjXoz3iEaj5coj+driQLtm9Z2\nJEBdcDz/MOiiftRpdbUkpjqld5pGfsJlAec9NxOwxVtNdJ/bqi6kaCHgfikx\ntzGQPa5SvTu/FuukIpwIpafpwyv8PmItvcD95EPApBhuQBmc2oz1tfc11sdr\nGhrM/6bVh6osTuaKVmiLejQjyst2EGu/H7g4zBW2j0W9WZHWvv3xn6BF1Dpq\nsSSgmRgLitMrd5IodiDUyz9YJxV7hD0q/aPj78yi4/gY7x290t3YamHvksXq\nbVKeQHBzRXHeh9fQxkiellz9/lXAeb3FJqrRQ/AxLKrdGokUteW5LAheBovz\n46vvabQ0XobF6EisQOkWZIhxXPzlfP3e4LNVtKPe/3xtEaAykmFoxcD9Y9Wj\nN/wgaS8l2b1KsPPh9UAWlFK/DO2t4lFItDuMKjvSPWSfvR1NEZEysuepq5nY\nNZ9ztogewzveZjMOe0PmO6hJQ+JBz8wnoU3FJZVR/9hW6vxoAb2+TUeor/AS\nyQYeLY8SQ+0c+GvwI2FiYAT9m1BUXYJarsFCTcJxtiBPJrJsmtjTE5Li7RF6\n4z77\r\n=eIhk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/theme":"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/line-ripple_8.0.0-canary.abcdbcfeb.0_1595292586791_0.11118009044692734","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/line-ripple","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"43ef0310d741f683d0b6803e935589f76679d833","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.7bd5075de.0.tgz","fileCount":34,"integrity":"sha512-JQ497M9KSaN8H526usd9i75pVsuE/T2rgnEcfKo4PkoyW6VIBq47CT9TJ7AF8Uf+Poio7q2nPwGpOawTxTBprg==","signatures":[{"sig":"MEUCIQD8vT8uNPTouBPIJa9rOAcnqenxz8tRKPMqFl+4BiPPYwIgYcirKcxkgqfnFKuEasKurQEYarXg3Cub/5XigqRqsPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzgYCRA9TVsSAnZWagAAIgUP/0bMrdWNE6lqCvgVCE3Y\nFmKBGtW4Ny0b6OgG/PgR/brYzO/yeDWk/Bxj7x6JX8P0fKS8iujttNgs9XPW\nEB2Q+xdXwLdP7P4wAfXmd5woANYGJU9IHda18SOqL5FNCWJOylTfzh2WbcgK\n/gRtauqVdnYiXcxL7hvNdBCoSQ6GSjvL0/5NBLz8duIT8PWsr+xqJn/jE6IQ\nHLjQbWWPRcs9p3jmL5s4vEEfitIi5bbMWgW4crmhwT53lPuH2Th3CtOWolXo\nHh6F4HdbheTSQquVVlZ1tb8bBDgCzKwY8ZrOLfv/9RbIG+EgPa+SkHosa12z\nd2WA0+ULuGZSiOPpjoHqTrDNGJ/fpu32rXktZ6XDYHZekYVi/8hgF6zOHkIE\nD43uaKXSblXHD7LwO6/eEsqqwyPkp3oWKvonqX7qkgPSqih58LxXki+n+kWj\n3cPRe27wUVM4g4fuxkygRfw0/96/ds6yWZPHUYli2vtUycqGeVH1rYhQ1Qg2\nwsEiSJjW5XIwAf1A7B4BiQZcoGUpNWHgdypKybFMsghsoGMIQ0sKgQ5aC7/e\nCnI9q9DZ+co9xeEiWdeVKD4bBIGixDOA5j1vklzk644kiZc8+/qlbkyb2cG9\n7oXznHtfw8dMv7p8/DGMwAPYjgIUvyvQ0Qfn/NXjeVgjGQi3eG7zH84VrhDJ\n6Lwq\r\n=zmt+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7bd5075de.0","@material/theme":"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/line-ripple_8.0.0-canary.7bd5075de.0_1595357208300_0.8162418126322624","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/line-ripple","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"026d2c0df11b21eb942c99665c70090a91e91946","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.405a29a20.0.tgz","fileCount":34,"integrity":"sha512-AWLY82rUOoIbHzYyM8ih2F/zm+Xy294kpzllzDl/NqGkQl3b9R1ED+5SHUw5B94yRT7W5Dmouo9L2ww7pNe0Nw==","signatures":[{"sig":"MEYCIQD6sR1+86My/DOtoVLyGrydLs7+jWLXKVLCE9AoNDcTjAIhAPFIJOttOjVWmFlvGQGsDNwfjKst8caVcf3BHrBXP4B9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLw8CRA9TVsSAnZWagAAidcQAIsDKiebIu2TCP5WLMFt\nhqxwso+AqN9+XoMD295O5Ipwuo5xlEjYzTqwO9ANsg3T8qwGfW79n5qavR6H\nVTCHCDPEVdbXP2MDjY/uM2yEE55IWGIZFMikkRqrDrxXR882iheGAUBt6yA6\n8/tUX6zYx9sV9DRT4ly4h/jdxHzQNNQxc5Bcf3O5S9dBNDnAx1o+pIHPqp+R\nphw2J+w9bCrzbkun7XdytETPSU0LOwzusr1ldsZcOsZV6Bx9EuV3KzmzlVyr\nWD1EIQ9I/Q9lGjqbULZPpCAGxf+HnA/uks+zdAcOCHX/QHNY30lS6f3AFpSQ\n9S87psrGlpwHWXZ9dmexh/Uc9JUQT7vyUlZccu7kmcFc1NQkGRVWMaCLyPtV\nGS8GRCLv7gC5AsWqYwHjChKUcUp3hQ4V8GRZhL67+pqPgzGgKYmPLIYufW/1\nLsoF3Ah3WRt2RuFnNg9NotGuE2oxZMc1k/LSqpu7lNjDINh18HIV3AtbQ7Vs\nDOpTFKMC5DyrqMZg8kQW9kSJo+azVtwz+SauerXivCfDn+dTX/d58vb2XLUF\n87TTdWfMd5xd3rVyY5BaMrH2T9bj0NRUI9fNz8ZWoXtABZIVbE9SoAnYxMA9\nmdOr/v4ZIuN3i+vHcljlypJBedeGT12dPUbFXWal+3kKw7ApOUF45UeSIkWT\n7US9\r\n=NSMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.405a29a20.0","@material/theme":"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/line-ripple_8.0.0-canary.405a29a20.0_1595456571994_0.4528780173718303","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0837a312ebbdaf82bebf613b0971ad96029ff20f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f3693ac4c.0.tgz","fileCount":34,"integrity":"sha512-49JaJiPW6CnmG+Kh07z5kQNuIUdjL0axOuAUME8tQLfMIK5BN8mHSfaYgQU0EMsaNDWxtTcjgaJsSEVu85GUww==","signatures":[{"sig":"MEUCIQCZyIFHXDei10W8UKeyzmzrqgWtvk+r7LAUMk8to/o8kQIgdklYynXtBaIxk0wpP4pka4PX8inpa+dbWLaQyw+vWyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL60CRA9TVsSAnZWagAAtVkP/R1i/xQEayzHH1pDVqN9\nXotaA29Iwn/Qp+mIrk6JLbRKRdJPEr5OBf51tLH8VD3vVJ7FSqZLOBoXi/9C\ng1CioUzmSqeUTZRvLzD9xQDioB4ssCdExqtAlO02SGpp0FShaLUNXu4jM0AM\n5eEIMEe/Oi0Cbyf4VARS1UOii7hyToW6WRtCxrnF6WoKKZDNUHwMJWLwDzTJ\nyU+ol5NwhUGY7mO9GZ8hWCdXpoSGdakj7vb50rMS8DemTnGWzxM47duttmpu\nCw01gWOExaYxvYQJgNEw3EBl4hFDf1CSq0UG/5C3YuKw+HS7E5LcE3ZeIUbF\niLkJJa+MY/zuaszu0LjNaq3Dgf5Wwm93hVgC2QPayHkDWgINLHN60QMCfp9G\ntQSmNp9PTVLysmL04a5fHYIWwhPw1ryQPOhXFEMDZujFnD3fyFw7pxnFYU9F\n5JixHf0tru/mIdQphqJ7MUXsDSuf2S/HWe0s2FINALZ3w56SgP+jQDAbwP9t\n+jZdVsIkfpaN2FSzDEXsQK+lmPkbZRYYdL2Zk7PjNd2EibyzXPfMzJEenbEd\nGmmQdAOnBIsSIleDWGMVRNFjwFlWw89z2NYLjoxa1rlf2x5gd2qrVV5OOoXb\n1IRqKqgwD0mOpy9quFsvlZORLZaOHnWmnkloQzSiUhWhDIh1LQ1WBGbHpzWq\nix+P\r\n=6wW6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f3693ac4c.0","@material/theme":"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/line-ripple_8.0.0-canary.f3693ac4c.0_1595457203566_0.14622463726538393","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/line-ripple","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"439aef39f1ab886d67a23df9add6373aaca9f8b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.12a109680.0.tgz","fileCount":34,"integrity":"sha512-WsKI2X4t4rioE5V+A0T9Yce28cxmPpgPwibnMX7lNDgcO35AXB0MxI6faVPTz6oIJoJNO3Vl1eZev6qqiDCs2g==","signatures":[{"sig":"MEUCIQCqOCIvog2uPis4t+pbOVj/otgpFgmp76PuQBTD8QZJtAIgFzDuV9lc5NU5XPvcCfTzudDB+Zko+6U50nj8pTRTAws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMWrCRA9TVsSAnZWagAAHMkP/RoCZ+bpNHgbKf1sLOEe\nmTrBn/8B17jSnPF/n6DXSWgDnQHtTZ38Bru+AH2RfpQ1JRJZuDtJQo6rwWHW\nBT8ycvfPGnavKAu15C0URnW2yKYC6ahPJGSj6GSXeSUYsBcSTk58TH/ES3az\nQGobBsmGtpT5dYzFgIjSiDoYiQlAjVWIlPt9ABsQUoHomr88IbfZNxv+maWu\nzMzlQgpazlNHj3XbUS6eMQGNLtOYOYwSZPBb2fCgOVTtWV0I6jZoAnM0hNzv\nM7J28bP5JFej2lUWczWZD42IQGibeZSL8ATjuE7PUom+lVi0YyF8IG8Bfm5q\nE4hLhSEOA+y2MXQQ5mtNWBR+01Lag9iLkfd/iv4/dWT07F53GcbeZnk4yp9L\nQVtwFPw1lXawipfMvyH2Uj+f22PW5a2VyIcrHYRPZXFBskED3ZDqWnzD/Sfd\ntlb5d13H3tne1s6/neF/qDsSh7TlCJ/lZ7KQdpISTzEswVo1njHetjLmyiED\nVdKFn7hXwKp1cU8IuXPQbLrPgGO3K1C1sLWMg5EKGCHhTdGqkCzy0ZSCTo6D\nh0rO6IVfOd9gl72bhPNXZcN5vxRfJzTlqdYwekQ0ozKST+ihkP/R7zaMKLu/\n2fI8A4BtDo1UzqfvCUdvfhzX4mfnvLxG0wRH3AGvdrwiRWv629FFuy6OhXV8\nUP5a\r\n=qf1H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.12a109680.0","@material/theme":"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/line-ripple_8.0.0-canary.12a109680.0_1595458987178_0.2661684101227748","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9dd98f395b26092dc5df81a9738cf6e771fe148c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.bbd06696e.0.tgz","fileCount":34,"integrity":"sha512-JwMJyfjBIYs7X9Yh+1sMIZ77IsnT9RM2MqVJTbacZVXPizlussHXjrJ2oPpgSSuqwWE1nO8KR7rbQvCTaiPPIQ==","signatures":[{"sig":"MEUCIQDnAv2uFKqD4iIPRIvexItat+0nLrjg66eKUPFXVqAvlwIgF4ipY5Seir50f1jeUHlm7jENXobyplZGa8vv6jQP++0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNE/CRA9TVsSAnZWagAAy7YP/jiE07lK7VRSyL/Uyinj\ny6DNZ/EDejdA+EWfi8jgwWhvcVC5ub5vxFSxMEKCep4h8LbO2S4CFQ3KehcJ\nuBIVjdJz3huQe9563oqHR86hXhZ/wRow5LEe+CQ8Yr3tptv0MglcBP2eTlFb\nCrOgJfdRhFWWA2W0TPWuVG5eQ4VAd+ANeBdKLsHj9uPX8mUZq8FNd1DxANDk\nFAZ+iTqULQCwx+d5RYTo8C5nMmJv7T7tB2GQPLoP5VlissYHrf08muclUuvE\nJX13w3YBhlg8k2TcnD8Yh2JT1U7aS+TBr0oMzMZMBMmUpTNZ3ixzQshUimaV\nJhbvSpWRiUo8VyOtQumK5eTsokyV8+VVRSaqMqfe2id5AwIDXTCouL6OJhQj\nSnY4vfWx3WDf1BUEzAMe1bVrzCYGj3Et+7L3YSSsA3g9ogvs1cpP+2+oJ+Db\nfqg2BFDYdMvTgsr+zX/jUmnlqW+P9CdHIRAfaEbN0v1EykPdSgFHPE4nXoVZ\n85++7YIoJlsDc34QsRYAPwJdv3suIya4N4JcS/27g9T9hK6GegVvHw6aO7kZ\nK3nvlVGDBz/isIeWS/ea3TyF3WsLHsovVJ0d6Ljy/3bOjfjhNjo2448WGlJS\nkyQl2atQTqPkmxpAgAbFP1iDawD2GEChM4L9fcmHoD79f5gUzat1805J0JuH\nRuGE\r\n=eI7z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bbd06696e.0","@material/theme":"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/line-ripple_8.0.0-canary.bbd06696e.0_1595461951211_0.7995852484947943","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f1b0cb11cd0bbd590eabc435229cdde421e8fa18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4951e7651.0.tgz","fileCount":34,"integrity":"sha512-7ITV5mou6Pgnztbf2cKngOXr/+M9LhoItu2EZ5HGkh6hzcHehT5zY6L4BYfW51JwifOJ7S/Y//nQfTXM2bspaw==","signatures":[{"sig":"MEUCIAV1PaTYvmj7HPhGwAm3jekBaFzdSybb5AB8XLZ13kOcAiEA5V+1PUAZYiSJ80ctGzO4yy+QrVti6lFhbNodrrxUQ58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOyVCRA9TVsSAnZWagAALQoP/2Lm25VnLS2SBYtXWGLK\n/Z5zk363UrdgTEHZcYyqNqYZddVue/FthyTdeyhPIWaE0a5diIxwaJbSKCyw\nEWZjrCey9vxaCEVTVyP9LYio0z8ecSvLWfBkn3M3KWmSXCY7wnC2Fr8jVWUq\n6XZ2J9tydlpm6z9NXeH3Orti3+RsyBnu2mlEkdkBGgMdWjlxFlWy3Y2ArUwo\nU2/w+KYIBsUZoUkebe+EVKW3LjsU0wbE0gyKDpNQ9yhaEKeO8VCF+hkyknfR\nD4pT/cIQqOytOA9EeDjd1PpZdR+DjTh1atEnukxqkpB6s+v69/1x96PzUA+V\nbpBs9S+CIdcWMkL+kMqpdcsFjrj1/RQjOiKzcQFxK9GmIa9LxEKZqHRjc5bh\nwjp64reckbAHeqlV5YSnMnTbUaxpdO/7FucfpZrigeMsJx4QsoDyDFba+UzS\n1SHqRE2n19Q46eg463smLmzXlNsMrTP/bRi5tNGoXFZRlvkHkA3LcM8SdeNE\nuwNpyjqoBpxEZ2PBzKZ4v2UmakX/YM2uejNknuobnuLrRfqM9sd/vI9um1M1\nCKHrDhsv5Mb8VpPsk7IypnNNjDvWsH9wDE48YDEDPaWmnWZwhRAD1GXDWQHh\nUqNpWOJ+0e+Yxo3Sh+nISygCuGTiSRyYG3v/P4ej5AO7XdGA1BsmscvzCKzz\nrYf3\r\n=a6sH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4951e7651.0","@material/theme":"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/line-ripple_8.0.0-canary.4951e7651.0_1595468948771_0.2867594700279108","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/line-ripple","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8d46b3c19b05bb05615b656579c72973badb2161","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.75deebbef.0.tgz","fileCount":34,"integrity":"sha512-7jmNAS0LGLy+8Phtmp02lkjmLUHUTMyntEKM74vcAbJ3CiE8iZa+F6Uij5pSPEepTDvh3tz9LKVWWZQIQFLpnA==","signatures":[{"sig":"MEQCIDCQdnabdHciYIvdzNUu2wN3xliRWxQFkb9WNhura54wAiAQ51URt1OTcHXp7SS0kVtnbZ6iTqmdcU8dmjl1PhX+FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGcy2CRA9TVsSAnZWagAACpMP/3I+/d46LsiekM8tuKos\nByFDNr6QZzPXLibMjKfzeqV5G2ibWYiX+E9r81wCKnsxLFlWAwM3CK5al8Hr\n0ip//atNDWyBOXTpgRMpmyCexgqzWGdKRj9vZyqxVsiG9SguO/LIsntMkSyd\n12riburuHpDfvHUKqjgNbua8FcYR4oDj7u6fRrG7uYhTVAXb/q9DNW3w6/bd\nX53lJ4+Rp+6DBcanWRwVVfAZbSkBq82mGpEeTNFrMGUEOI3eKFit1SvSiddW\nJhZPkonsaufwEMKf4a7WHzFtAZIz7wSsXCHq+HlwUE8yXDOzxTyKAdQzFs3V\n13pJIjgR1PsKmeWE1ZoRbNH4+ZYNG6lwIIQdV9ulNz/4dvTQfD6pwujRlftf\nN9Y8PM09NW13IqDzcP9NFALd6WnK2t4B4A52Esn7XiEKdTCkihfb0XHM1o6k\n5DJT1SyC5185fsGVteHzQA4a/KvDmtlnuTt6dYptTYDkOUrcu7xYmrvk9EIp\nedTGZlMhKEh5n3OgQdfj0991H/2k8xlko3Y6Br+NYVjeKqkwKXXyIHNZOkoN\nFGeTNBA49IS2fQXLlc0RTA4WTgUrqFLH17qjUCC1HNFGgYSUl2gKP36g7D2q\nRa8bJmvt6JUWbaMZJzmPVTqknNW9aL4BSk0LltSCgZcfXP4ZZSTGasGqrpuJ\nZCzj\r\n=CrQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.75deebbef.0","@material/theme":"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/line-ripple_8.0.0-canary.75deebbef.0_1595526326432_0.873743817643875","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/line-ripple","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bd9de84ca8d5d13702043d9ed481b872a2b6dc33","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.95aff33ee.0.tgz","fileCount":34,"integrity":"sha512-UbKITqVh5weFWAVBdSpmy3AI9Y55zgfOWyIkryIN8Ui9I0nxbqAH5YzmGbXcL2EgLxZ/KixBrww+QCc4v0r4cQ==","signatures":[{"sig":"MEQCIDwMe0Aen57vseTKVkzL3hmYuuxarQAt9Hjcuigik2gXAiBdHEbNQPkiFqwEr+bmR1CepSnYSlosKo2aSAl6Zn/DIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdsmCRA9TVsSAnZWagAArlAP/Rkl5fqWS8ic3Kn9Kn+M\nP44iyyjik3O3O+V9nNKEUs21s8nZXJu+i22hp2FebqcoJeM3GxrZMxfLM2ji\n2cFw6kMT0+z6GEyXofiLYAmRU42pLawSrUwoDvYI3WflVNv6x5nL6HAL8fOj\nqTmsChCv22f5x3aJUiRULgQpB3mVNfH/WtDfXJHkf5eCS3xjmiOtDmmkyjmx\n2eTRPx4/uDx1By6jn3XB4b5i53xVk69Jz97AnYXndDRuA5JRkIZOGM6RhnVH\n5vhXXPuEZKCF3xSdBKdqYHeAB28OV9jaTlzz0F1SQa+TGll7Z8lb2NPZL7dk\nS1W6IqFxIomEhJoI4bkW3cB4rs4TCg8m+fDHkBbST+ekPchsooCt0N5oZCEY\n6zkbGBm5QvnogQGO9uX5aWGTR5uSh7jHqFc7VUKdr1k+8MGnD5e1twrXzZe9\nd6r5sRhrvwHMZlX5pQPRb0bdNMNK4FbX2Xl11UpSvSB3KlzY/sxDST0b88FE\nJX/FolSYrbMMJF0kJlDGN4mPi0EvQjzbWj+9WXvDcAaRhlKT9PhZoh/7n3zC\nxCticMwNGvmxsJdRljTlywaV+64SyR+BK8hmYww6oEpWPbElgnDo0Gsr0NsR\nG+U0AQ1jACmrAOlqnQBBUjUqMZ/SnGQZe1ts7FttEH9CCpvrOIoIrz2aHjpK\nLUw9\r\n=+0go\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.95aff33ee.0","@material/theme":"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/line-ripple_8.0.0-canary.95aff33ee.0_1595530022068_0.4180036123440902","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/line-ripple","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5a629c02593a22b1879e69cbbc7624422710c661","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.9d9f47473.0.tgz","fileCount":34,"integrity":"sha512-ZZ835uKjHy1mzPLStav91F7Cu+ZIyhagm07ehP7wfGqRdC/ulL4+RU6cFCQ9xPTWxkiyig3dxBkhX3ql6nPPZA==","signatures":[{"sig":"MEUCIBpqgVXdYq1W1c8czMaCTQkaE/Zh1B3z75GOSgSb71gtAiEAgHwcbZq0uxLCOYj2qeLjOdl1v89osuGBxsl/MUP4G+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGevaCRA9TVsSAnZWagAAfsMP/jYGIxkb8dd7K5BF6dGP\nhGdR82qXLEGxXGecf4cta3ImNbcHEsX0iF6uiV5xy3yiMPLEYrSARlnccH2f\npDuTnJSeL6wWHLTjD4UkANGu98CCVwhFoZFBbp1NbkwRFSuyaaQoffeAgmVG\nnDeIRN7lfIZTq/vjQoyzwfH/ZJOox1WL7bpB3RGlU4ghacHb2X2pu+EKV7FS\n67b5LQYxUzJLI5dNQ5G0luYdLPbStItTExm6yp4GT+V2Ck7vdJA2cB9Ekca5\nxFL5WJVde4FQvui3iAoZYfH/7zDV5bXi1NbP/53rKxMG6+TiElYdQ+chP/bd\npHkFaoMkSEunb7/xpy+AbEGSaHbAYzJzwk8jYooOmdVVqU9spHz6EqJgWs92\nyf171Yj4AMIkgzhTA+bhzBt9aVqY4NZWkhtaBgoSGoeW5vfcAFtm0cyqr8RZ\ns9MBlusy/vH/EeDK5jCaST7/gzXfICAc4XRgLYH3vOJauUU1l3HzpLppa6n3\nfiYgnIzJ8W+hKhjaiF0xHDgG5vJW62G8joSiMnGxDHgjlOV1mUoMNbYYPKIy\nITpWRVozIzg0FPW+K2Y31vV4EvYqYw0nz9sekvJh0DdLzlRu7E5oM7Bf98A9\ngSTMLNRCeLxgiqS6hTRi9nvL/dgAlR+2HbZtOSlmmKIpLebCeYCi5yL6Nrlv\nmqlw\r\n=qUK0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9d9f47473.0","@material/theme":"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/line-ripple_8.0.0-canary.9d9f47473.0_1595534297716_0.8608421906410575","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/line-ripple","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0cf4a5046a54766ecedd7e569e8879b2f1f00f0d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.00dfbf6be.0.tgz","fileCount":34,"integrity":"sha512-2FhDBZH268VQVuaQRfNk/lyylIIqRBMh1YkiMU4EU3qiHAg5U2PkzAR4zgPbpnu0tAZ/GZNQBzH0e0rWUbi1Bg==","signatures":[{"sig":"MEUCIQCawFBAN8vwJxt4vggSpD6yp6PqNszGr53Rm+iZO4yIhAIgYHwmcD8YdEC2rwjukzsitmV0H4pQ0JEoZ26rrqX0w8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfofCRA9TVsSAnZWagAAJu0P/3Rzhih5QLUpZjWfDj9c\nSno0tv1O6GUWApvrEy4IDfmRQ5R4UDHGkfNl0H/EFfFovf9RC5KGPz1Ai77v\n1FDmM4KUklJAybZozFEmEKNbrh3JyhXNX8SQbDZqqpM48nEpJ8LNPxG5HKhw\nBgPXv6VU3NwbFA1R5XtH4K/XB+BYiik7WBPtmQO9/w6gLFpHFuqiNOWceZpX\nU56lciT3Oa6zCaf/QcybiFzEif8HNa3WX68F9Sd+RsI5MzuKi+7vYFtz+tqA\nF/KyZA6reTzmokyPpFSgOu68wYCSnyc0oYb7rnqTAX7/cyt2yqFUK+Btn66B\ntzxjtafk8XGH4x9R/82mEIx1kp0N1v0rT6RUFltsZ/4/Qcr29cSvOoj961a6\nUJCQYlC2N/gdv6YTgFknqkVaQqiPZPH9H8Qp/iu6+EdTgzQihl0RB27WzN1f\nhoLULvUzHuijR04OjojgMMiDAerZI1UBQeE8w5W7vL3vSOIkqkJDcbUjkPEF\nbKG2nLi2wSG4mmK2bUgofBYFMjTqQMbRBF9qxAMok6wQTORr8YntOR1xDNud\nucIAb7quei9c1mleUW0hCq39yasoD1ljv8u9Pq+jLaCMzpEugWuQRMOHftE1\nSfuYddZYIR4zg/1a+1obGyvlwv8bqJPa/eYn4lK154YBx9qp66aRL2XHtXqY\n797z\r\n=4nbN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.00dfbf6be.0","@material/theme":"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/line-ripple_8.0.0-canary.00dfbf6be.0_1595537950790_0.14468152072167118","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"96069f8da74334a214b60fc2ed8b13465133731d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b87e522d2.0.tgz","fileCount":34,"integrity":"sha512-Uh+VpCtkJ/YMbMX4GC/fhQXNCfcsEJGJdyjZYESDhtDeTbXkVWI9Vyy6pKrkxgg0TO3XP41hTt/AQEL+XU3peg==","signatures":[{"sig":"MEYCIQCu0gCBcCuPmtLLHmZ+XAjquyrlBgWDJCLMPRWlDZvYxwIhAJHUXIIHWf695jLsn/s6dNYg3wvyqvQM535nEEQKX/lZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGf/ICRA9TVsSAnZWagAAnUwP/0JEv8UKyMfFbMSA46aO\ned80WuSG9z780YiMTOwaICaktltEDZ1aOHjJ3r1fH3aWX0mrLKDOFQH7/TxY\nX/F/NfzMuyAno+XoLbHnjHvtZDm8qd0T8J+LuwkqF4+/1Oqjj53N7EIMFryO\nZtVuBFElVnKc5Ri5PsUaJY0skqat1IcQkW/dLgvYpfBastePDXdjmHpryu1i\neWt+qnBctfoRNE4va0eZI8aQuyBK98gzZCk/cBKi82cdrWuRoPOqADeNc8AN\nefYvx3mdycEQKYszts8IzcivB1fpkhyWUFIgElIILc7OFfDDJYFIXlDWgP45\nn35sk4LH0NkBDY7d5oGdZmbHrLrEZEvV+8tEnEtEeBnefyGW0QKsI7ARa4+F\nHdQMGlJBkCNEisvP6VT/XPp2JHGX4c2bixlEC3DaHFKu2yZh4WwcKkYf8exZ\n1wnmHVTq/IRmmMf9U134LaIGhE1N7VNAYOQQPJYbVm83n5a2nJaLd8evTXmd\n5sOqLiIKr5bfKgMxz6kANS4nyETr11nVlfXLf94aiVzuJLPwG2o4YvAY/mVJ\nS8SZ5SM1vFz0RmfDHONhiabx4bULlQ8Bje94wN3uzaoG//EKuOm/fvqUKDje\nAZY8krTdDKvTcwnFKrtcr9ai8XoQ5i1W60MdKuoJYMdmlNIsE+19+V0fq99j\nMr1q\r\n=Bbqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b87e522d2.0","@material/theme":"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/line-ripple_8.0.0-canary.b87e522d2.0_1595539400455_0.7703442353628187","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"814945345463ade9e1e82c7c6c377768ed0d82b5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5b3e150e5.0.tgz","fileCount":34,"integrity":"sha512-9y6ySS3EKJ1xfqCjaNvQVFoRnciGBe4qLctQF7eeX+AX/fWP4Ag6MYrESxZtQubb1vEQjuefLw1KZ+1hjbMQaA==","signatures":[{"sig":"MEUCIQDtvDWopwRoiZ6OpyhMFT6jDiOgdO7MWVjAF4pamhcnbwIgHDFrYEhAy2Q1BCF79OPgRe8QVzh+4lVmfzzvmMpBj5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124982,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjgVCRA9TVsSAnZWagAA8yIQAJcp+3rVHy1xb1PNI23D\ndOpUulDn0P0dKn+6shz4Y+aAUOIQm6ZC81yGY7v8Ka/m/MSAw6osaeZalkZ2\n634iaNrt+DL3FhsAUC2Yhv86lq21EdJDYJkdzVKed1/szDJI5njskJpbfTpY\njf6/RWxlHWcfABHKoSxdYpNie9SP6nNjkuSbU9IGMurR5omAWnvrxhp+5haV\nZHCurqrMP9bnY8yqe8hv4JX8UAIstBVyGcaJOfn+Qcs1wajiLFJZvPr95AKu\n7IoYqkdQOYUtkSLzumlsgB1KVYjSHDk6O1MP2aXcCqoAgM9mXTNCWZGAX1YH\nAK1KCnB9N0d86YAZ9nbb9cn1DcQrbevhDwLgk3yawC+l8m1Gn5sJxnUQc8JY\nPkjjM0doAbwIcJyTez96fFzYcm5LDyHSo7Pf4t09wo5r66Vjtja/FkC2GrDP\nMYoZjwYNEaTHvXjSGRrT+CQdvRbn9P5X0rbpzTGpTfq2DEt3EKrZhm/FcQPY\nOlROOuZqF5Y8i2Chz0W5BiKAq8k8PEEVYrNVwsF1SuZTBmsI5FmZpLKR1EI5\ndL0ZoO+Hc5fb3yuYz5yS/GZ8S/lzNIoZGENslw55HX8CjwfqE97Je3HsMf7e\nRHBEuETFt/mB+C1hbkEDXa4yvDAoKxY1k1Ia9DoRVUbLwA7v224r8shKxtB6\ntTLM\r\n=8hiD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5b3e150e5.0","@material/theme":"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/line-ripple_8.0.0-canary.5b3e150e5.0_1595553812628_0.03495873662625337","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"90a505a6f7d92cc32f98d681d956c5a825bf3b14","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f0ae11786.0.tgz","fileCount":34,"integrity":"sha512-a+2OnD9HB3UReSBjyvKe9+6v0NB6zROvLQa2QB4qx/dvieS/FJaNR5Kcqo2VvGVqHZ4tzi6e54K/93YqgtwVjQ==","signatures":[{"sig":"MEQCIAGXp6k/Esj44jcBB/lM3X/Yw6AFMTCIqqietk42zf2SAiAudexbt6l2X5wSMjTCsaC87I1+RczYJ2+62koN6c5ENQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjy0CRA9TVsSAnZWagAAI3oQAJvsue+bcGat1U9tqfwe\nS4gNmMlzX2Lv2OoZvCTnigSHSejj9+B3Dw8sC0gkOZjs/vvgW5I+PjpJ8OKl\nKszpHF/baSq5I2M2ZroXR77QsCm97uEactoLcQF8X50Lq3CzJW6xwY5oxJk8\nUv6Otjgt9lzE1S0zeJvBxkzQkoA1SsUrUYf+22y7zRbYyL8B7xTGqtrOgvtw\no288U+9eSi41yVwxOxvv2O/ODSfmbYvTKIDfm3ehqmL1bjfxjZlaQ4BzSj3B\nYOIoKdrtM8bpae85MKA6j4NqQqGSX9X7MjOeqPKXsCWGOD+ANARkLN9FeAI+\nfjPq8nswLzZmhuvxxjz1OCSED9On4R5G/kt7QvoKNhql3FUNQ/U5+x+eBt5y\nk2B4ZmqfFPuSpSxzC+o4RhRs3GAyKqxOklyGS6XBfKummUsRNUtqbwfL8DSc\nxjBglCMMOx4Pp3Jqu0671sgr/FxnT18xE7bVCPQIOsy8C5j3dMggwWAP2P0O\nqvaFdJjfFDMGXAo2qEx7PMhR4HVk5w7+fKUq43G4YTWTBQUnDY9J80RWt7BX\nuYsrNdXCQwA32e2JqcntU6r5n7bUc+EhPciwn7gau14/QUGip2ETmd2iEUe+\nwy//pVZSIxVJiVjoE6aaaC3/0HDGQxGU6MMRsKs54ZY3S0qZCpfxICuUBA8G\nQ3JM\r\n=wdu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f0ae11786.0","@material/theme":"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/line-ripple_8.0.0-canary.f0ae11786.0_1595554996458_0.5283666516210459","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"36486cd84bda21c12756da92b05d04dce9829f51","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":34,"integrity":"sha512-FHo4tTC8Y8ZBAkPwJQ7Q2Cy2O6/j1zC3BGt1WGYQlZAa+udnNYP/Iy08ODHUEEClJ/P8ecOfoZUxUiF3ZRI61A==","signatures":[{"sig":"MEYCIQCT37+QpsdkJsyQ4x6qL1IdFcWr+88HCru4Q6pxunYF2QIhALlAbolnx2nfKR6Sr4Nx3yxIyO/DNgvJzbdjWPVlHYft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkMRCRA9TVsSAnZWagAATHcP+gPog9CVv07dj2J//Zjk\nW4hw/CZIGEMolmnWr2UDMCC6PCup8jpajemwIYt9In6wpidtboG32clCAB9W\nNBLMtdqN+QgWarmNRtuEFtgiL2AhVUcnJVzlQ7P5sxVklXIGvKC3FazufjSK\nwCOtFRoRlOUs2JibHKftEfPeODa5IaL6TjthlHqTRJK6DUhTf1gHl83JyiXM\nAAdu8GbU5WDG9sg2WkyisK1KhtysLouXi1BVpheEGj4ChNjHrw/jVDElyVKf\nhnEFMRcsKM8yOSJozQ2WhxtvXvgl89U2aa9dOuWn90Jd2PPlyLObe5dtFdBa\nCgzDBg9UP0FrDa35eGagOcGVm1AqOKh42ng7PxCuFLTmjjMk9Y2JcnhAhLV2\nHO5IQXSY0K0zZcmR5H/uv3InGbknGP+BxCQ9vPhdEfzvQJEgBsbc0VKKF+s0\nLyr3txQU0aX+accbIezN0Ubyxm9KUMMJBneKG1p+QbTHErT3LjhosIEN8CjL\nvXZQHQ3j4ATpfhaRODYfdTjVYVtSkAOqj1IES+K32rRbXMsM1JDZ/TtBZMlq\nmm/PFnSM4aAWbJZP1D7hyMH+ZSxPbjgorN7l/+aix1loMYoK+QSDExVB2afC\nPvkIp5UV0t5Y05c4QZ3mH36ow8llyYTiRB3d1I2a63yXBRmiuaVS+y0mYJtR\nmF6c\r\n=jVAE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/theme":"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/line-ripple_8.0.0-canary.fb4ee66c0.0_1595556625255_0.6881949930582265","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"66f071be8f3ba808d3ceb0cde0e636ea1ae423a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5511e0aeb.0.tgz","fileCount":34,"integrity":"sha512-5RIzO+nOY/3w+1nmECWvsU5WRixux9UsxMd+jLQ9vMCFf+7cNtbLDb8A1lfdIjMsAcqCnqZ3PkisB0rwj7qGOQ==","signatures":[{"sig":"MEQCIF6rwazUCSOUHYxOBGZH5YNwrwvBbCTo2RV1xwdSztDGAiBZK1sal5FP8FIzotItsDKCl6kSxO14s5w1lpVrmJO6OA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxK/CRA9TVsSAnZWagAAWRUP/R4jE3ropGJuDuZOSKbP\nL+yx8ObvG18g/Ba+6M2DUfZb74YEw5oiLzxiq09781bjaYrQTggvS9mtqm8t\nIwTtV8njKaNThibYoaeLNyRvtrZ7tcARXrZ8L3yk0nRm2CsKR5BaS5z+vryh\nCVsctixC8PBjdFd3VywLQhG/AoyUb7Kq/ZmBp/9xdZkF3eX3zrANQ2mu/LDM\nKvjnfrOiflIQlS6NbIHz3Xmda5IFnIwS2omiY8a2fIIfa2TH9EDxoZNpa/yu\nc/ftKh7DWfzXygqKtKQHoZCm+fG+wUjfFEUcDanqdZT7m6hHfRuyWyJUiQU3\nZ4/yGrBt5ExMVgX2njIl9+ekGfVDy3SCwp1dqqqrTCOfJ1pHzv/r+SfgBJTt\nNOjXWOlFjy1xJIe2c8NI5hzdl3V/btAuagd475QfkSALhLajizarWYtBkQXl\nTCajQQM4rWEwqMxDLcs2flEA+idJT9xYfZWpeM4oC2wqdsYOjUxGtZHht+QL\n2sfW59adscFHCgZgTMfCXEKvLd9DCdm0ZCcN0MrK2Xcf0HmjKYCE1jDY1Sao\n2NG2UHz8jUm4oIMPMHCU1nTlv0U/IOGMUMhTqqsSolbqVK5IqI76M2SI6VH7\nzPeumkb4qPycuwVCsFwoBCkKFlu6IbTtZiAqS1Kzy9kGupL6CyPfWI+mGS3G\n+D2p\r\n=aZ4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5511e0aeb.0","@material/theme":"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/line-ripple_8.0.0-canary.5511e0aeb.0_1595609790731_0.41817116174079105","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/line-ripple","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"acba3f5fd21e76d9b6747f24ef191992849a08b7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.8388a9bf6.0.tgz","fileCount":34,"integrity":"sha512-pwujzyCYVUdjrpXPzyPniL1RYPLH2Oq+MRzOYUFYSBZ+YZM6UbyKw1IcJdTckkQ3oc2SEo7fcj4s0UyWEsD4rg==","signatures":[{"sig":"MEUCIQDdQXEOksOesi2TT70klVZzjn/BBIPoTekTzw7HgGVDcwIgfkInlkWhyfA6nxG35qVB/CWnzQblUTbvuOTxiNKonqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0C/CRA9TVsSAnZWagAAIhMP/18S6eQn8Wk1br0JDvDN\nTQQQ6Oiek/RcFnSAkK25Q6ZQuIXW/kM6jHLy3rOUN0HUH/qztCGQ/GaxGsQj\n2fnXiAQ79qntGLBuQJ8yxx1wzpp6cml6mZ1rmP6Q3oyU0fkUv0PdFYepFzbu\nyEUVp75cJ5PbzbeE9KIHwYhp+XBu/thQug7jkomvLwh+7mT31OGncKBSR/eI\nLZgED1SQFhJJmvG4zMzDcZmZkRKBnMCxG7XnU07FwZYUHODZsZC6WeOVYGQt\nGRzNwtkcu5zQj6zDLeYwjsOa04W5c2PTJkXUZQznX3wgyg5tP7CHAs+LLwXs\nhzEVZkrReBCjPIW5YIVEyXibeVI4RXS/aFdOBauj91MMs+IfSl4Dsi9hMcSx\nPfqu+LgoTv9HB7fD5xJ8sU5DBzanCYnfLg3mTrucOmn7IoTvdi3lsTUSoK8K\n9RoTHeStoIBiKnrfNgLyQqo+lEtxLgZmHv6L68+aRnKfoYuq8fJjwQk1Toik\nZ7UpRomM4UQJZer0fFtKiYeFFtRvHaSBhAz/icFNwYkK21QEv1wh79vGbE4S\n8NP0Pq61kf6tpuLNDbt6ORcX2dS6jHhdQG7oUJRajbpMpg9YxHVr7BAcRr9u\niybR70LLjqM2txXJt40LV8pzxPpEmcxk6kTENL6TMCxpRfx/Go3YC8wvBQu8\nH397\r\n=HEZH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8388a9bf6.0","@material/theme":"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/line-ripple_8.0.0-canary.8388a9bf6.0_1595621567148_0.5756759206545672","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dbf7c36232603d3e35f29c9a805f102224e77468","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ac405eae1.0.tgz","fileCount":34,"integrity":"sha512-SXKBgQqvkDZIxzeWQGXaheqBWHXBW6UgU1VqM+/UZEhO49TVEuRKjbBjGj56tcb8xTMpgFWKnedVdmU7KIzjSA==","signatures":[{"sig":"MEUCIQCrxa7bvny/UEqyq2Qr08SPi5JBUMJWWj/xmJC/Zo77fwIgAlV/TWJylRfeAf5MOIiuYxpuexhlpTmZsmQBDmBFLu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu1cCRA9TVsSAnZWagAAMUYP/3I+ejo7ocLEIkRPdLcd\nxERoM7Di1EsHT3BGXBdc1bcYAPVF5Aw2rZyXAJu7uNoKffQcTCHpcjfvqAdr\nsl1BtIzYcdwE2YjWv1vqnDEjqX9/101qZYNSCcuU9QfVBAQ6YyA1Ei6nHe3D\nvDsRIeNw54PMDn0YnruVyGaj7bKij0w3t63oCcpEekAKt4nao5KXPq7NmGXm\nKT1wVTw262zJfQHrv/4XOIKjHdLuSC45BAblcpbhnuIvNrx8Zrubber8S+P3\nDyJuxysTFBX9F6verFfa0CJC5szEhmWAVmQU9AN/miA5g2ajd1WEqffVzsyh\nb6suEeDMhcXXl6XyUmuZZK8+6vSaElBnz6zgUKNTQ07b6IjPw0F3TuXk6uaR\nzCEVxiVEzGg2VxpcvkyTxlAYU+b0CMp2xqWk+sWlVagd4nwWrPYSbyvDvBNh\n4uJivpXPm2xiVpnuLFMCdHaBzzM4R8PY8KfIwzRHsfFkbJLdufoYYZyyfFcA\netMGmIPjSZp8EMi+n00UzCFtAAtHLar8fsmoQ/OhIt4w3oODGdhlTj/93MkB\ni/Va6SZABs9eRoANngJZL8hImmXjiFwy4x8up2V0EofptDjz3M638SZ6P3BD\nlUcamhQEMUI0e7YbId+kNYXRsHCUMAWnry1L7m9HgzgXgkitrcP/3PNNMtfZ\na48i\r\n=sxIi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ac405eae1.0","@material/theme":"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/line-ripple_8.0.0-canary.ac405eae1.0_1595862363660_0.607036586792171","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fbd9c93e2b583e8103400017356f6cfe3a758917","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.75553837c.0.tgz","fileCount":34,"integrity":"sha512-ZZv2uLLYpJQAHkfHdLSaY0Bl8w9TW6sHmwQLUviTcgwCCbfZzcwnXMA2f3vQrmsKwXQIB9+HX1VQnylymfrTUQ==","signatures":[{"sig":"MEYCIQDuTVcVE/2vGo/OAr44DO/uHS8CMzHh32OqxZuJupv9TgIhAKkzn7gcFiwmhCkcCjlv37D/tDrDkjC7F+qvhVZz+RLQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu6/CRA9TVsSAnZWagAAYsAP/jyVVUImrWQ4YuDOXPYp\nlmAJTxiRPLgYKv6pDv9FsNmah5euBgh6Stl0mnY8BztZgvV0ZKj/EL+S2qjA\nynwTGH1IRmR3v54m/015tG/oZlbec3GUui4im7TnecYRgqeV5d2lOIQFAtzc\nQu/k7ehJSz1bzYcs4e+rtSXWt/opznRMTyXQTElpfGmn92eaQpbrzc9Q7oWJ\nNstZnpWiXOvyxbdub3xBQ20F2BSJKDcnNlkfXRkcy7rEtivcDEB6Fqy2eVi0\n6HOH1RkdgiA0oVVyydQ9oeQ3wRdY2YSy7Zsyna2G9eeMn2+4PHT+0fbhSuIk\nAXo4yzYN+IXl/r9G8z0ZfvHyKTL0x1U2qq4FOrIDFdelmai8cgnwm7NA3cJE\nB4sBvvjA36rh79tCGE4MGLk8JjpXLdEb2qOGq9tehOaowodZurJXIKZoh6dd\nN68VvvlWvg9HJBe6wYq4hHltQ8qpOHsP6bO6aR7MWur0mWLvCiKWpUfKFFzu\nH5ZWcZSGpl04bfVHqhEtY4Tep4AhfOFAw2X9/7t6oo6DcXd+JlzxRMUhEvKW\nenNA4Npe/071FGnaqHlQGtPC0TF3LToM1f9MlVH/bxPN1eUqYLTG40nDgYBE\naX+HQ5LU1IVhLlTYDXyg400B9XBFhEK6y13WR/x6+C9zUNwW/oMnSe1wZRGm\ni7zs\r\n=Ds99\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.75553837c.0","@material/theme":"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/line-ripple_8.0.0-canary.75553837c.0_1595862718768_0.6359096208277644","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"094b871ccf0fa1d7f53a0f65eddba77ed9ade792","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":34,"integrity":"sha512-eadlvDuD4OmjCxLIV7DYk3+xzK9y09FcSPXkOLRiG/M4FM5xMh7m/WD7ubOsjazwXgP5238gNzyR13G9Ppz1Rw==","signatures":[{"sig":"MEUCIQC8TdtPD7BGSrmjahAq32lCGnPs6ThAHRzdb3BlYvabuQIgNmXgG0KvrfVCcoFDFzpG1LbDGwnrAiFSyS7n0uDhRqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvTACRA9TVsSAnZWagAA4IMP/3uDgSrOlXZGdwLQ7paD\nlymnjk10SfVtbA2qBxWIqnK7nJmv4V+9EAYLQPQ7Csr6vMsoGYMYny3HzUy7\nQyOuGWBR7sgq0K8HhzkQwF9XYRmG/8ZxRANCB4il96jOSl/WCDlsSrJi/d8X\nh/pl1pInTUye75pmq+AwOguW7JkxtbiKiDPJyaWkKyIl7tYPVNM/IgSjsVcz\n9n2YSjguOPm3kXZiZ0MwuvWOjDXFRJbBsncHSRYJ2Iu/vvQC9+io4iFA2ERN\nTr4ESUKuAQG4I3YfoR/OA8NWpuedlQzEhdYNfwkfHbtAdIEqyt2ho/XNk1bi\nEO6wYJIM6YIDilaHnUdkzasJQwTAixOhVd3cEEKZ/FaFH2Y9sh2FFim1CKJM\nTJKpbbYnuEkR2zUaf+/LegUUXaCDz58YioCCOzkrayI8bCaiBSv+TuqoIAeB\narDBcXOuuDo7OfnSaae3SjyVjZqRWWr9r1JmxbKEgFgAvkPwmzxXiW7Dx5Vk\nOeI+2/bDl8dWjFkMZ/ftT7elOv4rBrxDiHI8ia/HYQKTcPHTawJGrOf48nil\nXM4znGx3pyCXIP6CRcq7kLbA6b7FHdYmO1SllpAFq+LovYhYdLHqeLRrPofy\nzwm+onUaaLauhUDx3hcrHM0p4GyaAoVaOG9wkx49hxmoECqQ08QoxfNCufFZ\n7r9q\r\n=cDZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/theme":"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/line-ripple_8.0.0-canary.b96fbfc7a.0_1595864256242_0.16080205230930744","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/line-ripple","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d04510315509b654e6f1815262241cf6dbf566a9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.61f1a8d85.0.tgz","fileCount":34,"integrity":"sha512-kOTASpfO1ZW4Fbn4Mi0LxsIT1GR0wS+VMUjuoPMxQJuWL87QykthqbC59HJnb+f7jyqG7MqoLLibITQ/gBG+dA==","signatures":[{"sig":"MEUCIFZUXm1hTCDB1gpTlPRHCPVN3gaQQzMIiFFvxxmgmyfOAiEA26B+bwqwht/awpGvt953vLEd7pR3SJE2vU/0EspUd5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvbjCRA9TVsSAnZWagAA9nMP/2QlUU3m0kIDJmX02oAm\nwyTAvOQV53FFTLjuzTYe34v6DK+ukc1h8JuL/DsdVNMybtA4LO9KwnPCmeE1\nTqy6+Jr+R6rflC/wPXWiLxXXQEvVApb2BfBNmO15mafvXCI0o+mCFWCTwTsZ\nt3X2xjzoQvHwNGVGRIiD2xfE61/cN41yKI2hqrrAjT2i9enF6DwcwArv7Owu\n0DaUiU8Wg5ZvYHjPUy2pv0WgmDOvIcWaX2Kwl3pbShfvHkaJFvY+vfxabNcY\n8xn65+V/qA0ys0VqtPnsxywmDc3zmLVNQgdy2O+dOgLCc+HV+WZPJ+fg7A8t\nFjbCHPbOVvUhal28WWMbTCPgUxJc7LQuGSFREFUMl5ozNvTHoYtc5hQDgeZH\nXb0/rJNHIM33WHYhVha6mA8MHDtEVEwDLwt7JJa259QYRlc2zJbEuabXhnHn\n/jpvyKgkOB2K0vVeYeJ3ZAiG1XoxCpAFCKPe3okgZjXi2b2TwW8M1AbuypG3\nB6YsfRNvM/RIXsqtuZrlTycmO9R7yX5pbisH37wNufSeEDwYv4e1JywzSoNh\nJS+Gp+UYWqbbFOvW9ZVlV2G7TLDTu7xBok+zDq6sIcBzWN6wyCZQdzzs1idJ\ndquto/GHXCpW6arxNciBkj6TwRpGaLf7e+YTFijtVj4e78fOj5GiNSwKfbWe\ng73k\r\n=Mlk3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.61f1a8d85.0","@material/theme":"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/line-ripple_8.0.0-canary.61f1a8d85.0_1595864802863_0.4144984921391599","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/line-ripple","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fb502bbb6278d1774b83b0887d3b5caa37758fa6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.81dc33377.0.tgz","fileCount":34,"integrity":"sha512-uQcTUltwyDajcAjL9OwWuMdMrccNLs+/ecSomkSl+as5/Kw82Xh0goeduTyfk6qXJJifcfhBshqDI7UD58hF6w==","signatures":[{"sig":"MEUCIQCcHgSXfK0OlROxRl8b60UtdMDKOeOlVfy91Qu43jvu5wIgJDHO5wd9MdSqxScNbXahVWtG1p9tLa3OQb/wRqtP9KQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvm6CRA9TVsSAnZWagAAeT4P/RzT1iGWQmOuk3VQ1HGg\nzrNlz/+bnYT7x5m7mUCN59hcNu3nQHeTQGL877gzV1TJmsl0hHBIv3fa5mPz\njQYGBuHvypLLepacKd4hWUDY7v4tETfPF9/zTpwrTyszJnqcVy8fAD3b131g\nfHxCyEPHikDynyGbCbcH5q9W8Ef8KymHmwNZ1b/kkX5ByoWgIhMURZbQCpy2\nKQUD8tP9s4rSfJceK9rX3imOyKpjO29vQTlB3+FcZOHmPpBJEM9dLZO+DGA2\nnq9fjEbjBAWjrw9QXgPrDxePteF+X+A7neLqWpz0DOsbtK/exyKM7wtpkWWQ\nJtRynDatnUNRjKM2Taj+IDnVoXlT8aekW/covq+FGGGR17YmTaCbDwsjzMSV\ng9add5FEp8NOKwXTxpi/28LV1sgVezWvkHLx9iMRhBoDtGSBsqzSjNCnqKKY\niJiFC5OoGxnnPH4ttOnKRMyN8MmrehnzNZTa6O0Qsf7ofYwPuRykMqNZUqh2\nLuXTFbSDhWPCMZdg49FQLdryM3DckEiLzPWksSX1oCA1NL7rKAwQoTWkZAvu\nSM5ajxHErc+WnY85IWgadFOFDTtLAQCu63ILsg7IJiNd9ORIf0dAZr1nDMPO\nDBWuoSA0yG0dZnOmLPkU3cHm6l1Zyvghx1sZBQXZYbXa3vTqSGZoY1vOl1RY\nquMa\r\n=/Gxm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.81dc33377.0","@material/theme":"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/line-ripple_8.0.0-canary.81dc33377.0_1595865530365_0.4639679942850099","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6476beb92d052dda067da0c42a4c1e8583fdbd8c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ffd9ede58.0.tgz","fileCount":34,"integrity":"sha512-+6xZVvREIqkx8GFz2BUoltPwe6j2aOAXm89uazx+cTVusVHZJgmwSepxhWE7cosnjTSL3f90H9+VUj/NEwiAGA==","signatures":[{"sig":"MEUCIQDhI8w6Zdg2gBSJIBiqDTDDuaS3rAEohSR70pN1J8uSQwIgcKayFT1Cr+4vK8GINkPmnBhJH4ROibdUw7DonchV7tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwGACRA9TVsSAnZWagAASeEP/R5f3vfQ6M6twv48i/Gd\ns4cJtQrfG39XxXndcfjxdPejzqKutyL28+bthRr2BsWlDlmINYenC0SQAuDM\nxY7Eyd8Lzh4tFDQ4YTDLBuMpdkfBtsZF6MUXSzPiuXmvYZ5D39W56PE75zSs\nrOiHIWpKiIlrxduCJLFwP8hfyxjdk5gvy7K7bMPRyWzt79ylnFDbxYXJZg11\nQwIaUUNT5yH+ehsUVGZUyzXi1K+ahWbFolNJKvgR04qnm7ELsz1GVe2FNqWr\nhMiJ9yLEFZo5j0Mm/LlsU4m2l+mfmBsei+ONpn24ednqowRRjTK3iAk961Jr\n/WQt76SClvXqn4FA+cyyMuo0t4wdEcoMWzb9Caasf3uA3ptlUXq1BLzalV9n\n8RxVx16sb2gPjPHfuU7r7XxZz/LSx8uEp3Kwady8aO1BWYi52c7F0q+V870k\nghpJLDXEUjtdwQ/MQwGztBdaCAiGDWYvY8I+rJdziBxEPduZXjGO5BiNp546\nbq2hwDexdblNOVeX6KiobluW5MJeTn04F4YJ5rwVrE1ZyhEAq2L8ZCBDmGys\npKcYNhwXYuOn3n5pyBI5QWA45u3y/RfrmUv4Nfmmu8Re1RhQvXUHAgnJDBFi\nU/RE1xEmBAUJamAAZz54Pz3bTAdozVIGBiHkTF6sVZfGB/qjGnl4JmiVfFq9\nM+d+\r\n=WGV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ffd9ede58.0","@material/theme":"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/line-ripple_8.0.0-canary.ffd9ede58.0_1595867520119_0.19994359218848645","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/line-ripple","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"399896dbbbf44319691a3735df763fba5149b02d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.52dc55acf.0.tgz","fileCount":34,"integrity":"sha512-OVLPphYhT4d5qLqOtkpFbuL8XhlEOQaxg1UEHcwpkEh1jbRVGQpFmcFv5QUtFuyvF6dE3dWS2xmBWlYgzKQlqg==","signatures":[{"sig":"MEYCIQC2y0o5Rh8Krtm4kalLgViG8sZCHATuXhiLkIalcpuviAIhAMeTueIZBTeY5bK8gXfrbfP0xhUyVcSc1SLrX2cvMoUU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwn5CRA9TVsSAnZWagAAIJcP+wQuYLEd89IyxPrCXPNb\ntKJrydecJlD2YX7TqUMXRtaVo/DYLseOWMIjJVuTYZ+Tu2R6QE6OcDtbsTJk\nTN1NMdP1S4d4ATwLwltyvIL/fSEgXUMTVOWXO7NHv044fxpddyToFcKoHZmV\nmWALstswbXwBIqdQBUvT5KQYRx1K63W69jYNGvcMPffKdxbkM4vA1TC7ZyDf\nYPCNku1zLS08FKeU9cNOHRh7cQ/ekd/CHoEEf+9XjSRo2cphL3uQl8204iQl\n5Br+JKQx1M0lcSb9f2Q3+YMZ9pB8qPjowO31FuYddIaIcVtlpTz+SSY9ECzt\nkwhqfQdA8N66HmfgfATMqLKvAqAZ8Id0sn+tw4Fh8qomLGTBrsXtRRhrI0aY\nDH5bSVGZIUvcDe+NxGOi4OC9I0xQjMX2Dn9ww0JXmmjxYVEp+PGUfqMjt1Z9\nTpT6NVlKQa4ONUCsdynIl/6YfERSyiIsAhh6U2GdgaOJH7YU28l8Rmk6GYqw\nqey7DJeYZRUdeMji84g7DtXDf1fw1jj4hYX/pZguln6m3FKZAI6AGVima0OB\nqQvDxSWpSR6yDLCAVjeDzbnhKgR+cP/w4IfNj78Z5thA08wXNn1wCEsPYlnj\nZlJkyStrLdkjwa5zZVbLFay3FbfkZvh+HoipR/i5HRohqZdiHLUGlUvdU8lk\n7JDn\r\n=Opzh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.52dc55acf.0","@material/theme":"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/line-ripple_8.0.0-canary.52dc55acf.0_1595869689168_0.17527390312808655","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b81c9e4ad6fb4f4e38f236aed294e19243f3220","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d4274ff05.0.tgz","fileCount":34,"integrity":"sha512-0wuW9gkTAXQ5MBqT/7bRORcecSGH2wKtDN3u8O3tqHfaI+3G40e6wnOtZUB9wcKE38DLNa25ErACXEFIn0wHoA==","signatures":[{"sig":"MEQCIC4cQeQ2x4xd2ojxBmTwDN1pAr5TiK8GSmDX8OgsvhcjAiAZMuHwHC/ez4NNRrQOhHPPDln0kzf1NN6foc6FR1js3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzAiCRA9TVsSAnZWagAAtOkQAIsO9Hp2jf7Ev59KORJ3\nsnMzSam2ZbjJOl1BKD8tcH3cgwQtinWFuvJGWQuOx8xbiUhrF23yZE+4KOLc\n3dP6UeU+g6dRq3ZRbL398G2GMCWBFjNwZ5TL4q5amyPQfAT+XzsUvRnkKo0Z\nrb7DJKoEIK5GCCaZP1uvkFLdE3v5JtXj/5I02HHbhOqfwHuWN7uDryscw0N/\nqm4sLag6bKd66aTEsapzb6xtuEEZVbLcaxF9vhgdYYVYaXYTHiazdW/HDcvY\nWrZryUydKOIGKM4GxZuk75B9nuodBHL5Uhx1jq43yFypxGN1/H2/XRSWuMQD\n21qv7erteMeznl1ocegqA9pmoZITuATed5xPxzQ6AgH0K7KQDv75LoJ6nMJt\nQb8eaZja1B02+8bTjY/HdrDOWRzBr+ewBZem50A86bZgUMdlbuE+9KavNQxH\nPFLziOhMuJkrnAY0GZZWNduczAp3HqJKwIAQ5NbCDmowAYbAwW9kpBcQj6UG\n8rVDTfnPQfPIlBmIDUmSTvXxysraAQtOPZkG3S8FZjymHy0JGKf/jnikwtpN\n/+GIQm5UCibDZrUDvGeA1MZX5vMoFL0Z6w0YsjFOkcFymPwLNj87CPQrfQlP\nLhbv0VVHJmY6ae2aEgLN4YMFXWUJ9HtwM4UlcpDZTG7Soy0LFllk74hX3sFa\nOZCv\r\n=wkU3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d4274ff05.0","@material/theme":"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/line-ripple_8.0.0-canary.d4274ff05.0_1595879458066_0.024909317279528498","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5553c81e0afcc88945eef3be180871e79e67e64e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b82d0696d.0.tgz","fileCount":34,"integrity":"sha512-HgNtKuYfoVsgP0fCIXo9efzdvX5UKcvUdjdfrpx6MLGRAxFsgpHRzJvoHrrFo+h86t4/z0fMC+9dwaKQwtpJ3g==","signatures":[{"sig":"MEYCIQDAqZlW1tR4FSVfDbeTYYh0mv2Yv1W+AVXzPzbx6ENSfgIhAKOfXWgFNfyMQs95AMdMSvjNxDtq5WSthWtRhxckQbCV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzG1CRA9TVsSAnZWagAA7d0P/1Awff4ynWFxK5ItlVam\n87ydY5lrJTM9OdCwt/zCszn+fLrpGlIZa++kmysRHpl3lpy53/l64hD1ZCdq\neL32rm9IbXV+/UgaK3zry1Vhd9ARPPddRuQcHnQnmbW8nT+KWKHBGGa6qXg0\nxzHl+CTQMEtmd3oDBj3qdDu86Mi0M8L/GaInwiTt+BpLn8QssTT0vVEnL31y\n+29RUDQQW1IDldBZouj4mfUxDQeSez7A/SALbdnPDq5pvsGeH6VY0I9pkcIE\nvSLbITah+7RpmvY4SzbFp9M8liIl8xP9lcYzRU/zCPxcVbn8vYMVDkSv7ZcQ\nG+nYEXYmIdwX97p79NJ9wsz52vr90I/2pqP3A05hHBGBk5wfmrKqAbnqdW7x\nLYXfgOr3705H74/DNYGyTVckVriW92y+OFF2gsMe3soyMu76lk+ylvDIWUK7\n82ZePwYB4t7LLTzHDJJEXvimnpiyBk9frEutxa4A87y/3R/1nR5xrsLAb3qV\nlP4v0tJpdzgS056bekkTxfCnJl3eR3peFdxdnhlurli2l3GsEM+2keAwJkt6\n4BsEy3IKxKP7T/0OBOGcuR2QgjqaaGjdTZof+4SkR6RxA/yGFRB5JRhNFBIY\n/77JNYUeX+9uukgqH3qiMUf/QLN4SomOcOWb9wcK6gAzLRtFUrTXGuOSiUJD\nKi4d\r\n=1D2x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b82d0696d.0","@material/theme":"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/line-ripple_8.0.0-canary.b82d0696d.0_1595879861013_0.9981920621052547","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f4cad722d1db44d279329488dfc8cf22f473ba0d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c2852000d.0.tgz","fileCount":34,"integrity":"sha512-9EVv28uL4rQTyHm0PW8sJ8ApfvHGBluybr1T7tlAyPiE7Y3zxmWKe8RY36/1nX7330PpgPLelw4FIRKPLgGj0w==","signatures":[{"sig":"MEYCIQCjgUUcTVigUAy8lRyY2UqTe+H7y/ZL6OPewMLdvQfD2QIhAPF5MsrV0TOZDblum9Y6hbIlAikyIesIju6zIKJWAN0+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124889,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHz/UCRA9TVsSAnZWagAAaQkP+wWvIZeVk/ExBypAaSc6\nZJIZgsgwo16meNOjcbR3QwFxYWbENTebLoW08ilNkmmiPzo3/knL0QCyjFC2\nkMzHFFkbASRDajM66nW6dw8k/FcsPeOv0tu/fbz8GM32El/mrmpkgwgnchMF\nbmrWUHjnFuRJdeLZa6kD6SOD/uVLxqP3ysrr8si+pkRCI0hSSiBn6yddHjgU\nsdHsSk6rc8yg+S/xzU5ybUeywNm2OHPdgyMLbCD1dzkvq3YHZYGg7ogCdE/i\nf2oP/O7AaN5gVIT384YcJCLLgO2fHc8moX0nieKI66fiWxdMjJL5Wunf7uX3\nFFyb0fWrWZSzfJQdfDObxqJ1oL0p3bJL/cTMKMYi2nku4/0E8oAADKqHSmtM\nvmDDEefJI4nWQJm+qRX4D+99JKu+3+UW6Ao7/6iEpiMN5SJ1sGzjS79AHTYw\ncpg1lJ1uGPmNe0h1dQjbxlzXHnd9wZFdISYfr5UqGTDKAsrNwYdBAJTjl7Ah\ngHRgtzSEqagouGT2BQLlRXqRmw3rh3OfBfKsmlFizx0a0vCK19jSOvBv4M85\naN03WBNuYeF38tCo1ZfnfwlHuEyRi3+QJTUZOZexEKcEYoOL21D9yJ0hPUWZ\nUCF1f+JAGhb4P55SvRFSemp23xSMho1kB4Rmn5TrdRz4B6O+WmLmvd1BUv/V\neumF\r\n=YiBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c2852000d.0","@material/theme":"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/line-ripple_8.0.0-canary.c2852000d.0_1595883475717_0.21385554351482905","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4f8dd4a4fd2d5e22497befb5eeec8c0bd2e25f9d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f86f83f54.0.tgz","fileCount":34,"integrity":"sha512-Ojk4u1+4UVWqQvmc/ypFAq9x56xVORk3YijljGz9qS8aoHy5TzG/fq17rQ/1IoTjMkf7uOvB/WboZtNPOR4pOA==","signatures":[{"sig":"MEYCIQDA7rG47eizSb815CaIJyHbOxYgCrJV8J+Xaexq6takZgIhAN4InkRGCu0p1SaHx1M91ONX6SsVUjWIrfe2aXPysHn8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0zpCRA9TVsSAnZWagAAahIP/i4SrIIOn+gspJjLxWAp\niVC/y4RcZnrRq42bC24Lz3rCDR5zrK9VG3TmighnTDYFYXXp9MXgYywHHfzy\nffzTq3lN6Jpj74PJbIPIO7YoCf1hUwiM28+VN0MI488IzgoYi2IWiR7ZuSns\nRRBDSnay2IZe8WNp823uqGe7UqEXNo6ZmQsInDFIa6tfP8kO45gD5ZyK8qiP\npAy9PwY0VoAcEnsa079Rmh4OH7bHLLexmqHStNBHZ3Q6kYVNCvRmM78XE0Vz\nlivzozP+kW7ghDSK5GWnIarT+fNOagKikLC0bJJkZUzcUWJunnP/EaFzbljq\nacnOu+PFS1YqHBfStUNfBaZaYsMzXdhKMteEALziRvrgHfsjGyrN0xXT7ZyG\nrO30Q1NISOP9M7zCqxb6KXOOwzxqZl89Yi3T7Bk2xltfXGcPJfXuW60LUsXj\nyOqBr76+RJgd133lcbS1C25jrrbT+ajWb1xEFYSVy7xYhX+Ihbu0sWqzFjBU\nIDXK6JFH0xriBB3cVksVamM4IgZFBOvlMxrqIgOCAseOBCvctmQ7ppDljlMp\nYpuhYTsj/nY5t+t4KLUbn3OSMFlNRe8u6INnesOTXFqWwOqw9TP48vMUMd/X\nvFZgpKNQ1RjDo34mv0iHg2JRY821uKhEUP1d+AqRwttL5TWmDElU/Sptivqm\nI0Iu\r\n=v8Vs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f86f83f54.0","@material/theme":"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/line-ripple_8.0.0-canary.f86f83f54.0_1595886825004_0.19326476998368736","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2dbb50c5b564283fca1603cc936a9798f4590856","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.41eb1684c.0.tgz","fileCount":34,"integrity":"sha512-VlppEh1POxFR7AT4UPuHOke4Cu9ajEtOcCEJXs9fsMW+SUW7KQAKWUzGiB6wyDSJOLgJSFkGGkZCvdyI+VUWpQ==","signatures":[{"sig":"MEUCIQDGsYuqgknI4C400fZiUMhC3dRSvOH6DngOLXp86K8+uAIgEswXOXv6msyzAWTu18920cYjhPwB6y6S7WSkJoc7DMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGVDCRA9TVsSAnZWagAAW18P/0VHC0TxHgBz5uoMLYv2\nSyKvctfFDgnBCR0obSZP/PInUi98i2CWJUuCb1Bd347YOAIth/bL9LD3Po79\nF8ExDW9G2vyLGEA3CnIStM3Waci52vIE1wTFDkPm0dcNrzWZ23fIykV9PdfB\n/zIj7pXWiiACHBKsE2/h49aw1eWJyqcUBbcnwfTXUuO1E3OAa+rkWbYENzMS\nMT7i21s21q1PPC5am5Vdpc52Y9OHnKLINd6X8ToJ+Nn1ypc0PZWX7MIWrAB0\ncs8pfpvlMgxQcajIZMVkV3B+BRxDYGR+1sxMCX6M8iBWJ39SF2kQtdUIB1Y1\nlVDhst9msIByQq1T5Jm5uJKq3VS4GzWcj5rzYIN7mmx1z3tvTrSyJE2SivEN\n8TMyGZgAGxnXGlYwjQwMfNvsJig0jAlAGlaW1xrGe0jy+UBXOn/B+TFkS0KU\n1Vt9DuW6EoEHHSwwL9Hem4BGuptwJRAT1B5zlUcQc65WcIfVjLxhw/IQcuvF\ndDyjq94r68MEwxiVpIUjCDDQEgo+ViMozmFcUxywPpEG1E0EgcL4ubir5Vz3\ntqeKUU44zgL46WZ7Jsp0vHXnzpSdooI8oVuuob7Nc1PAmxJnzdHiD5xd+n8J\nVJQJX7WCTKaX87iDUPUq1stjLPzOCfBdhi2k7ya9w3ELAqM0f2Ro1RYkVkNg\nG+SL\r\n=Xdit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.41eb1684c.0","@material/theme":"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/line-ripple_8.0.0-canary.41eb1684c.0_1595958594943_0.8745423575290001","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/line-ripple","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"57e9d9e835694aa1f07c41e9cd3b4ca4c3c6ab7a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.9e2f6c450.0.tgz","fileCount":34,"integrity":"sha512-kBHmbJcrYf6OpzTwJcaUoPXMF45a9Ao0lH9lNDGRhefonj/2EjjpPaR7UVo9vJb/808eEaURilf8DFhrzwhvDg==","signatures":[{"sig":"MEQCIBf19LgLJjOS5VxjyjjS/4kV4bAW/Y+VzFOorfxv0vkTAiBEH+wuqXv4DZfLQ9eqJxwSIvflx+WcAjbgF3oPwsrufg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKj+CRA9TVsSAnZWagAAqFkP/1p+ZHnx3Dc2TuQ/3/qs\nOt46jhrzcJMjeX/bbhRDlc054eHubtEzJKx5RZnvaDB87bMqcxv9HZ6Qf/VY\n6mViTc0R3lDKlpmHuaKWDf+MiVOS5O8MQypRPTyfJLEZy5fuy49SpmYDAkuJ\nmqYUZJMnf2V0gM4OwZzpzCoEFRX+pBLueTCsup0ObxeHxIlstnf0yuMbnr4b\nryu5Jn3tbHr1eAgPihZGR5x6yf7P075CMMmC7EkP/jqsV8+q6oJVQg91FXCt\nLMbJuX9dxdlEx3UmJA6IL3vQwJKd3FpLoKR4vbpHWP2MZE5LH3fHDo78PQ/I\n2OUCbcKNgVbyejrH1C589QX3y5SrM9v1zHnv08iPeEhUqNSFhtG/z+71qzGU\ncAH7vs4o0TZj0js6Pdq/oFI3+kzq+3/7+LZDC0SnQktD2vYLn66H8wurA6Vy\nIG399keVGM3KLYb2yrAvj+FF7o7mRa8NgwL4Nr5MaN1lkLg9o9SxntzBR5bh\nWsmFS9+CC+AQzVvvR55RuSZz7BdfMkXGvZE6ZWNmegLm+WxitvzZFu2pCjVn\njEw0G2L1YiEVW38rXpHeRs3+YgRn/Vi3b2X19EPKZ9JqrI5wLekMyRXmNxnY\nWXHwg+dHx80iAEbZps+UCRm2XVW4ylea5LzUme9TLN3rfBuK4DYOgfNCuDXg\ndCHg\r\n=UoBl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9e2f6c450.0","@material/theme":"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/line-ripple_8.0.0-canary.9e2f6c450.0_1595975933527_0.5753133837410278","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78ffb9c654bf42fb858eca33cccf816eed382c37","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e6950b55a.0.tgz","fileCount":34,"integrity":"sha512-ViF+RSAtD0NKe1fsb+EIt95fXuQy6WYFRvfU3vSrblrl0RSwRf+EpoSfiBiySUvJm7Pf0c5Nmc1WE9Ku5iG53Q==","signatures":[{"sig":"MEUCICiWBM5F0OjZPFXPn+XVskk6IKx4MknwZ/LubPt7RayNAiEA6XommbwoIPbtP4YunJ4J6eOHjzQbmWgCKki4U2x2wD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKwECRA9TVsSAnZWagAABwkP/1Aj4u7peG6xuJP0wpAj\nV6W2nECAn0k4IX0PwwVcEFfzoBWa1AFg6RuZWgcFTO33OqDhq2QVUhGrPP3g\nF5p/TaDcP0XURUCYOgkGIk/lW+Ev0Aa8uOaT9xhOOea+k2INMfz5OlnNmlpr\nZfh7Z/9SHJr8FkvM7QfXUPlceW2wQ2oQSw9/uY+Lqs+f0BIsIX8ySoo+YgnO\nTKx5nwto6ZfClbBxVLGHQP2H9Aj2alK9iehHHvZFE6+bPObz9haoAlwqKwYo\n7HEOPz0yTNA9hZy5R7JZmGsR+2IpFM8GlW+Am3O63F4ZwUb/4iBa870Amokw\nBEqBoGnVSGhjtcgqBFiOnOalkQxkQP8c8310TbQ8Eeq7recTwng6hx8WPGrm\nndDtkrIrJaGSjZ/juQ8fzmvZjLCHEwgqm2bzI8XEyUZeCsiqO0tgRGe+jfjA\nsvMMKHHG+QSX/RSwEyJxFtpvonJZ2OLCF9f8Ex4//7jEHrOfapQu/UG9IhJB\nzppSCqlQeHubrwBj2VNJxflDpcWD2NZk9ZU3c2zNf8ZG/kXwWvkTbSFoHaEt\nLilEPbTX2cEK0OsTAee5YgxgrEb337753ohw/3nKd9ivgp7u8IyaXDdK9DUP\niQb4n016JXL7rac6lcJQZfyjtjjXTlps8NenSYJQ/UC95+PnRfV9sJdpXf1u\n5k2K\r\n=cTXy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e6950b55a.0","@material/theme":"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/line-ripple_8.0.0-canary.e6950b55a.0_1595976707671_0.9028629562521897","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6d7dbacc0a6e8bac2b08f7276316eb9b09c9abfb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5e51ee38e.0.tgz","fileCount":34,"integrity":"sha512-z4ryiFjWEtMtb/YT25XumkyM/W5OSYJcUbYfm2CvWAG9OpMX4fcBqH4vZ0rRI65NHAsXOnbCFVBafUlGQ2oRPw==","signatures":[{"sig":"MEUCIDInIz3HZfaYRKMwJ8IXnsfnZ0X/uQpulYTyEvnmmUDkAiEAi1adU7BYqVhG69i7/3TZ5bGDYI4ti1Sw6OsHIw+CRTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILGVCRA9TVsSAnZWagAAbJAP/0PISfbGz7QcELCA9oMW\nqr8xVBm8aiyewRgBi5+e7KTnTL2ahPDxyFERp6AfSQfT0E5O/nbDJdqfdt4k\nmyh92eskzkBftN5ReOCyNWwQ1Kb9rFRFxaNMv2RyTDgJEtasgq/g3AU6AI4Z\nrNK5s4rhvZe0QEvSsYdiR0d2TpT61QZb/iQxodVKvvYY9ck7qL8vkC/VyAIC\nzWvwW6UedtNq6+F/xR3nwm69RaJqiR/MVNXMQO5iM0WpVET0WLGmVz+TzDMp\no3iBGJ/i1RFoTv3sehxC0qzmAdP9KrWyiTbaigmHD0XWBuj7vq68LlZ0fzEv\n2wSZB9WuXLD09lT4+dYauiuSm2XnI+9P1GMuqORXHXvzj6hbsAth1n1vscHz\nJyyXNRfkJLJhRvWVDyp/4PZAgBj49o+7X8Og2YPF5w3G+kA4Urivq2LTvHhA\nZ6qy7L/od9LQ+RkPxuJxzPBUay32vx/Ig919sd5deodvTnQ9rypibkydPAjJ\nx+Rv6fZdiNYZJxD6AW/mk9upTBgIWKVHxHItGXu+RKKDEGfmz1n2oxsFygoh\nTV6mvYPr6C5JSP8JIE5ENqskq7mRWwwEjKKPKyCX/ivxM3ADknroDQASglad\n48pWATQ1eOUq1Xpa7xmg+j8/g+cYEiS9Ufeb4q7jP2jmZLrb9If5x8Gc5PNs\n5IrN\r\n=BEdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5e51ee38e.0","@material/theme":"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/line-ripple_8.0.0-canary.5e51ee38e.0_1595978132805_0.8051043983514763","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"15b4b23f0d07c7952fd5053d7550a62445625ed2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a3898ffcf.0.tgz","fileCount":34,"integrity":"sha512-Ky3YWoNOiGdKi3eI2GDji1H/iF9aW+YGkztTuDofdIQoi6Qbzo70wAgOmmg3uIlwMb2HcddBHuQEeQ7+CBdGaA==","signatures":[{"sig":"MEQCIH1j7w2JUN45zZ11BP28JpJzIIeK0v3tyJU2DUhpZy5FAiADk6mpMwvOhvpP9Fzy6wzIwObYwdCkpMfyB1/VajlrZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMRxCRA9TVsSAnZWagAAd6EQAJjCBAsvs1uyup4+IGzk\nmwBSTGOi3Lh+xLCPuE7GjKVBwXzCRNc4iaGYEJcyBhJ412CRXBeSc20wBbNO\nhWZqozJ3pLpqNpIsDfbdSgXwr8dMU1hZ765hUxJNSGqgk+WISO3XG1IfXaEQ\n4ma0B6GPeGULfLj2/CGvCjZ33Fbi1XitKPt2LI6/46LDHelsRlwAFY1EDHIv\nlfBC1zawBIGAg3/f44bMvzTisK4I8u+PD8xxTugVs4CHXHSUU3KixSPjzT1Y\nxmfL/5YkydBXSIEmpWnlDnBQxYdnT4SsqqzItkSeKQlmRubAFAloKWuZRu6p\nA5j9b2wHqvEDCbLMEpSfVypwIt8YZkRGg1XjH+nznK51C2pArxk8Ve5Gryh1\nR6ZmV01Y8gebO+CZREHtDC8GYbSSrMzObuqxFWWrPC1WNdOLzlOcMUCcYUZH\nZkNdV2HagCcjwdJ8CXH3H1wFMJYv38JOfgci/jKEvuo4L79o4OmfqhG7kJPb\nKVWe05SutL6vgnkpK/3WvRMPsNr+qSbdAqjQ1C2sVE6RPh3aM7aHLXHaCJmh\nUIuBG6iGM9aLVB90bZLHQvTCE/mhIZW+s7djr5HKhCaVxAiDA9Rm+1NVVTsf\nGsE8bFcek1wgU/AZmeIo7yiQKUqFaexNKdiUr0lkPArUVEdCTxfIC11xrnGy\n4/y+\r\n=7F3T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a3898ffcf.0","@material/theme":"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/line-ripple_8.0.0-canary.a3898ffcf.0_1595982960940_0.2905212040284366","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/line-ripple","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"27c57ad8f66d39fc190fa091216bb4a344ebaf69","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":34,"integrity":"sha512-qmVLVkxy+yWnX6rt9xF3CD9qTs2k7SWkP82ymRrMnggN73PI05s4AltIDN4wcu2TW3DCM200PTehnbdDbbLZ1Q==","signatures":[{"sig":"MEYCIQDS6axdDm5y9ZQHnTzi6GAHIesRhjJW1nKYD6RkQmD5WgIhAJgyFXkIOLrn4pRLhneQs2CvHOVsjvEjfZ3IN0FxqSNs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMd0CRA9TVsSAnZWagAAB7MP/jqXaDiswyC5MoIweD1S\nzCjPP7bngtqiOJVkdW28yUhKdkbrPZx/l14bWf2bGM6Ctiu7FBwt6m16UX84\nK6UWwoFVPxdAJu9ZFG22QVsSBvEowJ0CccKYufaHCbgEL6UGXH1VRzn3pVKA\nJzvfz5kEFtOQSQuJPDckuotpugdjpWck221XDsqDK3xqC6MdL3PtuP8JAGyd\nyW9CuMmVnohkl7AyN7uNOcrxZwQiBu36sViXIzXzIgMKKxcTpWhEGYjLnwa5\nm5xsSAPISwbc6dmvP8n9rrT2AazCshlteKsxWyex9XUPcrVmQRoxhGpHbSjv\nDvO87ymazHvwwhLtJbwe8HvWPi+xUV52obdc2WCU8adUg6Wgg8OzjG4PtaK7\nOxiXEls0Nj2kxk5BnyXEfBxgKvzfKF3UXM3BwDLS2Dppq4Aw0saWXoh3Tjlm\nd8i9VUtWMUs0xofT0X3F38nPBRd1cimlmAskw9iZcLsg+qSANuscgRcOPfYi\nFMfzMyHQn/CUmWde8Ui4Tzg5flvf3kofc5+9GXt46quseA41fiqs0N4sG6i+\nPTi/+abbQpiF6jHS13eGF8RpyzTFkwsliD1lac1hKkNMX+Bgt9PHX2fob1Kd\nf9r44zRJfBQoaaCfKa3TVPcvggMwzFnApluLgzCEEqLVo8mpmFUYrsOgUzF1\nD6Ph\r\n=UPk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/theme":"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/line-ripple_8.0.0-canary.bc5cc6c96.0_1595983732089_0.9043326079672716","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/line-ripple","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"adbc009049af4f188da638c80c8a3a38911f6723","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.9bdeaf928.0.tgz","fileCount":34,"integrity":"sha512-YXpB5ApG3J7S2yet9yIMKUDS7enES02S/TYqLog+P8QFI/xpRwS09pACd2u7L7bXEVni39c7GroGlA5FQ1dSCg==","signatures":[{"sig":"MEUCIQDgl6eas5gq8GrnGmDqndwQW7gvrsws3iMp0Z453DA1YQIgHSShGUeRwLdejF/1Vd/isHkP64cXIGhCAMxDCczLkxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM7QCRA9TVsSAnZWagAAqNAP/296kLv5DHdJlkbuXKZu\nNoI4B/hYQUcatvgCT4phvTpEFG9DjOkyeoDgUvk/pCRRpMjL6BH3pOmOrjzV\nOm9odQLGL0ZippjfcuxhLJl1i37jc/IssfGHR2JpAWCR3Sb8CcwyaqvzI6bF\nL2qLWWoHBrbXis6BfBDferC6T4Nw0WIYPBVQpfLGaMsw/U3iUmcinyEHV7wB\nvMGJ0osYo8X02wJBuj5gpSCwi0EbT0xcx2ZCSscWy4REzh9ZEVtIs4gW2FIK\nA8dZH37Hioy6RijlHtUaN/xgH2EJFw80nEh13mPLM011Hex+jDso99fX9Zoc\nbHCJGg/7OzOOpr/66vYWJFSz4UJ/nqAg9nTyvGFFEw7Jx2CIfPc4cljUKUw2\nLkRWpVXeNTUZG6Dhtjes7Iyn3fk8TXTWxCT/lEH4dn8a9NenXUxDxSKdVDkf\nDzyh3PByVpgTKHi1GN3KlKX8ZzE2P5DObUfQCvi72X3MgGcPeavJCk3yErTe\nZrGLfgkWxXwJfar5iEIsdljXUOEW7dnOZHOU8MvmWkNgEadCQS4ae3DHILS5\nlkRnhYx8kXOTiDMDRwscgdLAACR1pjlD38lG9BUoilr5NUDxJRfR29e+FtOv\nV8hbDQ0T/ZzwWq12SJJs2MQE4wzCnNUVe4ujtzA3+kbEpqjLoWUtDKXUaUiK\ne4I7\r\n=c+Au\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9bdeaf928.0","@material/theme":"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/line-ripple_8.0.0-canary.9bdeaf928.0_1595985616270_0.787517180216295","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2a667ce2ec36850e251cd951ac43f53d8870834","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":34,"integrity":"sha512-s1fvB2H1tLKhW0RTn75ZoI8hF4ud9Qeao2lozsMTMtYLQ3qanB4l8V8W3hBkmDmDaCiWEtJgeP0DIUTj2wBl+Q==","signatures":[{"sig":"MEYCIQDBmto1M15v2JEQuNYjWH7TAaJtDKonCSwVsHzpXbRJgAIhAJ1L04s7R5TYNUb5Y1o2tIJwScKg2W3WKLnaQhHAcgh6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINIsCRA9TVsSAnZWagAAb5UP/iwVgX588pqepeRFZSXS\nUChYowOrj+VNn3OK8HHEdGc+HVB/UzqP0TlRzg1mnEiI+mIDLG0uMriS1ZDA\nMhMJB5v6McyfYzaAl0A+6yqsbF64soxp8IAzPvlV7VrNnA2wPxdD+0VEVdYA\nMgC/fer/w0JlsLlIw/2k0SduIsMkYMx8x0E/gvo+6igqoNXIn6thYx/4o4AB\nAXTTSbklwkNp9GNt64rLyMCTqi7gmTOGAn9HjEazm4hKMYYd1MWnO8Da/mUe\nPcFknMuh2Kp4Vm1s6aPuN3fQWEhKXeLrh6M7X8HqcwelEqzDwOL+5th5Jo7/\nZr6t6jJV6qdNwCXPYAcVCvg1Zf5ispS70zb5wboN8VtBM7W4GsksW8eEWHwf\nZIi9976k0GC8skqTJSCCz+JfKNoa6a0Mwrrq5UANn8ntzlyqqHjbFJzyJP9t\nTuelFvyyksZpgcWRPeG8vh/9VWG+2ZnQuJfuwmmT0jgCW8eLgc1kDjQ2rbw7\nvw+FRTZWD37WHQa3IffD/+Skxez4LpZHCwbUKTeF4bKut1zMnnsJTk4jHgGL\nug6kGlaz7jQIl7TqH/ktJuohW6O8FLekk7qaTdREcYNa+HKw/VzgqABJ5TiQ\nTAcJ021o5ogxx7tt4iKFlfVX/siY2HITlz1EesPgEiEtj6oJ6ZOadjbjDJpV\nIix0\r\n=v/Rd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/theme":"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/line-ripple_8.0.0-canary.fde2c1f9d.0_1595986476378_0.890674457355674","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"15a76bb404ebab5c59bcdf413b3e602d35e4e09a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.6b3876d5d.0.tgz","fileCount":34,"integrity":"sha512-qrLkc5qEbE+Oc25LZKGdWmQNyJhlt6J1AZvZhoqVez2EiRGqyHmxIeTYmyeaS1nFzje2YEvDSk8nQKCIHbiyLQ==","signatures":[{"sig":"MEQCIGKdALn/QLm5Eplmd5rypk3EE3OungB3Q6lMInnjKJPSAiB50iKUhlZh7EJlfKravVdNEOYL34OtGltpsMy+2320Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINMPCRA9TVsSAnZWagAAtXEP/ios6A9UaeLtFvhH+5Yw\nzzs+sIVYY+ZSog5nAV1IagQiVlN+VQQPkjrxFPimZ8Ptu9Nmjp0hJg4F1B3T\nMhpRPhle9PFSnYSeUrG5kJ0K80wwlwUdI3sDcWAVJUnAMfnFGq2MEkB+W9Eh\nftdn3nP0tKo6uAzKx77SBn20FxsBAbfV4x7NOhgCw1x8779EbtNu5fcx7NIo\nBe2ca3mEQUhPMKe9nscqBBdPpT2wWeFZj2fvKv9jSz2gRJgOXl+jrZQgADze\n9O2f4UWqE91ZkpucWnhYZWU7dlgmrWzO2GWHfs/d2MzKWQMsyg6rXSInw4kG\n3zSfgRqU4yOrImd3nG9u6MSyyogqgCOD4SzSgE+N7tvjgiz1CEmmY2l0ZIHI\nGtqVNW9h2nPT1LNMQSdulfGwESjWG0aKryD4am5kZzBI9qGVCU11lojkItX3\n7b59ec8/xbG6zy/rJKdjHz+cvs3XVBfju7/QAbqx6EthfGEpE6tQgEfWlbsT\nZnKEn0wdneY7Id/k2O7E+5Ux9k7M3MWO+pV0NxcFLVXHrgai0ISIIcg1Zj74\nN500WN9noh+YdbpIaqeDvwSDE4OEGVcfo7vkFN1mWttlhua1dSNkgaAjHikr\n8JyGdTFpS1IW2PEMcUV0yfu/4P8mSa8iUtvjPb20Da79DEtvzmSxVI+Sei3M\n+8MI\r\n=AuWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6b3876d5d.0","@material/theme":"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/line-ripple_8.0.0-canary.6b3876d5d.0_1595986702732_0.8620965306842012","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/line-ripple","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ef87d3f3e15de76547f00e7a0be0d363e4992af8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.30ce17873.0.tgz","fileCount":34,"integrity":"sha512-c0Epk/Oj/hMk1XcZaPTLYuDv86sGuRkfiixR3Xcl99bGnk3FZuVV1ZRS/4gkLTHcTC1188mQPDQd4ut1sudnMw==","signatures":[{"sig":"MEQCIHt/j8wax3WAqooR9oXD+U2Gn3XPBCCu6d6zoplfTw1DAiAEkE8YIeKZrfYYsHzT3LUiJxKnVwtznU9Ejk97teUrjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa50CRA9TVsSAnZWagAAPjQP/1T7588mA34Y/r0eVWYG\ny050wF32vBkz8pANkXh2n1u2O0Yw8h/PshXrRTXZTg6/+ekHEs6AaRNczaP/\nKqQ3iZLzd4eLYwVRmwf2PusVpZoAVuT/8B7GO7MzI3Esh6PDag13GJw4ddLG\nMbMcHRd/3geIRmi7HD2nxY/IvpuBlZPm0SKJvn5aiVKKXYSu9RN9KtrwM12X\nBz3jQkKyYfLfM8hhPvvP+NykXUcbjsC4Uxf41eCCT57SYUe1Z0mNx7buSmzx\nXitCxFrS8PT1kTv4ZGYVgybpq8goP2qp+JOvPrQwF/DOxNbuokkvR3ssUZD7\nxuJmfpm+xaFUGLkmMqjgEFky6HAfOpHuGsltq9JE6UbvlTo1kpYScVIGTVuj\ncwut4D9SdzMKBY5vTh5qEhReZ5RXI0l1l+SGfqXCssGa4ReeFwp9rnNZ677q\nWOVdHQ44dAGyJYHpeEzjFtW4/wJDOv27zOocwR1zblBI+I2V4bYO1GesiEBp\n073slN9Fli/3mVaJbJg1ZVLdxDK9IJFjxvF58BfC28/JftxpmrPFzotBtHz/\n8Ew7tnLezZ3ME+xJFqVMhiDVNtFyh5ZBPbTFjxODSrXNebN2h42NTbBa7eps\nZ+xglIUrmyq0OnRjOHlW+h3/14yA+Wh3BXSrdKO4tzvPKS/0lNR+uxYxxSpX\nn9R6\r\n=FatL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.30ce17873.0","@material/theme":"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/line-ripple_8.0.0-canary.30ce17873.0_1596042867483_0.11339056341956288","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8adf2dbf81f58ade981fd9b80f76ef9816af898a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":34,"integrity":"sha512-44N/v1xYFpFMBvFX0buPypmIqO3qEXqtZEiwVAreUDSQ4uK8YGGgIJT+RFDDZ21//K7EgnGVK7uMHPZiZhAtWw==","signatures":[{"sig":"MEUCIQDwPoAL2+Tj1cnHnVFeSOjX1GwnH2Tm1cfulZrRk7qxkAIgWuiqeuI7ZmjtZi74eHYENsLgeik6RYzPoTNz1X8rYlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb75CRA9TVsSAnZWagAAvSgP/1J1xWzxs2NjqLZ99p9G\nxs/D+9wTnPU96tQ9LKCccl2rhRj3Uk41SsmbRDBOmNVQq/a2pWk+5CqwON4g\n93uiPdUBTMoRHBeeA1N9/IyPPsfUjR4JqAN5J9f4hkbaiXaUU5NZutvD27lW\nR0bgzw8GSagdM5LGOjZlZhLco5A7HK7uIhWyq1gQvw8TY7DUc1iw1cL0oM9x\nFQKP1Fo8H1UADsU4NFDpbqjNWuBw8F/G897j23s89dhaXuqtGCWfYAhUOUrz\nK3Mzw6Dtr31X2X2utsc60L7WtaAo3Xxw8WC2X0o2rp5K1UumCNBj8EE607KF\nCybidqyhjs54P9B0/rjIxYnILQ18ILVCjCszg7teq8Ep2UlvEqciQ4dKi/GO\nOXslss8Zf2bRVLKyV95/+U1ks2dzJmao2QvJY4Cw824+IamLY/d3mVPC/URr\nk8GAmtBIRZjKTbxcGL1xqXiS9QbXrw+fZlcE+lJTTO1t/hlvZ2acLsEMjPYv\nO9IpSk+mwteP3TPkTPRJxg/6Ng0LklUh7vaS1DZ4YplcwpHMD0MLZRLjRi0P\nk+xylV1nFYgcZQ2HkYMkn9REo2e0PntlP73I95SWM2y7zqfgtAh8u4UVAiAh\noAT/wgfhsyUWmGHlFUtYiAh9Fh2c/pbtikWf+sf5C9J19lTMM4/T/EQbJvdH\ncz9E\r\n=+TSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/theme":"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/line-ripple_8.0.0-canary.f6bb43bf0.0_1596047096789_0.6855989908062532","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/line-ripple","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"35ae9b90be03119f83554a894d641f4142e09f99","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.6af75f6ab.0.tgz","fileCount":34,"integrity":"sha512-N+csXiwujTOjYIDYEQB5Fo+RdRkLOnsuNl8p2cwj3ix6T4j48PGoVzi2efMfLrorDF7YSicUMtMIDwDqAJFNHg==","signatures":[{"sig":"MEYCIQC+0ecAUnx6bu2eUDvK6W6U8EYgQbjeKuYV+qHrsie74wIhAJ77je/wSwz8z3SPCw/yUiffIvJ5htjGTBk7DIZVwc7s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg27CRA9TVsSAnZWagAAfhYP/RnRq3zfu7AAeap1hF+z\ncHuCWwlixyC9dF++427zwuAx7k3C6IEdv/wzgSyb+kzGrACepnl7iRIxP+N4\ntjDYRcxCk7zlyV5VDVfeZPYXaYwFmguKXB0BA+VVLSEQMDV0EVfsZup0dOui\nG+N+CJglv/XtHqHEnq6KgT23uO4uN03jlIIASbOyie05ypyFt9WohMRsQjbp\n0Wl5I03XL3va+dEswA8fI84EUjzVk7XMTSUnjrTpsK8RA7gbtauTGbVlZCMN\nmPhoYPjS9pdxuGhz8Ly+2SCWD0bUYOBgMwdyMQt3WEwfKsVlAaE70U+1sO7b\nCtMDetWrQWgxa4KpYqVOoQwf7axlvNhpNb3SVMbkJ8+DN8kvc+KzuOnUi4gD\nnDXAa74w8g7fPvG1YsOdcZKbhenBaTGtd/AaoXMDqvcHtchIMLOEIAI3BP9c\nf80AeYHNuLK0qKk9UPiKh2Y6j9csaOixZkWCZYDiANBxlKCMlMtCxH3619uY\nLJmjmgGyJo4eNzYJ27aVXpsb6WHw7BzdaPlLOXF/lLLOQjrbnOtlaDM/akEj\nunIEQcwzqJHPx/gC8AFTlIipvvQlN9bNnp2lhfNFZJbroEjHj92URsdbtxER\nOYxn3Wt6MA0MLmIw4z/SQexGaE/RWfmEc6GxsU3K7sQ/DYtOWk0h+6ghs5xm\npMJe\r\n=D4Wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6af75f6ab.0","@material/theme":"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/line-ripple_8.0.0-canary.6af75f6ab.0_1596067258783_0.33607449597760297","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/line-ripple","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"afc42ec1c989dc2163de36b0c040dc5a246253f0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.42d7a65aa.0.tgz","fileCount":34,"integrity":"sha512-Dg+TBiLslGzKqtCx83uPcJ4TrVCZfapHOHPskF6m6LU13euPKjKjXwFpNkOvQdDP/AETValupWCEqpyusoK2+Q==","signatures":[{"sig":"MEYCIQDvVaP2WCwp3YP0RYs31W9tr/MicGTBbPTH5uxvBmUIzgIhAM55/qBFC02YVpzPL0kH0Ys/2ae9SBe7uQmKu2f1BoLQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg/UCRA9TVsSAnZWagAA08EP/2ynOklGuXF91Anz4q+N\nF9aG+3/lbG/jXXahAxV9ZRKBokyyJ0sfH6l7qZNPQQMoJMqPDpteKZdGWxyh\npDR7NtXmEpL/HDIfvs/sW6phGL3ciceY+DwRRqRZveLFwa5eBaIULHr1ziqQ\npmrP7K8mMW/63wyv6zr8/4+h3SLNNLTPYF4pDZwDJHYa3XsQbDgGgLxQQLcM\nnER+Y3UuEyyaSphAXDK1Ycwy6WD0uYfVsjBJmyRenw5YkAHDe6Ygsl4yssjq\nwav1kUFs8UT0FmpteWWRzeZUx5IKKkxsC3I89RYmGePKrj8Vz91GVSpw2xHV\nUm5Khkj5pkrpMKDwWbnhVXK/zhreiyPAfh/AAIWAmqMlcQbklFIYqd7aakEx\nPHCyXPl+A1Da5w0C1pdmcTe//kuKZ/TXed2z3BCqt+zWkxkUqMTYJGJrTxQw\nuJ5GkSk7ru8oY+nKXh77uVEZPoemE6zZS75MV7NporfiLiDMRE/EWzrhGy38\nDC4/jVkX0wEZne5Ooars4TMQ4UFshqucgIWHuw4Bn19K33K5yeRh2szV23J/\nz+wx+g7n5VZWvYGNQb5kodmEq8uL6NoWK8gGhs6n8vYcZGof4tS7uOWn9bnw\ngkV1osHT3y9durP4xC8c2wxUdbs9rPrQajHDQDD52KZsPk4zhDlnzHSX+9VN\nvc/v\r\n=Ueoa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.42d7a65aa.0","@material/theme":"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/line-ripple_8.0.0-canary.42d7a65aa.0_1596067795906_0.871322982832897","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/line-ripple","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f3a4eed04327742e66627b244e29f008f7128c64","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.85abdabb7.0.tgz","fileCount":34,"integrity":"sha512-5b6nJVtw0+SfSdymQeQa/ZMAMNBEylk25Nz4CwVVp3n4amKhl5ixsRRGhq0iqCa8ZUP1FVZ85CMTpelkxOeE5Q==","signatures":[{"sig":"MEUCIHl5vgEbFUAnS3NH4zVOf7/HWvWZCNRNQPOhJb3cFJowAiEA0sQhWy9zCMiEKtPhbK2J7d631k0/e61Xk67D1i4mIYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhEACRA9TVsSAnZWagAAZAYP/RWU/NUPaRfBMIEFMe8s\niO5aJ/Et4uckUe7VpK85UIlTwmUvE5LCNC2nwvZ3mzORxhJUUon1zyk3WG2x\niqYyhH3M+J1ahI9e0m7iX2iLQF//+mN+7mQi9ZZKQI4j70ciLpuDP4lmogT1\nxFA5m3kvjKyUQdXyeWF09lxgSdBNbwM2bpAVSDEVzl2qTY3iTG8ou20vtEzV\nPEpBMRQxpUw6WNDFGQsPW9v1boB9HaYWphpisfx2ic/hYSRsEnjRmHs9wuwo\nbK9NTspreoel/mfH3G9nb/vqWLbN4EjH+jullcutIEGgCAZ7fyLdYAG6kaGn\nv3L+u8EcSduSeAY5XAzEYLCUV7EqnC/0U3E12QTTPnJM+/ByjhRjh+viBlg6\nWAM2c1TFDV0eqPJDPbIWlzN3O6cz3z5Oh9WIDWtKith9h5ER/vnl85sBY4t6\nCXm2gb16HfMEISM5sqczrsfuGWUwZBJkO1gQJ4DtdRh5mkD1I+DT/zuWrhlM\n34o/u3DIuLHu9FjtXbdJOgxG4uD2m+Z/LJMtssIrO3UgTMWgcLBwl1UvWK2g\neoPsRqMSwywj0sb3Z2n58YlziztvOJoMQUJD5IWcLrJvrPKNTtff3gRAiN9p\nNhpZ0AjXQjEPM6mqP8chRzrJrkyZpiR1mqA4sqP9/ax5Pzm8EuoP54W8qC5C\ntDoX\r\n=5WIh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85abdabb7.0","@material/theme":"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/line-ripple_8.0.0-canary.85abdabb7.0_1596068096273_0.895530313524171","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/line-ripple","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"730f6cccbc3753200436ba5125b9b610920d01e5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.49fb20ca3.0.tgz","fileCount":34,"integrity":"sha512-nMxGnz4fUHWOkeRixaI+CArE69c7B6qrqC+nuxRuiyP7AJmF+49LrV2gwjyM6bvBhq33qZ6VlXnvwr22KsceOw==","signatures":[{"sig":"MEQCIEKRFCScdv7n9J0nJgs4EgkyDiWr75fU6IVgWMUTTFZLAiAMF+tw3R1oSpnEPfsO3JaALbTgOXeOPJQHnbfXKSuM1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiHyCRA9TVsSAnZWagAAK1QP/0y453Q4C6a3TqjJqr4W\nDrcFpk3LiLAaiIgQjxOKHrAc/ONpPNlvNRhC60+LzfF+3bV0n4w8hH8zptju\nKnQwQw5do7YwTK3hSyGaYC1BXuLxyh09vCIpqlAG7605uXuPX4VDeZ6c2meE\nP2FrF0gc5CbsfDhaC72Ypsqf9DTKdWyaKVXhsf4BUab/gg2WvRQpZDMYXHto\nqBc8Py+HrCXuaOV2bjIY3dBBprnBHqQsaBNhLn8VeHsf6Y9OgpiKtl6ldSmF\ndiXJae44MVMv/rMjBDG9za2wXeAjO3DMhS4FiH/WDsAZm+OpneXbAb5ldsk+\nF46b1e8tnXqRWQqMxf1oJlevtgredbc0ZR16o6IPb0m52ZuYujUekUaPhRkG\niO2M2s0LvYXAdJM+iPptzMlG210fGITh8OjGjjOZ9ldROfq9E5e8KVtsYlgp\nroaXgzttT0c0ixTBH8zhpHe+sinuA2Yylndg8zoHWdDbdqPUIU43Az5BrXA0\nlEuqRQP9l3YL8ujPPFXhcwpJ5iDVmcF7Rklj9hBj+pG616+X0fbrcG5AmvkA\n1B0QdBIcdhBL4E7IGixlit8qOZpebHTi05PodMjHXf8DdWVTpHujCiSr6xcp\nqQDJb83wjuWdTVXOzTPmPVdKyxLHeDPXoMzj2VhgsA9YwCxaqSEYl3O7mo2n\nSBVS\r\n=nXSt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.49fb20ca3.0","@material/theme":"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/line-ripple_8.0.0-canary.49fb20ca3.0_1596072433481_0.09809895136842872","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ede9daa73d3ba055e015eaf76c48ec497f284a51","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.962d4abbb.0.tgz","fileCount":34,"integrity":"sha512-sA/A68AMASs3J654rLxHpfGdn6F2bJdxKWrpExwkWoV7tcVRd0DIBDo6nhClvSBGyR3XbAGsxFK5qC8D3lUV6Q==","signatures":[{"sig":"MEUCIQC2ZsdIVPWGG7k4FtPYrYRfXqlwx5g8lLJMH5kJjb8ksQIgGkeL4MS2egQLLAHO+5kWIZfamqw+9w1qaTGObgDN11M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvDPCRA9TVsSAnZWagAAAsIQAJTF2FDb3yp+xfdusbI9\nsBk54y2Cdq44bqDsUuRy/e2PoE+NZwhdNmBGycHywrD0xT010uIw4/pDCQsy\nuHRuvmd/mcKCSDn9L5A8J0Iv2s2o9+RADT91HunNvPJ+WXK/hvDzvNOS/oIR\n21hE7g6/gp3tzwwZFWxtXpkWhj0oZ5XikW6w8ScwEZ55hsWDSrNISDzkfEFH\nyWb2dHFJkHquAi/IyvsiIQ+dL8Zm88B4qUnCXZFMVwvIzRmFPoG9QbLnJO06\nREfxc67bc6zRGzoaL5d0K3+GJLcCk39gSUCb0BLS2wby5pu0B7dvVW9lZy0q\nV84TperJ8pnGdF4GnTdRJyQLR9HeJSe3ruu1cDEhY2coija76jv1BaNx0u+c\nvq7oMDP1Im+DsNo9WKRF/gQc/KuFPWjufHiASf6bHpJ55UwfNlY1RWxmWCad\nmQTPUDZteT1OEL2APuwsD4z1fOocjUud5c2cBI+UVFZL0UyuUJK6Vq43JaH6\nEa3CATwZ3Pjl8OI4hp13ilJMNaeCslDKK/+yywzpeUbTg9t/eo7fi/taGccT\nKoDUZtaf8JFAQHO3FLo6ziG4EGa5YGbMRBSy2Tb47cOrFUtMVK75DjRG6Ubn\n0jYUCA5vYK61G5kH7/FWs+fCjCGc9dGh3u7k5OCDnyz+4zKsp51gr/NO3vIC\nWstM\r\n=+rvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.962d4abbb.0","@material/theme":"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/line-ripple_8.0.0-canary.962d4abbb.0_1596125391095_0.8367662280061143","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f816684fb8dc86869c11be474b15dfb352ac15fb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2fcee40cb.0.tgz","fileCount":34,"integrity":"sha512-NJTbB4ouYtn+VvKsmiFT9+cluSGQZ1wp7L/6F+EsU4wC1AOGD650wTyEZKVJ4DVodsO+Uj3XXNDAwghfWgPWUQ==","signatures":[{"sig":"MEQCIGy+7Ih32FhGaJ/7QfvlcULUNw7fpijPaQA7KG5zHPnuAiB2hq8z76QfusHCfnr7wmVSkbTMjySdAEC/csbSSXsDAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwGFCRA9TVsSAnZWagAAP60P/0XbPbeppotkwwnHolo2\nxC1FVULmGHpbiIModKhfhNAkq5+w38gHkuEgEG8hAuUlPIeZ7Ht817E7xQOh\n/2FalIQLM//xd/LMDTwC8twv513DHT1kimx8CKTCIxEEZhR6Ywfe2RyqnnO8\nt2Vjoi4eX1cnKkNaGIuicSHhwltiesDXUNXc3OvLEKkTOIo91o451NnKXrai\nvWfBIzcNmzAfMdUn7cJOdOtoZbUnrkzMHAD1Q+/xWqn2GEuxadtAgqC/i6q3\n8+ePFyAlrIjQe1IiL5ccBRhVKmn4bl8oKkSWYWBEVszQhmefrpI9cMcbdsMG\nLkmWqjS77IrC+qLvWS7JqhhWw866RZ3GncMofa39seBzYVcFJ7lyzwlL1Mv1\nr+CQSeI4PIO/Z5fHF0Q95rfWu88Jrxcf0cRARZstJpPbk+MVvQXBaQmTzZfk\nFbEqOCVMzk9WFlPeQ7M12ZIRtrE45eZJnKwahvUMa+r//bK033jFfAyrmr7z\nOS9Jy0+rfYgYCRulr8EPaxpfHZMUGdxCuOmRN+sBnKUSCgHD/VhBYGFp6KWM\nNddSr0uPhcJH0uULnu++RcUfoDgkY5GP2xuhZznJr+TP7z3ep0XKX3rckuTX\nOLD9/Rxwwcw1l410FffLmYhWrDeyESg/FgkCAWTzfiquRtdQ0j78cJhycvrO\ntUuz\r\n=9Gl5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2fcee40cb.0","@material/theme":"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/line-ripple_8.0.0-canary.2fcee40cb.0_1596129669048_0.9446998288433051","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8ff8e4cd54f60d1c7e0b1494655bb249112cf976","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.bd5987f5a.0.tgz","fileCount":34,"integrity":"sha512-MZy7opDAV8pZDPKMUz3hj4agfjRoLpcYRE8rb/ASWphBGvlXz0vxQUhBu+hETGkB6r/KJxOBB1eLxaTnN7WbVQ==","signatures":[{"sig":"MEUCIAu1tH1EtwgpKYvFRsijIh2HtDCEYJsNOdgMt4MdKVeiAiEAsNX/853sNi/NopbjKwPKbxAk4ul7988TNucj3Oa+pBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwdLCRA9TVsSAnZWagAAJrIQAJ3VggpRkmB9Ipo4Neo7\nY10gnXyWeMFqHpBQTUHBDu2tYSexxAWU30bjhLJ3ThOMQhTNoOjriXkmteQF\nFMIMP0SgTzySF0lbi8s3amuleUmqTvCQBCbu8jEV2YaoxJlApxm2DnKoZUoS\nB+UbPgBe7EHnL1R0U9Rc5vByJ+wp28yEDdaDMgBrQk0RJmJ1bA4bi03xVrta\nIne2Em+CqJPKbFi9MqimGwTg0sKE2z1+euKaVVji4SjmadId4qsUTtaCwxxf\n+h5Dt1+eI00GRclka4FOL3F8mdSCiW4CgUg9SUn5ykg5VjRPIwNraL+g7ar6\nJ8+zNvQCgQrH/VB+m/nV2+u/DaI++DEOyjn6dtFcNREl4sOjr34rzsrIX7Yj\n8cGJX//Xuli44T6oC15zaQignEanGIBVZ42wG53Y1l9GAuihV4EPhcKJ7Sxz\nfKOPtoXgQP91jr6j/WkAkwrr1fVObN0LXIpOgexnI2mDVrFjJda/h0u99Uv+\n6qoaOsqvIQeAikHXuhr/uBZcV2yIuG1rKjV9EIG0ijbB8PXT8u/0e0pBbY4z\n7ut7t6bOaDLTDx90Xc0K6v/P/1exw+SYrXdm5IYDhLNIRdPG6JTjWfDKzVIw\nRRQGRaKy2NunZ3bagGhbRZ6RABeLCsonYPkntorlN3DXnyOAGWZKFVTMsesc\nUdRv\r\n=3I7N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bd5987f5a.0","@material/theme":"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/line-ripple_8.0.0-canary.bd5987f5a.0_1596131146547_0.05613103179373824","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7125fa8ec626811f1463ee090c3a1d00628e3de9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.005e86a9b.0.tgz","fileCount":34,"integrity":"sha512-ULqvQ0Nc0kTJgoUaBJAZCm3zGUPIK6f36qzvCAh6ufcyBrIWardzkCXo3QgXKpXLokOO0rQKCYhvajIgLCU+5w==","signatures":[{"sig":"MEUCIEJcvZgR5H89UmK8VkODkrRDXPCO6gWn/BpdVwXVvMfCAiEA9Hcg0XFj72VCb7ys8fOS6B0RIISCd5ozd/cT7iKB9OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwqACRA9TVsSAnZWagAAwUsP/jVIbm+IT4gv0LUMkRlU\nDm1Xhrh3676vRLRBc3vtpXwrL8ABJuvi3215kDWxmPMWAvFXs0fJJui2nFtn\n6pwdN+roNRNCO7GNdyHYHRDhF1zkY9Q1M+Qw6EuTXyrIbQFVRZAJbET3VLcx\n8e78SRdZv32Yovrowpk1EAV/nBHzYL/G1r6y8cdeMYLk0TBl9ewNi24WNTk2\ni8Itr14bb6myjCGt//yJCt0mGENhL008eqcnxOFxrB12L9kCH+5EibEaBwIc\nlt8SHdOkgqMV3uxMmv3BQmpKfSCqca91M4EOmspLST5Us6V1w9S1qoLz3Bzm\npEayeBR/fH57lzz1FZbb52BbFP8g9OY2RnRSH7ExzD7VY/XPNKIgAzo5vAFz\nX73xXwCzclm2688s36LJO8Dowfo3HKksQaX0AQ8L+DNL2JaNSdJI18it04Wg\ncSAiFPQ3Bc/xujl4vBOpC/UwnuKPUk0LysgdUVqtrRzlEqNez/dnMHqvnnKi\nomczNNYw+qZ03fNckqdrf3mU3gbWd2iof+BRgQAxd0q6ZG2WxuCIQx7oESQG\nzU1FS5DeI4XlyElXG50flGfd1xmto7Xckjv/AVjJ4++pj7U9qHogPv1f/Rve\nGWDyX3fcizPv31wZ4PJl6xYziHdPTvahjidEBOUe0creGpm6SJyjrVuiXH3b\nSmij\r\n=N21I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.005e86a9b.0","@material/theme":"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/line-ripple_8.0.0-canary.005e86a9b.0_1596131967866_0.4398888998050503","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"05787325a8b0fae5ae5d7319406d1c20c8c7af15","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e309c7c68.0.tgz","fileCount":34,"integrity":"sha512-zLA09Dv0VGM/xsm5cROPBNPm70rfEHQZFeGdxYU3EGUVOZ3C6BZsgBLTzODNxKr5LtyQXuWEpY7udYQg2unUxQ==","signatures":[{"sig":"MEUCIQCJOgeOZKy+UILrDCi4bzbNTrc6fkGDvz//huPkmX80sQIgIyU+mslThFhJLHpEOrpfg+EVG++r/Tt7q/jk39Iadqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwyWCRA9TVsSAnZWagAAbvYP/1RQFM5Oq1g3V7ui/ZXs\n5qH3hqna6i8F7UxC83qMn3ym0augjYf7SCJPoB52Q2sT5MEYm6fax0bxr91s\nHsY5yd1QanY01bOLNKkkRVxsx2kLhTvgoBr7BA8Z+iozTdL7bAoxjek/3UE+\n+aUEpJd6wCUI4JzWPXlqH7PIgM5saGqxgVMtJgJVVSdShmz0eoQbFhIBCqTD\nSfSKj4kekHPgJp+i5bRogQwbtUV89qti9+faG/uyHaFEZBsY2wHzvtEuf/EM\nY5OUSs4RooyzhYMIbNJVhPJluqTwjrOpXx0oYf7+3xTPVAkyvagf8eHJtuWI\nVq0szB5r+Agt3mVoDX2S9OOvzQsz5Yfg7teFIX3gXw56TFzkJ8yoeSmjTKB1\nxP/xJGbXDZO/aY6jyD1FxSNhkwaJE4WJSIUfHD7DrBDoPhCV2NIQNR0h7CKU\nd2tVe0NtkVcTz30vQq3jPbxwPNV/+SgHcu5LbnaA+Owrg0u3aadFIjKx+lqq\nuwWAstNTFnTPDp7iGXaLMk3Eij0Ce66H7SdP7FRrnTTuAWIOpyfZ85lM+qow\n0H0bmCzCVkg4wIT5rpZEobG0AUpmh0zbyQV9Zr4ypzEMWhb2IMFLfcjnQhD8\n6A50BPeOi386qDU3M8QTaZxt2eE7TwC9cQkwhRNAtTz1jwo/Wcu/QLLT7Z2t\nfPP5\r\n=qbsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e309c7c68.0","@material/theme":"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/line-ripple_8.0.0-canary.e309c7c68.0_1596132501884_0.38589089639406193","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/line-ripple","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3dfe6d6a593b6e15c3169585fc8e66a03b69c3f1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.935a51cc0.0.tgz","fileCount":34,"integrity":"sha512-4x3fCFAxp2eC8bVk2KkB4V4eYEklG4/9FKEVXVI+H9gjcWXEROFz4hhAPocOH6W7SGmxuABMYxxqvR9MoHJWPw==","signatures":[{"sig":"MEQCIGiFnAMLio1RNAjrquGjzTv+TC1XM7BmEw2mihcsDrMdAiBaOPwiJ1EYXqRtXFWHxWeKbkmc+jvJbVo7WoiH+mD91g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw9OCRA9TVsSAnZWagAACQwP/3onMozKLZY6vXRY9z8K\nPCe2pZ+n/xE0xxDvhj0jZ3sTqjhQo3tvbySAcN04MUhA9Cx5i56oztx3x+PX\nz1eqP1pE2ylUt3Qq0NzSEdz2WBvGhUDxO37Yj1rBxDdBj4l08WAzgY9AffVP\nxqBcrihbNs7K8TtRiampjO8CaFGUHWvj/5UbfqadLLxaTAjwVTdythd3QTfI\ni7rVkr08PRnMyvirzT2nPzp/ouIkPaV55+rOq4ywyun83z8c1lrNznygpGV6\n5iC6yK4w99z0RPocGoGrvaKD7VoBg9M3BrvVQfR2MdSDXo4VSbsqFg8WOv/Q\nazbdT6ykhjxpGmdEY44u7Fz2ucgCnLKIlkb7OevlYVRTMuYKXwgCXJBAot0H\nnJURvnJU7W/7Xs1a72KOhDca2gohXRbBYNqiYraE3mEj5Eb1Z3AnzcH6miKd\nKnbmvP8sAyPGNeW0hMetmyIIt+2zRGditIR1gFD/r/DXce1GunGP/WxJdiWE\nyKGjhifqNZygQWAAC1dYMThyQVpsKxpCV9Zx1acspcO6GiEOCSrEa5+wndTc\nslsieAgvy2Z7iysfk98X3VOH6wh391EM62coxOi9t86cpjCtRA5BXwUTlwh6\nW4D42Lz+3nLg8wTVzKMT9fSa0nAX0MagOP/xuo22aiEy/+9oSa2xLqXbuZ/6\nn3w5\r\n=Sgdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.935a51cc0.0","@material/theme":"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/line-ripple_8.0.0-canary.935a51cc0.0_1596133197930_0.7910317593219469","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e362411addd74a565e3530df27e1cda7a01b060b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.74839da7b.0.tgz","fileCount":34,"integrity":"sha512-8DegOPU9NAwpgsDBva9sFH7twKlYz7i9fIvxffOoJG7m151QP+x3K2V4qe/hUiHHTpZpj6k5x/2sK6B22nSCYw==","signatures":[{"sig":"MEQCIDpKPDdR79VT6ADjZinJ1YmfOcqkK1JbVkZLnBmiK0fmAiAZdUMd6wjY2v29ltk/2urPnzYkIdw4w5EYtxFm+9a36Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxHgCRA9TVsSAnZWagAAfXQQAIdBvskiT/Gs4OXNfuX+\nvv66hj/0wPxSCfBnLw9JrsOqmpBRBB2/mDeiISxYbQgAkxBv45GHDVLHtC7a\nenW0X3doYZ8ogmQyuaJ0nC6+qhHFVQKb6GMtjnKRY0L7p00PG/KA15Vaak1U\nZCvwG3cCZJRdXwnxahlpAM8StKByM79hXehxCfm47AiAALT2L4uWfJZzGZcn\nj7wG7EBweQtCbMNze3YOmtGcj/rA6IBBtQ9FVo7/3CyeKNWRK0rVFg0b6t79\n/SSIVLen/l2Gzz0m4sJvfOvqnFpXh+3XytGriNMUynmyNv0bfY3qzlbjPEY4\nJ8Ztt70RYxlKGmAtg7tWnntLB3hFpfIEH7LV0GNHmTQ4VRwH5tYsJKo+fIYI\n2y527yTtRjX4kBokLygrGHp79cjNZjuGxDCs9UgG/591hfzSpGnxynuPTLF7\nn4ItZJIUT1h7rBY7uFzgH1svD+hUKsfYptpuHutIeEHtupnqBFxxZAmJzWvc\nPd0Iawd0kle7UytEny7hbT3kfYQpG0maR3SGBFDOU0IQ7gRGfTpX9E5E32m5\nvbQCJKTs8X+Wc4xAQgARcDfWRcZC04VGEhW5EWZ5KM/LHcVEAVzxKqnjdMRF\nJRXAsrelAZeLi8K0fF/saZCmtvznxm4yV77B2dsBg89bfTzKiISBBcLZ7+KQ\n63x5\r\n=NPNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.74839da7b.0","@material/theme":"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/line-ripple_8.0.0-canary.74839da7b.0_1596133855848_0.4600604929640948","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"925b0eedc9e0583d17901410c50dd931790c95f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f041a48c9.0.tgz","fileCount":34,"integrity":"sha512-wrQSJx/H0G44H+BzJkUWZ+WOYfGvWTx3SJWqlj9ARFNY3tcYP+ORgNAIpZ7QC33I+MBcMVG65WFgu2oeZvvUSA==","signatures":[{"sig":"MEYCIQDyPh2RBeFWFncGjs927ZUB9PrFPyF4um2JkURoTkV5bQIhAPOhER0dXRldc5+1lJIsYYGq3HO1yOSxoNKEZyiyaVXO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1C3CRA9TVsSAnZWagAAOnoP/i9BopFJDdsI5Nn8sj4A\nvGfYJxx7N6etqgIkjXMgclNeXWfNyIfBbjCD36rrjM5FMgYxvRsNy8gsqIka\nrzfMoZ6xafj/xUCp+e91FyR6LbIATMsWFgUd4XeZsDB4xsuUwlZq/yx0Dcvr\nMDGrLjF6JqA3PXi4ToUTZkWXjDWPhTY9qRbR+BUnEKJ7TdHfYMsf+jX9ODFX\ngZvEXeXXj0193ocCpIOFHwArLMCSfnahHyDjmW0ziv9hUmxuRMUg1TrCg5sq\nC75x3UiAhBlzKsoY8KEzUEVR6A8nvhbaV0/0IYtGvhmRB+qIbdxzmkDU9NrN\nlstx7fS/gn6U4TWdOn1BelfWttJOsDXZMweIfGtnarL94fyjb+0iAwPYITOX\nZm3QW9ZS+X5WXk9DACzE3RLSn/+8kJgTnVkWdK662aXdbQDLdAzwNdH0jjAK\n0/0MG4RXMOvYLI9yTy+6xIeGKHi4iPJH/PUXAjRDBSq4Tt7gwoppqdL6rUS5\niVm32fnmow57TsQWaGG8Rmkmeh0T0Qb8dKcj4QSC+zcU3Sgq88iKb5z+ggG6\nrU3wbGEftgiuVb0GO0kTKSb1+/yfiojX028lMZh5fKJF6PD2N3VA6FBRwJJV\n6/N3MQtqUKitI4D7x3VoON1ERbI3j2rqVvYDc95bMfHHQQW7aqKotB5qLh1p\nMMeg\r\n=xVI0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f041a48c9.0","@material/theme":"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/line-ripple_8.0.0-canary.f041a48c9.0_1596149942965_0.6145897403949918","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9576bbc6dca60dbde685ec04d5772a97ed525314","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fbb1381e1.0.tgz","fileCount":34,"integrity":"sha512-+KX0pQwoH0U3fxPFUbpo2GUdahqhrSowTwHxQZvaJA8zW+tvaBX2YXizgu3xbxs5ELMsWg2DhHFLPzh1o8z9UA==","signatures":[{"sig":"MEYCIQDaPNtMFS9o45vpBnh5QKL7R7piHFbc6v9MKsFAYQwMpgIhANV8ut9vTpZh+hZPtoTcCxczpn5sD22BHsROHuZ2Gd+i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD2rCRA9TVsSAnZWagAAOoIP/3zkifCYtpTgbv5njjlF\nmYWCQHS0oc1/chEC0Ya2vmM1JtRn4/jW4Np7zFgztI8hiLj/wzcdjcnrN0oB\nf0p/Io6bkfgijpPoD+KXdyl817R4sfrwnCeGKPczD5BFtPcqM5fUond9pJbP\n9ZipbTvYbxQ6VebayPdZYg0JFNfQejK5tNSYG40nswTbDbtW1aJPAP3j+jYr\nDLBwweQYALeehlOzj/g37vL2vlefAutx2LWCXfs5oULOBpDs5rz+9YjfLPxz\nCcjeSRwy9Y/GizTZupihIZ09/Ta8KddE1WEvooqDUSZiZ25YG11cVvmfyqOB\nai8+Yeh4rQZobdjJ12+I3JbI3ZDNFkiPXF7mNvfeZEKcW9/lH05EBQKfdkWI\npZOGKkN7lyYkYN7/7ocj4PRS7Q0XLQDhag04QlOsMml0HBFlvEF9NTCjKkN0\nx6OLfAOnHSNvt2NuqoAKF6c15qF3on23Pfwl6sz/othy9yI7dBuu2LyE5q3Q\n1ZqkO1NJnJOu1k1Bl6uThi7cQqZa8FeidpFspKXBeRmPGHRRLNxDNwpXXvXe\n4RmgMynfhDB4NrEDV96wUDWPQsOE8yBQsl9VYUk3AFQDREdU33gFfx8j/BHy\nimAFdG0ZJdCm/XUz+2OHzepHz6j8fgz/vcDJSPlQo0pVvWUcL30e0RL0bqiF\n43cF\r\n=qka4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fbb1381e1.0","@material/theme":"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/line-ripple_8.0.0-canary.fbb1381e1.0_1596210603115_0.7271597351270656","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/line-ripple","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7e0258dee314124dcdcb0ab38fbf82ffa2b4dbbd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.7f61d5785.0.tgz","fileCount":34,"integrity":"sha512-LibI3xC3U9p+v0aScQIhuf6VINu/OhMOHY9u9Hd2pwSBiyJC0OqfG3M39aek/fqhPpHPLNskp1XfYhAb+0aKmg==","signatures":[{"sig":"MEUCIAC1wPtOdS5kWujloi1WlrN2aqnbBdaSBhTKPsAiTWF0AiEAwOHyNB8CSgjPJJTUCH6rRkJggh09l4u/grJYUCPrbK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFNfCRA9TVsSAnZWagAAh34P/Rs1KMd2LXiR3BOFnmH+\n8XlfDE4Rjp1PB3DQIrRFK3zRgaYbzhNB09cAxr/aKUUJFIrIaMiSlTKLjrJO\n7RdRFup/b7StJGhfsKSxQi9+FmhWrloQ8I2cUUFosaF08BjfuZgz87B6oecH\n6ugO+XU0uSzQWz+mZJBV9ZwA8fdqHNoGbd3xFf6s4pXuiYbiFo312NceVASM\nkGUnbI1ym0WA2v3gRd4yTxa1N9PbBzb5+q/n53ftsh1vN6JexX6m1lmhWkYU\nTldOEpjG7Rtsm7HsX+ZwmQKwvpeUSlKuix24jAlaFyUg3OlAh7FpwV3HZmFL\n/E+cBoWzJrTN0871UA2coDr6utjQzc0r5ohRdqehwVFjdIb2olaKLkRLlAEB\n5a0jo0wKbFffSe2XyoQbiBk/8MC5dOGHQwFHUi5WFfOVkXs8WGLEvgjhaqHn\neJYbfdFmT1iv2iX9ap6Ze+CJ1l8YtxEx1BOqAPZnK7IXjusBOcGSEQE4bTTl\njELK7zXXudXsX+qweAtTOG+HXsUcyjBmy2utJEKBSKDCUvqEra1e35cYhigX\naRchhwbGLv981pQ3fruqITX0Z6Eygc8BWzBVP1uDLY+6+c14h8Hrn2htZWx3\nyq+71BvWD5Y7JVlO3w7KGHnA+8lWyJwhI7i8bVgfDEzSxpgWYwDc7i4ydrE7\ntj+Y\r\n=58Pm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7f61d5785.0","@material/theme":"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/line-ripple_8.0.0-canary.7f61d5785.0_1596216159286_0.5957794100955243","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b53c20723bc0b52fbc7470c00eda24c85bd25d8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e1bc84d10.0.tgz","fileCount":34,"integrity":"sha512-V05olvp1fV/lGpFdhnEQMzWCMOh6MBvf2qifFocYNICGwhQ/7lRrcVefd5vF9zo8DbVY1xUVFqWWCF5DmeoSHQ==","signatures":[{"sig":"MEYCIQCQnh2wieC1H6u0w4lG+B/d7DboVcC4zJBwPNJYNzxkngIhAIewOJX7TjZDsjYUXv+FziIeOC9ffrjee41M7trsSKFv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE5hCRA9TVsSAnZWagAA8QwQAJNQsJU4yjkIOaBvfy83\n1Clvw94Yq3Gvj0uEW5FihbuhRhivI00awFyPSR7jT9A61YyKUA+XU4glU85I\n4L5OYRQmWrnQB0Cy0fEgNfYJHHfqxveXvLHdcLl0Qy6VAVf0gpjYVDPkA6Kg\nzNaAoIG/1anA0C2PdjQbultL0rfahqX+Djy3Ax//MZwcNJbkr+ZSd7nkn7oQ\npRe4NnCTW8ql4t0MY9hzTo4J5BKUyVRjnfLqWDQnBOzFMwIjqsBN/58vtOPt\n5wwidBd8eS02LdtEAXgNkZ0/7CE/MdUnXKrt90B5YfU81cAqxgzODioslu7a\niP9qk5rJ2CHJmlG5Lkg3BHZFZbSAzGIR+BwfX7gGCOqBOdH1sOexHvr67pKJ\nVVH9QgYSb9HSNB5zJjNAagnVa/Kzuj8C1IQUS/MkA7vvxFrgZRT6oI+I/GYZ\nY5I68azcqdgxp2Q98px0VfhCSdvZIgRITOUDAiP2pAiVPlEHuYGvnjPaFOO1\ngVbrDnkfH8ZANWzb0w9sWYEcfYqtoSRVS2vxg4jDrfBie3uaCCAhPf6VLZDZ\nSKsG1LG9mk29trGjgrZIOX5ubt9GK/VQnri4aV3zNWWD7geRgXADV/91tl00\n7GjcmMAfZm+GJz7Yl+k3Bwhro8DpjN7IZV7XVYAC8mQiK8V566qrkh/eB/rA\nhE6u\r\n=i3Q8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"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/line-ripple_8.0.0-canary.e1bc84d10.0_1596477025182_0.9648447832338192","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/line-ripple","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"425a54f520ed0462730b08815752c435df541f5c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.096a7a066.0.tgz","fileCount":34,"integrity":"sha512-7Sefq4e5wAZbK75tZ3NaMVtvtAPO34NwZIOeTSf9NAdqRanoYDUae2rLBo4i72jOTtGat8qegbIJDoNxRF8+BA==","signatures":[{"sig":"MEUCIQDlbEQmQj7OfUzKqAmiJh3nd1yTqUCQT55Gikl4dOKEAAIgKNcIunCSSwAEOQi/C1WBgIvPLg2EO3aELZEokD6lvMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8GCRA9TVsSAnZWagAA5CQP/2vEme/tlcYDUq0NlADh\nwLL69LsopLruh9JmfzD6KzKfI2jsbjfz3f37drgbS2i/iBMUfnyXhxTFEfE5\nHbubLAGxXaK5Rhlb2g5S08twinXMZcq+Oj4qRmbV/yNx5IcE5SJ0CGSxlYbR\nCWwRiH+6Y3POK9IimYC3vOXsOc3gw8wJc/GYY+xJBa4Nsk2IOfMFlvAhio5c\nyHnzw82GJozRdXmJRRYnqSByYgxmp2FL8GvcMvC9y/6iQSDckNGw++Vtpwg8\nWvTQDxDCKbqKaE16v7PBe1mFEGe20ZSqzVrPLC09yqquzVNmZFe1eDag21Xg\ni9+0n6xsRDSv8xTOBE3BuEnetqoWQ3broBTqC6bFi0pVtWvGf4hzk9+oVGdn\nv5ySo7BSxzlqLidt0bMgRmwpg01HOuyQBZAW0ivo1ga+abWLCAu84OivBAlB\nrdxsch3alQybWXjXwDDOtd3oyOisWKL0OexDt4tuUdrD3ioJeamndMw6Ma5E\nUNqB6ZRMlg04382J/qrJATzB/FcIBtBPLENUP+ipFgP72b4rBcH9KmvgjSQU\norzpnynB72lVRPMU+F3kdNYnZaE9O47GMf79oAyqGii9G/PVCE+lKPxaXh2l\n28GaDHBaNST/lpWDrCLGQhGIo5vKgzBfwIFNQYwdTKPIZzq4Jfc41XT/jq5E\nox4V\r\n=7cRb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"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/line-ripple_8.0.0-canary.096a7a066.0_1596477189849_0.3028791755823601","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9bcee09d4eca4ad83321ce1c1e225afe8977fe39","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":34,"integrity":"sha512-hAfwbZphGsiye2RYoVcsBwIM3MPU1/r+MgWTJChMDx64WvF2inRoqA90easWm918eJGCKJFDldrtdiFR0y2lyA==","signatures":[{"sig":"MEUCIQCW6aYdrin12+Ell9EES3Cf/tcISZ7samJYlh2IKbNwDwIgFenK97zy/5eL6bOAL9eTcM4HRJLYB2oIXx/E6qqACtY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8WCRA9TVsSAnZWagAANoIQAJaXiKw/PIYUtFHMNf31\nc5sLGaOQcCrXG1aJWuR0b5jXLK5vnUybjMHOn9Tf3RceaVS5Xyd1L/SvhQma\nflIQuZjkkda98x4UihjwEQPMsqXGuNaTkw7nUhkbz0i8Yzo1/j8E32BE6oWu\nDNxjcC19msPB9PEd7ONtrSkquHL6FQNSixtcJrbOZ1K1aLPN8iyk3+m4yDdf\nnRu6baWPoZsCKHdLI0uSr46W3YswI2pXlgqrdG7iXx+dn5kuavav76u8bA5g\n+dXcmzFd6ORLZFuIDNps3u7aKOoQazZ1s+xnhCVpJqi8YKGmP2+4ysrahyFc\nlstnXslkpuxF852MYYurquL7u+Vd8Dbr9V74DbzVg+Ush4d3sPYdeehzherH\n4+vczPz1GZQ0fYAGGzT9vEEYdkLkeDShozig5kVFk9z6/7rg5RCVP0FKWBKd\nlWrz9zOe4jDbTynneyCF2LQhW++4ZYKPoNyQTsyNN/dh9usXoYFTDzRpLBxO\nJNfRwy5vp+C6zmyCu3jnxFLTCTlJd0im8gj+h4lRczNNhhWoOePTmyC4FfHt\nJQPQjitcimJagBJ/KjYnOE471kwz96noYgwW5CzYVacXNZ2beY3dA79/lspg\nycb+wVcMomMqa/twlnbi81YwuJuYs2KS0NzC4W3hcJUmdQrXd0t/IsmvOQrX\n2KAH\r\n=jh6c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"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/line-ripple_8.0.0-canary.aa3a3e5a4.0_1596477205599_0.0013699317628592667","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8d6f44b9d53f71f83a1d1498ab25b0385c03479b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5903d39af.0.tgz","fileCount":34,"integrity":"sha512-yqM/pvYTSpz3rNvEbAb258uR2ErAWKN+9vxN0rwkZGSaH2Mq7ya1UPuyoBzUj2RV5UEbYpEW8EhYm1q736VYaQ==","signatures":[{"sig":"MEUCIQCD91VPAX7dFV05tMhiE33l8b0VNuwtKEhE+k3f67X7cAIgOSQJXWiW2USeye1Ze8SKBw7AGAsg48sYWthO4zN2R+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE8sCRA9TVsSAnZWagAAI4cQAINT287kdmCc1XfVJ3m+\nmkZt1u55wMfC6CjioAsQbKz6F28DLPZ8dPGe8hFXjPIEvkBisLtYDfPa/Iny\njQNbAMbNsml+CbrRWHFedAmny1ZiYI6Jk9SQZNvXGgm+zm+XHgXOUYbkpLra\nlYuSvBgVEJRWcMyhV0xKkLGXn+u/sf4hiIR2aPkS3P8/kUasQz86fW7Dy9hA\nC/MM1Oq5qMg1l6046opNFheXiNL8jS45ZbxMSUoD+IYpfFnIGsj6eHvVIlvC\nFqh7o07KVf1zpt7QQDyiRSU3kknwGzDNSkLSJPYGj+HtYx88p+08pLToD9rk\nWBMY0/6GEfwGp+Wc2c6rBRe5Vjv4xzgKyaAqK3e6dX6tbsFOkG2lNAL52AsM\n4zSiycl64pwp5pMRQkaM4RCHJGwT3RPuTtfR4fX8FIdWg//JUe8v8Mb5FaCf\n1cqLp4jAoBe1ZfyvidhK68cQxQ4L7S90ZHqDTOTrszpJdyCYS3Ec4fu0466a\nbA6oVcYgSI/d/mJKI6oijbx4n0QNupAGe2sdjoxOIUtN7/yzokUnt2oRtZbS\nRs10ZSpSA7tV63RgGB2b0/r7Z7WD8q83RvUk5LNsdFqpGQbN1hPBwLKjeTht\nt7S/JF8rpORQ9WjEVvVhfM93q2odADmECuWXf0Vx3/F7riCckEAg4TFJOORp\nIYTh\r\n=BmVh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"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/line-ripple_8.0.0-canary.5903d39af.0_1596477227979_0.34627347951413956","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/line-ripple","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0389da476e501ea5561063bbbd4276da769d10a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.72258f898.0.tgz","fileCount":34,"integrity":"sha512-E3UtjpJquCdpkHFNTroYbyyNSs/u8azeCCrGV7SpwH9Jj727EoY2wLt1DceHtjxzwwTQNBL7J3ZydsCIHRdObw==","signatures":[{"sig":"MEUCIQCn25p382ZpdK3hj9Jx+noaiQb+0oM+wxviHTm7ImYS3QIgKIZq1R3cImUGOxV/yVKcxH0hA6Z1Fo+K3ET6AKe+yXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLcJCRA9TVsSAnZWagAAkOwQAJZiY0p6Kjl1Ecic8NI7\nHujtDMBsF5BZiT9pN/QwWrnot1gUpU5truQ8rEJWce7mWJyrUkNPS01llrPG\nrqCf8nv+jT9osVqI8ehSVY7XeBwFWsRa/hFi6QgFZkhx/+YcQ1pjoX+TKP/t\nlsnZFP0rPLB0P2bJMBHa1N1XQnIpuSalgT4m39c5gx7PsBlb5znuRx9rh+wn\nND3TUQYi2jjii9MXEHDfHwXO1/BLksck/TYvdFk6w4eN72+hwHwth802n2Vf\n1Cr5Ckskguy7V9qhBwGdT8VXTiJjcnmxr83012wc2qdYi6Wmpxez3zsr9jCi\nsRLureXeshjOSqjesdzUaPQ2h+8xxP4vOte1f6BzlFNeiftKKlz4g+vMgDU/\n7MqJhUfbQpWTgnhWU8CZA/OhZiPyEVRxKOi2Dy20aBvr2I/jUhciWrXxjw6y\nguv3MglNoEooBCfsVtOeKT+sEvylbaqToJsPZ7PtHJQoYU0aMYRKdNL+pVeI\nnoXExJWk8lI/UKc5QxpCcV59IIY962mEgym+8CoceJgLEnXit2yRT5Druxxj\nGBJvZHJI7BiLM2dcTWYiEgTnQ6FqQBXEfTqldWkVpBFVC+AplCl5ChJOlL9+\nDksJc+5BKrhWLHFs2F6N+Xu2xFuZZTka9VRZU162U8R2zFaqVbetCF5KCHBz\n6YlF\r\n=4bcK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"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/line-ripple_8.0.0-canary.72258f898.0_1596503816891_0.9767169877243933","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"59bd8c14dcddad995d7d5a22ab0c39aa7010b20d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.1b44b43c8.0.tgz","fileCount":34,"integrity":"sha512-rdV8EqxavQ4aK1fm/2Dn6Y/xjyC9yq5Weo3+E0BEqVuItRT3RncHO2I9CoOLzyOeoikUR7aD/4UfF2DV/5uoAw==","signatures":[{"sig":"MEUCID5i9Ms5And1KdrwHHIskaZazuOhXw4VulGELdqrRk7kAiEAyC+rW6zBHr3K5BfQppRNPF6q2HhZm59lsdUNb6+ceio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZE0CRA9TVsSAnZWagAAJ0QP/R9IkeCDfC/QhVOsVb65\npdQt0ckR7muA4AUzfVTOAd8aTeJEgUewCPF7O+ntkptlMNzntIUTcSimzoo1\nm3xIgTWyIwL/Xi2JaM8gmsDY2lhvB7B3/Al9apz3M+6soorG1R/k2lst2XqH\nJwXDTEU7KXYnCzTqYcy1XUrkDf5Vljkmi1dRfzWeEiCr6ULnRBUnsC3vSUfJ\nQYHZckQSjj7XEQ8wx88f7QkZX38w+g210EDVgWIvVWfspBHopUhbem07qjgg\nLL/SKlWDPWLacYsPTCnXbFV5dQJkodTrbM8C53H4M3bmdlM127UwECgpgFgl\nr4Ir9LQ2WybhsaygFszbS+jrftH+jtPqEuh1AjmejZpqU/zP0CVDBdhN0LD1\ngoGD16yfR9i+8DpUg1OyXvvgr0zUQjp4nbb3PVQrXtK0Ty3yld4aWO07tETe\n5OQCfpSmqxTsK4c2R/mxR2ilzXB37NbQsyKRC+BfOjdzJddDqmawIUewXSA3\np/oWq8k0/w4NHcoGu/o9im//QJlbNFdl86v6KAhbehdPIRjx1s9MvLg/ErED\n77u4RniMafNjgs/5mOviCXfwDeLWwfj5WLeoH/hbFi0zhcwYhivPmzmp5bJy\nzkX9WVxExaYm+2cuwLu6oCTj6Z33JxHvtzAjK+kEBY7WrWcWRnRt6lvOHHLf\n1k3i\r\n=xhsi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"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/line-ripple_8.0.0-canary.1b44b43c8.0_1596559668297_0.34447278751605115","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"363415eb07612d56914ba71e83f98162bc35cce3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":34,"integrity":"sha512-L0X+JkzJXT7jolOi+S3Lw1NCSDvYPW1VeOfk0/PCFPDU63gdWn2CixRVVyqDAQWCagy9VTUdX9BBeO19q6Kurg==","signatures":[{"sig":"MEUCIQCu2rzgHgUHqY2Ar3n109zhkWuRiEUb2sFHRlN/yf4lwAIgNtFkaYQRBErQpvdE/kClaFZGyfPP8fav0G6Pk3hwFq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcPWCRA9TVsSAnZWagAAy/4P/0FuxV6uy3BWqzax1EPM\n3d7Bqvj9D2nJ4X/qBYW7x3evD3y8um/JNmtOSMVS6xhDOBYSiekVytIxjBlT\n7c0d7s8Hb1Qv9NwXmS0KcKtRTETPt8Ztiy5FpyA6u9m3xtJNBJsX5Dhm+rZg\nzJWS0DENCP6gEI92yrrmnVR/NHDn4CQcTCyc5NHtJKLtyVVl4MDlLX2yPPZF\nK1mD1UBBoUPUw/cUJTAQEAhMPd/pMKfBGnXwfaENe020QFWzUFOP1qpukXDf\noMxS7CMHuwTclwm+ttPCrs0IMCmFp++6X9QfvxXdfkkp+UNLUHJVF+wtougM\nRfjKcbARaID3jxBaukdgGWQ4i7AGtcPjXXrvVfNHlKnnghGhv82jxrfcoGZD\nSBrB4lozo2pjjwse0xAobeD9oMsHuE5YN5ByrNEZyzDVIvFqx4nuw4Xr+9Za\nK81xxJ8lHhpch1p5fqkdX23LrweTZ2/NjzTj90vQ74r2HzLk/7m72eigSlAP\nF6Wn2/afkT1ysamicTbROOcTUN/qiSgV1jPU6YM2okHeCMD8ft0HI+UEAJs1\n/XtUgi/8YqvrggyvBTM7jKtQjYjFsIbdjO1NtvPCKXIOu+49Nur/aA6lZAql\nh8cgv5v/P4N4X+3/2R4Go2KuQ+C8v+gWsYlJ1hCNQRmKxoS1SSoB1CIvuiXR\nBNF4\r\n=+rbK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"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/line-ripple_8.0.0-canary.e9d2e2f96.0_1596572629788_0.30540317264946615","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f762d8b55cf7781ad9fa1b48f89771790bf40038","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b9dff0a19.0.tgz","fileCount":34,"integrity":"sha512-b1JzZ/Odts+9mKaARsrlyxf5vmiMrEkTccg55q5fB2ndJfG8RwubCRut8QLtY1IA/RdfUjPxwFS2QQMMuc2sRQ==","signatures":[{"sig":"MEYCIQCr2xTSTj6oEn3Vf08tFz+1ZaPWVmy8JLv/fPW9Z8VVUQIhAIVURjMXj8HNnRZTaBdSvGivyZ3uF8PwpmaMOyNsdlU2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiwLCRA9TVsSAnZWagAAjkkP/jMxCDA3ixpgCms9R/N6\n+YRxAirs9sr1mPwFI6zb4enuncvXLFLyfLAacXxYMgKo+XBJssWh/T4b7ruP\n+RDxEpzpMzaBOYdWN7xEqMEqhZb6tZ07qjOshRjCdtxBdCWXv0TzEd7XJ1x9\niFB/lG3MPOhaivOh7vCYcS0Nx2yzHs0LBLxN1v9ykHMnSgNehevYXiypTw3/\nFSAnkJMCppstPE5dA2TPLDzACU3uxjQMAXRtota/XUdgRH25nj/takXsqizM\na1xUFUcrU9FkmbI0iQepRAv+f2PhSF/CAyXB8QX709/7Ho5PSNJnS7GqlhBD\ne2mkdz1zlnWG2hsSRupdvfg4j4XkSLsphAex0dBmcaxBRAnu0wgQ+YqR840n\nqVJKqBHXgPZjmf4rKB3qNoTdFGSFyh9qgxQ9ULjIyJZatK0AeMYm0IjD9KyK\nhqgXOpJsqo/UP3nisgV7pBNG/QYeCcMcqfdJQdmmrQzqFZ+BwID3r7m7S0G3\n/ElaKLuR9AnzKM98GxLy2EkE+DtoDFAbNczB5Em7HTwan/N/ih1ILu8QXa7+\nYOEqqUKf8pxL317mSMohB7xJ0Yl3vjbjLbpSuyvp27NgW3Pi9ZMy4fDI6zpc\nZjNBN7zp+mFN/JoxhDnfBTz0FyHmnYgzDFA/YWgxU8GhaqUVps2/f5ys58s0\nTkcX\r\n=JI0b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"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/line-ripple_8.0.0-canary.b9dff0a19.0_1596599307388_0.3461162899835073","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"819cc555d23a46e6ad9f8480632fb9b04a8be10c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2bd09a706.0.tgz","fileCount":34,"integrity":"sha512-vE05B1ZHb3f8J9pKCcftPSTBa9+GqnH3E3IJ51pW+KKqopySzI8k1w7Il1uB5S2ADaCgn3d4FrrnJmKxhxxZ+w==","signatures":[{"sig":"MEQCIEmgZ8Wd5Q828FM75PHVI2DXW3xSkFzeQNGD0zr7gD43AiBc1ma1M7zP2gGE1L7mbFbrYjpbMQIOfi8dfONjJ2mZAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi01CRA9TVsSAnZWagAA/JcQAJZsKuTodi4hD444KxuE\ne7klHBHamezPhhfq3A8Pbb0jzMYFaDGADSKf+p217ryvwMsaCPLRixU5ENih\nc/ohZgGLpZxYzdz6O8ud9u/xkW05+wu5HRSuPeqIJ6hJemWBGhC6RMbHuSja\nwakha7pFcPpm5WxKM+YoPb/dVIgmaZUe751Uf+1PZGt7eg4InFbNtV1gBAJc\n79RxjqczJBmjiYwaGiKzB/sFl3eUNWFEuRo2Go7hjmSgzA7OHKm6V+zLapHh\nwGxcZyh01bhMv7JQhs6tIOzIshgRlS2pS6qnoVbBzIdzyPf41IrunFw4k70a\n4cJwOmVTY/JJiAfmPxTnq+jzzv1fdgeNsbLr9BxzdGk2PAbyFKtI652xX8ye\nwuxGCtinevBF8YuwIdESJLhMFtAo+7dgFLhH265Vi8yoTNaN/d/cuDUUTLcQ\nA6m1ncQs7iXHoI4UMl2psK24m2KWpYGOHS+oU+KsLydRnPEve8vePVNxnp1u\n9sK+Sc8LPuTl7yXyIdYeptoCcbQaZ2T6mXBlDryGsLOS91S+DlaMrhu8XFKp\nRj0xZiAu112uqQNOj16hJaFbUXaS7iw7iSXQ6w8nz/kA8y1C6EFWItwa31ue\nx9rcsFAaPEMN+5zt72J7IghqfkpbUcqvFASQA+pqGI9nZDfaa9cgzJphtP9p\nZ5Sx\r\n=pc4S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"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/line-ripple_8.0.0-canary.2bd09a706.0_1596599604691_0.09600919828960985","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6da9375176c002bd5416448e24d16250da4ceddd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e0560522f.0.tgz","fileCount":34,"integrity":"sha512-71j+dW7xj/Tcps0fnjzaaoPYswk0vJTSyyWlNeLpFdgGIHALyBeGKXvJUAKoFTRYIg9ffVInG7b1hKUNSEUQWw==","signatures":[{"sig":"MEUCIQDJKXC3nlDgc+c4ITxF3RC0fvP3OdIQDfjZtscEtNferwIgA5FTGcYpUCjKpcoauK45FSzyrBXQHq4lzEQVOTdMCDE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuoTCRA9TVsSAnZWagAAMQ8P/RS9rSNDk3RfL1QtAO4k\n+Ka9cx1IfjJoPcDhGDGT+wcdXjRWRpytFteqEgozS88zzMckCiIjItJY10m7\nYloypN692oIhdEYJsEoQ3daaSK6XIQ3Cq1ALiL88csWVJBidotO3o8P+aOAb\n1zwlM9dhJPA7J77TzyeLCbY3yCuBBewfScAiPIXypBhrnm2fXdohPR3lU+wk\nkYinuSiQ7Lwg0REs3Jlw+NhPYJtf0UsynE8DtqjoU0g1a8yNCCIz5IXzfXzA\nHhyk93C33b2cgSFUdz0cHE5uUPLv+pwgcqMuz0mhNhfBxOp1bGWjdoQP8eVe\nhstXv86aNnIfq98PF14xtvQRi8sWlsymoxQlDy/+MjLa2KokMhJt4gAH4qlR\nhH7PbvJIycnBZEn7w5l6QuMVG9q4/jLdaV0aN9FZZD+HMNnAaeneaVI88mJm\nyFl2DtXHl1xFknyTntgkjEMJEZPmJN/uefNPNK0lsgSpidGqPbEIQBG4LntI\nArOAJMqW2Zw5m3OOUqkXZhd6OZpKCPv/+BKuZeYKSzELDT2jiMfNOtKR2Apv\nDfs20g8LQkB0gGt5K3nCfXrz2m+0xO868scq426B3ojmt3bddD4H3OXoteAs\nMC+BeBdNdu23xkLVg4bVH2Jf9L3fxvO3L0qYVI94h4XCRqHkqQ4NDmU2xHaD\nypYv\r\n=uLSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"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/line-ripple_8.0.0-canary.e0560522f.0_1596647955444_0.44397686973356976","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/line-ripple","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da03ecfd95aea34ece583adfa214349dcfaf50c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":34,"integrity":"sha512-uElfUamcOIoMuiv6IFXka8E4VvFZdHY3l9nvJp0PpiYB+ZgEq6xjCmEzsrk7a0WiRV/y3AL3RklDSPszC6kWIg==","signatures":[{"sig":"MEQCIHzNJ2IeadStzmWk+qOrPK/GlniavC7biZgNk+ppICHCAiBlzm6uQH/NY7QCM4PRrSMjlBSWvkXhJdD3j0XHzb9JOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu60CRA9TVsSAnZWagAAywEP/R3Vb2W8FwkbXTEpJRo4\nwN0iKdcCrWpASt6fVITP2kf05VsNAmhWxNSNN/sKe2ejvryglvEz4wD6jeWW\nbN4qhYdr11slAaqYZRwXaerkNIWPUDlvcDeV9H0P6ZZH9MzYk3J13wbL+4I8\nznrBnGCyU65mIJijS2fle6bwqkLCTURFVvpP9OaJ7mpPZybGSH26N16zpECe\nhg7vlIjnqnH8ZYySJpv9OhbdbLGh8NXI2EhTOR22mlDm/TzzqtMTwWa0gP8N\nvG7g/ZENq1Eh69An0dwwm91TUoSBl7o93V0e84TlIo0EpbbMQ+KsxPhWlSZ+\nXmuZmkZ1EOszAtjQFv6bY7OQ4IHIQ7SeqPGTG90sPbECII5wfqP/a+P3s9Zo\nwvRB38+3qmXwbkUrSwhWy/wEzCSP5ASnFvgOpP1RRV12ETkh4IHFhwZlmGdG\nLW8eFeWGbOYz607HHl3BwmZ9Dbx7g7OxDv6Q4sAxh0n6iQVGp7LRef5u9QaG\n559zaHgjqYTxu5WgWT3PYyBYM1roU9iBFg72fS7y38mD1vxUp0YT76mjTLg9\nMMiebuevyOVBiqNa73IjoQKDXjKWh8/lBwkHlNonvK9XNmzbCLR8XpZp5YRE\nZsPRxJPW4amEAxuN/Juyl8Zw4KKipM8o1HGLbv/q302VbFGRDcZl/NqGizEL\nvpo/\r\n=tOhr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"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/line-ripple_8.0.0-canary.08ca4d0ec.0_1596649140355_0.6939884466126147","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d2c6d928cb5e9af0a45ff4efb6ea507cfa6cb76","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.08090126b.0.tgz","fileCount":34,"integrity":"sha512-L3cS0CCBuvVHI7Max5v+LxFYwllYjNTQIgmFOkUOtHE1tYlQYmJrQTAIwk4ayIsfKN1A296npL0hHoAfo9wa8w==","signatures":[{"sig":"MEYCIQCIjGPq2Rgsn5C71MUllBRCQpXHDGsjruUf+mjwUSvVCAIhANwWILSQC0Okxgqx2Yxsc/sJc+XTvzXUfRQy8Zmxjywp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFrACRA9TVsSAnZWagAAy6sP/Rr8zy3wEpADbFxGOBux\n3uay4kwbaqXKzkGS3v/LhWd5qnabGdXW64kuRqtf9zjhIHufRPeKoSp8guVx\nJrqbs82GJcIeuGqPcmu0yUVgo4Yn4lU514c0cYhptUsbzBMGyeYBpamXD7A4\ntKm16hWjfUlT55fobnmWINOqFzfVLNtIEd9T+/5KsPP/9ZQzCzmXGI1kcY/N\nXEHN6IKKH5Q1iCUFhbPh08LUmRncIIRVXwCwZ8QKkhRZyyD87b4EjlWSRJuC\nbR+C3nmP2svtwXNouLI1pa8blA+Tb2yWsbhuwu8DQtBhMWYL0xryoV9Ht9Va\nDZxfdh4mndVqTWTLzAAFNSZTL5jdTvVO87TKQbmdUzbgHnLcb4OPgcrXnaIv\n1MOM0KFWRTKs1IsPR3iPq0NJX09xEiSb1e9evI6usvtyvrUehS/Ilbo0eYt7\nqOaEctcd3Zz3PHVrlBbHJTajGJygDcZqIO2saU/V6025kFKAe6PrKAw5aBEF\nUygyzDryBl+eeMfHx0a77iaackKdOBtfjniOWLTc+DFqj9KSZJF0/BOwrxGZ\niDt01Oy+YeRBPB+757DgZw8AR+W5EO6woonboazumgc2kIGN2eRBq3Q+cgoX\nGHiyeZ8Rd2VKPj6xhYMJa2wy7CB0vmtcyX0XG/pIkBFnfsH5rBpyVO6qMUBN\nm0BZ\r\n=e/wd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"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/line-ripple_8.0.0-canary.08090126b.0_1596742335601_0.6586337625729615","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e67554d94a349ff4d62b176ecf9401acf745a45b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":34,"integrity":"sha512-y49038L+MT7DUJcvSWdLuYJVoFsGOVItNXgzQn+AxNl0EACHN513QdrthyP0J9+glTAnYTOiM+eNQWrTWiRJeA==","signatures":[{"sig":"MEQCIG37QKewvtaCTzBoLe/+DNLbRgGQszkqblaJ1KJQR3ajAiA/qoOZOknHExBSidqGQ6Kzqmuq2ZUDb4Czigqc5bFGYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHruCRA9TVsSAnZWagAAmDkP/39veckBEg4qITTguRQ7\nKK+eboLW2pCs4kN/OFwOPtnayfIPa4drKxW6HOLIixFHpPhrgNpfJ6AIeMyE\nVB5mHAtKTA6sR4lwhl9osDt4EdGpX3QXW73bu4Wg7BAhUFbhGJO8fLNC0Iww\nY2oOXmX/3pnLjs+3x7NAE1xGBH4s+0G30u1ioOFIbt1Bk8Hz2pWDYE1+u/DK\nY5o1eV4C0UVP4G+XbAT150m2EffBF/dHe2nrWRNAzB2EbTRrll+WWuMnRQJi\n0blqEaF673fIHVl4Mtg2iC7ShSrMQig6JhbPdYsy/YAKukPrUVUPyV/6eX+W\nGG1Yr5z7OZVAZm66TQSsw19PbsFznAYQMOkf+uwWoNN3Xb5teCX3AEcOtnRL\nOLTE/ePoq9iDrbsGwoWwICxRr50/qAsCSOpkw5g1yjWaBRvZXmXJbGuAxUBS\n3iHKZGs18TnSY8AV9hEHzjjBGwLq6pc1BGIf2tFcMd76s6TfLTOEZncwGWKH\nLl5IztXvArFr07wyRxoqZTf6k0w6OF1Iy46Dt0o0/vqJSoI7Xp+7JkQGoIJy\nw9Y+pm1Ii1nQ9Rqbdt98pkcJSdq4DdJ1mIoWk7rS3nTBOdzmesAb603P7aGB\nRTMjBnRQmMQbLpdqRWFRziHrq1+V2MhlqUXuv1BSqCAuEnaKxB82iUcNDnLr\njOQy\r\n=eURo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"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/line-ripple_8.0.0-canary.e8bf5b2ac.0_1596750573700_0.3083928156983491","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"950c66bf61d2bdd4194a673b3d09ea8fffafe2c2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e3b746208.0.tgz","fileCount":34,"integrity":"sha512-4LR1bpEan192AY0i6vd40lxWAK6AS2tmGLrvlFt1pPU39SmWNMfnwY6wNH6Mc5fEe35XYbUgbhK3kUKsCol+NQ==","signatures":[{"sig":"MEUCIG8Gd9d3pUgFeaKGA+C3kxgTiXcbQ8WQ952gO2pj8aqVAiEA8N1PMl6e3Lmd7KdqxGAe6cAEs1DfdHeoRbbcAc49+qs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIOJCRA9TVsSAnZWagAAmR0P+wSn5yD+B61xX29myMwS\na5Ym4S2s1dyiB/4NTtBvtgq0FkY3S2n0BTD5g++TaENTWmtli6foY7wX+Al9\nmNRrE8Pvfpe6oqRLAMqgMachThiqs4NcTlCzos1F7rZNva4lh7yS2Tlu0xZ9\n2bLaCaIETwlPpPvO6d69QwzSMpjHWLYoEGlmBOLGHl6KFMM2L+tnr/PeTSpH\nxd6Dti14Q0sec6Dypsz5q2kTFDll6RCrJlbZYpANWKG8qTdb+8FuZFVKXptA\ns0cnySqky/SNmfGGYMiUBMb/cm6zyNuLt7NUADIPIFrFKVxmwV9HukISYnLg\nHbGdlasT2pMUBkkb7i0XTE6r2vyR0cK/zAg65Fk0MegqwdA757zJFf5Ki26R\np/JSt3oqQZwHdvvsShITKZr92bqwyt5nKpcYbmndY8wmwXmApr6n4Zq/SYaF\ngyBMIpCTkhTlaR55hi/QlMazGyVHdwIW8jv1xkLmhmeMY0dM3rf+sNi/dyez\nxDUbkHfLu5javbyWJkA+Nn87WINqP5AuVIPjz4HTMxC80OqR5taaQF4p6s/j\n2YUTRTwnQKX/DBiMjhH1zAXB6p6rVetyXuQ4YEYzblMzd6oPA2yCyVPLxvVB\nAfpL2j8P/6QrT7o5uUKUY+0fpb5t76dlUJGF+cu2vyoRhR5ZWexs6QOodI2V\nPUZr\r\n=uxnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"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/line-ripple_8.0.0-canary.e3b746208.0_1596752777476_0.7337335319162104","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/line-ripple","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4d8e9f8473e11f7102ba9bd7e8a8c380322d2aac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.96a640534.0.tgz","fileCount":34,"integrity":"sha512-y5Uc897BE0MQudUPfKo3L5xFsMhabgFV5AyOTst+pR+znuQ6Mo3d/neRSqffMfyn26eMqHcf6uDo5rVqTYUUMw==","signatures":[{"sig":"MEUCIQDxuTbOpckWdeBZP/DaI0pCd37N8nnacF2y5usT9Oj1nQIgRX7P2U1zkcNrAi4Bl+gu1NOVAeNjYJkmYedNokZ4uLY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIcBCRA9TVsSAnZWagAACTwP/2pYSlFigtkjBXe99/ir\nxl3MD88a4Us44NahyubuUOiVQDkH0uxHdBHzv2nwMQ6gkWr0POCvrUH+EG4b\nZvRU3T7uC1QDqV5GDRc+WYTLOYAfKjb7rjOnrC/lWgdNEsBlRKd9XD0uatXa\njcYUJH8j/xySpfGtD77mzBDv39GDPUBhzq4xV40jQ6sdRJpSBqOGdrq1jVUs\nvRH1vG0FoL8wPB7sy/DOxZL3nkgJ4raN8jtYWoeRWHpD1kv8+y8xKtMNvH2h\nA7Zghga6URYC3jse6wmBblR0sh/7Fg9Lq9FCDejVYiq5elnoJiyiE/vvXJ81\nNCM/W7PZeW2uhuX7k7n4W6cq9N7dQrU7GkMm6r9F/0QPzLZ7SW9AtxF1YLeF\n0OVNl1hpIbeQ8ygDAdRf6aPYGeaq5H+mAs5IQfx2mupgLLI7n/82nPgmcOcz\nZxzwhAqc6FvF5B+utjPFLuWTpqHlSSSWrVKmr2J6uL9MZSH+rUF6K696TEPP\ncsWyQDTmQXQEAlC0ABlNS38KT6cuqSb19btGCgzc4f4g2HN9gYQIjo1VcHfx\nbveHWujAmOgspYw80dCKEzZ1HDlvuwdcnHQZFWig77I25pPYLlg+yXWKZhGN\nDyhCv5jYwe45CJyCeKAZCRudV2syukGj1DAMT18FL6b4Lv4NTRPF3ZCxiL/8\nCnsR\r\n=QcYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"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/line-ripple_8.0.0-canary.96a640534.0_1596753664948_0.16668963483005306","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/line-ripple","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"40d1243b85f5f17f8046996448d5edb7e4296edf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.9f9aac825.0.tgz","fileCount":34,"integrity":"sha512-IGKE/o1/AvXPzabOBGNXtcmMp4pW37xwyIWrAJjhF5gC8+e3YHERHhpdzei/AERud4s+ScGiH3ZN+EPDjByQHA==","signatures":[{"sig":"MEYCIQCT4LAZTEmmi+eqCu22jmmOtgMuy/axLFLOVh4cO5KI0gIhAJrL1Zk/2qUpL1zpUCv6Kaxnhf6AEMJ5chUKc09OJoLZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb6yCRA9TVsSAnZWagAAZ0AP+QD2L1R5znPCWqWo2PnN\n/Ng/qI7hAhNmyraZeKxeDm3q+Z81BkrQ9zHvKjx/APS+dHlOV3UJDr7i+wss\nUhLVlCGUpH0fPh8RdYUdXVClyp+zZwNA6sqfn+vvUHy7Zpeq5bUwyi0dxDyh\nd0r1g/RjJyKEeEWwPTyV6iNWyRyJp7ZVSeBDN5fZiYh4hvoDkeCwvTnRH6az\nKLXecV+zktaUjw0Xn5K/r54ZciB0HEtFiKYfhMSpRQEhjKnKmxXZ1V40SRP2\n/5GMTes2i6C4lRAQ1wEb3yUe7pydeeS3oligKb70OnSUpB73m+a2s818kGgp\nkOCd22OSk9yittTOcKtX48P42p3u2IHqI7/LI9F6LM8c8tDf8DvZVTLeq4vk\nbD5OkhfVk7bijDhg/j25l4RZntFl4z7FAPdm3B42ki3lz7peWd6IrKneyFRh\nbFszriB10VjlEz7+ySlAZB6ntUsxy5haHYoerNDoz6TtPfa4OqDoIp/F8SXX\n5+0B0z+HrsxRNFDjIdtJKSjndgWw15SlvdRpMu7xIVVFbmBzGVPF02OHnfTp\nwOw832TvUHuHRHHkQ5S6/HE3zVO0AGtv6MlMWeKEKaD+J4ALapJqs3bobkuv\nGsAxOJ8qNXSvkAjHXsB90dC3RyR14YRgkkgws+Kx3hGOU7tB63WuWAhvxG8O\nGpK0\r\n=GCqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"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/line-ripple_8.0.0-canary.9f9aac825.0_1596833457749_0.8459860456470698","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e57e9c224bb4c85b880911daef66afa63e8bb2e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fc65fd00b.0.tgz","fileCount":34,"integrity":"sha512-XXP3KXkII35i64ksx2wxgGDhT24V8VtRgYgCHah9jKKyyWa3dq3ucqaOk4WPv0J95lLYw7/LDKGKTHkGYrmgSg==","signatures":[{"sig":"MEYCIQDxo0dBpdW268uyzJJjSANvH7TsXGVfVq/TrjxFOm9uYwIhAIg9r9WPpYEN4dGXvqOskecBXjYaHd7DXWcl6eoNUMGj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWWeCRA9TVsSAnZWagAAncEP/1Op9EcmkV4bBHWx/Bf3\nVVYh2Ve6WXyzuyFahCcKBoXC8h8SIOLcQfu9YaZ63Ux7iGPcvu+fPUF8Vz1S\n1+jPH+6FNa5ZKu/IsvW96x8jcbsxeFrr3yXiRLhQmUsELh193SnjssTmFC47\njr8NleFIp0/5JwHheMlrkjSTU7ARva/xPRMweqYRZ98xMLhY0d8H2dziRni+\n58w9PWhOpIo9RWC4cmgVDae5Jo+uaKNmxjMplQ3+Xtgw794o+4E9B4dP92lP\nkbKlys5G2NpY1l51766qiv3o5GKnoaJwPZJ0wlNrY2tmnpbDrj4EMMX8IE43\nr4J3V5Aku234mKaMd8RTu85R+t5CAps1JA4ZKozT1VXet4sVIElk24DSXg5V\nnBUm+qak+jpJMKxbYOU1KOsSYXw9I1SJi2ohZKqG91wvu6Mumx6UJFTz37pq\nFBoDnPe1DRQjrz07+gEoSi9nEZVoHBP3/3ErM/OzLfzgzG1J4Jos2MkgwPu+\nCTALiA0CjPqE5PuX3XTU488R38zjl1A1u/Xk10ucyBJqT4RTAXmWmA5w1Jtk\nq8H84eEKFi7KbZA6sg4x6hyMhVmdDBsJ4HFqXAbkej15hphqDhHGW+SugVHQ\nExLkq+BV5Aj2hLiuZ4IISK84/yCeR7opPrZfk0N7744oF7CVr8ThhaIh0RLx\nVTca\r\n=6rY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"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/line-ripple_8.0.0-canary.fc65fd00b.0_1597072798353_0.25101124988456935","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ee7e2bdb1efae61b44110ccd7335e2df1502b204","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.02e372c5f.0.tgz","fileCount":34,"integrity":"sha512-gSePECN4uXHhts80fBYLyvdwSnK9UAnfHNWc0bsIi3PWPuEWfBNKBAwurCJjDW23Ghq8jV9u9rB+EosBpVJo/Q==","signatures":[{"sig":"MEUCIQD5odRVO/rSb1Y+r/iBHAJ7OEgqCZZJEdqoHJHPbUAuJQIgC9JvZrHHZhyY7+Oi67AlSf7IRjsK6mMW+uINNjlVA3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWw7CRA9TVsSAnZWagAAnOUQAIj3ryg01KoqiVzUz2QU\n2Ow89SFNtSUYTupTp7+1rJcOwbK5kO81wq8uXkWHS1stusktcgiT9Rh+IHDu\n2XiSiHpG3Htowzckr+e1E7mAWI83f7gYsBk4k6f/xf7PsmrjqoOozyNrNIf1\n6Tx2tVhmAf4q+a/wrSy3jAXGFttOrQsJGWuU0lvIAIOneMG4e35NGBRpainG\nbSbvfQ/ybs0WhD3x9c0B/5hn3Ba3k6iFucx5Nsd+9Uvq0BxiHJYMwv+vKv8o\n1Lxy0Tk392r5qUPz7lAI/DmsX0OfUdNv6/s3gPp6axtUsGz4PFxet08EbsOY\n2yFLfQG4fHoNpg4X+tyw1fdN+eQDUwt6NdK9FFr00jJnJaYXlgRbnMWjonYb\n5DUneItzulmw70eDhk3tn1k63y++F3gEM4MoNsjHND2A32jHyvErcrYWBx+a\nHCIYjFWXoGI+XFmd0Raj1wauOVNSOdDyiStWpMosQGxDNM5XVnXx/IftRfH6\n8qCIu4EC6Zm0Nn1d6eFZPkMEDBDXtPUICTpV6qau0AUwKQFI1HvtPefUQ/pp\neC2ss5fvOKxKGIOt28bosOIqMDwvIeiNmzz89IDB5QCK70307ADxGZarHdB2\nz5eZ6C/QgnEjAzOuP8Fr/vQ6YQ6/YY+uRE9wwN3N3twiN/u6gXqn+0uuUewQ\nrxTJ\r\n=qEAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"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/line-ripple_8.0.0-canary.02e372c5f.0_1597074491338_0.02408737442201292","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/line-ripple","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"02d59dc582de08ea87755e3e9e6a949fc4f49047","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.66669e3b6.0.tgz","fileCount":34,"integrity":"sha512-Us4Xero3GfwdwIr4N7YEGXwD1Htt8P1LNBrslmAY90cfO+uymw6xusZTiyTaL8bcYqYSJO9WX0ClHczhdTMnXA==","signatures":[{"sig":"MEYCIQDW9QPdLQEo1nGLVbCT0XdxWvP/oEGJW/tnOhny0G1lEgIhAI12JdJkpq67Hh0eQ1COSEkivyo9bqd4K4RfVQs7BWs0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW0pCRA9TVsSAnZWagAA5SsP/jvJDmFP5mEkPepQYJmh\nKI/htMJk7PlkYEyibMdk/az6k79e0sin3ix5yFEeIUVGpIQBu2dv2T4Jok0P\n3r8L6AtwEWwXkYdYMhiV0I6+Sow+ecsYIT2+spsdCWpx4T3B/yx7zyakpKXG\nW0kULouc7lMtcm7xXnGfxuoKkQDtzkKY1gTJa+MLdOHDk/8pdr8wNj7Uvyiw\nNKcjzPqLHBtzh+WND6TuC6283LUCO4Vxw+b9Y54Ui2Zj8NugV2ogeAAc+Lfg\nUMpZX212hswz7RvRGdJcb+NRjZJ9dtShIfkuAnIBJzkykvzNn45lInDCXzgf\nr+0+uQaKEU0N8ERAxTPWm2nV3j0xPtkjtMWU4dXXKmQf8SKEQ/T5kOPEW6p5\naCbpV339K+ZLnCD9bZ6KUP2h9U4rLGzKtQn5tuYzcaNuJZnwv3LoyTGhAfLn\nUyvy6jGIny7PmsB7D8D9aMQG155AkMsFfU7cG0chiOTlrkH96H16j1FsOEkM\nS9Qw8TfOjfMaFsY4RMEQ6IGDgmtRd6+tFgoMQiph1kY34woW8Fx+7M+GhwDZ\nDDJJv2bxawgDa+Aimxyt2GuSy4tKy1o0iIT0kAki89zqJlLe2n3IDYgyRvRg\nsqDE+RWS375/EvBTefgnugtcol00imAHbJ5y5uryhBuDuDIGr/JyTTXBQ98D\nbPty\r\n=Uox+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"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/line-ripple_8.0.0-canary.66669e3b6.0_1597074728697_0.7798121753348097","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/line-ripple","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1404f62803cd0390e1f7584ff8c5bc03c5e48b54","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.6d1ea9761.0.tgz","fileCount":34,"integrity":"sha512-nZucu8cBAeWMUMKKwsrvU2eJcE0Q0PreIs5ZoscEyQfFep4eqFSdVktmpb/htlkjsIrI7RbT8PTRra6aXLfH/g==","signatures":[{"sig":"MEQCIEKdoqBVNaw+JaCoECXIY9FAKNfWuvzba4SLLnXG9XiMAiAs3+rCF0qwTEJICfUaJF62uejGKTe+BGKuZ7YBR28LzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqt9CRA9TVsSAnZWagAAOxsQAIU3LTfrZJdWZ2JidBug\nySnpdHhciaZHfYyw38t9mU7xrb199L+jIPCfigYNG3/jDonYp9mQ3zF0CVCh\nPDpHDzsCUUCj4+jTYkKFXJqdWd8JIzqeVHyCY03NyZaPuySVVWyIfyiNEu4Q\na1D019eCvQJoT6QzD5DH2pU4DqRid8jvlznnVAbVa4atBDzlZrlYj+o0YXLm\nWMrziHJ14QoUSN0cdWK2RaDnW1zlGA/PL7NN7vfcqgpFFuNWC67EnvvnssZV\nJkE4bUCyt6YNAuWsYoc7lG4y1J02sJDegYP3mjvdvZ6ibZ+jPT3TvZA2aunc\nDaqh35TCVolIzhTLxnHS+Nok1cxpbVyFluYycijAQbvzXC2mg1hRiGwKEmm1\nF+HBUIbLl+A+vorswvDAOwkY5VLrWZJ/PusgzbEg1a4/CFtU1TnpmI9TMiBc\nRJpJUEpZkUvFfoM/HLMQ34+wbZOwOAZSaPTEAOsQ92mJjPEcU/1J2TYJFYAy\n0GTVnNwIax1uAzQPsg9Kw3dpQtFa2yAAdWQvLQNIIhl3vumJCXbQgJ0Suh+6\nrsTVHL4HkH6DN9GZvJfMzBUcS1N2IyIdjFHDDYjYyuXquo9SUVHpPwcaS5DR\nv9H1VYXczGD8PHebEsmwlCxl2OL4yrvxZMvsrKNiqDLEXhyRswkjZietJ+xE\nfi7l\r\n=okos\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"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/line-ripple_8.0.0-canary.6d1ea9761.0_1597156221255_0.39655677950891133","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ed1f7dd3efddf76706da0fc58013aaf962613be1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.79414bf9f.0.tgz","fileCount":34,"integrity":"sha512-N82E62vR2ACMaCi+I7zChS89dClehn7hcmaU5/QwITdGdUJLwWW9RUJDz44r/+yyoQ31exOB5zm6LzJXx1x0MQ==","signatures":[{"sig":"MEUCIG9G34ycRMVxxzpVmf+IZpRZsyjzGLqcOV46SRj/Os8kAiEAuHNHpKF6qUFfX8B0sa/Jh011TP7FTcnp/Li9nJt9U14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMusBCRA9TVsSAnZWagAAbFgP/Ak0Fa/e5ed45oB76DDo\nf55OpgQej95BYkRO+/uhvb0fOZ60W4CEek9izY0E0lJPgUCZyKjBlGcksWdG\njHMOdRGAsCbiLcm9yGUV3kCehRg+oSc1dOCesQOBXFGUhRoIJZuvfqgPRlPT\nxiXIbop67JmnSgUGqbfMW5JYm5oVTtKp+ek8ws/DBoPwfOTSRBIB0hVl7gYg\nFaLHQIkBmBPHYWkNx2upWMIBHSPhiExKGzC4+6DObvknqfHIsLyW71090g4x\nxWRaiGItLBgRdcz881jQtzVBH/9rGOAH0VRDIKc4R+InM+hDNTntssUH5Zhr\nkHR9dZbrCPBUKuZ+VsQdW1nd5jwsZ/lUNsGCfDWAhlfahaVYhKSLzbExLHvN\n9QOtBT4bdNBDDG6qRREL9JX/M00gf0LStq3AFES62y7BjoFt4U0DLcvfgXSb\nnI/BWHOg+O+m0rNbb9s+kuJy3V1VocUBfAPCTXqJYPEeXmY6gy68flzlq5wB\nnGOyDdtnomL26JmUpzzXQ+yRLtLNdsdiXNX/N3jcByf/5ae8sMPPWx8iXsXn\nJ68+YsRQ2VVjbKH+luhCcSVzob8bs6y4QyaNtAdkY7QBuhVK2o7kQ/MD84TK\n1nhg1U8YplB2wBkDh3hgSbOJ1qx+xyoUhG/BQKOAJenRlSb8IBksIkQaROma\nYMFF\r\n=xmBW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"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/line-ripple_8.0.0-canary.79414bf9f.0_1597172481219_0.4651995825045634","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/line-ripple","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8750b98930c1fec87fa67925871d1de22be8010f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.85a5272df.0.tgz","fileCount":34,"integrity":"sha512-LraaK05pdsFdExZyY94zrWIshN+XxEcdHfhfa8LsDdq1OHdw3Z3Zacm6rNVkktJAC26IV8n4bM8a7XOwStHDHQ==","signatures":[{"sig":"MEUCIQDj68aGxsqs9LpGcHlEhM+rgc0kxPYXPMfFyzw4Z0Ts9QIgVMpZTwLSdpEfGRmvcPRGNm5WgdNIhZEuL4xT8T161eY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvqQCRA9TVsSAnZWagAAWdoP/3W8OAxEDbDXgH6QU6+/\nLr27x9TkeHQRv1TK6/+d4cuRaWi8GrxNcFHNMpFgDtp4UzSBU9vJQoao1SOZ\nIF5O4ZELQgCflhprsRiHnpx9zkkuu66cVBbDq1Su30BNXU/Sd93CJD3Bya1w\n9Dp2a5n8FihYgfXwlHIITorumveqyocIe2vc6wYRGn+ewzX+zDgIyqKjx2WC\n9KYaqcQY8JoOblSN/1wTicSAP1py4ccrDvNRzo5oMQ0SA5Ep13U2cx1Xqv2p\np00RJWoyX/KCC6yHaVcrT0SiRJ2CEVVzd9Qtp+wKa+pAvBdA4NlTDv/d0n/m\n95B7o4CFKvsnuLemmb6VLae4eLZdiFR3DlLcXPuldCKTur6mxra2f9sQyCHL\nFJUbjosHCqrD/BwAM7QWb9G1LpQCVAx21YC7erKNZoztq9GC/oOxb8LRy+ct\n/3NQl3Foy1EXGfgLgUswolQBEaIKbR6hD3MU2mGR55MTgnUcBp/u0MEAe8Yl\nMUTLFZcJyuA/oCYkYZ/p2O1rg2rfNo8PKkaGb5Cg1GzAEf96bBN0HKZeuCcs\nZU1VInzRnuhwHXejUXNh+b94Ytcjvk61rwVfclfDVWr7xSkKZ63J1CCDMLz8\nyz8FcbaR/GwVxn8RLqU7ZNrLkLMBWvqREa34F2ImVKr/DRtqlGTI+dnyVcQ/\neggC\r\n=Cshj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"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/line-ripple_8.0.0-canary.85a5272df.0_1597176463758_0.5124169054170618","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e56fa6e08f1b301f5adca00ab41c4ecd8d97d70f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fda053eb8.0.tgz","fileCount":34,"integrity":"sha512-RoFnulwsuomJDX5wrFltUCY2WRdk7TBR5AE5df5vngUmHibiPDhdPjdclOi13/jM/J58lYgLWhNSuFwt+FFRig==","signatures":[{"sig":"MEUCIBQQwcNvoBlDwVeVm/5XIjqv6kBZrflQJpyTk/okSew7AiEAtZ9dsaJNzSRpCU/y9F/ELipDwAa366NwVV8wc67I1Ns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEseCRA9TVsSAnZWagAA/aUP/jgotmlR8Fkc3tHRZfaz\nm2xoyE/CjICUTILFygNqFKVfcYd2w9Uy25zoo/dHsiZE/47KiX2vgneecnY4\nq9TQdj8TiHBwGdwRrFQoty36iMRc/0fnaXS2mLacqs9sV2zt9cCrcVSuDoUX\no/pOLYrFXUQk2FuLek1Ie84ECYckhZX4ykOs26bjaUHbzXz8sx6FUMIkSIUs\nH+TQLJkQMEHzeq5H/yQzhEyIbd89M8CHgU0ZCkihjM+bkseQsy5iu773albl\nPY9vbbxGxAAxs/T7vHL9Z1v5hrcXwve8jWplPuFhwHXZTvKCvpoFk4jXn0xZ\nZBsLbjR1Kj8O0Skv5o5gFx3Dvx2Sd+vq6wj0xGz8Hu1TVM7gr3FYdX2rFGLk\nx4usSl0hi3XHzTb5JdIKqZ8BQ+yN3nMynaLECT9JMyeMucni9oSMHriN1Hxg\nb/T9KiZviKXRS7O/9k8ERHeLi6AOlJ3W7S8hP4w1QcLB+X0uTElnhw2NWExP\nGvwyM130V2+3vfBudDy8Ikr1U0FM/jwo400yx3Tnt0zpKNCukIlAOgVMKx15\njQb0937MaNoRjRzrzjJwmzoG1TOePRxAEp8XKLxodTEsxABQjVMi5KNHNx+G\nCl4yXcwJ7GCVMnEiMipsWzcaYe9xooXqrETQlX6RXQpta44wr+g3zmctvg30\n/dmV\r\n=YFJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"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/line-ripple_8.0.0-canary.fda053eb8.0_1597262621987_0.20139645541516993","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/line-ripple","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff2815f6a2340a904056d5cc7ae06051ef3f00a2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.760873445.0.tgz","fileCount":34,"integrity":"sha512-5JxUHkgregUYXCxCqlSO0V5qZ5NUpQpOET4mUHwRd2ap3n8r/8Pbp74fF+XiJiTwJ4wxCOXeZdoBjKRjT/TVUw==","signatures":[{"sig":"MEUCIQDIXyJ8wDxzPrAU/BLMwYPR1xhywQxL+tYCYK+xpUM9awIgVvRrrMg0/N9mTMBoy7aWtlnCcavFjmf8lKwkj8XijUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGJbCRA9TVsSAnZWagAAnjEP/2VHNLS6x7PPP/XC5OPR\nJckkvxYLmHa/8xB+uXxXWY/5vVk5beo/qk1eEBYWVPKeEzz8v5+2a+LaH0BW\nwu3fE532S2T5bwSUIuhT8hrZNoxk08VhZuXSpFmlpPic6HWiC41it3Y+rag3\npNAzt3jBsiC7X0pS6nH7vRJpLXVZtQgoBuTB2kRSGNxKho6PdiSFE/V6n4qZ\nCF2BPfpP4r+croU0Xc8Lz1RvbHKJHR6IqHnMRVC04bwcruZD0Iuuy0bTxbYa\nLldG1LsPDPctsimjtyR1w3Xe+olUe+k1/7h3WJ+LlkhJTc6S02haUUUJbiH1\nE2WYOsorbOo0YeXwbjiIrsI0QuuGUdnmN5+nE+hliZiafKZl7+mApNEiGb81\n6g7IhBEI9LPkJa4Mr05KMjJhbnJHikD16VW08tsEoRBN0KqBWw4d5Mcy3wx8\nlcPNvyMzzhKkL/sN65EiYf14Z2IvjotFDZ7uJLG4LgHvb5B/366lhMXMIXKm\nxwTR4T5nDTSx4EFfiwXHOtyeH97vjc+Sge/m4gjSkpC6KZRjxF13xIKQFqOt\n7VL4BPocw1QQJlQ8b+PaO+hcYES8BHcl1Lj/B5UoZjeB0DeEUT/KDnWf1KRN\n+VGTxo4b0HzwW2hCWI9Fw5B7BCC8TAJGY/KOXsU+NwXmLo4mOPJ7T8IaGKmA\nr488\r\n=k0lj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.760873445.0","@material/theme":"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/line-ripple_8.0.0-canary.760873445.0_1597268569482_0.5030376563134287","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"21aa9cdceb9efed51426b75eae56f4cd1fefef74","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2f4711a30.0.tgz","fileCount":34,"integrity":"sha512-7RIw07WyFQchGgh7Bf38ykuA5je+2wH/NfsQPVgmhTmqBCqIQOfPfqe0JleBYb+WHUuYI8CUJaHFTEJpZujQdg==","signatures":[{"sig":"MEUCIA1fq43rU+9TEZ8WmxDlrSI14SLadO+mFQHjtzrN0W7nAiEA5XwmekG5Cm+rYBJPJsyrqx18muqLT32YvQJBwNOF/bQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGStCRA9TVsSAnZWagAAosQP/32JiVxeBL5+BzMgtm2S\nb2g3Iz5z/MhnD/eQWmwJahIcf++oID1GybdFD71ZAFrByZE/+OdstK78lrl8\nRriXG6/CxPX776wD04FF0iKHZ1bZ8Ug4pyuwGzqi9/aYxX8rHfJkFWhxxLXm\n3Vw4ND+ehnVt/6es80k5xbRQpRGLerVjN5Cp7Ef6UcqoDVNY/kJXqBsxgS/w\nJL9Lx+YL34Lo34GPk13BGtlaV22LA44x9YAygnpMFNOEhdUOiH9db4htKj9m\nc2kBgiVf1XcFuCtzAOH6cHaPlbVMPMHizy6xdgf9AgiuB7jxxfN02IpCvWR1\ngouHKQLU4Mq3wXYiax/8KyfzOk2RikkZThXxLyqUWqECOtCQQwcG185+cv7F\nHAGlU355CW2JBfL86owQ8tF9eYSQH13KTHYnA3ThDQbUB0vlWGLTi9qroXbO\nyYgk8yrM7cohi4Q+s6QW9CJIG35dXJx6jCXWa1a/sQJdJHwpDSYhHbbrxV+s\nOwFQMEvfJ+ozT/ee/WHch663fVJTYLdqXllN+XDGByF6GHZpoiz/ts97NXco\n6fv+Y9/GeudHBEUsojt1hDMNx0kcq3TWLEFw8vMR+ICZlf2tTcMRNugKLsML\ny280kQrK6wObyU6Y2FbUxftw5NspamRJDagh9WZ1Ed1aqJwr3iNXyITsRb7B\no0uA\r\n=IW8D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"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/line-ripple_8.0.0-canary.2f4711a30.0_1597269165371_0.5728074224775603","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c57979c22bdfcb764bdffea063da3be6ab5e5da8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2d72f3659.0.tgz","fileCount":34,"integrity":"sha512-K9ROEd49+JGQ8RboWWqCZeqqTmfLrEKscEuUzD2yrs7+H0heq/68ZYy6hNlWAd97cwzRgw98Hlml+/qzNDw3dA==","signatures":[{"sig":"MEUCIQDTNL8Kg7dKojZ3MzcRXJLdh1lfNH71qb8Ox6xQBKolKwIgJ0WsOVeKHKfBDF8h/ta7lLzIHItPaPhq9xkqH3bo7aI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGZwCRA9TVsSAnZWagAAr/kP/RRw/RcR10Ykr71dpUDk\ni8om94jUd2DW2asxoFpXE08old7Otnwr7+1f22Lehn/C7W+B7vxbHdP+tPqr\nwpyvYdIHUlCjnzc6HtYlBBwo/UZMpn9Dgv5JLSTGnDdNbzl/hNsVGBKDd/rP\noTscsPZMUl5fqpXQLDVrl07Yf2lvAwS01B5GGRyc8ACZvAj4EbFRC0G8dCUB\nOusm7szLj5AFipgWj7Auu0xCxYeQV31PXy9TCyYzGXHqzxbIknlIipeRId9K\nZ3ehbw1ERwbslZrldxUi5UbvCGXzBmnKepFwwecBUwVNqfRlpw+sWV9x3NHj\nE8Y6zenZ7+KzV3X8jEeUUg+MhGzwAPwpDn3zwg0Bs7XsHdk6IAfDcFN29VVO\nSHa6BRFqjhjpaxNHHRDCHWlY2F+Pg5yXcRKcVyGzckMn+yVYAwJAF+kFA5+d\n+VX+GX3L6F7nU83eK9kBP1RFCzT9lBn90HvE68k7st6vuwuvr9mWuEuVvPGp\nAUzpykcRGX/qEqaYxyAXCRvJ4+NsS/x7yt4bGXJuReQ85HHyxGtcNZOH+qMW\nq9X+abX9q12rkG9GerzkDIiJrNYq84yVp2PU5IT0hry0i8pvkNn03YL0a9vN\nnPkXt1g+AU0qXzO8mbCyqoxre7felsxyZjuwqcYKPFi4wF46DzddT6xLR34I\nObLZ\r\n=jKUX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"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/line-ripple_8.0.0-canary.2d72f3659.0_1597269615841_0.8232543978833473","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d51290cb9d53ae8f6cc80ee6e17836653c9be00","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.1fee70a5e.0.tgz","fileCount":34,"integrity":"sha512-/H4hOjxvrgcekIq4gfRDhBYmbL8C+yoiHAYwTCkDW8luPDHYY7ZWj5VmZR1cWuADDjZmTH5C74C3i/SQyEw1RA==","signatures":[{"sig":"MEUCICaiNFQiAsxaIVarng/OhpOxXkHgetv0CZG256JCD75aAiEAt7849MCPfHJ1sQ4V9UAQtK5vYAZxxA+KcZixUD+AsmE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHsRCRA9TVsSAnZWagAAnhQP/RiHrfIdo0hX1uxINl2S\nHJTfQxZNZALbLftXFzQbZUG8wbLQjG7lN7VJ8vBtEQPJ3SSFZVMFXn5El56A\nst+GRK6LONO+OikzoVk3jMjg6clRRdC3OeqhHvZ6JxIerOfdlXzofdtccpDU\nrDZXXoEKAAGwRtvppngY6LvgDotAnvm7uovsHKWRNtuMlRElkEZucD6XBeek\nHzxl+x+Tc6miWe2ZDYWsjn7KT3SFnpyYNG6k2fQ8yR+Ya8ZdOWcJoYAtIq4E\nGC9XjzgWEhWncXs3ZJWzR8def0h8AZLdBomD46pLFgYVbrDnMsPPV7E6JLfr\nsi+6aY/E4BtBrvbizM3vqneIJJ8LISZl9ekoFP/GDeJLG6GEk4ZKiSm/dXLr\nMlwfvF+Zc/DTlMEAf4dzfzUchgq8OAxZV6Dc9d7Fvwz9BY9FtXDZekPA8NHj\ngeFKGZvLRtUQGxEfgHWX6yVdFOg0eJEu1r/0NiRkZzAqfU6V9O91bc8Tmrqd\n2GKYPKNE6+hWtcxLAkX8jHKrB/g2/ojiO9gMxbeSMreqsnYQ7t8bcthMZU//\nK554nfDZ75VlQVvzIi74h7G2SP/9QtsXVons2mtkCeWjlwYrwzFl2Kg3r990\nGQ/5vJ+by0F6ciu1ZZN5gQrfmrkYacSXR6MoRCorlcduhQ6UZ8i6wITMptLA\nQVSs\r\n=ViMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"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/line-ripple_8.0.0-canary.1fee70a5e.0_1597274895765_0.9467579845410328","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/line-ripple","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6be5983dfe945483ec1fbb2394354e12454752af","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.023f3fa34.0.tgz","fileCount":34,"integrity":"sha512-g5AJbhj+FyizkmNEz2QEQvPjvN9zrO6hRzXO/VPb0ZxlTUnCUOqOQhaKp/IYZDoYz2O04InBbNZvmjTxmYO7Lw==","signatures":[{"sig":"MEUCIQC0k7k0nrOovI2pbr7sjvxD/fHuW4Qh2BGQ4C8m3x51mQIgALhwaqjW9K0RS6luctPojyVtm6EvX3X5Mo5XqfqSNrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJNdCRA9TVsSAnZWagAAzTkQAJT3mPcyTnYmAIf/ot2T\nvudjYcWircb+pqfvXJZmk3yWzC1Nn1XYhrHmxVhx7e1ngbjPFEA2XNGWbCqP\nST2IwmDj9X6biDNvvvZJYqoCqUSUyG0PsfonTZcGVUUry440lBNLAJlZZ417\nyYdMVpUL95gjxluJgJEqaKW73HdCW567tYBleGnPlMt6ZHd5gHVPjUDEvyI7\nqSaLw5CJX37QLNBF6g2RupQ2LsDxGbj+VS4vDFfGNEDBnJHhWKs4IYDp5Axz\nKVODcMEGqBfLHmWtHcwyx14yRHW3MjISW4Hjk34ro5EzNMSgxvehESnc4vP1\nGiVhkinkO4vztP6Z6IbEMTtk1SoIctvEd+0599QslJvQkupzJuDrk9fjxhyM\nRz1lgsM0lazftsg/bvbxTSWSIHQgno1GZMKfYoPQlScBw5PRUo/hjDg4/5rA\nTqHVmWzjm7R9M7Xonk71xhLzpRhXvayUTP8ElIYi9Nb0+KJf9UCumgOJAk15\nlsLbPao2KMcQlK9/AfblXXZk1112GSJ8ozsrt4WFST3Aq1ef6+OqRaltUvQR\nhCxEiTb+maLh5OobZTNA7s5+ytBIdfqmHSR6TRApgwiGw83gjWVZ02cp2WUP\nAQH40+ZMwL4rXvOb98atAs8NHpLPTwn6pecgkaRmhZgXiU3gyPm/LImWdY6I\n0tpe\r\n=RC4T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"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/line-ripple_8.0.0-canary.023f3fa34.0_1597281116915_0.4914806122162123","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"32590588a3a05ab457935500956e15e360e9d75c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":34,"integrity":"sha512-YSUK4n2b47OqrExUgjX2ac7VCiIOokE/x4U+XCqs38Xin+2BiqPpo5Uool4SPdtatudjpv1lyVUT3riAwFFQEw==","signatures":[{"sig":"MEUCIQCEbYeJN0g60tnAiGqA1gSWRvsmQ/WVE5HPWMDk/DFykAIgTuKdYqtp+j9HeovRUQ29Cdngxu5qz1FVclKWE0xAEjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJdBCRA9TVsSAnZWagAAJLMP/jB8Z1x9b1TzrNKc1R1x\nWGnB7GBQo1d4DYHHA0NjW6FfSy9g2lKI47y+/ezLyix3m1B5BmegLP56yYS2\nL9+E3bB7mG2P4fY12tqFQ2tmXsaHzxq8WAT9W97Eun2W5WGhVjlVcmrX3RCY\nZGVSRFPNe22cKt33mVKcewGdnIQluVu8UpSJxsxr5kZXgHJSTBhh2mG9n1Sj\nG53IujCwI0H0QtTSdUG51tQzamwhnMqiihqJ/d4ybCHdNszBigB+LCgVlBwn\n45kJKH+2Z9JwwAhdzB1Zo5v7cjb7K2X5j1Xeu1ltFckzWkGTA+5So66TQeXX\nHIgh1gXJIgQE/OnIkNDJeNpap2IoTquu6JObCQf6Yv5D3NRpgU08lVfEbOLJ\nvNMtLx63LoHUQPyJWs3R1ahotDMJl/e0JDeUjLx8OtVgB1x70bxeSFWmh062\nTESc1UtctxxUELhp+Gq3kkipzOiclcySHtXrLUP9amxRISXIAFbs+jmB58Nd\npJfr6FvHzVjm59J2Q+o7Xw0R0UnEVrm907TbxJkoqT5HsMC9KBLuoVFqo23Z\nN2p9vau7n9C6plb1jwrqX6Rzm98QIEWimuoYO1vbV1taClJiUwf0d0rKhY/Q\n7ZEqYXyZbMAN63rkO0UyJnTxJSR2g/cpfYCR5lDJd+0on3SkEa9+feO/hEX8\n28L9\r\n=EOoE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"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/line-ripple_8.0.0-canary.80f3a9e5d.0_1597282112524_0.22993488540200735","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98f8e6b72f7202558f91e67ae82effb797f672af","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":34,"integrity":"sha512-+SysctewWB0yM3OhTz0Ho5jLk1nFIeNI5LnYK7/VTzG9rfoUm6xq3587anabZ2EBOUtUhcrgnTNLAs2eb0Hhvw==","signatures":[{"sig":"MEQCICS2/b1egyPASlFHKu1Hxu5HpwwaOz8CiQIEUvUa2XeJAiAikgd0Rfm3wLQ2nG9+Jq2VmmB+WxpbgOrt0ieOTWLgIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP6PCRA9TVsSAnZWagAA8zMP/3/TfSzd/KIn7eQX0gyP\n3TSJJJW2SeaI5gP+9nHRsxaup2s59snX/PZgagFf3BXr8XzdSWqcbkr5nwEg\nZZ83+3VTKU8L8/zNvCd0r5EAC155W72W3p/7ocMhRq1V5PnYab4PRSmze4v6\n4d4UrDgoxajqRVizOu5tLcp7Ulmq6NIsGzYGuAMbPbOGmvGBLCnKKFIvV6PL\nwEtG+A45ryt/qgMClNoufe29rw6pEaKFbXDeeDe6rlOqv2Ud9HoMlYQ5+/sB\n9u1Btnovp2cK3xibVb1LO+SRHjWqzeONdapmSZiIBhK/pzRZ6sJciRtvbeD5\nKfLQJGKpPAVeB8AuXVZPUwmSN3Om+R0abhEpb91cg1DGcrhhe0tmd/P/ez/6\nLNwk09chB4S9Hwb95m4jRhURu61yp2HVDHZaR+1VAhRxlRNjcrepTaxftgug\nBBdOnpE9/JuSg72I8ArRk2nTZF9jtw846bR0WW4b9PmvZiZT5W3X4cI+sNC7\niWrYBElsooLK8l0ZfPIZLEK39vj/a0PusFaaL7mSekYH4N1ugMfc3zX9SbdZ\nk1yL/lOqCsfecykE4lnJ4KFbwIMPWHExXSebKMamKx0kr5JJnsWnIG96ih1J\n/Om1NKZNxtxDsXupKFNuZeWoAA2F8hapZgrC+gTF5/Yv3//ahHmeKvlLSSMB\nld/W\r\n=Aq2p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"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/line-ripple_8.0.0-canary.a1dcfe97c.0_1597308558810_0.2926069180245803","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/line-ripple","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a74d2520590bb29a38fe2838d7996c48363d73eb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.af332d5be.0.tgz","fileCount":34,"integrity":"sha512-dgCP1H5EV2t0UsXnL6oTg8iMeE/ytfE21tzwAm02r++t5RBeNufX2NooPK38L3l8aVDlHv4Q1OP9NL3Zq3uGKg==","signatures":[{"sig":"MEUCIQDDTy2+I9JfIae1ekRvY2Z21c1xnYKA+Roic6FGSiX1WAIgScqMJ/LkraRJYYmp9lgsQOmIVYStJvrYtCZFHmG4qlI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa3GCRA9TVsSAnZWagAAhMwP+gJtarsguLxs5OiSWJNx\n2xUblFVy8w46l9G3YtsX4ay6lZLjHub6nBua3cty0hWlf8DiiZlfQTxHpynR\nrOHA+GOg88M1RquIKP+5Y8PA9ouSAEEGt4p8Qii6eCAywTAk3ClDkOkP7JSf\nkJuaysxF7QavXlekisz/ARQFnMCGfFPu+XL0b3edzdZYEVjkWy0CGWib2FHh\ndogYxWujYz6W04NT/YW/SXPia5KFOH+IXxIzm4blBCzgxiGE5VSywXDgF4ZR\nDUA0aRsag0wEHn0aRuicPN2rZo1S2QIyeD42T4xNMGsJqDqHlTvaVhDzgr9a\n4YWIWXJNWoYZeHC3cHOfYUgHPmvC+LN9VxIcQD3lIvUI4ajHqbcXHZRWUx2Q\n9eU+Jye0Wl+SsJHTHcPAaRX2CzK4yhYXqNcNpWIZ+SqTq1D4ijPQAHjkWAJN\nPjtNUWOjl3/8WbWlLvOrwWJ++nDmVrPABcfBFtrKE4XV02gs7J3qz0kj+7QX\nwcSjbIPCp0tiyBnt9oRhzj2F3IYe/Hnk/cn1g+OIl4hIYDNBozbA1vd4e7gn\n8VK27+/S9NuqH4CW+E6AbTncah/up1fHqMT9St+Vkj0Pzcd/5g1hooksHHQj\nd6km5AZumVjgSKYMi/AE/M2d5xq39fIIYMiAMJI0bvjgejN0MMpyHJzKA+qI\n8txq\r\n=dVzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"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/line-ripple_8.0.0-canary.af332d5be.0_1597353413542_0.5372448464750432","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"31c7973a148685f4976355bd4f060d93e4c42731","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.7dd4567c4.0.tgz","fileCount":34,"integrity":"sha512-jQ6gkuPrz1cczQ/h4D8rbXW1iIbaNl1mx/VZ2K1lv5rVeShLp8+FFy03sZqwo1tPdHJ0Jf59JhrDjgTiCDVP1w==","signatures":[{"sig":"MEUCIQCy2LWuOzGbCVqO4Kf4I/6CEem6ByG7lmDflmtQGCDbVAIgF26n2y/YkPiM3mFEamLnBxTdCcbmhmhy8kBn3vY4ShY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNd/UCRA9TVsSAnZWagAAiVUP/A3YFM6DJNkFXyfaooP7\ntXXxjWymLclmNgPJgIQ1fTAQSZmwv0F3adAT46thYYMAsM35660qbh2ikuPK\nAFn9FANCFEAUs9Eoiz40okh9pgEf1r99LUKqsbTO89d0IFfyIw/tq7RlWgK9\nT/DFWLSqT7h7umYi2ub7eC4AuhpSJpzBb27rLFtFKy/cazi5vGta9cR9Urbg\nbk7iCooBw5NsPw75ZHr/OiZD583iqaBn55nHztsO50bhogtaYiLBJT1nRNq6\nTkYk+dP1e6QYHz1aMULFDtTl9kMOwMNq81UiErMpbcIiMRF7SpsjlzxF0aX7\ntYM6vdBeE2p414hJlGKx+pzbaQ49IVMupvG2g5WqpSqbiB8dijsNQNz1GH7p\nMOu+Cv/4HUOcatI7y73TYDWS5qpki23QwU8v8NYdVG/gAv/NLsbDDLLL1/zQ\nhbwAXEZPn4Z5c/08SuYr4Jyo7+BiiO4jhuBpYwY47OpcXVYArHOou+o7aU1k\nOjE49lmB25pdxd1BdLpnhSf9/Y5dy4NNpQSQUG9TEvU2qDI87gej3LvV9miR\nvzg9ROawoS2MhmeHtyGGRFzuYSchuzQcKPj4da8/N0Vzfhg+j7dv1n7lVtSS\nkIegYrrUqACnVlKAqRhVhqjP88gU8NobabPKs1veNxwEuSHBFQ9MAQ3SKSaa\nCMIp\r\n=bhgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"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/line-ripple_8.0.0-canary.7dd4567c4.0_1597366228158_0.20932656185298337","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"80ee80e2c3e4280c197b809c248947f39af353a8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ff870005a.0.tgz","fileCount":34,"integrity":"sha512-9IFYlCj8ZJ73sHX9Pgkeuv2SQxZbUIEwpm2TYp2vPo3EWybqdpObeKwUB27FX06FZM26TCLsdeROFCPBARBK5w==","signatures":[{"sig":"MEUCIBdag6XeyCtlbK7Tht24ca21Z5k3dWop+nuamI+aKkHRAiEAz41hhLfWlC4zIgf3x2FvpkHsAbnD0yakOMe7Q8P/3lQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeXFCRA9TVsSAnZWagAAfgsP+QGxVFM3ZwSudYlrKhUz\nDxdZ3/r4Nvrmc4CB5wrwZVQR1UnKpAtO5hCFmisftgeMPKRkBFs8oZusXB+8\nWmbxXtePfMZ3LvKV466zWBSwpCbRNzbAbPJchkGVcVOAaweH6zrfr1STjGjP\n05PaNReBafApVyttwAwGds45WGeChtTh6ODT+n8hpJaaZyaRRVzKgngXYQFZ\nnbrzo5PGyq/A/6FdWUTHTY/lmZZK7euMPhrgGEVcQTuWP/Zzmwij28HlHU8u\nf4Uwpx5iuzOh0f7xQpxYGp5U89M5cbGf2tTlpWUhjKBiRahQfkJ0QjfcT/jQ\nHivnYwYODgTWDq3fwPZ+xYl4I9DT39GMefl2RfZ2yU0+b3Uqf8uW+eYk+7KW\nTaUCMhDHpW6zoeMg8uxebqJjPFaI/eLynO+o9Q3Gtx4Zc4wjOO2LV1x37tYr\nx5WbFIUETOqiSK2BuLasJ5q/yT5uZV8T4x2ORPQFzMeWouOFnCqislZuaN08\nyq5JVFAPkBTimhztZ8stFDyb95M0KPNXRqRsZoBKSU+bPf5M3evBVdrGCnLY\nxM+kR5bD2mLotgrXE1PYdzF1F0o/gtBTVX6QezAhfyPaG0g7dA5H+nuhL+kt\nlKNGcaIv7PsJG4BdNVdf3c7pVnjRYyfjOGaA7pzXonzuDQwMiB8JToq7es2Z\nhbe0\r\n=pUja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"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/line-ripple_8.0.0-canary.ff870005a.0_1597367748689_0.7643084718574684","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/line-ripple","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8512c594585e27e637150c4a8504861715af3608","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.150f427a0.0.tgz","fileCount":34,"integrity":"sha512-coza+4tUwEZf6X66nbIBqxeqOHgbuB0DpZ22SCAkO8A1R6mjpxbnFj4Lc/y/lwoKwaKlKhFWYEw8lizyPUCN9w==","signatures":[{"sig":"MEQCIEMGZ1hxJls7QvmxkFa303xgRpsZWvwbrZ/Z2BikE3/cAiAUQ7eq5FmHGu9GJocI+6v5kqUiSEJiK0SAaKhRJR3voQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpGkCRA9TVsSAnZWagAAC9wQAJ8LIMPcQYH9LtS6CAiG\nlkNJwumhrpJJqVFeFQWCGcnwktkMuIBXDUuRFnGO8Lj1ljuc300Oe4vs9l3L\nDFWslf7NNb4AAz76p1Wp/UUCXB8Fp4vnEEworW++caoVV0P7DUzf+FiBBgvB\n2tWS6Z0uAKT4y2l5zwc8KTGyGSIetRPXk73BxXUQjfgkV4gkZl5Aepf7oDD1\nZc1xEQbeSoJwZP449BIkb1/seE43DiEwNwOtgOjtK15zQKOkDY+SVnmAKmkB\n3QlgzRQxxiFB6TLNbWAN4Ol8HHGtSt4U0Fd4eHI4PNoUbKZzLfy9lkGhYuGQ\nZbKRtw+Ur61WSIORxM2+XXskvWy8JLlvsnoL7/91l02g9uQoYBHJ147Ir13y\nz9QILdJaxWv0PTBg1LJkbzgtBe+0CmvCHx4cXuwGSKz/n4a398/6jhFeUlSs\n/+Z7hmPF6TwfIxbYX453ieKqL55HiDyA9mT81+GLHMWz36Ul66W+WZspnCYo\nj72yPGHrLLFoBjOtQtLgqJg6JUYBzcw/9CB8GocVZcwxwu1AM/MqEZinHLvR\ncrasRBdsE8QOB0aN8AAXVxLiSjRtStmF7E2YHtL7gLZgx6IXOAp3LntO4NJP\nzkNiu05wOGYxcWoKAyRbxlojZvMMDTqhFqKZwIAgWPy+iORp/15Xf9J+Yae3\n7XZs\r\n=mjgJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"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/line-ripple_8.0.0-canary.150f427a0.0_1597411746915_0.4923562974111573","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d159adeb5e9fefb1f58dbf549bbd04d029ccb037","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.bcc58290a.0.tgz","fileCount":34,"integrity":"sha512-OVZn6eRDNIFZwzr0druVdYIXHftk94MXxElcdMFO28Qt8TrP8xZg5DaxIrOMNFpNEPdZYn+OM2AUxBI1QUFNUw==","signatures":[{"sig":"MEUCIQCpkSF7l3u5idYBX/ukEWHV6G5Yzzo1OQyN2zxd+ADqQwIgSJJVIeBcg5VeOjA8wSQJzRRr8foKuK2b4Nj6yvBckiQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxydCRA9TVsSAnZWagAAxaQQAJcuSdGaLD22PS4KRZ38\nUskonU0qKTYfqkV34g37xeJupaiAsvNeZU9trqKI0MVQAYnqXufiIHNBRFCJ\nRMsNYILxqwIksTPH985Cx62PjkAesA1tiCyow+XyNi2OEexZNfkjBl5qBA9L\nW4nP85ylJfIk/UvENcbn9uM07Po+8ukrIetZwsJms8E6lk1UkVKGBEu25nq+\nfwzzwEpkOhCuIqV+aA9MSDccCNShP7HpsebMqfwDXGXmY8HAZL2u/V83nWuA\n2Ag/5BDS2lK7PwAmW/1vckhVnwrwPQNkx2NVfcBJAheBYd2Jx+JgYYx5R59D\nJQswr1xlNWtUvoM07P/r/RvMWvI6GmjMuOvHU9zCuqdu1GOpeoJH/khZjJl1\nnLGK7A/9siQwQCER2J/hfHrSkhmrHnigYvGOQp342i+7wTBL7sZeJK1I4IVf\nMktJPo/6XC2b3gYNT+llxGh0u5OrM6bb23CpPgKFdnrHn5mwMssnbN22tGuZ\n2jYgnQ9T9ln5tBSFpavf0wfV2fixwPwLtbIAwzdJBldduPTLoixTC97a76LS\nfPKhT0GAJapKP3OTxOEIz+rEc6dxZo0AqpyVYUnxACLlCMyyf1GDB91OXQpQ\nufbFjjdUCF4HFpfxrWLPiPNU4suBJCAqTELOQWHHR7ALrKnf71m9SuAAjPIC\ncvsO\r\n=T72L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"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/line-ripple_8.0.0-canary.bcc58290a.0_1597447325224_0.5994362131302053","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b367a3cbd81e97dc97c019b26bfa613767900c6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4f55400bb.0.tgz","fileCount":34,"integrity":"sha512-1xzz0ayebM6t4lKWxquowzwQ8Hy9DqpzG1pGZl2oOh1bNrpTWWkHiHMFABA9cPuKdATWcBHoTap3vSVNfcqGrg==","signatures":[{"sig":"MEYCIQDmlpNei2u+0LnMQ0UUzgTOxlD3ZV2u9cDjOnbOx/kckgIhANz/k0RZm6hHm0rBOWMAAhlXKe+jCrOU0Sn3XONOXEyn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrJpCRA9TVsSAnZWagAAwh8QAJOZwCXl0QNfrpykikPw\nq7C+kgH+gI2audtMKd2eh1rC3LfIzBI4IHQ4xpOOQcduxAHSuWrj/9yFcn7f\n9HWKNpIJCREByzUpioEexDjBgzX+ckhkeU8H5QpkSkjO0K6lCoRJU69QrSOq\nPDqBrZoWz8350aHhRVpAObqNylK5R1Tyg1DbcGUAAxgV7HGdzj7wrhCbE+Q2\nPlAK3w0AiPe9B8nywQqlA3sXBocKk/41vuoz+hG2cBjg496iVgMmyxuYjo96\nPduRZGpkj9Liu7bZgp8E0eEOvd1pSbI0PauVJgBR/ng+O2X8Gyz+d7b1pmC1\nmz1rblefQ1piisOgr4EzV5QiCjSB98iD7fhoJS61HJvbMj8KqKaQpRWWzWUM\nvphT/c54Cix+JwIibkTVuqXAIgC0B2yWhYu1fOcPUV1l1ttoKyIaPFKwDnLV\nfU+X40dIjrrWDuNoyTpGXZ55hlHZV5n/V6tCm8LZlsCCAe1W5f696fJdVsrC\n+jCwyC8dfHEzvBC6mbnR5AEDcFbAwE3VUyBxaFwBP5eMTZUNRJhKGEOzC8fo\nxaqwzei3+sVik9WTRgNQTfqf1P765erTjl5L+kMaWTR4tOl0EjkPMo2bjKv0\nH+6w8KwcI0LGQK9ad9QLcfFqAsV61fOebG0z2TRx3gDAtaFKzGc3Id/u2sna\niD7I\r\n=b4+N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"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/line-ripple_8.0.0-canary.4f55400bb.0_1597682281027_0.5378279135271109","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/line-ripple","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01ecd503dfbf324d20a0b5f85fa43b1cbe75e5f1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.000d64815.0.tgz","fileCount":34,"integrity":"sha512-jfSMLBORNwAvg1Z/Q//xVXsQpGQorHSj5TtbXIlBHWryVEynMNt4v3iTyFRvLZ7CO3xxto/w5KhVMIke6vTvNw==","signatures":[{"sig":"MEYCIQD8NFU3US0NNhzDBaWSs/iFE4i0eI3bTk1s8BFk0Cto7gIhAKv388WUGE/N7YSPpyOQ3VHkgm6khnCy5hwTg447rT57","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrh4CRA9TVsSAnZWagAA1zIQAJ4U4ZLaXU9L2XR/I5/r\n3u6fe99F0Xj1LkAwDm7CD3BG6ogLbIohAfiqBg+XuZZRRaWn/Rh+1oX4AmbI\nvPzXPlg6Gei2HKjiyPDlupiECVrHoL7KvfeFYO2quaGOxu4ZQc7l43ZlX8RB\n18oyFBaby4Ub02aH6TXJU5P4nDWSmobHdkDEXPkA9KuWxsZvTXNH/qylpCdC\ngmU4AaOew/8XPELXZ7s1iJmB5KJ7kMyWohD4+FUNkwp4pGaPEHgm/b1Ss8XH\n6pyVlOrZZ9ETnKDn4H++UeGoMxKdHQAMPNVGbpYd0+th8MtSUSaOKgJbLfQE\noUNeGFtM/UDio8wV+Id6TCdGgWApBAdz1e7O/aPsmZR5FN9T0Briv/3aNCm0\nbkvoqMl2ULFXNSbcHk+PxMpmgR1YXokdX0xGCV2pZsEDs6bVtHgigP70RUKQ\nCvV+EKoujq9VrWJjiFlk1x5f8ZQa9HPj74PVlwIYvKpGrEfgtVp63/YYrUNd\ncClme7c9cL+87/9iBTRlSmETMxKypNffFsfonjp5rjGCUgWf/ffR/jcIlBg8\nyijlbkN/1bNgZNRGdKVBMH/fTo8jUJUhLxL4I2exV1IbeVJk3v608dIHrQWu\nhGbEVE4BccCaqkRQsPWRJ3ysSOBtvzNjYn7QaQjGunMOkHbKNvfJFGi2d9nT\n6Kyj\r\n=jjX0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"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/line-ripple_8.0.0-canary.000d64815.0_1597683831293_0.6461296046227194","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b3f13dbbe3e60c1565d385776c27157dbed29648","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.defa599a8.0.tgz","fileCount":34,"integrity":"sha512-9XSG/2vvoogjDntmHx8/1dLIF5YibaBl26SHqpndRlQtEw/p8yVBIsyIpHsJX71ALuQqGSjHXwl2LrXc/j7IGQ==","signatures":[{"sig":"MEUCIQDmi4b2ZZAvDYcJtcXTfvnvGlJbIVfrWrTHSsp2SzbUIAIgCR7OpvbGj55UZseLbtcE1a7XE+mhuGssM4ADrZuEAhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOukdCRA9TVsSAnZWagAA9HIP/RUqv9ry+5UgkhxGe84X\n4ZBEHU1yuSu74oBfYWeMNKKWmX0D7s82VP9NCfmKC7mCkGHYliH6JwYAHHEP\nSoFjRczQRPeRjlGD7QxD0f+UdKW93+0R6qx3dzSBAHuv31P+QYFehzMRQvWY\nCR9kWuBJmmFMAdUjfo9lHJnYPsGWKE3NODwVbwFCD5ImWT+/A50Eabn2npLn\ncXBAT4wLMwA9fBqTye9hIv2URpnzCLGTB4sApay7GEg3zu+aKSa7NO3ul535\nELefUBdZap7YBPJtUFdPcbAZ9rm9AxqpiHVbyMh57lcLHCqgvwXo5OGM8c+z\nucwvOYd44i9ZNMSktiKtXfTvztFugy+sV7iX/Hey2nyUqoUmSAIh6VRQ8aAl\nHXa17eHAuB6wWQpQ2cmoerH/iRCir0Nw4l3GnnLdtQ/yE9/nMLjqVHGK47rs\nTtfERni9vD63JhQWo6sqq+u3dLGbxPQmfomJCKuy3jmfNxQzVxJLTJrP8CW0\nqhy9zMZhSrD4sqqQJ8GdRFw9RI6gpQyk7GjzvuajA6EQogIRwCQ85ZdqFWQT\nkzYQp6DDl8MAUdF1wBFgIFmv3J4ZjTS6sUUG/ekB2zeU/UCIPB7MJOslfFM8\n93tsxIlSmPDa0+CWEVDjjDDTFRZLgGStJOQkko2WAyMSGd3dy8hehIXOzHuj\n+zF+\r\n=+yuC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"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/line-ripple_8.0.0-canary.defa599a8.0_1597696284918_0.04490928993414256","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/line-ripple","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5547e7b3d014d5eda5d0f2a63ee47588d80d74e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":34,"integrity":"sha512-2vWhiJ7Ap0v2E7d9qmX5mIXlvwVkDuGIKkmK9qwzwxOsULjegOfvlgjPkkU3DL3lmzSjYX1ZXWaQ1gqaIbp5qA==","signatures":[{"sig":"MEUCIGwBXzS8QcIrk4oQoT1Rfqb7e9GQCykx//IPZf85VyjMAiEAkIJC1NYJfSwGOeS6hfRys1/8SvahEYAIbjVYQ7YjJIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPB+mCRA9TVsSAnZWagAAM0cP/jhTHnn9VlItddoGqU5D\nYCIUcdH3lM7ZUgAqwkuQzXiIjY1OPD/gEXGT8QjSm7BZGw7HYDhEzYEhuDn6\n3zDd8L0XK5ceBXQ5AiNkVXrCepDL6SXO9xFbRan+DDkcUkimBnVL+AKcJlpl\nKcyNzuGcRCalfuFYK/TW8MSa67ppcDPAASClWRtTfcBtZ5U/tnrg/bwiSvep\n5Bz1dxqoHUsQl33sMm6L0op/hpsWo+slg28dMp8Tjp0AXUT5vev5Rki/wRob\n3lR89LHDaAZraPkPFvtgZA3MObICH1CLwRwFrZ02crgDUQE0YJaU2wVEeOOd\nVGFAGgCmNlUD2hfps3WMW8VGcFL3BJK7HzbwnjkhFZv4a9pryVPH84H8Z52p\nGtQ6ELtkJxTpf/I5SRMAGOKQXC/LRt9udbdhk741JqBPHPL1gBcAnLTN7l+o\nJIcpLZKeDr9VVdOvr+ojFie+r/nj/HdpdSgjiQNFw8uCl9TrgdEwhe/CqNT8\nf5QmCwU7ad9K2sjvFe9zPt0CjHKw01GVBnWSdDP/0KB/qOJMXvlWmPtsfKbn\n2oBVlk6vVNlv7N35tUcpdgcqaYho3V4pYpmUxVlkxDKFpezSfL9pitZgpwb/\nKzYzL67hAYbKqRxpCa7WSw4LJXrx8hSDpVyqiU7CQ9T5o6ZpVrvWcDAqyIbN\nqJA2\r\n=LX09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"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/line-ripple_8.0.0-canary.66b8ed7e6.0_1597775782475_0.3105358365071098","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ba798fbf8ffc6a14105825af0bb701f9813f791","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e2b1033df.0.tgz","fileCount":34,"integrity":"sha512-XpnqY0tVXYFld4lC3CgkecMkMDAILhh+UJtUDum2t88ZIM0370GmzZpuEGsgyoetZp5uRZQSAwOcBeJEuwYGEw==","signatures":[{"sig":"MEUCIQDhHbPAo1pUd+FH3weSgVQa9nc7Aee15yqSe4wLyqY8LQIgAtV2x068l8eFTZVWtQFO+BVmXl97rCUOWEziCWHy+gg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXJbCRA9TVsSAnZWagAASAkP/2pt27NU8Jl0x8qdAcy7\nff8K4nXm/YTWdSuH+1fMdHgPk7ESLmd3XWidkbO7iDwgNUhuzCWytKHqQWn0\nYwIRaGoYIIZuPPo/t9Zj4c2bVY+InlozDxtztqWFSiNJnfndsBzqRwKqWxoz\ntRpq0M+CxWY8IFEUEXukzbR8ALSLRBhRzuqByo6ytpeEPSmRlmhrSR41eGWU\nOyuc9hKIJZkodB7yPu2K/Aeu6kJUKyB/8K0qasGfmXG+Tg8D77p8tQ3HPS8l\nxMAdNPqUVu6qh/81N6hl8tv8bIlT92isicne9cFRWo5sUT7tsCvzlt8tZfi/\nOLYKeDhmOTefZsmGeXZwjh+0HqX/Y+v1vQG274SprbknzApOgABFd/4MVFJT\nyzNCSlRT79ug35GLhtUEXBN0FvRU/9wR22XHd3Bj/S1xnNQ8vS+fC2q7eXSu\n1EkTO1vOAYMInHSfHzyTnyRb9EwGOYYszGXBwdAfpSsFkTjp0COknhetGOJi\nUVKzxU7F7X+SDLHUzKxf4287e3vA67LZ2Y0pwUJXxFn2GzmSZKFK2fDtm2vt\nmeIYZoGSDDnnrGJIqC+DHqrYlRB/hqLs07Vh3x7e9QepJAcr7s8brM6M0oKe\ncGVJFlv7LNxXBAk+VrWZloDH+r3DLlskt33lFpWHPCbSalbd3GoK1uI4oUzy\naP+k\r\n=I+uv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"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/line-ripple_8.0.0-canary.e2b1033df.0_1597862490558_0.23876553934623135","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5f6b15f68f8fc0f483ec99724d437e00fdeea88d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":34,"integrity":"sha512-tVNic6OGsG+RJn4IzBf1pxu80RiR9o8PSnwuWAvoLD4hzq8tsxUu5lOugT1g4lgGBcYd4L3a1hRL0YPs1dZeYA==","signatures":[{"sig":"MEUCIDq2l3hBMJOVxAHyyp+A23zGhXky+acUcCdTwEmppmbdAiEA+ZMKUxAQBC3idMKlKmcskObX2I4ziirp6EzjUiP+vIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXwxCRA9TVsSAnZWagAAKpEP/iMzl8JzB5+01fqLso6q\nApkhrFrCDjqYU8DzeQ7Setu9PskLQzdmHnACFSO6M+txcKCR3s3NNCfD2eNh\n6/gYdsHX6mfN2WCrHMBBE3jv2gBF+9yy3F2GCAFtun9ZMw9OJuGK9kVmVLJp\ngIMdk5ngC4xPh8/SqSugIYYbbFikOo0+8xH2hhTnGOrHFmmylDVr0BcF47FS\nP8JunKAlmOCaGQero6bXH7RNVPgcFJXZ+Iyu1IHmtbEPqpFSPBPi0n6tcXlr\nqlKmI/v/Wn7TU55jexQ/hZ7shI1o6Zk01b3kh3nBSMvn7D9R4Z5mG4sJJcTc\nPj9zxvDTFOZ3EggYTu/+JecTpuMf9/j+m+nRy10l9Nb7qeAUq18tBL0pZcDt\nuW9BANNq3KNYCxUfmc0I3ZnLBJd2HJDkHtsVZg1NjYcY5KhUSuNellcgKmVi\nAkNGCH+/eCuU9SDx5xJXASIMIQvi11WGiu3p9qpyjs2H/NXqZ2kr8YweH5r+\nVG477hhy1UBYrB8K7upJOUdAEkRCfAxX3EXP3aHsNUp09o29GDkxH4D6deLI\nPLGdN20qo3KYFnAigT0AH8WGFYoAM69Fx5lHcUuq1NnGc/sWx+ugqhFFWAEn\nOcTFaUDaVuRmlwFNx3jpCAQAICXnJHOzkDnJv+TjuVm1hN0CfjmyWpdSy97y\nSJms\r\n=QOoR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"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/line-ripple_8.0.0-canary.2e8c3dd2e.0_1597865008973_0.7159006009856737","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a7a24f8386391472f329c1e434bb9accfb7789c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":34,"integrity":"sha512-nH+dJ81xDZkyQsrshMD5cpZf+9LgawLctsVW5DI2H1Y/ldFiXbnJL1nFDoBCbmaZm7qlLTVxUqOGZ1AJzf81kA==","signatures":[{"sig":"MEUCIEbKJKP3VVXxTvOV5JVVnJqtja1iQhmyhm759XHn2WOtAiEA4UdhclJygQBfzi5b9C1OpCLfSRh6zBWcilPAQSd4bPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaWxCRA9TVsSAnZWagAAftMQAIOMdFtpIqCdyh8HIMsz\n8IHA+95xHoNcF3Sn+0cQlNqwyH7H7j+Le6vzQrJviDtWc5/ybvt0snnqo4v2\nEaT54X/eMrgxKdHKyWlYSI+rdcsqrSN2+ezAfDwaXMvWMvQKYIgnUzyT8+tR\nh3plyA3gJ/ExUK7rY1QCK5W1mcHoaD3zKZ9vb4ij5iLvdKSASugyWm+TzGhX\n8rEL8uPJq59IOhj3KC7cbDWvwarZQGhFTYOLw79j8gK2IC5YC8hWxHF8saV7\nI6rj7hCU4U6lWMXcqb/obZxwc9jcnEs2v0QjdGXdrgkYurT9vUipCnCgY+Ga\no8pZrcBKMYGZcgTv30kGotbqlM6pMZgoDoTsqz5m9ORlbZbp6QEfEJLk9r+w\njIpPewRNWMfysH3pd5pAkYS1a70u4eCLIL2I2YGvVJwqx6ySbo+G81DNuWlm\nsdf2s9qOUETSWBySBuCqI6HaZFl/9JZpDzA7o4lQe5tqGm3dedwUZXiBYoaO\nnKgSJI+vZfPJWy2vbsfEeJIrOC3QC8N1mrJ1vV7u4s1aVqRo+Nm1Uyjb2GFS\nQFfC+ZIOeGwCJjKZroreEQle8pi3sv4q2zDlTzypAcBLkaFixLMGZrYGBCUV\nCD1NKfVjw5i4kS/mhJZBpNUr9Z6frc/E/AtKJoMm72LKze+SKezTgD+G6PPz\nmK75\r\n=h8M0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"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/line-ripple_8.0.0-canary.b2e80a5d9.0_1597875632609_0.5750465288875435","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"518619f97652aabd89d4a21e3a85742225cabddf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ff88df637.0.tgz","fileCount":34,"integrity":"sha512-ZYT7TyokzyxilyZzFLJxpxyjUTx3pQG24K4oeqDQf5VQNJJxuFniMe+ozCqjDt3ecxYFhqx3Rda9+i9VSwqbMQ==","signatures":[{"sig":"MEUCIQDY2k6rVi5lukgZWFsKVRWmxSU+Y0fFqBDXCZiObnFnmQIgXriMHnQ2MKbIHim2D9Rujmx6wO/9AVFUj0IXaURjx5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaiACRA9TVsSAnZWagAA0hwP/0g516sFiF8EYD4ZnmHt\nQRlL/+nOmR7vqz6AGHr2qlfKOaAHS2HxhC6pIwyg9x3BlSVm/YJ/+5zvUh9D\njZ0T/cmwQLoMTPQ8xRJnbBcIXhtJJnNVzeFuSQoNlvp9SM6JHqY4c0UHIv0h\n99Ytq6bbLUJs6AZWrJjLDu6yV5XcKMILCA1F9+RTu1HrkSM983DYwx0BlvF+\nTuk1JF+TsY0bMzGlfKXplsZsmVcQLzkX0CFUeELlMxNA/hWGylwm+a/R17bg\ndwra6YIaM0ygNXAn5HsRvndlfwBwM53NZB4ADO/Rj4pYoWB011K9mYkEMopr\nvur9MWw0/yoQ0JrevLMcTHvIxvqnRm5W8EFumSc+W2bPbuUVFpVCluEePVrv\n9PHPX636UGSCc6eiXE7PdnSfIPykEMa8TZcc9PL8gK1O2pRqngbQ+tgcEjcy\n+iIUxziJGJgd7xalug7w7E2FbbDBUjVZ0+dtU5to3kZu8LRKnR1XX2ApvHPf\nYvXgJvBUAK8olN6pg42ANTIGWpx6UL66jRM2yWhqWJ72ggty4lEvssLFGVqw\njJYB5RiBeoGV7Fn3GVLg0P6W7RgOpXSLreV/oatE7fgzbjPF0vNiCapOvCby\n030DafTFtm5jdxN9XPoU5TY88zmgrmffqKhMAT8LRa4CaS7/y8P5c1XVd6nE\nQxs3\r\n=/aHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"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/line-ripple_8.0.0-canary.ff88df637.0_1597876351666_0.21060140915434467","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/line-ripple","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"029def634873e249a8a1fa9b2d3ea78ccdeaefd4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.32fb314cd.0.tgz","fileCount":34,"integrity":"sha512-AudMqPJU44p7CmkYN9xLvJotwXVjUooRexdys4uoGtdm8xzdbuXt/uUAnNCIGYJwXVzcExYw1P1/LbKaPyT80A==","signatures":[{"sig":"MEQCIFRh/MFEu90g51OCBAcd8+HN3ihnwp5N6PPIhy2auZxLAiA/l4b0G1Bb5ddbxW9izagVRIu6KtcXwIp6vhX1Mdb+tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlJQCRA9TVsSAnZWagAAB/4P/3sevp4k4qrKO66R86DX\nGjvTaV5i7+gNy8jhPD2YoVR0BqMbuJBm482+HvBq5pwuRL5AXZEzTOGwnvs2\nOPGBmlCFZ4YoTZIu23WVJgtgbM3SzhDsCDnvoWNlNCPRXlCw8K69I2exbPt/\n/VOe3qZTzDtxkLlpzZtZRUT5wuAaPTlgvXb+vgNnLp/p9OxmWsxFd/mculLG\nxJxqxiC9KAph+LoRHwZOAPyXuWFqQ0k2Z9RMxvjqZgA5BwOHgBZ9u44rKuEJ\n+V0UD8MtCTLD9lSBhrJbbjIvSP30W/+qeB2hDPlBCCpSO47cUgiP5lWF2SLk\nNe1jN2PzZqrZF+PEIuqjoJX2LGYq6EOFwCxvbl5gb1Q6ffQ3wX5kcVVvVMng\n7szEDj56whUOgvWOATtknQqA1oY+MavV1I8hklS2wixgJPWhiEsxHr721Fc7\n7ZnEibO9pmReHKLs+LUeAZNJYpRbkHznQDU+2/oz45kRfdh386RuXqVGrKaT\n631edAhdgs1g06YYr07fnxK6bSr4VfQSKcT7W/PBeh2Z33K8DthuJhMXlqvU\nszKsgEfA2qO5pBTl0t3IDalIyDn1LHoegkn6rrwIKAazowFoLQLKP+8kEiW3\ngpL1S2QrZlfWSJdufyWmsa50S5V6gEUteyE9T9//MLQtUAgpG9XlWHSLwe7o\nWv7k\r\n=rE7a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"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/line-ripple_8.0.0-canary.32fb314cd.0_1597919824062_0.4517368604585452","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/line-ripple","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9d7b8c70a2bd9866151e2bd916cefdd7b8013ffe","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.546277d32.0.tgz","fileCount":34,"integrity":"sha512-QRJao0kPBugn963csnVncryXml1/I4snrDuA08TbAjGuBrd1p38kDhvudXkZ7K/IjkBxxJF7cYjB/OnJ+9xf0A==","signatures":[{"sig":"MEYCIQCGQQEElEjYTQVk9VpP1WE8IwfoMcYT4/TgXzq0kquWkgIhAOwC2uCdMweW/Pg29Z/t3wpk99yj4894PeM7DzFssLqM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqgACRA9TVsSAnZWagAAccUP/iqteqKM/wpCbxeHsai6\ncvVOLInVNBVhHwgLQ1m5fpov50MriGh5dI6PWq5NwlDKX+KBpKWMuTYxRvGG\n5SICyGG7ul9G86dR1RfoY+ToHA3zSqrQWXrniloWTdiEs9DnyxWJGJBT4Ys2\nxfXFKqyovQJrQU+sW7tDYFFJR9mRF2yqkQeyXcSX0JWR0K7sk7Ph7CSFHrg4\nm72ELMaoJiFL8XizkkYOvP9vZhbI0c30cpOH+/0gonem/F7THrvTiODME8o0\nJY/Vhr19pwEFF6z3WbEB7Peq6hJvMk9MWbkQtb4W28KnO6LKBBqnswVc+dD/\n93H2vLM2nERFWsR9j4jkxEHwvS3zmfeBEkOLTcXnS8m+NizSltLenVMEj+GH\npzj1/hb2y0L1CJOMq9sw3Oy8ThDpX9djXGhkgixg5nt9zBSKipX2DD6wbSvo\nIWBCJSfEfIHkToQFYR8QoFm13t6jG1DNM1LPus9V7d+lx+pUQ6Tqz+s6G/NC\nUTHmCZH7NnDMlmn50X56O7CDpyiIHCXyInJna283+biUGO4QsHohbabFjvQO\njRFoNXIlYzwXrvddySvAXJ11T8V44Ka1ZZQ1x7Ek0xizQ+gU55adxhi4kUgS\nKy2XpBbjd83k9IkIj57t4I37EWMcbGR8oSXobfH0zcTF7l4GapvdXFov8s/s\nIYEb\r\n=Ytli\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"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/line-ripple_8.0.0-canary.546277d32.0_1597941759488_0.7649647547870921","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"558ecbcb30a7acfc7e1bb26d6e22e841491f1f73","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.da72839f4.0.tgz","fileCount":34,"integrity":"sha512-aOjuKHCwdjULatFkgM0k1qNMsH7SQsyX8in0VrJ08X68a3DS3J0ZFI9mJQjTHMC+5gAZoa4L/ccWO3E5e7gu6w==","signatures":[{"sig":"MEQCIQClKU9LA9Y01QVdoEfd2+k/jYwKJ0e2tchcAKe60jDBWAIfUoc0gVcvIZxwKptzA4vUPFEZVFr4gusrpBThtAGUaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrn+CRA9TVsSAnZWagAAXN4P/3OGPPwdjwvrJ3FmVmtW\nk8x4wn41QunCXkvpW+If5LntL9TJgCvnOfrhoTiFoZT1YwZ2YjKfcABxmYfy\nFoDwO9yXxdPQMND6Ty3Xeq+wLs8N1gm0Y/i+z9NjPZ+TPeMTdARuPtXHGeKG\n0Bz1Pf+8UTQInrBHsK/+DFWVWqhlg0KucvX/E/cT7lPDnO43r4ugYrtWKPBk\nJ+k4tHnnMJHuHfKm8/RdB/2pXTwpvFy3DADukP7fumJjarqq4TWoem4ZcVmb\ncnPQ1Gi/9R8UbKiNLR9sDwJLv7coCB2z7+Ug96+d40pM6rKa2u0Xixgmh+NH\nc27CVDVgGXvSS23Mgv58A5TvVa6O5djkapMLNhDrl0WmCsSbALiKImq9tAez\nWx6yfvH3obfdd7tjLLwAmUXU/3VfZut13VaMrKoB29G7sr4gU/2qsSXq5J03\nH1C5qMlgSjGZwtBSyQslsiy2JUCXPNF6dcVDEWtUXeD/mCT3cHV5Dpy7K7Ia\nkoxvIHmUl/4Q1pBPK0XqIlukjvS2+Mrinud8VinWvXYsm7qFMoVdhhNx4uC1\njJ64TzcWsx0hkR+g4WVROSQHZ1Bl9kM6LW/MMOhIt4l1/vqaxpa9x2tl+Hzd\ngFGvjTE0z6uU2ENo2CMfq8/Ex3Gvi4U7uEU/HRr95CQJEGk/KqzPfsWZJo3C\nSbdx\r\n=tb2h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"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/line-ripple_8.0.0-canary.da72839f4.0_1597946365564_0.45869632359405443","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"817be1f19f6d94550cbce59e23b0d30b8a05c583","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.346069ccb.0.tgz","fileCount":34,"integrity":"sha512-944hjYSNeGesV66ekMfUsoF0sj3Bc5wA6Ba/z5JtLdRmhdinvY3tndL7vgYY9H0cQQPhBlfIReTpsZH7BN0fnw==","signatures":[{"sig":"MEUCIErNuLC39yYUCHCC5ICpQo5mL4S7Ocb/DbvFYd99fvcdAiEAnOhwvWnTJ08dq0rGKLtP4Q3dbunlywbqcGMk3/atHjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr5WCRA9TVsSAnZWagAA3icP/3dOk0O4Bmhqnnf6L/mS\nZ7YpcAbMPp252imn+G0CM0PY+6Grjuy80Thq2oFmcEG27OMLp/MNGyXMNkXn\neNj8DRHpLevSSPPNluPgU/B3Co46G/jHHlxOhwkXJbvGcRD4G6FO/SBQmSu3\nbdGjH5Q23KDXRCKFvnNn+q7Cg3d2897Xhoa8cWny4c/AecWrHmFCMRzMW+4v\nZGaArfMQb4OKAbfOoBajxdO/nXz+1NDqOyvETRpISCYxgt8/Ezqv+WW4icei\n1DK0o8TyPiGZWvtdlybnLaECa4x6YxKVotdKC9LL++5lhsNr77CnWiExGCWV\nyBFF4WQMjvKQhW8dNqFlAwo/opbOi+CZJ1M0hNArgz8h5r1OZc2uKYyGTcQ1\nlefTHi42+qqmZcIO7wpSGlYgPSylIlPr4O7q9tLxocU93vBOjd2Ux0lb4ZOZ\nhyG8/Az+fD1RK3yBpCIVQdZoSOhOK3kVATn9OBvcKytDUUHAICPByBp2bYRB\n1juLQqku2FUmAnb01TUSgzvFio1bAXkxpjWpZ4yNME1ZNpgCVGuCaPzgK0v8\nUGND9vH3KCGHB+NHj9ZqnuK8Ul5rusxhldqfBnITplSDN2y5QbZLgWY/ItHu\nbpuLgVwuFBzHG6BohoVdoj2D+L1rLAzLp5N394XvEqeuu+4VPV5nD4rVhNS6\nVLJ7\r\n=Uzqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.346069ccb.0","@material/theme":"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/line-ripple_8.0.0-canary.346069ccb.0_1597947477900_0.42930403558637265","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa29c8f1a9e9ccc4e74997adcb0d47b86cce34c5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e27c5802f.0.tgz","fileCount":34,"integrity":"sha512-Qe6xFvou+zW0NcGm1//ulAeZ28Q1WGUTfcnPfAQT/D+S18ww0xCVv8gmTjRbPbDXke7tANWEMm+kFy8W4viAkg==","signatures":[{"sig":"MEUCIQDVnGPaTAOexHks+4YbXjQYYzePQ2OzqfNuEIyzHX+34gIgXxEj5TCR7XTkWXW+0voEYyLTmKUIASq5iB+AMWH505I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsumCRA9TVsSAnZWagAALiIQAJbnoZWB3TE7V/OQX3B1\nwEPw+PlJ18p3s6CNCdISADCE4OlZ3CpbJikBaFmXJeDvbj9Sb6HUmTOZ+AvH\n6rTMjc9V/w4IVdUDxlSFm0dgSP/0e+NjRtKpychjRpBRX2VKT0KRruBbx2Je\nP9Y3JsvFZEPiIjD6CryxjwQLDk087pRNOBttU8Peg9fSGn4sQz1Tnlp8UBat\n7fJvgV30JISReeAN12TRSFx1CU0Bd56JzJWTTQ7qMpT3l935A5veKBs1+e1r\nEXsiBRuG0ShYeHi/LxjhBr1Zp/VAyiaI7WBAXWqIIUSOnI/t3SfY/tfEBOEg\ncUMd8myPLff15eNE8UwygBEkqFr6GQdqY+ZL/c+rPu5y3y8D1Q3httY+5hFC\nyY4SZbabQzWGPfLMKq75iOUrr94hDRM87RwhC9e1Kaok1CS05ehqxPQaHHs+\nfk39a3xjJqfwStseh7ifzUPifMO08AsGXc+DKy7ByM0zjsXh9DUeHVslIvZl\n4+cHCWAugtVpw7wsu9ZTuk5qHVOgr2vd4B0eV0usmSqmPp/bGw2kYAIqJFgz\n3GhB6elHP7AmYbbuot8QmLTDuwYIEH6/BckF31S3uTzyTvJcIDQThhy0SBjg\nkhUkx8quPQdkilCuQVHY7MiTRw/LVJ4rfux6qqUauzICoPIINDCnhRRJzhAF\nP0zd\r\n=24Jj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e27c5802f.0","@material/theme":"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/line-ripple_8.0.0-canary.e27c5802f.0_1597950885885_0.3664753416250366","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9a56989dca266fc13d9e2b47d37c8dca176b48c5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.f4532b9c8.0.tgz","fileCount":34,"integrity":"sha512-AZhEmRIIEjrRBtaOKNKV2yz6KnzJjSJmx/IPEsmdtRXqWNtYKUqpyVai791DtdVF+NQFZmW+ewU4tjW8wVZjDw==","signatures":[{"sig":"MEUCIF24JobHKdr9gyLHD2BYSxk5ciOfq5PPRWD5eXXy471QAiEA2t9bMtVm6ShnVZNm1tCi/j5tPUdJrgvdFjkXn7iUwHo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtWfCRA9TVsSAnZWagAA6HwQAKJfXWmd8F3EKUfSOV0w\n96NN0lCqSrkvuuc09hwWEGcYPHxqJxkMOjo1NYmjPGtfZ59mlEehIvUjxgjA\nbiqu4qALq3TI1boN5FmTvL3n5zqS9yylvYPk6N1VscFTKTLgBoW7PvXNbK5a\n0PVvn+StZFI0kSJnatA98LskdnvRlU81ThrOZSuG2X4SdMdBlmvCvhi1Dd7F\n54sJYMDN2U/YloyFVmexk7JS0i/ieOjqksfCiMbGNVqz+H1Mp253pxtoKA/q\nImGtB6gGOfXCXDc4rqK2Yzh09hoiILhR51bKdRDczMJnCqad/eaDeUHWAEUB\nEcZuM0DY4Es9bXO4vIKN0jMlMlQHUrfhTkYSlHbxc5JJIeQbjCY4lw/e+FUN\nbwUqusK2aIhQHCzT6W8uDqP82oDtSqdD6anU2dXcxO/70xFer4JQWO4d45G9\npiW/ng1X1FrtreBNu2WCHm0E58QC/1acLCef9aAxSS5lcX37ssz9L3d/AABp\nFamn8nwJDrP4KuyYhkwVMGS+qsGwiHwki6A/5+VBo5jP7bNrmZhiF108wpo2\nMwqkcuN4Qrb4fxHJWNtFIFNV3oG6m30TNmdH9LwOb9/kBxgyWAv2s+srcQjl\nkLlLulJwtezf91//truvynxK1c0W5VN1RLXsMvrHxzoPZNaUHf9411rsZ+GD\nHL8+\r\n=Lp34\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.f4532b9c8.0","@material/theme":"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/line-ripple_8.0.0-canary.f4532b9c8.0_1597953439001_0.46961966045789016","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b7dddd702713612efb7840fb43241cbe8783e12","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":34,"integrity":"sha512-h1eHu3Wubh2nbvm9+qjEweTBn/pIJv4X9HxjUvt/xm3QROvA8NxkjWD8GwwWmDetSIWsg/kgWaVJ4YeTTerCMg==","signatures":[{"sig":"MEUCIBb1h3zD26k6J+QgZkhllIA2UlIUhzMgJ+/0vb0Jb+AtAiEA68HScnkNtRCKIa06XGc/b24TIeLJ5a3AVMW1yMBD07k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuWzCRA9TVsSAnZWagAA5GAP/1nx0yRE1Y2mkfaC2TD0\noVRSxLpRQvAVXDd5oJCKvT2r7ElY/48HAKpESGpW3LSNw+B/EQWgoM7T7fuD\n0oPfDHmaQ5jOAHceLqLuarqDUi66+B/GpDRcg8+VTxnTti8iTQg46G0sGalI\n9IW4m9qxQxnM9gWjTUqie+wT6LyMkHegZDXz1Qb7NfeXyfkSTLSlOrWmijox\nZf1nxTld8imqVfp15FKNejJIWLGPYz7pA7G102aDqh4GvWBJUr8Rq65cQ2/d\n/CG/dvj/vtAiEjEtZZaFucoQsjf5QRfvUO3yhKeYmK5nljRTPvqusGJK7hAS\nUmg9bwq2qXY8H2WcuOrxpROZ+/X0vn2ren825mmSHyMb0S+c/BzXS4mU+qLW\nRyljEPsCm1+BHHRuziKmRUz2KQ0WtEM0N1ynN8b28yxy8as/9pe+gTQcCI4J\npbRSyFZXQkQGfs2de16vlO5u6BJNYt5sI8rdS2SA/ac7ZGt4brNtThxozC1x\ncMaFFFxyPpSJVD86dt65hTmhmhmKBBGz4YISNW4XAoYdEq1juGMt0TQm0VB7\nMoEYe+MUER6kNsx6xbL3V+NrZMNZNUqxiLbFvlohO/cypk449akcUbV0wD0O\nv2dUDIxtVVlFim+MsLJbFsT9NU3Ncu93bXe9ywqbLExyPt6VcqJ6fcp8ISfc\niTWo\r\n=FSAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/theme":"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/line-ripple_8.0.0-canary.fbf73c2a6.0_1597957555315_0.5108543286727174","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"32d36e6e2214d16d95eb5cf93e02880e23141e56","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.cf800124f.0.tgz","fileCount":34,"integrity":"sha512-WkMPeJqj90XrMvHdinVLJPeQYVqcPLsFRsNdpU2RaPzdmawIXelofjFYU/Gae3DoFX/6Vu9D89MJ6Kj86D1iTA==","signatures":[{"sig":"MEUCIBnuWx24iMvuPvZjcHTM7fmQlOgNAvFnH85X0Mc4rbZAAiEAvdHjIDLAS/pTG/zSskfRYZA7R2A86pSghs7po0hOj30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvCMCRA9TVsSAnZWagAAPa0P/2V2EcolMDO6TmTWSJwL\nlpmiYuitZ+bq5+h812w7PqBec6sGwyUTSGosu4AIwSyqNZV8E/wkzF2qg+fg\nDaT74/776e4FVqE9572Uhx1reC+mD9wENMjN6MrUOLipxMMTaAjMt/JgV2Vp\nVTKsFdhAxYY4HF5JLgYnmCgNcDKk/bo2H8xog+XQmsXZssjI5g19hsJrE1mu\nCiu0yvXUmPsHWQmNf20GIkyNy5DHdC/U8+x+3r4UxoBvw1l7W0QEG0orV6fc\nPoG0XxklYV0jljczVNBubMdGMFHbWoa1yZ7ifRV7oNYvAiZ31MIa1Jy8q6B9\nFQyRQBRoNYlM7nkgXcbYFL25qqnxBgTNAwO54Y3YO2dhYBZ4sSEtsb4s4FZJ\npz3YmUjAAOJHRLedaFqyTIsBO3rr9JUnL+PMsCElnGBMiOMrvirwA25if4Ah\nZnvl5NVlFcATKI81g0cGl87kP6LZhYsjea10EjTjtci3sir1ARUwPLaRu1W7\ngiyyw8/dTEChucgcL8SGEsUGHHaFKdOXyVzhkf2QlNEQ2LUI0er1ajx6cIJG\nDqLYKY0dzM/xg3327BlmCOthw9jmdfQBkjFBuMbArOVYnTbKy+RFvh4TcAqZ\nEItlCz7FT+GfTgdaaPf0mBTyRRPVFGKWCLXFY390Z8Ho5+nVz4PbK8C+Owu6\nEzVC\r\n=rx9Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.cf800124f.0","@material/theme":"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/line-ripple_8.0.0-canary.cf800124f.0_1597960331876_0.015331314443276955","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/line-ripple","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a386f7bfae1e7a67c31bb961abb7436e56c06a6e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.95e4eeea7.0.tgz","fileCount":34,"integrity":"sha512-d5xGxz5ZVHCLrLwM/fT99DXCEftbQOvtaVbKeWzLG9j+NCQbwYiZA1lBDl6CNB0IhICD9F9UH49/Rr9h6RPwEA==","signatures":[{"sig":"MEUCIA2i4vOKCW2T7o4QGlFKqqgGBxEYtXRRR6PDotHU4OcgAiEA+34+IW6++xDYvTaWKev6+eODtW2GUHtelpV5SNwQodo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwcYCRA9TVsSAnZWagAA00UP/iIV+L+JHwNwGJtqqyjZ\nGA5Dspv2Fy9o/8y3XqjACcag/w9mvIjSnCIOMNkVU8XPJbFMjjLfzNq0G0vk\n+MPjarqyvumrfQcxNZtcUxRahwMj4cY84cToVvuUuB4t0Qwl1LizslN640LF\nOZhMr+j2tVuqrPooTEThSiSDOAAv5/1IhhMB2Ay3pWzcUGO0TI/koiPNwy/f\nb+wptcQINhL/fECzRupIB3ih1PyzvlWIs66Ff8EOMhTapx4tOjaidPuAnEmO\n/or2MPNowZQHgaBF7yyiiLLc+rAaHnErHTu99bKK51WGfTapakzbk/BXBFFe\n5FeJTUL+dNeIjQzTInWPr5MGhEhxJ8If9pB0pwJeUBYeYmztUThvjHmDkTrH\nwSae5/bI+UnA+hpihEAJT9ZGt1APIUf2IWn2jwpyR3YV9cvrfYkr62xp2Zy5\nNLU0yvoZWc+3qpUGWDShIGzy90aN7pEUc/yC2ZGD0pnrhhflz0v5Fw8MFhmw\nd5aUOKTMus3KA0cokANYWva7AKYUd2eGhbSBkkyeuWI1oB5YFYCy60LUfA0k\neiu+BDkSVAy5e64Rt7f5f3DOVa42nENjYs7HbecYZS+StcUACvKN+8USkP/x\n4WzlxZfKQBNH5UcxWx+D+loPXm2bm0DA+eYtSqsEJkSmB1b44cknnuDyIdpv\n4nMV\r\n=yM3p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.95e4eeea7.0","@material/theme":"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/line-ripple_8.0.0-canary.95e4eeea7.0_1597966104124_0.7351687441718915","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"329c5198f9bf251728f57bde900b11f1897cd7e2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.91ab1c62a.0.tgz","fileCount":34,"integrity":"sha512-yjDZOPPszpIVsOtPQEZOiyY+Qkwl6YNEPMskVBJPxjlgLRHE/np2UIMuIJn+GkrTHDk4CSBSOrC39Z4b5SMoHQ==","signatures":[{"sig":"MEUCIBIa+GiVb4GdITc/m+63BTC9gFgPNLU2eDjCx/GHQ8mtAiEAxvfN7AKcA5hco5RzKc9c2clwyuCEn+ZiaBn2ZZbicWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+QZCRA9TVsSAnZWagAAvYEP/3hna17tt4Kt5vLg+tLx\nDaO0Jzy5UdszhXKShNEKJ17lwvv7tn9uOKa4r4WTn6bRx265SssmpJGjK9tR\nJr+enkH+jwFQvBxFcnVRR/wZu8WDHnwQNbZ1UX6sow5bfwED6Fcx9RUwsbDw\nazqPW3fMfp72BBoXN6mA6I2GHTOXPA2tb4ffeOvR0S4dp5yzmbMYOptS9GVn\nLRI71qZSYbTYnBGJd7oxE2jvqkseEAXWnRPwTkeK7r8rjYfSnVvM0mkqo+//\nPJJTyKRdhuakQBIB32kOdUYtdJ4X554PKM5PyKTl1swrUJeTjsr+MV/EryDM\n/RlzVJvwb4fL6GhI4PCZ1VGdPZzJDL1L39TIKVXslpw2XQqJZkR7SGdzFrrs\n3wG7rFBayFhISOvH4aKRpp45ilvItZA182HabGlOqb4CR5HM9Xt3dl43N3tO\nhdUYe5PUxj9kQBkASUHgvl6kCZM2ky4tGMD+TiRadFnEAu7299tutgC9o05J\n+zsb0hswfgSa5QyEpDBYBI0IrkMKGBPkbk77K/qbUm4IADA0JkT9VWvG/tdG\nIzjlqr882zlicumj34ACF8hwjRRZABhm7kQrLqXRBBe5grNWq/txKStKGeK5\nYSrZCDRbJnJeeEy8PJfpwdtJmjiLju96PFbxOjoYSJVWoda8U1khd6FXfDzz\nqDq4\r\n=0YCr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.91ab1c62a.0","@material/theme":"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/line-ripple_8.0.0-canary.91ab1c62a.0_1598022681276_0.9673469272768251","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/line-ripple","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"abe278ed23463c2422182d05e2ce30634923ba42","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.58eaa9f02.0.tgz","fileCount":34,"integrity":"sha512-N9AIiwaAdrDTuqnJyTbM8tO3tVuWP9SdUHtTGi+tHmXcI+hoBAXC7F2fH91avF1JdQsJfxtRCnuhXXcw5v0unA==","signatures":[{"sig":"MEYCIQD5Pw0MBJNZmg/OH7yAjRdtyGQkvonNZwtZHGWHw783DgIhAORmiOb62VjrCIwXuSxwWWWFJQeDbW9UELsE22naNTJZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCe6CRA9TVsSAnZWagAA63cP/16gz7z2pZuQ+gRv9JlI\n0g723kYZyKLt+cWNpApC/HB5a8d6D9mbkm8MmTQPOtD2roetl7MPnEDJ67Q3\nFnuH29szHGa1PQmaphhM8exVxbg1Gff4TIpIR+Zq1VLwZcKDnulRv41NJ2dH\ntzqFU65mq/WbybKvvLsJqIJ2p1PxwEpGKui3CHUGPhv3jv3F1Ap/tS/8cnne\nslLWnwpQ1RHud6VjdCnMVMSvJv1nFpL0DQ8xC1M5trNtGPDSIXTW2oS/NhdB\n1eoh8LQbpdiyNfAkF4SIpUYRn+jb/j2CRUucd8vlPv2CN7PYgPwh7L0+8sB5\nYjdQzD2B5ypg08h+/CZxUYD8Ya8E9wOHAhRCYEMI6E+Q+fLvXx9xouQoIHjr\nWh6UyqcEqQaupleeGeGcUhZj3lybLXX1SSIedB2wFWWBALnzYAcYJaB45p82\ndiCAHjsTdpnZSUkgA54ku5ZAIeJN9M18BZPSlkfs10Mtn7mhZexBSiW702iJ\n1ticlmzO+PDddsJWJ6XN9SxEklxYCJWNQ+t//1PA+J6JyKbIb+gR2H+Cc2pi\nCsueSjLiN77pKuVS9TonAxJFUFHB+UOjhkqWPTrDEENvpZ04DXNe/4Di3KS9\nNdxLXGGVkW1GSm9EJ7nsNBeSLMp11DZTH5Sh1D9cPzdOSmsXhfiJarKx9tjy\nQ3nW\r\n=nmF+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.58eaa9f02.0","@material/theme":"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/line-ripple_8.0.0-canary.58eaa9f02.0_1598039994486_0.8983945846353742","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2d1020edcd576e4262ec3f5c41f61a4c9318bd6d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.238216fc4.0.tgz","fileCount":34,"integrity":"sha512-M5PGPSR75JJjN4kZA8TikWQ8otarUTSqMZuUjP8fMWbNeVwBxUiV1hspZdcUXc0cHS1kd2x5mn36f28XfAObkQ==","signatures":[{"sig":"MEYCIQCJqKJ3RL0GI80M0XUN+O+6P3Y6Xp8qvByA+9MQ6ColKAIhAOIH2Cu5SX9eKYJOoxQC9ivb156rU4OlSkpQHYT013Uv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ99mCRA9TVsSAnZWagAAQbYQAIx2SYiSAhFQtL2tNFaq\nDewlHpBpXH9hekPk8zJ5t78QdMcxg8HqcfPbP+zFw5TTCIvvByRBY3WewW8E\nAMIVjQFqvELMzJY2An/zc3tGFVwzVbxu/kdfkvpThs1f8RGG7p2J2XnIGSwo\nVV0TZfwixkl9d6UR0zgYUo0ZlgdgvKb85ADb0iv0CdvvBRqGiPtueXToKzAa\nDim/ssYfkI0/xJ3zU1gwneK+xsNKu4wRSV6bVMIK/844cLfgKE4GOtBzy9CI\n+iB7YLfcPS++ytUHaYydJ+7C2bOJW1VAXob2nNcsFG4KLgxCQvEpqfpvSvmu\n+DPdB/bToKdZEPoXHd77eb8kN6IOBxOg1v6TlrjqbqF5o1ABY+hlp7DVfZgq\n0V/62bcZZt0X/TUtKiZRXjMYKXHG1ahnxtgjg1xYrNVwWp79H9cgSHh3NjJ4\nx9DzkYUxywr09XZSYMGUqW/Gm4M3HA1hyR5miWT/R+pqt4ZkYNjuIweEyUZL\n3cGu6artAHrlPOKOnGOzfiY+oM0nwrqGUEMu8V75C3Fi8q8d98ulk9GGPPxh\nT2qiAexj4Qg+OV+8MZcV0aqraXM52PfnBoTTsOs2fc3B8r0UU51nHkDXLQng\nSTArUzgVYsrNoh3VBadF0XpenwWlgJKAXaNsKJkPZGXAt+v8JPGj5LyfmSnG\n7GPx\r\n=7Xlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.238216fc4.0","@material/theme":"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/line-ripple_8.0.0-canary.238216fc4.0_1598283622211_0.245918890578396","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b80d61512852099b03ac0a99d76f6b79047564b6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a1c65593d.0.tgz","fileCount":34,"integrity":"sha512-2GJ+N4uh/+hfk9c+7uzsms3CJE7FfTOXsLHARqJl97p8eCeukRVRc89qd+ChBDChz+zjKdsE0hvt0mucHFXpsQ==","signatures":[{"sig":"MEYCIQC0GRIHayKEo4KNksYS4hagiRhWUhKsd66w4xHan40CrgIhAJNttFSzV50dry6cpqtrrKB7NfjWwozQ0tB7Ed+mLLFY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH9+CRA9TVsSAnZWagAADwsP/RNqJl5J0Dycx1h61a6b\n0nv5wRs8QBkfMeZY1SaECmrAshKs7xFufehP8n9krbFG6dQI1561niZgoAI7\n7e+wBulOmFDZnVdx5gEbhcHPyR1Pab+5qOLxifrGd4/qSSFlrue/Ft5mJaXU\nuthwn+n5hmOK+Xhru5EN4ip1A6iCYzpylzT8B45zRRmPOATMpwWl388sXLL7\nT/b16uCs+W1lFGFtabwuLUs4DcBLL+ec72yt7NGaAJ66Pcz3gGDXyo32u+yk\nNa4NYjfvPjZ3fG2sksCSQPzdrmoxG96mf0vnBJ7GYcbafzNuG82psDCDVW2o\nmgJ0Vp1+Y8qE+RJzsYYP03/c2wNlrr6p12VVFM0JrN/MGWUVwqix3emdaczD\n/4P08w9ql4ic5UGoDu0urkxCGQzUFfdzoIXxF2sZrQXIXLkZIp/EOG/+RaAf\nydVfEV+qtnUSb35332D4/K3hjxiOe51y6EQuOrMK8NbaaOI0uXdQVmVekEMP\nPON+42fr7d2JKFqSyHCF6FbYKVVVlSTM56uhoNjP/CCpEIqiPGzx7hDe0ACE\nsBnSK0FKjA2i5zuNugYcZtt5rApsDdFFxYlUCTay19TR9dqWcG0uL82KChXr\nzf/m3AMRkml5wdbST1lKTxOKoAdGRSj3kh5IkRicylQbAueNYPhfq5VceFn0\nZFjc\r\n=XLQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a1c65593d.0","@material/theme":"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/line-ripple_8.0.0-canary.a1c65593d.0_1598324605925_0.9571018657711376","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8041c7dba1f65127a99a6c7bc16b24961e2ec28c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.708cc09c4.0.tgz","fileCount":34,"integrity":"sha512-YzxvrWnvoiaCrYICIXFoONgTWnyFwoZbikXUzIUBQXIuzs6y0oFt7D6YxXyJpdwpHlbdbfuOiFAFeBhM3ue8IA==","signatures":[{"sig":"MEQCIHxgVKzUD8sA1BPod6gSAEJxkcgefSlB+CyyXt2xuzy3AiA7nNiGv8oQcA1rKMd0+okJSeO4Tued+Md1BgD7/xyfxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTSQCRA9TVsSAnZWagAAGs4P/An+mVhffnkta40yca40\n0QB+qhxIhdsn7fbo8EMg6wNjCVd5IlJZsDvv74kPXj9FFw1HgF5Lk/KuWw5z\nSDQvMugvOO73rnX0QvXQ09RR/jeZnNzLWuOZR9t/2yG8M48sU5iTlJDbZWYk\nmQ9Bw99yo7w+Hfj/VODMIFEnZiFfB//RH/BF22a44vyntBptMIHBMrchLGyS\niji6bh/jYW666YNxiBIAG/zHAP0FcrgL6m6G94AMjdxc+Zmf7Idj48P3tSvF\nmb2NA0TYXPoPi03ePZgf5ttCGRT9HQMYTurItX6Ju7sQMn0Mn62x9OzBOwNc\nr2VKZv6ASbST+Us2A3BE+YImLo4RYHi0oZkvB5dWQ2Ymz5B0jPuaxhrx8JTt\nXluTxfcO9Ctt+Fzw6EGVyonp7ezbnxjJr9q2YVbU53Yepi8cQDHhO0+EeXTx\n1yIGScYSPry7gZtZeJOs+CsNdZk1jjU9voALzsB/1srW3itPpx2k9UHYdkpA\nHwt69608weFUj92GXETduwwNJDqv2shSfdw5+4xZq3zQWDNbmxTj4pJaJgLU\n9HHDuXGeHnvHROnvKYK2YWjN4Gmivim6CgIhZJBUJQ+OhwIHSonXE2LuhIi9\n2/3beLMnErBQOgcJ2EL4jZTXrP0URDjB7vOpSuCx2ONDbFVEpEg/2aRxIlW0\n2ByN\r\n=C12P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.708cc09c4.0","@material/theme":"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/line-ripple_8.0.0-canary.708cc09c4.0_1598370959685_0.5189962236058248","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/line-ripple","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2636177ba16736d1a39806a26032a50df47ab24c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.19bea2ad3.0.tgz","fileCount":34,"integrity":"sha512-EcYNtQKZ1VhrGt6IY376RkgKfRRmw2Y35Osj2Y674ziaUQCTy+SRoNTjK9QjMJlqdqGIca47dSgiChDmIEiqcg==","signatures":[{"sig":"MEQCIDsq43B4WPImMl4nHBVANY/C0P1mRc6KDOqTObnKPvinAiAkV1gnFxFZsfakYuHYlY99qs7vQDKupBoxzclcNDmvOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq6UCRA9TVsSAnZWagAACeMQAIZOiF2TeIf04IJYwOts\ngTHmFQyqB22Ff6cUw25iFS2hJmxceloYINjVwvetv37Aqkm0HpIDW7C9QFXH\n9JzfE22R2fM7QZZeannpdgflTsHpY4Ih0inKXRvticAXXcc9hXi1Qakb+fmP\nQtBVED/fPSrm+4C1vDlDb3wdgip2uzmWrfqL9LxWgrNCVFSXvrmGSKKXcke6\nzj58IAmOSOF9Otb2pkENUf2FWSgcEL9tSzJAbTUAVaKq4Tz/PE9pwQEsBmbG\nqbMW0w/4DYa3RqdiCgAGJqijVfHSU06mgDUc48UaL/IxY5ORpFBdkBiI30dX\nuO/sWlgeRcF9CU6oCSosV64piEcDo00yVZjTmUQhMNxFAll7+ZeRUPg73CIw\nki3cUhaZBk91BwTbp/alOrt0gMR34NS2ALwuXrImZcapPOd5NPPFfmmb2Ub0\nXAgnQ0ZTfFlAmo4ahDSiBuEXkMD+SrMPdrooqN826zduLQq3MHQCKHEVP5wc\ntP7uMquzv3D/VwBt/5bTxnWabonMJ1Z3+WjhcHdcdAOrbANFkoeTceJosm6a\nLgUjBy2SxljyIj3EqCuTEsWEm+0j4Eqw9p9AEV1BFvEFBNJTaxwYUx7Yqy0k\npsPnpMsiYMKZpra5ewG6xqFgNpbDNZ4gMiOIUyxjvRGT0q3DUNKq72hsx+7H\n4bE5\r\n=xPUc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.19bea2ad3.0","@material/theme":"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/line-ripple_8.0.0-canary.19bea2ad3.0_1598467732283_0.5577243017417046","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/line-ripple","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78bb763fb3dcd4ec9c173fc2ead3634e2d169f14","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.911014711.0.tgz","fileCount":34,"integrity":"sha512-w2YhACX3mwAJg+hOCx5ZLpojeCvjpdWPJ7FTpF+ZPI55oiMIZCx02QV6KUJFZNM8qTH7VK2xD2e4+qgJTI1u8g==","signatures":[{"sig":"MEUCIEkxl9NIftPxy6PKfLONXE9ZFkGnTubTk8UQ3EAFBhpGAiEAhsEaroBxm5kZk9Z1p1ptdE1Trh4NLoq86MAYCG4I5/U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9pFCRA9TVsSAnZWagAAIH4P/3xxl5k98EiX2Qj4S7we\np18tr9Gm8ppCOYLyk4KtqqcTO354LxXrLeh3E9Yxshus4N0B+2hWPM8VH7YQ\n8MGom2Eyt+/hNVBWFPdFKP5sK8Lbdutrax4yHHt/BiUchNy8D3tAXDa+S26W\nFzA8rQfNwfi+C5+DebZ/dH+fdpyiuzU0cavjp0HvqO1DtFWK23RTOoIVSEhT\nmNbvFxu963WJYPx7eFIcznJtWnpNSA7vC3toYSybrSKmOX9AeKWThGXyOT2I\n+jrQhVL4/eLkHpiuoz2Ll7zTkf02qnQNd56fDcT4+syHQzyQqMYRML9JKgZr\nQANUwABOwvfTkC8Dh1AXGj2pY17HgFmpzNtKg4+3jxmF/4cvLrMRgCz5t2Nr\n54d/odPry3eRFOjQdfAe3xIHIT5iN+EkA66Din3/TYtPKP1B9HJ4n+6XRbej\n1BW5zWRXbyO5sdmvIIXziTimLInFwp8LuEmk7WalqlT0WiI/b2gsywkxsgdr\nl5L5bhkes3O0Y47e4RHXkJQ5xmx6ps36I5GcUbBQ9ps27cC0R3rBKHcpI8Qe\nIg0hfnswsy866g6uCp4neWMB/XXIFv9IzSRcBFw41XAIea+jMh1Ued4pg9HP\nkEZ5YuCxIldR6OK/Q08DA0UBJTcNEIWeF3vQD1TyZMCBdLDwhWhDxheo4JvG\nZPIs\r\n=Um0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.911014711.0","@material/theme":"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/line-ripple_8.0.0-canary.911014711.0_1598544452465_0.7415192550077971","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7d80bb3d42c429236917bb72bb1b512a3dd894a1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d3387f54c.0.tgz","fileCount":34,"integrity":"sha512-PmGzyYARkkDfeSu2pEZu6GnI/DAoidRisBs1imQanXZZzzb5vhyeGl8UIHjnU5th1eCoq1WCa2hrvubJa1QcFg==","signatures":[{"sig":"MEUCICZ5AkDIFiWTTtLCvjDBI+3mwnxcp0jz8JlGSPbjYahNAiEAzpNy3NmEHklHPuKt94Y9GGEDt80BIL4sQ5f51waqKpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVf0CRA9TVsSAnZWagAA41EP/iohcgIyOvMrejufelFx\nZj7X2YykSyy89gwUisuvV7KUZJUNsZUCc6SAuKrh7bibnITyCXu+0HhMmYvj\ncZjOgfaNg3yqdXDGHfwu/QUBdzD3z90XHJYRaWhtekn9OQ9+WFMMxkDoHSXG\nZc9QOBQj+sDD1R+oD+5CGEd7raPRiJOVZq0dESX22GgGmBC7ZpuXSlSwSbU3\nljiR1XriuwG8ewGWpdMNRS1kPAZHBUb9r+V6qolJIAAGm/wcW6HJN5agNGkS\nnEotAVBoINjLLubh3Dj6bGkvJ5z5Jcp82YqOV0FLWtZMInVDTtZ687Kjcy7q\namadYqyoRBAiDq+4Ceo8nA+NA+FuInyD6uLgEm7OWFu4Vsywa7zDqpXVdSI6\nlpiOUxr8IMzegZX8kfIo7DxJ7+0y2qXYZGW9i/rv0rTrpJhRtTlugtGw8j7W\nSn2YZw+3x2b3nEiIprTBZqRB80NTl5ljoEgGm6SQ35iiEnCN4RFOuYnMaQFN\nhF5kh5FFsuFeGMr/+lONilbfguwl3Jcn/f+iv5aHb8lUMtNKR6egi62u9R7O\nnhYqS/mYPMjysQ8MiPGL47vWxuUCEFCUvYVN4runVtAlg7jHcJQ12z8ZizrU\nSWpe7rn5YZ6+T0VL/wHd41JPdVGYukg1O6gQALy/zYkM3EBsHbRM909u7Vma\n7IOO\r\n=edr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d3387f54c.0","@material/theme":"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/line-ripple_8.0.0-canary.d3387f54c.0_1599166451955_0.4720296861518529","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4d5dba7ec4e65228f03ff5b0eeedd86454e7a910","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2ccf996cc.0.tgz","fileCount":34,"integrity":"sha512-+nUFfgL0VgFi3hzN0knCsjMLIDSWPrLPKs0aUIsmtbIuae5mFg2AjYq3hD2AUPeRNaURA0ijLr2Z/UUy9BF6nA==","signatures":[{"sig":"MEQCIBKwI9PZzGrks7bfR9HQJzc8RXXi4/gxwDLBJgKtt1kOAiASxzvcFCsccUt3ARG/gWOvos7r2alqlfOaNbbw+o8qNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVgQCRA9TVsSAnZWagAARTQP/2Uk4oNG5AOQL0sXKeYm\nG5MfFKE7wHi09HkxOBkgAoMYNsT3BgtpdsDEAA7/c2lshUDGIce0979LmxqC\na5qcSIByVpUFuuW02U0dm0lZsTIRGDGfCVnmuv3LEL67ZHeqqmQXXJMcYA9z\njknpPt6Rbr/psdM+LvDyvh4jP3sTIrPRLgbbXG4IyG/cUPlRtL751HAsWxJa\nvzeMDTnts4c7jy0a90XFii0ZQkh/2f09n2VNC0drdD9uvrKaWsJcwEw5qGrY\nca2ck4CTVa4EBAJfT/q4hnTj9gfJ2mqGlK1MvgS2B2lTKHr/fm6+T3QjAWSu\nEBjwbcHprhhIgwjzrYxG6VGDXiiVUo7eXDKVMF26DwIrD5tb/N0kcy6mP46S\nt4M1HeHPbFmZMahUdEHkidOY2y4Euhp1MccVEkGAGljg6/lu+H2AFAoNvN/t\n0WOH6xNgpxH4eIwrOiuCQnuRjZNur0ElPDEgzgvJirv6OFuSktq/oYu6h/q8\ngtev0Z/neGOzSxWrmUKGicjEKlU8YqATtdlYyIMIYX0Za6j4YekHjCdb58Q1\n5vY+othtnVFWd6Lsn1XHC/NTxnyOgQhnxlkAtiZJMjeH9u6PUAFfRvNubE6u\n7GjnNdpPAodDBshUexm2hU8NdUfpAhwDWQn0tlY4eiR/7chEVl9/qbnhiLl5\niZ8J\r\n=nzQi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2ccf996cc.0","@material/theme":"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/line-ripple_8.0.0-canary.2ccf996cc.0_1599166479629_0.6068639711037052","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"11b6ff33175a78150b0b25e0bd92f7d0fa445304","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.744bfe5d8.0.tgz","fileCount":34,"integrity":"sha512-xnNquwVG4dISo6t3sE9M+DVVeEuAMv83BzuwI2YXFBDRNsCnPnAhkqYscq0cisrJe0ejixE3JX36YKU3mm8uTA==","signatures":[{"sig":"MEYCIQClaYUlaoz4dzkqUtcUc6demz7iP3x3fXb4lSsep+FPzwIhAOMwCs/osGHT76lf1iiDoC4pzUQ5ScauP5OiCOdeb4MH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVhTCRA9TVsSAnZWagAA44UP/2pE3O8H85WZIDsB/V+p\nZUVGKMDkMBSebcaYgm0VqK3UR9S5KmMDEq7gPfIU1k8lj28N+hN3V+wHnpun\nBUi+o9uo8i2drtVoeOL+xiRFUkzjD3UUeA4xowrpWGvG2BNTayWpfEaxMG0m\nMTCrbxGxIyK2HRqbfxKtkLG5lmLT6b/us8caht/uoaejsgBW6aHe2FKw5AtU\nsaGV5Pv1KSZBLpHURtEuVFm5+nr+YFD7700eHwknjyL0VkbhqUdl0BlAb8rM\nCS41u6cmZBsomg7NQw1ppFDrOkPpHczSSVyPBL4YvVHGP1gXV777hn2KkDA8\nux+zg79KCsBQVU27mxKpWzZS/r/kpmJ6/mNq3DOEGq3ZGHp1ImLLnBcnr1sD\neeXmUNed/Be5V9SXekRLshhdq+OIQpNo3J82GgUOXASatF10P2lCjohvr/y4\n2lBjeHbjz+5FweKyJmOePt7xns8TX6n8JsjLUohicxyTWSrVvMs3UlOac7re\niRmzJ1JnPhFifxKH5S0ICxUKdzIA1j9BOHfOWdQ4wQCSI9YUwwhjr5F2m39V\nOXvtHhelGhURg2xGKpH+nq8fdntriIPGkIPzG+ZbYfxBSwhYiOb5kK21P8pk\nbETSg2+9ndRW+zMVcBjVaHEyB1TfrquqR7j3nVLajY4XOgvSIAIiJeaKSNZW\n/Fz0\r\n=rJGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.744bfe5d8.0","@material/theme":"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/line-ripple_8.0.0-canary.744bfe5d8.0_1599166547453_0.8110861292652112","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/line-ripple","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d43d1751f8ff3a53e7257d1481d3163e8ac519d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.78da96eaf.0.tgz","fileCount":34,"integrity":"sha512-CT5R6JqIhROcUv8iu3a9V1J/Cx+itL/9Su12r/O62x0Cgze16eLnyTSdprv9ruToNJzEbcErLggK9uNxOzB9Vw==","signatures":[{"sig":"MEYCIQCipD1+RAwpWX64/HDA9sSC5FVk9FBiBRZgnocOPjxP3QIhAKf5fldPn5uL3BAIEX5WGtUbMZtrjZm0F2GuF3BGbNxz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9eWCRA9TVsSAnZWagAAUXMP/1uep/NoxeT5Vz7BWoNs\nR66l/n0VXIm+5aaI8f350xWs92l7J0Z5nausWgnNkJHDF1/U6k7U46SFV4nx\n/EcmITkziPxFM3nYHIPUoBv5XG95AOugFm02vdeBfNh/o1L/9jTYrk695VkL\nDPkV0Vhc2d2yFSMh0Kzu7aFNpqagDA2a8L5gl/VoQ5dDkpGy/6cfU1qXQcCh\neCAcGCq263m91tphE6jm/R0zuC2UWjo9U2ZfoMQkhbmU7HXLYlacDfwNRFWl\n2iOug4XivTp+Fwm+uL5rSMM/+Wl3tTRkoX9haKB0DcN1GgYBoCui+njBD7HR\nhPlfKTAw6Xf73ibLqyMlknggJNOq0Wi6Qeh83kc43LN4N6FurKTow4AKLJpO\ngqt9HZhSaiM6KKnrSfj62lGYipIjtA1Nl1zujoDeS8uwrLEEV4fEDxxbhpNK\nMd/5pBjojYjKjEnimYqMKovlgx/JN4JMD3u+/vyERkbNaBhC3rnIIdRLcn/L\nd0+0bJugiFejVkjE/OpUcfN3SfHnTHOnbhDMhiXXSG7GyyOM3/AfPqXHKUtN\nmsiXLgTcZQSBO6zVk7cdy/wrB2ulOJfgSKcpk2kXyDYVDq3qS42uINWss3cp\nPuF1f+9XNujYLX+IZjjL/foLupjJ1zAVMBebiFptBAADLbc1QcyCOX29PIaW\n1+O5\r\n=TZyd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.78da96eaf.0","@material/theme":"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/line-ripple_8.0.0-canary.78da96eaf.0_1599592342235_0.9463172881889004","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/line-ripple","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cfce117462c5327d9e1712a5d4a13915eb5be7e1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.b0ed593cc.0.tgz","fileCount":34,"integrity":"sha512-zvz5uUhCvd2IVRO2P5vI2t6pLwXMV9jbc5KvzCmeWkgV4eK/mJZ3SZMp3jxc1HdmEDJJfBHz72oa6jLsy246KQ==","signatures":[{"sig":"MEYCIQC8FHgt8tWXibvJcroiSe9tIPv6IjL7ZxEx5k3G1XIh5gIhAMnbQQjZfDZTgH17YUJGdsjHnpA6XW/w1tXG680xGe1b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHMICRA9TVsSAnZWagAAnnkQAJCVkpVo1ZX7S+9Robif\nNA6F2hSXbHtd/OM2bvUU3nR94dhURy2/kctSByqyJv/XBiNWwkQsnsWJKwY/\nqm22xYI8aWf+lFELETnbcKkAo39hhSMMKQ3efNyNg/U/R7uyGU0MNmWjde86\n6OBcd971Cqg0jhZ9SNwAMEhfTw35nkX7bM9Q6+hLur5+GYYsCJiGqC7gUq1k\nIEII8gbPtckxkkPJaLIpz+RwFpItly1LD7Ef6TUG+xxhTyZGm/sb1DfPMt+y\naOPql8kPm6oxWROreATzyTMazWJbhhTuv8vEMenHhQiiJQC1jcaND1y2sqPr\nSKQmhizs8SDu0MO94BSoxC9ka7F9yIusvsh/mPcw8ZOmuhE/OX2ff4B+4u21\n/YcIhaWpIhvUTr6mt51aUdOW9IS9XIw3a/HUp0xUAhDKQt4lI2iCuvj63XHZ\nd9ydrsbfzKzOuisLtGbSSN4YT4TIpBjSRMbDJB9Tx//kHylAE1WCk6q7uWBO\nrPNTSfNfohc66GbTR2sWq6CeYbe2NGLljLv97jEOUyKneRsPcsc6I5IFxqho\nj/XjArqIniG5ApuuYl2/zkP8S3zr71bbcaMr0imnG2ygIsG6cq4mvJRjnOaz\n4lzLEJ/k2mT9c/Z52cLx7dU64sW59T225Wdv63AIgR2o9U4t186Nj7gWWsih\nXUdQ\r\n=jO3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.b0ed593cc.0","@material/theme":"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/line-ripple_8.0.0-canary.b0ed593cc.0_1599632136148_0.7135119673303716","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/line-ripple","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"afa918d71384ebf0cf660911152d2c63d1f284f9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":34,"integrity":"sha512-MMpU6arAOfwQFkPK4P7Y9ysuZqjROK6fcEBG6OeMZGQ3AmNU1k199lPD6caIjn9QfMoPLYFmQfP4rJgFKgtpaw==","signatures":[{"sig":"MEUCIQCQJNVeHdD3hQT9tyv1cw0ntdqD9E/pZdrez6eVW87BaQIgCCrZgCA0YFnwmv6v/DFjxifxRRrBS7jPGQYdusBW6RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpYqCRA9TVsSAnZWagAAT4cQAI012H9s8tD1IuBf5zxX\neiUnsVnNF3hrKTxZeKfPjKO4Dr9NH6NizRY8EO57MR5sFxyQy9CNIlRsLBUm\nPPDenKbNass5QOfw2wOPD5x9xmsdNz9loI1i1Q4+vdX8RZT9Zew/rjfE6dfo\neq/jU+3GKCyGLYMIMTrUePzoTOixiOX55vNUY/gTIanImoEwuGaffNYb95wg\ndkbKz9VOEGE7l/mPkdCCCtAxkV++teojfP7gi8eNTPpfARF02k9i433I1XJ/\nq7Zafph3FOrBFzJ1t7of8Gtvd6E63OS7lAyauel0pMuzdAXs0pawVkjRTFsw\ndUO8RIecdoTdqrEKT+Pni/EaD4XitirEZwQuFDWS6UySiF09jJ9F1Fxp9cYS\nsvI8vcaibZdjR0IAs2PGXzWX06+bl4xQgLA00ld45vholONZVs+TujnBTL7f\nQW/HuzfA8ukz+Ow7SbvMaWPZ+5KadUD7p1T0iS6bzOeEX+GvjyBxtwAheKnA\nQ8GS+/VL1+/pQj7DTC0orq7CTBU60oEnOhJiyAi5q0KiWGabYWiIbpivunmP\n7jOq//d1QTWrQanF/FUTceD8gwg8wJX6rQ0opWlZ9txhQwYRmvyHBP7Ffmxu\nZxH6v4Czlh/IcwPg4hczhMOXYfhNn+eth9fvf/CcT2xvQoj34TvvPPZJ262T\nMxTl\r\n=N4+i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/theme":"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/line-ripple_8.0.0-canary.85a1fa9ea.0_1599772202090_0.8150987839326256","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/line-ripple","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b30adb587042eb23512cd075945f540eb0dbeb0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":34,"integrity":"sha512-ZIs+J7nloTMiKilkIWDy8WlT7KseQl2UiKHQcvG5kKlx3X04e3ijGURH87JyZOWap3FPBP8v4FDdfsqBDsoG3Q==","signatures":[{"sig":"MEYCIQCDbFXmOET7DPW9KrXxGw2pFVMgtVJFJdbFtF48M1AhdwIhANHij3z0po2aoROgBUjxK628FSXOQYVXBLNz4bdVvc2+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7ieCRA9TVsSAnZWagAApRAP/RztsmfFHDUss1JPqTxO\nzKfgrfisFV0nzZDThIoqXLiQ8WdFkEsa5z1Q6fWuHwB8AycDBwynA2ktL710\nQBfzDnbRO7Cd72QWCVjLCOP4j0cWp6hSRsFixh7OzHzSb/nkoNYcQBK93rLy\nsYozWAU0id5jWeOGyDwz7kARzoXwnliWScjCPHrs2YOTw/41PXOoBu4+5kvM\npiubohQs4p+FYwu3B46E96A/h0SEwfgzRYI1ekfiKm/1mE1zlmqrjey8srmz\nh695UC5q+UCFr2mD6DKIQLl2jzFtBKqkjbJbi4UWl8tM6kuxqnzI1dmvUmhR\n6tDi5slBL9J9tPMBBcmaf9OGaJuk+doYtiuJJSmr04HHws2XL/wsWDQDTZry\nRun4XsZVN9zY2JIzgIVUkYcPxXALKags+QRZ661Cyo67gKofxe5vkAZZjoHU\nPR6wSZo4b6P1I4yYldPi7N4xuFUke66SDnwFYQ9UKCcr8UYcnoQ/m4XOIu0z\ngFHrfmhzhfFRNM5/Nec97LrCNJyzNRicNBJmv9oVZgHtiTfmKetqWquvH5YL\nWTSUMkhUBhSd2d56IVNGGss67XJrakDL3LAXJp/QiNObBRXr9qxAGNYdc3sd\nvXR4zQOh+VnpqHqFMSxRavJ89BHAmtSYtWgdP+QEHyu7d/7c6t8sjR8/rKsk\nWw0Y\r\n=ktiP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/theme":"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/line-ripple_8.0.0-canary.0bc41a9c7.0_1599846558176_0.6897883582400952","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eb473843db5e387bebae6a22e925bbe11e4b177b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fc0eb5013.0.tgz","fileCount":34,"integrity":"sha512-uwEOk0519qC/Tknh4Vi7odw6VpOiJbLo/tQKkss8PdyLP6VU8K4OYia9Wpnq0zRl7s8sZ14NMoITiENW/88B9A==","signatures":[{"sig":"MEUCIQCoRg/wBg+puzsTToV14Gz0Xhs6uMxYZzMLU5WFwjoD9QIgdRVdiGPQUrvk4aHlb6Mu5KBWlWSTUip4mD4fqSeC/dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9YYCRA9TVsSAnZWagAAOAgP/A9guRwtq+JYABBBmbXf\nbUoCJK0WPvBg0NlZmbDdMK3fWzNTmfPRa5/Sg9K/VYT2SWU942Gb9D2avtA5\nUfOfnd0880MIsNNS7Vt8d2IZ/xGSNweTVUWcGupqf0tZV6KAimNAKLtEoZuT\nTKYcX0oIemPLGmePtAn0QkTEZ609Tb+xw+k1t2jx/AOq+TXI3/tTy4YLg4fK\nsCKEdr9xEcsnhKFVCmsG+rcRhTGsW+Qaa0mRTO9aR6ticzD1JfKqRv5yE5XP\nGpW3s7fhpwZxhzzY4yloY3rrMhkD0r1CdzEIlnmhMgbYSq1gTMnbTEGq/YtT\nWVKRRUXYISYZaiI3zdMv4jhnQuV+mFviFOvBpNo/0Lgw46pKzVzx+fDnbmQY\nSNAE/+7sEA32gpj1mWPbo/IWlCYbWRfxSje0s64fOj1FMyM1lRjgMbUX23vn\nUaJoqgBIi7OybzytHxKiEzRGlnSyV3z0fyeI9BbSE2C96SksiwYLm3lPBkBN\nIo9LQNyrJFkLPFqupW6aPUrPGGLF0KnghDK2ha3vUAZWsxYl8FVo34jvxr8G\nGUgNCU+PWoFlaqnkJQMJUzvvBjkZ/iYD8I7N9esKdqXBdnR/JLX8jrtMegP0\ndfYzhtuPIUtS6QYq+03EJclJ37qSr2W4PW/9i+kKEmbcU9cOtijndagvITYA\n7p76\r\n=GvOT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fc0eb5013.0","@material/theme":"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/line-ripple_8.0.0-canary.fc0eb5013.0_1599854104404_0.2483602663838529","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/line-ripple","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"81da2fbd9f31f0914885e0ad1646ad2eaf0df028","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.319bf66de.0.tgz","fileCount":34,"integrity":"sha512-1VXzl+jf1xYPKf9amgGE7uPi4RicWkcV5nRzvnqXHmApsetRZrRWUO6QiKilOQrefHVjWFNcdaxygqGZ3dh8nw==","signatures":[{"sig":"MEQCIEs35BgQnN5gKgsAU8EkfTXFnIOniArcJaIVi4beQBdSAiASdZzJnVwJvg7UYODgbMPtyEYOoL5axoBMmxWup/8f9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAO5CRA9TVsSAnZWagAA7DMP/ieI9l1SAAxZpvh2ioaK\njHU8funDbaBbxGX+6PAp0uVjXT/dvAZ0ymgIZMh1cqbt1E+Zt9OAlfj7Qi5T\nVCcnaeRlaGciJ1O4WupzIo/EN8gwzruHpBVGYeEfPBRswDUS+5K1GS3ixVfO\nEnza4XjN8z9pnwcG9zMVfLs27+Fyc1J9uLIjZ6AojuvtTKq41/w9KgQbqN5t\nmfJCuF1BT9htKiP/H0gcUy7BwCBdCH3nFv1ClpMMYVo3rLjlE7MeyegZbbVu\nuBsmidAa30JL/sa783dFlMhQVzLDDssRLCo+XsCuWwDSpTTbnnqBbmB1kmS+\nZQo1W9CJILXyzIDtZmnGI/jyUXkbtw3gc9HHdZ50lawJjLdDFLSEfXrvJE8O\ns0+oaHbwQ0A88W/v0UrpoDUCqRy7i+I0h4alfGPwpkvS/hkQ8xN1Xhj0NENG\nUJ9R716B1Hls8rtH4nktM1XPyQGBL4v1zLoi0b6IenfyWIKmJspwMXBBvYHm\n7ZDnplPI08YfIdHkKkJ/sL/ITafwgGVuUFV1KbF9cF5YpofdBAXuVKvBQJTK\nfNmeCh38Li0FI/oX5voBSjV6ouqPD1vNJ99osbt0y6QVSjo8o6xZXsczD0An\nx6dsuzwvNIWJyczUMnwMdurlIG7+2A+Z7c4/dLap4r3RusCIT0KKFih5PAXT\ngMiE\r\n=+L8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.319bf66de.0","@material/theme":"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/line-ripple_8.0.0-canary.319bf66de.0_1599865785061_0.5571496170028194","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2231ea223b262020e7b30e3944fb517dd3a448fc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5bfc305ec.0.tgz","fileCount":34,"integrity":"sha512-XHfYZiDLOm1PgNiazTYEszKilI6jSggXCzxxMqneVk1ypDj2acdl1ZcScPZqH/mMogd+xLbpcQhDbiRr4bZ3pQ==","signatures":[{"sig":"MEQCIC/jGbqEcDlFfS+fKFdCZTMOhIL1yzBJbtbyMf4ITIoXAiBnHOO+9eboLMEI93Ik51OTnUtHPy+3goUmFnziwT8hDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqRkCRA9TVsSAnZWagAA6lsQAKFKkBO2NQKlGkIzCXfA\nIH4CPtQKgw3j0eR3pVtM4QKS8j4Cvv/Ji9Bi2JjhdNJNQzhmenP/P3QTaagM\naW9FqGhpt4OgqNy2MMshQQGQ0PyoOBr/hDrVcALohhkRckREd01R5u5tbNtA\ngf9VhdL6pb2VoV122/PJVYWaJfZF/tZVgN54P1Ea+UxYwDHqSfYjfggZxkUe\nN4syprXZBLZoOXKzh2HH5h5eKuHgh84N8InkblE5aNKcTJm4LzPDPVVd6/rX\nrKDw+m5KN5cQVYT0QQqLlqnHxF1kRI8pZ2RZMC5uQQNNq1UEmf7p1MkiokB4\n4810wx+GSeHLlnCIh5YVMfS48i9r8kSys/YnuMF0o05jFg62SazdjKCs4os5\nm1F4p9/tEcwvymoX0Qvssx/QyyLfBqhLNC/zoLTTB1NsFBMP4CIeVJ/HrLMr\nje/EH94yFJRZJTXRSHT/lrc9pGeGXbageoljMQXS7S6/LlHjDULR2+RH074u\nqf5ysoLARO8/aonppISTPQvkE8uaFKzfHBZLalkTVVKy0YrsRFA9h/A2mR9E\nsgLNq89r+PG8RxpLIV0W3r3DeYHBUbI+bz4dqPh9y4rt8S4ZGycIzybRB/MM\nZ2QhngqedygkzKkexNUirnsEVUoXy7385r+HPq+kknIsGvQNT8ErpalkpkG9\nqoKP\r\n=7pGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5bfc305ec.0","@material/theme":"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/line-ripple_8.0.0-canary.5bfc305ec.0_1600037988115_0.6863606799965223","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/line-ripple","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"35f5a0cefc05b4d6f3fcac623539b0cb0482c5e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.83d83f131.0.tgz","fileCount":34,"integrity":"sha512-f9wub5YUUGMDRmP/e+gLt+gZ5l8re+Lc8xx0KDPORd0YEBYQQWL7wleV3dxPLbrEVO+GxKOk/n+cmW8lafr1nw==","signatures":[{"sig":"MEUCICotSh3uQkzLXqVYSovWd9J0HJFs89cX49ikHtWXG4XYAiEA0pTblPNwZUh7bVlgc51BbZEjlFjNZX6Np4mSjjgKja4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXroPCRA9TVsSAnZWagAAjmkQAJO82+MTFBos041X6IVh\nAEWUhLvufHtoR9rE/yDrjF7YpdGhWsLBSIAvVRRrO4pyf5ifGqBkJVjTUBKR\nITRZPhOp6OgdJzFkcASTM9/M41oioUDWHvjaHIQov9ttTNoJUTlCp1l92Cv/\nCjh8sBRodQUT/Mfr7YK2t86N/uLY7f2geuFiDEDzJXGEQzKFXbtE/TmgWa7n\nVWjBeoy275bGkJ6bkDd6AInDD1DIvqOShvD388UlMXxrKz+fyH5/DmB6kjmD\n94eJg6fgyXe1oF+27SzSlv10qxlVQxuOcRxBfDkqr5HNSYA3mjv+gHXb69fF\nabWb3oIptSW4MYlUIwbOlnE7wXgXB9fkTzSByfNW7C5OwUOPh10EGmLm6PC8\n6hS/PZ1mUO/mAkLKfOfDaCfGkkHQtz7ATPCLQTxyb3jmhJFHzB4FHvWtwsGt\nLr+rmQU7Kv+WPcIFKLHfjlA7cJFM75jOyd1KmMT+GuoaZvb+irIuvBU7txr1\nOtTn9gPXWfH25PKZID4kUWOIKutpxiQponeFBdEJiyoQLY8FMXMs6AavYez+\n5az98PIrao0aqdj/U201whPFqn3QKjtmmf8ZGtau4zGWGhI9O2vsatoYTvdr\nYQf3ZSgPXk+6iezXkrTB9jL3vV5u5woUzccQvU5z3riJ5aYEEzJv9JPQKMLj\nEkht\r\n=OKmw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.83d83f131.0","@material/theme":"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/line-ripple_8.0.0-canary.83d83f131.0_1600043535045_0.8370580370154588","host":"s3://npm-registry-packages"}},"8.0.0-canary.40d8e4726.0":{"name":"@material/line-ripple","version":"8.0.0-canary.40d8e4726.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@8.0.0-canary.40d8e4726.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":"e8fab38c1506dfbc8cfe06d3ea40bdfebc26d0ab","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.40d8e4726.0.tgz","fileCount":34,"integrity":"sha512-4zbGTEDWBlidDluWfAnfAZF8p87FXGCxwuLTlIfa1JG2Otb1q1jitHbV55FXeb+HfBq1ItT13dTKLbcJtwRYpg==","signatures":[{"sig":"MEYCIQDRhjJqM9N2QnmB5NRQ4iOH/iHPA8eexzkwADf8rpa4OQIhAJHKjiGfhkGLvCphE51wDpGeN1e1/k/jkJgaHG/IAbQs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX/zdCRA9TVsSAnZWagAACk4P/3pRGo0VQEmPOmNOH2n1\nvYkfs8V+etlw7Xd2EgTBQrXw3AUHVWrCPVBGzYBhtHqTS7O550HFqsP5wHZg\nKsaIVrlYB6kP6pyURlTWNTZZWGa3JqEgxnbbfJ9HLSZgibPL5NScRXeh3YKC\nIWjuIHSgSmm17WbYqR17yRrbsD9zJSlDBr+8LXdMQsJtBfAHLEy+zfqmEch7\nY2RFF0XhqyGGqwG8xEOSISYxWYN5Jt/35Cj6LreD7srbKDDMK2wCdUyK07an\nLTu4rGx6RsPKyqTz9yzz2WPjl7k1siCQzPpxo+cfbHe1SjGwfDcU4kFkDloW\nj0B+zf9LWhPjtNyedvuFnuvrdQRx9moO4gsxiS7ugUS7QQ9JCSgmt36d+DeB\nlB3L4nxyGlsKptMZMOWpwaL+IhLMK3/+KrF4/Sj3AS/a9cYinQWeKaTLRimL\n3QTKmOCAZ1pMe/6tjJ+m1/nvNNqHZsjQwIFn1SKRZLdRDLKo4x2QlPkOL9t+\nrxoqOUPrSXkzGCURE9ilwzxdIb/WeC2bsUArcO8JLWPMjuaopII9fjQ43+Oc\njUhraGfg3wKcMKM+LSHgofpZndUjitj0BVSTUWUi4ibxCdHFCIybKB9Vn+GV\nv/VTvZV9yldO0MVFBeY9BAz2g63ImvwPF/SH569pf3qTaED+m+H7aWKDGrbN\nhaBg\r\n=TZmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"ba2736b8bb826dac383c6f8f237a6584247d5198","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.40d8e4726.0","@material/theme":"8.0.0-canary.40d8e4726.0","@material/animation":"8.0.0-canary.40d8e4726.0","@material/feature-targeting":"8.0.0-canary.40d8e4726.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_8.0.0-canary.40d8e4726.0_1600126172628_0.6259582712518472","host":"s3://npm-registry-packages"}},"8.0.0-canary.c25d70a31.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c25d70a31.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@8.0.0-canary.c25d70a31.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":"9a8df1b2042936f75627aa10a02f8c64ac77110f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c25d70a31.0.tgz","fileCount":34,"integrity":"sha512-/SRSefDGiDoNeCDO4x5UrKqGw5U7LigVcaZDzwnG66sPn0K1mhq4r29s1hnDLdQLOnnp1nlK2uGcU3n4KrtTkQ==","signatures":[{"sig":"MEYCIQDAmC22ItlpvyZGBQyf9BePi6KQg0L83LhsA6FWI5HYdAIhAOPT9ZkA5kwj6DqnwIDciAE9gVxVi4p5oBAJ9VzOnVkR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYCa/CRA9TVsSAnZWagAAUw8P/RhzwflKkRugSAdv/qa0\nP5MfzW9aVE8/R+6jUgx7KCUcQCTAaPApDCuznBXl/hfJdGKNDcRYFgNt6bDm\nZhdmBytN6Ui3/h8kc/pPapWiYKVlzfjLr97ZxadrMXCN5XOzBxdQnErWLNqF\neOpQ0wWtYbvHqxRy2da0nRSaFk/RxCHHcH4P3J3iCCRqXsX+H7LOSyv6T2fK\nrh42prCrBnZTq0dWZ9teix/xnRxI9dYyEdpa7k3ztKo65b4vfl/eZ0ZmSxcr\nruhmHgbDyUInriO1tYZpS4ty3Hh4NUuNT7iqy6HnNOpHZeG07pDNNgmL6kgS\no0Nb4rT3+IYK9RT8LMfZU8stOluHJX24XIuOkVf61SVcdXABFJ1jtsEBBwP6\nHJmQWw5ArkoAoVli/iLIgmM5jZTjtowMW7Vbr3FISpnORjQFPHINHfIGpAD6\nS5pYPkXbVF02zYJo1wCbZDcVOlc+L66D2dvWPXUw2z3TdJn3+3DWty0Z/g+T\nZP828P8oR9BdWoUAgmvrWyoimihdkpRDPpjBN4mKGEh1HdajGJJQaLZ5Wu9J\nPtM0um+19XNcRICMAGIpQGngMxC7x8KszjDmaJMuwwGxZ1AobZCmgxtVVFHq\nfUGbNq/I5M/sSFUaIS0mI/DdspD4iPYzCBOHkilpAkxvdmm/24fZMZ/OJ83m\nQrC5\r\n=hNyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"23adc9426ee1c32d146e601987be4165e56c7934","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c25d70a31.0","@material/theme":"8.0.0-canary.c25d70a31.0","@material/animation":"8.0.0-canary.c25d70a31.0","@material/feature-targeting":"8.0.0-canary.c25d70a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_8.0.0-canary.c25d70a31.0_1600136894949_0.7116840281161108","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"71c9ebaaa1f48c0d5c00b57d6eb87f53bd7a77c5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d52b165b5.0.tgz","fileCount":34,"integrity":"sha512-wQe4kXCjWbf0qrRI+Ht0e36FN/E/dRFvkolOTxba6OriDscU4pjaOytOo+ipc/1nPpaq60gtwE9XJRnO2ZJALg==","signatures":[{"sig":"MEUCIAuBedDzGyUNsiHX9/HOc5l2E3jN6He4Aguf8cnI6dQ4AiEA1p+DS89m67RRulmxpYsILnT0gAtvPZEnJ3lq9Ahq5yM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNV/CRA9TVsSAnZWagAAuNMP/1ONgfiZycAVRSEW8tOR\ngnFDTuQUtq+Sj/zPPQcwjM4cEfOllkpXAHXpq93AF8apjjS2WghNrZzf7Mpp\n5CfYfYyROiaoPnMGV/zSwopwWBA1XfcktR9TSrFepfBNvOxixFJhu7CzpuEO\n6gfVCOdr6sWepxuJStS9Wy67v59rNfYqTkOVvZ6vrHXvEREZwN6CK+pX4cRS\nVnJ1fzvkZB0KAKf0OHRrl+dsh3dIdllBDvwzgfo55Yn12Z2bGqXFWCa/K9bl\n21frbWjHlbqrbZbPPAb4sQfHEMm5LUzntWSJ90zt2at0EzzguLs2Bjqd/h30\niR4A74nYgL68iS54VsKOAindS5+IEv8yuv7Y1l5zVA8LhFejh4xUag/aU/7Y\nI08YLcB4NNWVzPX7W7gE7v8ZiAFFCHnmN9rqDnWx0WB95Jk87d1thSdKeuGY\niZOV5kN4cwySuxX3q9T6u9XicxCxPOx3MHm4ctgoUPPfuurPhxPgnLvCorWz\nHAUmula0ESUhrMxNkLGfq5azVkWSIBe4kTg5ImU9nhLzHLukgsodJaXfXxux\nPiic6tm6B69Hy0w76XvL8hUw0JqMOSPlXRt6cwXLDw74fysJs77reI0ui4Rj\nokNrPZ5jdJDS02H+rGwNlj4PFUFMTkGjdBtMznIy4NpnOqd3V05rqDYj+ju7\nNx06\r\n=Ifej\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d52b165b5.0","@material/theme":"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/line-ripple_8.0.0-canary.d52b165b5.0_1600181631151_0.34990860658363854","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c13f4a7ce7d219335279d13500266f351798c07f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a831d4799.0.tgz","fileCount":34,"integrity":"sha512-E/knQgxGBKuBzgnmc+rZ9ykDl8hVqNaDTQmf6hlBm4qVIFpzytFk2z7G7MXhNseUxwfgNuCesGAUCED7txP/Zg==","signatures":[{"sig":"MEQCIAHaUXnCjLEdUn6oEW/8uSXCJq2Y59qccT1Cw9eClwBqAiA3upBmV+CGgkFFLRBSLFUVvODCPxelSbERzS9tJimWGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP8cCRA9TVsSAnZWagAAfvYP+QEt0oddzE/Yr6fqkd9q\ny78Ml6qaNSYXa8dVZw2c34P4h/yVDE1J0pRY7iDjM1G3eOgm9r9pm1Gwo0lB\nAVzsd9Hr1qTLm+/13Iv+WgIx0kBzHPriMLEXh9oqRvpOdzT1N90jmmuSvyyY\nHAa8zwZzvLFrxr28JNip9xJPCnLbrtABji3sdSjBAeQnu5Hce1s2tOTxKvLg\n9WDH1sFPVCaXAl3foMeJUI9N2Qp5W2OG1OC5Qo3/mKugktmRGDp3R5ABKuNT\nXImfpm9PpUIwsIqJgKW7QulnJlhkNdnVHRYh+HDfPyKiTml8RZVWD6SAsteV\nGdLgEJLHZI94CNe494eBrBk8scMCOpY1hXNZr4hkucDmBacW3pIg3HI+4LVh\njR7CN9ZdTfQKTV0/vHPrewhCW+xSETgUAz2np/CNU1hDct5U+2j9fuAADTwC\nEPKCWXkSx/7Sbu29brkqWrDv5DtG1sl7BSyvECz1L2rCcGuSZPm+Zo8Uz3rY\nXeMHfRG90CMNL0m3FxYSyrXeLkZ3vYLez66GwrV9JVZp4x++aYw7xCds4Nay\nf3dhplS55NpUNLvAJt2N3plIoZcMcnukSkakKcIkG4Q2OncCGSmlvr80cSVA\ndlkwLpKrMJcE4iITFn4tqCY4V9A3q/jXxmoQ6wEHilKRLdCjgIPC0ZGVH4j/\nfLtQ\r\n=YdMx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a831d4799.0","@material/theme":"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/line-ripple_8.0.0-canary.a831d4799.0_1600192283949_0.6884848620502215","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"654a799ea5075305b5f155551d02cd73cf4e5126","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a306aa488.0.tgz","fileCount":34,"integrity":"sha512-Dcmtnq8pURs2BM61QaRehL8J6qoCWpWdeym9bGtYCBf7e6q7nbXCRjpx7PRUfPfBjrlatXfZg7OjKiXLxlypmA==","signatures":[{"sig":"MEUCIQD6KB4OI37/MM8Anvgv2tj7ly28zhK4HMxlVDDPqK8h5wIgRFrnAuLO3O5NitHkMF8zqAxZNyftTFW/zKlG3++f+1Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrSgCRA9TVsSAnZWagAAt2oP/2n8pjZdT2chNe40s+vy\n9zPEHVXXswrn1ohUSPccK44HTAzZsF70sDFnobeQ6jtCgLLaS+v3fvOGpoZq\nTo1rcZy6xB30Rdxk4jiXDB2t8m/bfaaZN/lEjWM+S+uWc6Rd0ylQ9yTV7mbu\n0qKdSiVgZNWIkMOIzObLCYzU8gbcgSc2/bguu7GYcwVzsbpjpMoExgoDaEjq\nDR+O8oXTW68Vx7GniZovo/hhfJA1/RAVpEUZDMnxvbLDyHrVoAtTfo0WNkGd\nuH8NOHkAjORg2l7TlwUMzrHGnak/UmWE9qRRhrFMUD4C2KjfDwNCeJvHqUn5\nIPOZGH/7mbn4L0O6fAS8TPvTHFWToX7QX1lIkhdWKvpRffhmV4h4VfBttpDf\n8JQW6FMzDYihP8MAtfzOLkw4aGRDEBETuC9ub23PEexFZHnSOoF7/lTtPX9a\nB3USG+t6V8+/D7rklDmQcri9TAqtmebktAfSuFWdyfOoSfPE7ZucIbFxDd5r\n170VE/agQ3JR4RYxGxzSHekg+Anl7GFfqK/zyj5qQsUrQv3dRM67uJcawkt1\n8xUsrFezrIWOag6UDeMxPYAycKImAjWeQhAmasOa18dA87g3f0+luDUjDv84\nFFKUIsG98Kf6VZJxy/5J0/CDWsZ5z86QR2ja57VYo4e8morLIEfLSl5ic530\n8BKs\r\n=L7sF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a306aa488.0","@material/theme":"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/line-ripple_8.0.0-canary.a306aa488.0_1600304288211_0.8501606903660703","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a687e8da60f4b7b0dba54387e9052587244f9a01","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fd608ff66.0.tgz","fileCount":34,"integrity":"sha512-38RvzldszL8xY7/y5uiTohOgOaKCzgEiZKSsmQPewifd/VfwV4Ou5PPCoNArsuE8nmSos3YTdUluPVr/WdzQgQ==","signatures":[{"sig":"MEUCIQCl/9St/ZxMRq+CRBifdK12rLRa1vDSywWbSVLKgykjoQIgcQrxrziFDbIFt2ZQjvsCHydfHM3ELtaz4xntH7jyYvw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3HKCRA9TVsSAnZWagAAOysQAKDjh7laLVhMsEa3h1qL\nvGso3XxeIaE34aGuzRp1kUrLBLHha62V9HEcv4bVG31v4y2/JDo5f2Qtog0w\nf3ijXmLNyNbtPiyGEtXorFuwpx5WG1BNxO0j/8W7E/MmbJPwBofmkmfAArDJ\nUWNGKz5PGY9SySQPJEsTFUw/gGOw5kxlhlWnB9O46Na2QmK4VFuUfE6jf74/\nnOpGu4doJFO8Nd73wdxluh3iR/s1odfGX9HNeSGl/3NuJAFFzWO9X9VQRIEX\nzoU/5b2l0K79Kyz7fGzk+19E7fJwg13n9TGf58f20iLEZtmtrXw+/O+cs5h0\n7MWLvqiRULgxesls7ujVMjg6hnZ6cIsafzZWdR29X+HI/VDsCCFVU28A+lIF\nwq7V0XAkgt6KanhVxj3Ekk7eEQeWRmu08ryh+mbF2YSNbBB6jpDf3e7KZBFG\nNprAslCZriwHIU5ckTQ2k8vXQFum/1Vv3dXmyj5C3HPVupGiBpGJA0BULpJm\nMjYnJlQkS5ABBhGY8gj5MZzguImjL5eB9dZT2Ji0A3yCHSrGNRLNSuGWV/wX\nGcxSDorxrriWPYbC3emnHtVMS0Xh6tsByBCxSEHVSsh1YTG8EvNxRvS47ZCI\nbBS9hgSr1bMj72XpsR1tLk755PvkOIeOYddLvsOTYpcxl9dKSm9y5ze5oGKh\nttzh\r\n=57sG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fd608ff66.0","@material/theme":"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/line-ripple_8.0.0-canary.fd608ff66.0_1600352714508_0.28681166944970404","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/line-ripple","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe3bd04e60c29740d6a102c3316390e11ce32304","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.3e435ba57.0.tgz","fileCount":34,"integrity":"sha512-PwqTlD4yboMwkvGEIpmuAimlDeWXT7CKzX7zKi786rO4nHmE8V8xi/iy1Q23cz9qJ6HbPBkDrM3rxMpzmmKYgQ==","signatures":[{"sig":"MEUCIDLfVyCzZa0i4H78pZWA046n9q4WPG7U0FyOhwwEJsSmAiEAhBqJmB+2kuYAR57IThDFR+mBIIqSHOImYUhtNnuEAmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3XWCRA9TVsSAnZWagAAdYAP/2PJO2FoSCIVnn0egwN+\nVncERGAguPcxs2pEonhX90oZSRMqp1taxRSiUX+tbQ2axXlIXng3xVeoAjjr\nYqld0MSDsLChFzaZwuanav/70u8nVdhtbbKN1ZjfuWG7RXhQrc/goC/CSms5\nElO6FlRNuL6MfhPS+TXMM48pd/eRuKVcTpPU3sy0ZLcRIsmWS975iQIi/B/o\nk5GtOzkFQXp/b+gbKO9HWyNnrjN8SPqwSlobxIEtlGE0obmwquEQIT23owyW\nbMDICxgLaPoR4vwwW2n6O0EO1b/+dkst/6tEgQdSUsRNPfa29hA1VPrJBu0F\nkd2W1LvE7JJQWqgLesmwGBG2IbqsReb3uFmR4isBy+HOhwqlNBSa2owbBgNe\nmL/8i2PAjc0LGbQe6Cay9+oXyFqIN8nZSG1feBF5ZmAps0oRdpArhqFxolKB\n67bVsfomqWthPKD2DPweuol731Wjs9pwXbrx5lZJOn/AFn+pLuHt7piTJd4K\ndIteAUrnMOy9vM+2v5z7GjesEohULnr6djmZYyXuI8IUsvY4UQuA92zlEknQ\n/i5uc4h/kCPS5SUod1SAyfvCdU2lOSaaGbprMQB3aAi6czeFzmWPphoONSIO\nEMkJG+2mJwIgCiOW19ZQGUd9bLbBQX5+kOjl4p7SOcTDs7Vbx1dzh9UJVRuS\nye29\r\n=Xy0v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.3e435ba57.0","@material/theme":"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/line-ripple_8.0.0-canary.3e435ba57.0_1600353750129_0.9708672609114051","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a297d3664692939465ab35958f2a56330e9e596a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c250ec52a.0.tgz","fileCount":34,"integrity":"sha512-6ruka+7y6kmswyrQC8epaUlEe9MWy+86OHGDDwJ3oQQLiIGSA7ki6pySdmn/6O/tI+UumZ37Al/8jxG83C41Qw==","signatures":[{"sig":"MEUCIFlHLVZFRGds3QjnBRjccdKUz3UB6nK9Zl6nRrhDsdYqAiEAt+MioC6QsNxosZ5yvlOWWXDQm7DwhzDFBUjtCV/OYNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8KfCRA9TVsSAnZWagAAb8UQAIJ5kYY4yvOX1dUQ/n3s\nvDtRIWMGHGlbijqCe/7vg8KjBUzANwGXKM5J522bpQ9Fk7suR6Meja6dKXkQ\nhCIBRaUh8MUB9lopBoEMZpZiWUlr2R3pWSS1DPKt5C+GbNv5e2TWFsr+XZjd\nXNxpALnFkQodcgyc9LkuWs8QyuKSwWJsWiK0oJ9RNbx7C6hzQ+aAkElSMTkP\nhqDUMWhpfpQy3GXu0QFnwB2GwehylGyVYfcV2vKtNHrLNLBxZcSuYoYYqXwL\nYQ3cEZV+jx+H4Rul4eqOy4hHLaAdj7+1BCJpx99y5psi6SMGapLtaVcSCREC\n9FLzS1VOdgfcAUs4eNwlUXtXT/fX54Tjt3uQbUwCpwpP0uV+ws7c4pNwOG8V\nJ5kKBPrOotdvSbXx2PRQWUGgveV4KoOuO6XoshZyEekQ1Fflqrl+u4HxYShh\nO5A0bJ2KogzD5glwIOFqtuWk6nQijzyW5NabqjlfNtk8A8xfhV8HnF90L8Bu\nl1zCEYHMQteGitJ/FVFcdDC1CcFD41RZO2G96QHcPogr2AyR38cgxpYBXy5D\nlJcOq0wxvjsKtPKBI3IU9PrkAo6X9j+9+OFqUrOr3gIY/2ARK4d8LwoFy0dr\ny1CKZl7aefsH3LEL9I5CjDTOX+8nSgym5QEDz1MJY1HERfUos1C2KHLeL/0T\nd39R\r\n=ttmN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c250ec52a.0","@material/theme":"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/line-ripple_8.0.0-canary.c250ec52a.0_1600373407315_0.08136293579938036","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/line-ripple","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b262cffc17cc483c5876b81b5b1752886cf48811","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.e34e411b1.0.tgz","fileCount":34,"integrity":"sha512-7cpj/StdJn3ah/2SSuYC2EuAQc83nXvvD4XKI32Ic7G41veFEO0US5usI7hUPd2zL0YE5wyGRJfnBTqK/7zbag==","signatures":[{"sig":"MEYCIQC/HPOkzejj413v5Y4s7fcZHM8aBcXGxRmPiveinUB/wQIhALdoT1JzQq4vlsa2oF3sQkK0ckFVcf2astxLMJRqoiy+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8RaCRA9TVsSAnZWagAALsEP/jWQcQGMRfpd1mdeVMFU\n33uASPFHn9iAvNhQIxXw9oob+Zu7xRqw8z20KhO8iTaxnNrAqtgukIJeP4Zt\nuyoZCSJ1nndtRUtRpeJUcmJCFI84StlDFJvC3PledfSrOOrKuBErj0mS/WVm\nowwhmyDG4tcgsu+NFpEZ/L3XDDFoQ1axOk2VmzfT2pGnxNNzLdAL0MJsQtfK\nfP/XJG62pILpENHOICrOM0R+dcDjAleFqu8PJoI0DaCWku691MR/XoYFEIu3\nsXOxIu2SQ1CHauY3+hZE6xsM6AWgI6RSUdCAANJ1v+OchlQI1B88eM1+BcNY\nd5szz5o7tuCWWHBFSqeXFKlUNULUeD1Pd8QEH6LHCcZ1uMWqHp5fZEg8QahP\nKby6Jc12ZRRwDpUTIY3EcDhAYqRyh6J9oyZ95XmLCchtKYIAaYw1K0TX9PkM\npEQ+LTRGvNr6rfPoNE5rS+k/n6XYqStwVrkp+lq64k1ELyjRrtN9ODm1ku4e\nhcaGO1bK202C5mpjX2t8japjklLgKsCGEvfAnFuiYG+SLDhPkvzorr+2en+u\nSq4kE5tQY5/p49jUaWTe+KAP7remP9SbVqbEcm9hQvtvyvs8Y0ml7M4TkKAc\nwk1KPYe1I2RHUaMHUr34lp8T/g3G8QvN7vCvaBYx8n89nLC3TIIksmJmvuvT\nk4lp\r\n=f5qB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.e34e411b1.0","@material/theme":"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/line-ripple_8.0.0-canary.e34e411b1.0_1600373849498_0.6099186635631255","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6dc0a8625a16a60bf3e4cfbb3f0640a75057dad1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4e9343929.0.tgz","fileCount":34,"integrity":"sha512-bn7zyHAl8n7ZHuXOTTZNjWerrpl8RtuYHBqm/q76rzctOPMKevZlUjJaR/odOex6G0DCDrxH4v1CvTwm8PIJjQ==","signatures":[{"sig":"MEUCIHA8KdCasfsy1kZ/bppMb7kCgi0WFyx8txvatiygN1F2AiEAjPO3SfV+hsFEgTA9NkBZSsjgIOmTERJBMqgMGPZtNSQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8pCCRA9TVsSAnZWagAAnMMP/RbVLkLz70QnoXe08sH/\nF4AHwk/pd44Xz7LXf4cWu06GRhVdjLy2Ft12WFxfEi+JLmE10zk4zNlsDF7v\neXzc+5DJ9HdPa2J1zg54SqXtQLsgOy6ALmmGLQceVO4MkhtUES9nY0qJkJ9S\nXMUJTRw4ojGsGaRqM/of8iWGoVwNGpb7GV3nCMGw0ni/8+O20rdsNI4EMR/1\nAxIEYQePlc0hPEVc/GWWptJO2bcA7WJPC0bWQ4mb+6Og3uAvd2vtmQGmJtQf\nuqZGba3dhEmU/jwW59PSaVRmpZuHhFIN9Lba4pY3lMKxI+k5KKKDdPgxHH99\nwRoPd6emNYCZL7Fb6V8UEDMH/UTq/gV9V2bkAJgYyEwyO5M10yGXoA+oh9GB\nZUWaT8bknFYql0KQfCY2t0snDGZhCVUc5Zy30cTPsbdfHsdkKgkoYs5SV5C3\nlPXCx83ma1jCG9qfAAYjtzFaZ0Pt0QkiA52bGYyFEuTfkPRP6sgxRnw/g9Eo\nF0JVPWcun91+aAfjSOHzUK55u0fwIiHBStoiO6LAS8CINEuaHVxYf2BlOURk\nSb14HbaMBl/G2h/VIWOp1u62qlaHseVY8wpjMFQVu4n8Gu+P55MTBC/yu4GO\nkCfIcsAHsh+T7+xGYqCwh6d7Rj6w6CwIHeNkmOTdUhISjvAcJQWef5P52Pit\n2HOT\r\n=OadG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4e9343929.0","@material/theme":"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/line-ripple_8.0.0-canary.4e9343929.0_1600375361955_0.6801278859580593","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"79a6747a410043fa09bc48ec0bc2de3eef7440d9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4e5c350c2.0.tgz","fileCount":34,"integrity":"sha512-OeweadTizJ0oKSx98YfakWBL6dpdEMii02OrwydGs/p/xtU1khi3w/asE1mzGJ/Qcyy9+i7w2gCPfok8bC3tVw==","signatures":[{"sig":"MEYCIQC68OxsHbQsm15oLPgD2QUDw7/iCh9G7UvmMXIgg5LDJwIhAPbZBjWs1oDfUnLF7rAh78S4dEptDZnoYPpb0vAiyOrZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaReHCRA9TVsSAnZWagAAzvEP/1vHXj7dQsNe/2jBG3zr\nh4Q9ijGFZyj0MmY+g8YxjUEHzzbcbWxlb1pFYKNo/dU29ClfWl7uaVtJNeRI\n+gLCsG58urBdZPVlRoNZRCiHGT0MC6PE3gYSZ9JguIIkenZuZ6en0nOZLJ9e\nR7uk0Y8Co/8Cag1WSSMmWcOuncCO0GyaJDkIP0XfAYfiQmsZValLovgaFuQj\nE5C8GRre2Q2uiXG3CoLP8YQGt82VbgQHXZSpMN9gzzA7ojhGhUkvVzmJvC+P\niIxWDbueUrE3jOPPSjl+W3fxKYn+KwzmY5nIL6iE/cRAFvNpBqhCAqWP8sFQ\ncvkSBtr5YcQtqLDinlQMfgCKnhSkk+gIKBAQA6EnydxS6k7bOl8QHtrQb+bl\nOwT+YMW2foyIgZ+DFxWT7gIcqJGtlbreClc9QVcU/jkN7NT4U9vc72dKN8Q9\nQm60xtb3LnztnCW/nXOSrXdQOPWqKlcMuK6LpbRQ7g3P45CtlzRurf69cVn2\n+RWD6E5ug5buzzKKiEWczs9d5iHw5v7O1GGV2LdF6BYSgdzNLRgLTLOPzyjK\nfO69I/jDjydXOEAVh05Fky7qEAkyKPTFyZ2ZFiyxJSMkmkEVrRLcVY+mX2kY\nAp+T6q8qx3TGwTomyRkWAOikcmP9iQTf0Gmu3nQSfFziB8NGSDBtxr2kV71z\ntwcd\r\n=s34Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4e5c350c2.0","@material/theme":"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/line-ripple_8.0.0-canary.4e5c350c2.0_1600722823101_0.46307274324026215","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/line-ripple","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f952503dd6eca3015177e50623860e23becbb9cc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.16c563ef7.0.tgz","fileCount":34,"integrity":"sha512-nSPrqvzm3014to1gdi24eaWhk7eBoLXKIMhHrxPcS6rlryljS7lmlajjDmWtoCWXnK22uqg3l7GRqdyaS+TVHw==","signatures":[{"sig":"MEQCIB0EJyp59gTGKszskrc78WQ5M9nweRW73RqLGkfwEtA5AiBnGiBoINDO01on4cxx/xL2QxpBuR35eQ4zDrFMATF74w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalRqCRA9TVsSAnZWagAAVZwP/10eYaOXhvYNCAbHHvS9\ndHdh5HXC704MWJ+GQUxLK3eMi1tjYR78F8TMENgOzJGtVmm5JbBRVuE2L4q4\nm6ZlncnPjhni5eLIKV9hoXa37Or0asTif43gRCcaAUCsJng2mzrkW9lVGUjt\nyKShmgywDJSeGfWL+CE+lp2nQd6wGMIdOeB5JVgUSwrPC+X4uJr5LgcFQ0Ml\nDV5XSKBEGzi5rDPONIVaOVSS49ibCzVKG5vbMRK/ZodyZCA+t91e9PY2HNZU\nuDZDokBz762ijMhcYVtxFmGRmdui2k1/ZpC4wcj5/OgrblQdp7nNIjYWUDGw\neM6Z7W2oZTs7PICyNlnBFVTIuko2BrGWDfvwvpeKvBe4P0wwNH64mDvzJsYT\ni1srG+4LYDY1e+HQuRXrZGeYR+honV0ZZew9nVoWykOouLfEcKBo37gmRqpa\nrMJjkqBw65EOSITCiKHvve1JXLC64BlanTTLToeCyRoG1+OhKiSX1j7UNAuv\nX6/0H0DO9kz65tq/caoOz4hxyx8sMDGazz2f8nJagA/H1njASnBqy/6L3C6e\nMUKsHNPEBWkTs6O647gCp3s1CB/DeOFyOoDSXZaWNSCAiG9KXq0koeLX5nX3\nTR2komH6X2m3aIis0/C0+3zBwbxr13uM0QGHrug9dsperqH8ed80FK2gpPjM\nJ2aA\r\n=JDGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.16c563ef7.0","@material/theme":"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/line-ripple_8.0.0-canary.16c563ef7.0_1600803946171_0.6015643541660984","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/line-ripple","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1748683750052f9413f9147ecb2063aa4a1fdfb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.fd8af3d43.0.tgz","fileCount":34,"integrity":"sha512-7scr9aMzS9oa7uk++z6f11rk01D0PvEIYlGZl2J1bLO23No4rwSdVpmC+U/bIo+3KKN661kqVyIVSkoBEZfGOw==","signatures":[{"sig":"MEUCIGkoRHx1hQwEz3Y76Rii03elYdn2B2SpqHhYjJI8e4UcAiEA19j4lg5LWslG0Mx+ZeKyLO45Br5K7zq13tLATzVA04s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6KnCRA9TVsSAnZWagAAkLcP/ineA10Qa7XMWfYYa6G2\nd+JHBgvQmPcZz2jo8ucL0bNx+mp4wb6FdHzmZwZCxrMrndhVdbHyDW/Qnvzm\nq8+WCJO1ByKtqPYoBFE01Fzex8ciSvkNdzjf72m0gJIz9LGrvWZweoznZwDQ\n+bQ7w9mFe/ycpg8SL7PcmZuDbzYt06RQmLwLGJ9zcaKy1zl+H2mVofGlkyVU\nUqKbC6chK5hQ7t98wihqXC+h9w1iXx7rJcfQkDDIQjVXNpBauA6IXMUzZAGi\nTUowsZiDQcwbjnVtN1nPCYgCswAYUHSODreWslKoy4nbzAk3lmFggCjJPNmB\nD0VsQ7od3dwCd9JEWKb3f8/FEvfEsxqFzW8aPkfRQRihGttzfeQuvYDxgdP8\nJ+SKgC7FqCegAgzFfDy1GR+nTOE5UUiycP04czixqkVtNFkTgad1r28yKHgl\nubu9ztIGAz8DrvkNK8Mm7lvBDekeoeThfP8IHVFO8rCvmWVEZ2UHjFM6Cx9m\nrntWbrcti4IGVQWPJRtoGMDeZF5STp0q94dGxS/w+A4sfXKAH69KwxIoAK/X\nZVGgM+eejzFQR2RNtinWD8EjdbIa89vXszZOatQ2GC1xufsTNXYvWtuth670\nFbjH4DDnasTkVvyXe0wmPuxM/MYAqpZKL2kkx4RFPvqIXRRCygDmP1fp83A+\n/Ei3\r\n=RJQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.fd8af3d43.0","@material/theme":"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/line-ripple_8.0.0-canary.fd8af3d43.0_1600889511113_0.503854517732919","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87dfff6b950b7a7aa9a0a7a39d7455a05b97529e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d4cd83a85.0.tgz","fileCount":34,"integrity":"sha512-rOA6aC6VhmBnUHeYB4I00S1qPX3YmwT/MZZfAx0io6Zg0IZInOyjFuImBEJsBjwicfEmA5tzWEUhxG3XNdVuTg==","signatures":[{"sig":"MEYCIQDEl0UXgMhrbdbPwkSCqO/6PpShrcfiYdolhlIybrtIKAIhAPpWZMhIVUCUt4XNMCzbkraKq+sx96LutnP0ui6mvj1g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTssCRA9TVsSAnZWagAAMhsP/igOiDacMlZxtlPICncD\n8PwKAzCAJzpzxbBG3M58EeXuc+yDCLcpncIa14+8tDNLSiQSHK7iJ9WLYhTi\n042cYrOS3yjaKoLynWrpD+vqZFto/0UrNOA+amdeh24VeoLVwQttTJy+JUVz\n5IH6upNJ8xOn8N0rl3MUmAR8rDzldXxeecGo1XV70t0XLwS13MWPGVDeYzoq\nhxoNW3azZRMP9shhTbR8zasPl7Drx/uPenqyUlkRNvvFlWM393DuIpk+Xa4h\nVXdUnDzHiwvL4WdKm+eWLtdeawNOH4hL53aoPhOEiL9MzRmHafadVsLCs0I0\nb6a0SLQdvwoqRbrVQxMk0R2kR0EPL404bzOcM7mNHfq2G6L5wY8Cd0hCwJ6V\nbafadAR5l7hC3NS1qC0RM8pMQLdKLqx8bP3L4V5bHa5JaURQw0b6E4HDO2XZ\nWkcMP/0BwFtunrCCQpuU2WLDfIOjIEMPMdxfyTk9Ic+F6MAw+GNpsqVSrPeK\n9miOHM5O/+Iz4YD04QS3hM1N9NZc/4z3QvVLAY+i3s0PIABYAUhSef9Tomha\nLRoU4seSIKNi+DRT2v7qKkUASpqgOuzM6Ex7OjWH6kgyUuolskukkN8wi9Um\ncf2k26jdLqJglUqhtqDZ+gkiRzuZ85Bc9/2eUTKSWo3IFNVM8ZT5rOiZyB44\nJtYK\r\n=EHa4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d4cd83a85.0","@material/theme":"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/line-ripple_8.0.0-canary.d4cd83a85.0_1600994091657_0.15588653160610666","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/line-ripple","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"157a88a2bd9b3e7ccc80d072e1bd230b7c8f30b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.199aecdfb.0.tgz","fileCount":34,"integrity":"sha512-hW0eUd2ZE67Gcu9k9/F4YV+dzt7ur/fbnPGpi2qkC8X5m9DJYSFEXuPbOHdmU66dmk7gfruzox4ZSLOtG9KOhQ==","signatures":[{"sig":"MEYCIQDg7cAX1SykyL97h+tcqTsjnqKeuxugg7Ypg0X01JPEVwIhAJ3/JYAqPAIlBJ9UhfFAv8qDaHrM1wBTK9eJ8g1D9CSi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhHbCRA9TVsSAnZWagAAPAUP/1MEoWYVilseZ7/eVEQz\nlIUXTZnMLQ7Xa6y+AFdZIjwCmFqb1n7y0iyeqXNBJBwZn1YX3qkW/KOD/ID5\n3Hli7tPLMSxpvYQraavwBRlGz9sOQwIRmum4js883b4g2ECGRQwJu+dZbStI\nLTXFLHeWUiiPj6JSnLm8UNj12a8GP/Roc0PK91sEPP+jZw9P+Jzhz1ixvVbf\nJB+EbBobSTlWi6ggC9OWRTNPuIuaXPXg0azgBnKvI/KebU24/PXpvGMVpp0+\nJWu+EnPXb17RYEc+vSQBq7FBzq0HgRlAfFurWJpijQeKKtxYHqU8beBV1nJt\nw4O3AUOs7WpDy2jeq6AVQ7RNonzmndgdoPIoVj91CH659TEhYCf+vc+rk5ad\nAk+SydOlPf4bmgeRqE0MZacNM6QTKmQDurUvkLt6IeKWZGPiEdjWJct6tVCM\nK/1sKBlrgL0nYVmwbmRVoTeJ0c14JkpWp2vkmeZe49HtBfT0UN7wxKvaIzy4\nFGmtai0HSptbt+gp7PtESO8fnyiyjvSNu0MfFZxeJPCEkwIJAYLVEpIbyZZ1\ngye/RwPtp52NbLFXBNfb2ocVwGYnppeGDkJWeglQFoIcnwPDbHdPU2IyZPAK\nnEtkyVVkj0qvKUgrYK+uIdqkZT7fcPwTyTA5gnTOIXVG+F/Nx9OsNpF6+68C\nCXQw\r\n=XUZw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.199aecdfb.0","@material/theme":"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/line-ripple_8.0.0-canary.199aecdfb.0_1601049050937_0.7602023026712725","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fc25ff315bb2651498a682e482e35858acbdd639","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.38ef4501f.0.tgz","fileCount":34,"integrity":"sha512-z1lXbkOHzUQZSJkxeJciB7CGUMLBYXHWVZWs5vl8Aktx91JqaaNEQfcqWOSWr/jU9KQiZESCJMo3vkyFSum55Q==","signatures":[{"sig":"MEQCIBSf4I2mhF2B7zJEEhEXKIgdhsfYBWhC4OfNRT+I8crkAiAuAscZpoMvAHHF3+BvCSiPWt9NjdCoP++1INbI/hbSew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM0+CRA9TVsSAnZWagAAZaEQAIM7YwdC/JA0w1QdGafQ\ni9Rm8hKkFqLr1L/HoakZbKwUFR1XW1iSXPrjsKYAZpJcyfPnkvWVXOh6WBAP\nO5VY3bLZ2g/WSRdFoCw+PdOspHwuiBMuXTBIaEn8HQwplGOMZmlIA61f2803\nxw0nBfDnyMUkBWTqwxMm/JAf1e9NqUkU93cdFAC2ZerniD99azPdQyqi+726\nXfym//jiLgXLHqh+6SKGSmpTgwe26vV+7Qk2pE7+4wvvIoMwgoVAg8H70znJ\nB3dSy7Z/BJVGNHVMLF4h5JsOcLOXAeDYErMQEWuwMwzzpNKMFl3UM1t6p354\ntckK3sOKPn+HMvXgoLZx59TB71cOk8VpvX0zOHEfXvGjrueeb62beUKqSBJy\ndM0AhB76X+l4QBXg9w2dLKYuwtxMrMKbQc/02zUabxMeFNkDLs1ZUZqFQDbS\nLY3HK/IJY01DqHWZ5Eq7PI+YML/k2l02HACmpay0g4zYC6f7BM8deue7hHcG\nzUeqxMpiP0Ci0VOXm7k1XmdyrZkwTo/vA3hj8pzQFgfX7dJ1N0bOoy7GdZgs\n9vye3x0xJcQlLdtgksvtsiiLwQEjvXm87pyDOC58fZ5T3lrkfJqfU2S2fd1k\n1djXkR31USqcC6aUxNv9ZY+7zuUbKqfClbEEylPq2nTJE5JjafJoJTMTIhPm\nW/CK\r\n=eU4+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.38ef4501f.0","@material/theme":"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/line-ripple_8.0.0-canary.38ef4501f.0_1601490237576_0.9610395125051028","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/line-ripple","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4050dfeaad894e6ca4cf7325ff7be4d6d9162058","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.774dcfc8e.0.tgz","fileCount":34,"integrity":"sha512-hXEy4HpnijXe0x8XsCQUq4gtBQ86EuMP788yYub73ejIHM9XD/UuaVYte8JPvrilEn/tnZQQ4cuJhQToynOA7Q==","signatures":[{"sig":"MEYCIQCrhYKaqSdEikHlc7xlPDgdOUPs558kHOmQPz64NRNpIwIhAOY2uDXymaFMtpJuw66smv9zH0qq0nzI1C7wz+6QEPKg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdackCRA9TVsSAnZWagAAKzcP/RodgnSH9tt7FsxPaNQz\nlBeUn0vPw6RS5sLn1OiWnFRRoJn8a4Hq547F2xIWSHw/dpxmY/wWIYrsAPCQ\nJv0u7kQIXPeE70YDHOG8Zzbhn26FqLStfR9SbZg5WNMJnVqVubD0UZMmysIt\nB2I3RO0SkMUJtOqStmRjdEpNXMeRaIg5hZ3smHmsNQ0h5/dncQNMLxXHgfe4\nPyW/O02vyLRgS4CBNre7L2Mf1MxZ/HfcWle/cP0809tDouDSNzI5+L/EaI7c\nocl8Wlnn32bWcIOqPhZ+ZewlpnGqwanAyPT6aM1+tSr12Q6WVFd1XCGWpPH0\n0qJCHuh6r19Rji9ZcmOiA6M+LDp9Dnf/dBCSa2NhPI/74eXNxFpjaak9Gwk6\n4mKxBTd0SNg99C6zGq1jt/7BmXPLt3gCgxsyWFCvKPiAn76Z0U1EtWKVx9Sq\n8rEoAz+R17DSR5nA6vkdXpwwc0x8r6sTSQQoVi27fs0H0FJFuPHJBRcLxBlp\ni+a0mEYzIReeK1T2I3WOjKThM0hZ9xPgJqhnqDoREGw0wsdsPZ43mb0JQmjq\nI5vJXreHQ1MZQQlRdLgGri0djt7wbXb996sqFzRS/7TBXZWXIjuB/drartEb\nLJ52GxqA1/YmVXykIlXchpPh9pkviUYTlsO8w81GTKgZpk5iuohqIgdgUKxW\nMY8C\r\n=QRA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.774dcfc8e.0","@material/theme":"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/line-ripple_8.0.0-canary.774dcfc8e.0_1601546020412_0.31834280273863236","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4ae76e37181ee0cf13cea6cbe593d56a45050df6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.0f60323a8.0.tgz","fileCount":34,"integrity":"sha512-gtXRvD7IR3VjOcYcFusAa51vQVvTULddj6+1r/qEl23xTlCbU8UPVXT8i3oJtZSoPyUad0sMlXBsLgVI+FE8vA==","signatures":[{"sig":"MEUCIE2HxofEpruJ/rPCQQrfTN8EEoc+xjBqP5QB/vYoy6wIAiEAj+1RQf/4fgwVO3Cb7IhIDH2eZCQazu+Fvmwnijx6RfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4AUCRA9TVsSAnZWagAAmy4P/RpAburOUSaBqrPvc/Km\nVsPp1YxL4jmH2/S3sANrmRym52wGEB3GlsGpTfY2R6w8QGIrQEnf1B08zOOh\n3ZdlND5xi+l81OACCpO3qSase24tPzPpQYq2F2J14CG86KGAd8VSAjXDRXII\nNMTcjQDCMOg6sC/w4diKHcS5aCjPxy167/7far891vPDDycs5TlxGBNzXKaS\nvIHBQrdDe3G6GSLlisYS3UbR9lEYhcKBqLnORafL/1wol5T7wK033xFuzePk\nUy7KiAjWjmb1R1cjR9wq9KuOgg5dCRE5K+JnTDwjwtDHzD5vuqrI+UMUCydl\n/9gBw/zzVvDGTRQwsQFAjvkrzFlP/e3CfuEV3kMQw9Gs3k6cAk1eR+i/RPRC\nFdWAz80JYy4uf2/5OQ33+XP2JsmCaPEQOTqYK2xE5gLMiANk++nmDFP5+dQB\n6uCG3QXU12GMfaBbZM3/xS6AeelH1naWkDMk47Sz7PeHri7KbUzT+YPannFa\nrdVkvaz3t/5IpPHTm4Hf3Z4Y7+9PH1oTH7wGHyfv2t3VZf6JhSisJyAmJg+h\nwfoYVFQoGtf6Hf+uy5FJQNy0VGidruVyzmgK3qHS4PieLeadToHgjqDjVzRq\nseFG1zRp06GoIL+syKCGijsYdYlogIoDQKS9DTl3PDuVFRU60BJ8PvLG+7gA\ny7ZH\r\n=xAYT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.0f60323a8.0","@material/theme":"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/line-ripple_8.0.0-canary.0f60323a8.0_1602191380311_0.006942760950330085","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/line-ripple","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"101d45d42b5cef454b678a2451c4a992253acaa1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.d71622574.0.tgz","fileCount":34,"integrity":"sha512-lxO2C0VFBxQ25J64sGfMaCct7k+vJ0xDW1lwfXOMVGcXwSsohLZAy4r8uBHynur5Jye19GtrVCWNQQVY5nJOcQ==","signatures":[{"sig":"MEQCIBGePQgHy4ah52GCCmX6PnpGVQo3do8V24rDk3Qd7JzRAiBK7hP+X0vwgQyd3WyUJwxwigeVoiV14V69SbIcwLLI1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJBSCRA9TVsSAnZWagAAbwAP/0KZRgPaXqaOH+y7AW0w\nxVP+5UCVcKr1GaX0FI5r7YaDOAmiIEIu0sRptk9yzv1osfpTsM2vFyZ6i7qT\nEXzAsTlYstDjbL5F5CvrGbhQkClAWvMau52dbxUkfTGfjyCY8cmJEs38NB/X\nyZz2oj07DJ60X96Fgyn3PWKmspguCPlDLpm+Kqe9TzwNw4+8kLbPg9bAErSz\nbKGFucR5omPOAG/IWIltguPBWLwwp7dSPvJGch8T5yo4ldipj6sYIPLzOlMS\n+SdELbTwCe2s8+XPOJYzUsLxFnE4o4MkRb8Xn7QveZqXNeOsBRNbihr13M0A\n1m6Fu2blaxelGsU9EEkPfdUiLQQsyrmCkmzVVRX9dsBdg3UjwNQtSwS2dSuG\nfYFlsgbXe4D9hp3EZ1M4yRjHq1Tg5f35BXQ594gv/EZJiXvF+zS/TwKBRoyU\nN/ZeNkxn3DH4ieoJYZgXo0wY0d3WX2w8jz5kEmoPqh56eUUV4ItkAN4zfvZU\nf8uFxfGdtojeq6B7R96y0m6gN4SK4YuqRwOPLB8LnVRsis6GMQI1opg0SpMf\n5Is0juXxIsfxFs8U/9VsX2HwPZz3HSs1WJH2/058b8iRER4Ne1m/OMm3/dTM\n1bWgRwefKRMKtdxlx2NQ3YAeAfKgd8HABBg3vlGbxlYO2EgDJdD4CtcQAzY+\nAApR\r\n=KU68\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.d71622574.0","@material/theme":"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/line-ripple_8.0.0-canary.d71622574.0_1602261074124_0.8565588458259241","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/line-ripple","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b9a90e2fc14f2ea3e23b281e4cb8a3e798fee0a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":34,"integrity":"sha512-wpl6acLxQQRbKoepLtrCrkSc5Vi8faXlv5kGVCm9HgqQwZYB8+2gnMGmchZf06yIYvq8tKHbV9ZQLwcpDWSFAQ==","signatures":[{"sig":"MEYCIQC1m8+q5LBeoTVCQhoOEeGY8sDEWV/A88LaKEQDz6O7NgIhAI4soAfoBnX0QET5tZOs4dZMivv194Z41BCaLsur7Zaf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOnoCRA9TVsSAnZWagAA2sAP/j4BpRaqLSyWGCIYWYqv\nNsJWycdLAv3p1D+h5mazgg7/gJatB8l/ApffD50BlFdzkJPHLwg7llc36JdT\nRAUONnGwygmah6YF/0iIuvEZiwBYMLWNjOIIE60NAiLO4IOEqcTa8uaWoHS+\n9jvXS86GFvIXrsBILRMeT/RbbV2kHTrIrYyjQfSiyrO/Yzc/7AiT7LjHWyGd\nI7hCintvp3NiuHVxGPjNdjqZo+X7NzkQCrOr+WcystKe9WpeDLCw+3Tar7EK\nBP5nUT+OaTJaRJLk4NKwNFVFwfoXhJKIoh1AlNEZ3VHGZUWdWYzIV6jc4ERy\npqWR2uMdPHasm7EcWcJ9UEhfqwe5sG0phaJ/u8dfyUtr6E1EcJiWR2UnY7sf\n6u7XvjpIMpWR5A59IbbjQ3uWo6dkfUgms7NbxLMnGKgLlaNIb3mLKiPDzfjP\nDLn1Eo9I6t/FjxavrePVimGF/2bQHa3/oeA5rsUYFozQ3wKSqkESCw8jmMM4\nsOtm/6g4hATsE8iDtob0SytMrMgNEu+jEPTaoPfZCclHjKb+Mpm2priBVT1j\nbBRt1zs/+oQzQW14OrtnZEb9SpRT6z14uN9LzM0Bz5/uB/6w1NGDHz8vGkJ9\nSwtJv/X8NhrboLpLP5XFr+NE/Jsgmg8CON+f0RAQbZaBPtNNNlnUnMROggeu\nKv/4\r\n=h099\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/theme":"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/line-ripple_8.0.0-canary.7a9afaf4b.0_1602284007568_0.16543170826272613","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/line-ripple","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"94833818e0b5c5437de10889cea8859f49fa3977","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.8a39352c8.0.tgz","fileCount":34,"integrity":"sha512-Jn2W749ik6T4KjHD9NXTl4eeqlrBYeSJiKk8Pp5i8Zh+f3Xxv/mbc+k9qKwAzbyej4QTfHe/Tg7GYXT4MNu0Iw==","signatures":[{"sig":"MEUCIGxPITCBonQYqqNrhNPMfc41BFGTl9Y9lJ71MjC2yD2SAiEAjGi9QglffhELNXti6V3GVtflihkHLbQlyxihstyxtjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJZXCRA9TVsSAnZWagAAY+cQAJn85rjLrAugV8kpye+I\nfvV21WlUqJvBOvWTq9Z06S98XDIgeu6aPRL0Wc+Xv42fAI+GIEpnU2243qCb\n23PreyzEMTvZxwTvahZZb2hG5cBuXQLzjnY3HIRdZ/tOP4BwEaC+mAelRfLU\nzDcnYyg5vAUwIl6wPzkA9m0OB6qEjyAdgZIouUsD5QTbB8+tcSK1xkAt+lh3\nI9O0W+erGoD34wD5YsA7LSRZpR6s9OUr6vbiwdXFUv/k+tLmN+sFGFWIAteF\nyeWP/yurP9dBXEZC1BxH1P4ttsAEEvTPVsWKI5rldLqT/Ca9IVx7od9Ou3SQ\nHYZ5a/mv5RG1LEtYHq4hgHBXL18rv2o33HesJ/EYpVI8QQscQUAyvGf+bGGi\nwahhuY8dKrFeh6ev/h7d10gdpIQ9SDmaiOZLObtIv8TVy/BizeuO00SjO1To\n3/1i7s/kXgkLpp0b85Ha0bZLdb/8qRefwlTR9dftX1TBL7CDj9bzeGJ0dS08\nd/DRE75jo0dv+O2g9fnFT69Kjd+q9JpzFhTFhxufoK85RswAIMMb43/DEzVu\nBNutr3Rta2nJ1Uy+d7GfNFQxjPtmL1qc+QmcCLfUJWWuKRr6fI54FTFr/M1e\nDJfmGNMF1SSTzPdYGFlOzklGDhsYm6xrUPnBEkjmlQ+1B0AIN3cXmOgP6AVm\nNArK\r\n=DO03\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.8a39352c8.0","@material/theme":"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/line-ripple_8.0.0-canary.8a39352c8.0_1602524759008_0.11592444401806956","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/line-ripple","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a725a1b1249bceb748a90e86e8c82ad5e23ccab3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.790ca85fd.0.tgz","fileCount":34,"integrity":"sha512-uofV20DQhwwlcOXf5poBZJLLyd0nQ27T/C22Ivhnt8FN82E1NhrkT2m4FlDmX6IXri742CemfzNNSMqiC0J9eQ==","signatures":[{"sig":"MEYCIQDCmgLJIrykvXM/qxefxOBq48MwkioYnvgzB4RpDt2ssgIhAL6HObyiu/XKSqhQndH5sA4a5TtkqXZUzqfQaszqnmKQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNEHCRA9TVsSAnZWagAAfh8P/jZf99FiwoGduN2N0fgP\n5kA4/+KCeO9qmavkRM5y6cWgU/nJcARnI7n7blKGCsVhgGcWbAV/Fqv1JGIz\n3+z2vlmsJa6HSDhlTR/RvzG4CAOFvPpXbQFNA0Lsqfx3hJMo3sFZRTbfTrNo\nDPHZnY8aJnqxfhpIKxBmMYWI7LyHTTGLoawKQl1Z6YFvjXh6iKDJMtimac49\n9nwTbbRq2FneiuA/8UyRor4AQCSTDDNrz+FhysZWi74yvvyMg14ERX9OxiCs\nUdRVIS8YubC0b8A2vh9vgS5yTrl9rib6bM6l53aVk8SFomv5gYVGBOrv405m\n05RK5juD8Fw+I00Y1A1luQkIqELlZlx5BueNZtdpjj/ZflZ/Ri2zsYMVxe8A\nltVLsbnFZeIqQ6+GJ4V+88YWbqLi5W0dP41yldRJK+Q6K0igZlv5QYcP4Gi1\nJl9ayeG7EAk/MZPegaXSjIUHqkRyXEVQX76vf/D3xslVq/vB6IKxU39V8hNt\nCh8szN/+EhZqQK1PlkFiIU7nJ9xmAgjFTA93U8Idmnzz2tcUG9kLO0BnPRGf\nultKkXgCDLf3YPReBvi3vwwWRIdUH0aT8cg9HDLZrco2q9Ml6BcwgO3AHXwE\nF4T46yaCardvrl+l6d0c0PF5XIKlKGr+0qNrqSXH9V57EHVQ88zhAPu5SWNM\nSOYu\r\n=Ikb4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.790ca85fd.0","@material/theme":"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/line-ripple_8.0.0-canary.790ca85fd.0_1602539783496_0.20300247429065887","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/line-ripple","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f5e2146b717a4f88e7cea25e51912f4e0686b2b3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.174c0becf.0.tgz","fileCount":34,"integrity":"sha512-I0xY7MVc9KWVjNWwGPqZ5jlo9STvX7tzkEzvkYLhnQHHJoUabkI440wQqitZXjR1gfYFeaiWplnh+6c3QfGEOw==","signatures":[{"sig":"MEUCIQDXEUlXQgkWjAzPU1cTDgU65JpNgoLTu9t/KBPIm3MalAIgZ+oLoIkKGl47GyseFRPNAzfVSX4IepfiCp3Bz9EmUOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl87CRA9TVsSAnZWagAAV1AP/3tp8337sEdo9LGNNlmq\nJiRnfwLpu4u3TNqKhJfvVfSyinj674iVfRBBgMTKobdIwshAW148agZusKVT\n0ZQM9tPte87aqzk8SsE5OlZQsNUJbfvIGNCZ7ZNKpUMIML9MvaOSQOIvqPYj\nTrxrungm+yC/eyohwqE8CIeCsN4/dS4qJX0GpEcuQwk40HEFp9RVxqii+bZg\n1pQa7r6p4iyBlgLyrpYAS9Aj+eSW4ebgW4Qf6DnlUjYsGBzEUI0pXpK5d0YY\nMzij4bn2ptW4SrF/fUfa9Ow2NslKzsiRh3+blnz+9SG4yOWmkbUVZd217Nw4\nV4EBN98A1OXU3iQxTrFGovOsO9bfqah8s+pO1dceRFLm2cUbaXWmps/MyqqF\nXyEv6ZNs6TpaBwqH13bdBP3dKy0ED3SdnB7lQisee/Onv+KIxflhm+K+806H\nLqPnYJ9veprnR4PjpdN94hyBbhWug+gWogrRbbUE53UzVuaJmEhf1NnxBIkf\nuL6UWoExf/QYSrYdsupepKYZgNUT4yLELV+qFehrHcs2v87zzt1oQJqMV6OZ\nnUKApJQQouM0PQPBtd4/mu+sEY0nWzA+4hrmY63pGwBIDUWMoLkp74YkIbqG\ncKiucvYhtwHM93awdi2exQvPH0wXbK9O6hazQ7kcKCdcOOB4EFylkZBANzRZ\n5cIj\r\n=kgqd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.174c0becf.0","@material/theme":"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/line-ripple_8.0.0-canary.174c0becf.0_1602641722490_0.2882294342271774","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5e2ac2ef3a153f806f86cd25610cebffec4f6b55","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c71ebfa02.0.tgz","fileCount":34,"integrity":"sha512-JVnBmY1QvFKSWL0k1INctVWUZYRKHz1G85AYSpN+wSJQmS02EOdz9HgeaB2IJQ6BtMqzx9Q+qMLMt+7bK6eGuw==","signatures":[{"sig":"MEYCIQDF6cKDo0HYxGM4J8IoQqcPyQ599h5gvU5Z931yhqP8CgIhAIY0IXvu65GHBzetN+HALkl1/2kUrpdl8N2ytaLyYNR9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnvACRA9TVsSAnZWagAAnx0P/1G+MnRae+h+KJIlOe8n\nnke2mrBH5MuiR53JRlVF1aMY/Mb7Rh9y6SldKqqZSs1zW94iYDsD4V5ett8r\nbxR/MM+Siu+DcTxNhXyRmTukYcS2qml+EijX1MVBaNh7mZgcbzPXpJbpmcgW\nQgy/JSo8TXCI3wh2eDp5bfRtFR6KH5ofDFbnYu/Vrd3d79jGqQju93kOyYkk\nTFc6v6fCVGdDubs70+T4Dl4WCKvHVDyJScEch0MoTT54mQm4T4OGQ90gevUp\nL1chiQAbr7zfCKHRfadM6jxG5BZKWZjs5mYq+yBbgwJ8a/fZWpp2qtkL5v7s\nNEuzLlV9lOXerfvh+TrnggDl00nlEusCnAaCifzETnUceTPLr34IU/mr3Etf\n9P3qx1tFkc1mHOxZ57kjxlYumGV1VogTr6cSDgUNdq+ixoW4cDeyGVndUuOy\nzrZiMkc6INnaVfbFsB2zTeNcC6CUcWR++AGbdxmRq8Hj5lY6Sy9F3pwWXc0A\nnZU3r3LwqNo9a8CgOBfz6/ykKQQLckcilqzr3cKuGiWxwSyTTai/XDDYcrvG\noZDt5IW1NIIITwJ72p48me0292vjC7pA+sO7nxrYcmN9BLIJploDllWvxfBh\neKIeXeNA1/YIqM/uyNJCiTtgjqShdrb1vgSeiCWKZ+prj0it1F6DA3TFM8MH\n4b62\r\n=+nBO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c71ebfa02.0","@material/theme":"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/line-ripple_8.0.0-canary.c71ebfa02.0_1602649023986_0.09758453542213341","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/line-ripple","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d9b0ad0afb5f2f40d29a7e4bedfa8eb0c6e14863","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.2ab716cbd.0.tgz","fileCount":34,"integrity":"sha512-rM2KbTm95DIBeOOMgQ04uIOpAn1wkimJeu6z88r/SDSY4WY0uYfRFK5F70H3N/3rtBhlcwyw6DFJBYGoToWM9g==","signatures":[{"sig":"MEQCIDV4xBKcgJpVV0cT8HPbWYcZP5kblzl/WaRK5Ppv1Q6KAiBxaMffpF2unMwswzIBQ5KAaWVVyvdVPtregYjHzQw1/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiONoCRA9TVsSAnZWagAAjjEP/2QodBfqY5Nr6ND5jznl\nX6oQ2FnaATH4FVTY+QSz91RixsFGUgO814odPPvKYMZ0cMOJTm3jLWdVkSA5\nMiY0/k+fvMVi3g5HkJCkqzVUAAA9URpF6CXeg1d4+G0NbRyA/G3uoJUhFHfv\nChECvQ24PzK2BAXejjKzfJcg6vo093md1g94L/LvMAT2bmTd8W6nf0fP1Abl\nUUXsLW2BmuUxOSxwq5urIGdp58Gyl31LpOMqLWEzRg1tLy1VV26spWgoxJlK\naTiBHp6YTPjb1nj0LreIgeZLYSpLe/jgybkIAkRJWzJx7SPI3ApEIUEtUQKv\nK+Hsc1KjPUzd1grV/j3WityXSrI5rsK1byYz8sYvGCCL+/TuGoNrTrkDCHTU\nI+Zg5S3H7292+T+I6M3qQVncvx+mAzW03izj9ZviVNN0HFfPrk2U0Ta1Erjz\nfL9FxVqragDQ7feoQLErDx6jrpz5MelidjTl6ydZgYKJ9Cilo05gU0jWRZG2\naZ7oRO4RINOGIiJNtL/SnMYwBELExGEwcAFNH69y09krRUOhtUMz5/s+UrzD\nDrJ2RQm0UqyiQ1/bvvHRaKIO6fvlG4pt6SaNPWattpxQ3KemR6yXjAC1dkWM\n1NOCwqSvBRs3mOl9BhbFYy2RYU0oMDLboqBjFB+QZtb7TlpRu+mjCvZcLyO1\nBdXK\r\n=N9YD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.2ab716cbd.0","@material/theme":"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/line-ripple_8.0.0-canary.2ab716cbd.0_1602806631950_0.01919918223544359","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/line-ripple","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b02514270f3acf37ea79bde7ed8556daf9890ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":34,"integrity":"sha512-HF5iod1ys/0U/W/TJABhh98zf+xquEhNokR+Mn1z5x0gsHp4DmMo6kJjHQ1gZGwX5Qrox24JGleVo/3NYq15mQ==","signatures":[{"sig":"MEUCIHgkmrMMQQ/JjUbZV4IdH4hpo8GKYJho8+Sn4YENTQCxAiEAvm9dp0bP95cjC1Pwuj8/rs2i4lWZ86AlIzu1g84Ykqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ2qCRA9TVsSAnZWagAAjk0P/iMmBQgmTXmyXNez/bT8\ngBmobgjJrPfGchly+JNkVTBd9ujhiruYx8r6/1mrdJf49s6XCwFznJvyio5M\n2UdvcuPjuoXOv33u/ScJ/lvGpOG2LNnMdifB2Rs36yKJ7fQJk61UAR0mG2UC\nAL06pYaZvNs/T/JDFBV0tsM3DfBSh/6OdhHqEHsX/KpbmOLe0X7CInDzIMn2\nsXd9O8+3HmihxaZOwlBELoxflnyoTG/VenXB10lXAtvEFYmQl12QOzPQY18r\n7MhW6DiHpPpVEhsiLdqusrvdO0FhQsofQWuC6btAdchHvlz3qNHSIIJcS3DD\n/GAex6sjk1SSgV6p1ZG2ykheEX8R/vPxeUrv6KRXak9kHTcN3j/fVUzoN06G\nhmh7x/n0G/5TMoqGeITpiC/BUQV3yMpQAirufsoruyN9fawWM6pzBqasAxc5\noSZSwKTQWPudRjp+hYGziEg1HQGWP/1tSdkP96XY96RB46JtDL4Qq+QIDouY\n7+Q8DJvPhGsix5TGPPpGKP9w0X5EXsqcG4RKEfuW1P1qHSgV2R71MRQy2WVO\nOwFDOZrWr1vuolBlgmhQ6mAyzt+ZUWVQ5Gj3p2CWKImu2a4m4MXFMsEWw3MI\nESiYCh2di/hlmBYLWSflB49CzVMtJdFqwuQpW5EfhEdkt64uyO5/jyN79KID\nGIPU\r\n=2h5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/theme":"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/line-ripple_8.0.0-canary.43c1c5e2f.0_1603116458129_0.7396014224545973","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/line-ripple","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8e9e59ec1c0e91e5d2459df4e5be16651a6d0618","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.ccc64eea3.0.tgz","fileCount":34,"integrity":"sha512-MgQwJWudUqcOrgS6yju8kpNOB/I7Ce/cb2hNogjV5VPUFnQgEaZazzO8gC64iCwZISl/vmKKLUWwtxzLDz9Lrg==","signatures":[{"sig":"MEUCIGQ36b5JzaHRp8otrqnVMNVeu+Puj4uTdnbWneP7+/SiAiEA38+JQLZRYFjOeZnbIXBXi0zKfBi+/XXNJkfkNGjahHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1LgCRA9TVsSAnZWagAA+yYQAIdjPvKES17VEcXpz3Y1\nNve2Nr8YTM8BeSxDw0WzQmwU3bu7RbegxtTsk+X2ub5wevS+STRuJPnO52pZ\ne94vVjL6LexChL1gOIvvkKX9/5lMYEfAD9lblheU6aFxW/Z3i8+nilRzI/FY\n65+l/1nUIYg7oiXlcOIQ4Y6BcVcKn6tVZNb5zCwUPHmx6ytSa9fU08fXjxdi\njzL+spBNpL/HbTC7A3IZr47E83pKKmZlqXBBfrNGVm22LfLHWzoMuz5HMHnp\nap9mPOmLegVw7XVstO8nLTR4/TVsZ1bGh1L4WTtRCzArx5W/LU84kXwOE/XU\nHG1zJqwvZZHOQqiu/lcbe0/L4IZouPLSlU3KzWp0Wy1O4gxMdBbrklgCVAPp\nZDA6B2dFLuHHvA+8Egy5FNc9ECk7Eu19OXCz4y9qCpK8mErP0WFidys9kb/q\nRN5DYoLoAlmEIeLR83hdgkY4CkI6qMUoYmswREVnzEwnYbfYXnn/5XvXxRtt\nzohvUL9xLpbjr7tK6xvG313x8jk4SfQfPlY59SfA46fALTP3+jY8CikN21Wa\n2E5LK+xJEcpFY1S1bdrXn69QpMCQsNtoHhbrepC2JiKUg38Ak2u2SADK6KF2\n9xctgWXA8oTmRYp+Aibsrr4wOFaMCJHxjxaU/IN81mhNCaW3cdvZrZDbvLxT\nrIns\r\n=GeE1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.ccc64eea3.0","@material/theme":"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/line-ripple_8.0.0-canary.ccc64eea3.0_1603752671824_0.6888807231479543","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/line-ripple","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f2abc6bbee2c439a94cc8e9a2dd7b98567f10ec7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.a79cdd019.0.tgz","fileCount":34,"integrity":"sha512-rEd4xWBhenNhHp1gCbAG57fWpoBwHm9vtALVsdfqe+URtyCryuh3DafTynR1GvvshqoyL5nlTd7l/Z5t667JGg==","signatures":[{"sig":"MEUCIQCQOlj0fA6YZaXGKUdgNX2jOXuifHZbINO5itqxDOY7NAIgAo2JmYc2+dWSmCLu6C79kZgkUzBnLWRu65gCdt1vGAU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEs3CRA9TVsSAnZWagAAtQIQAJe+TDYbcQTaubqusOP3\nMr02ijPWDj9FZqwbmOaE3r+7rm5Qp9gIpj4+xNK8aG9NKOh5uYIcj9CBW8rC\nHqIDVrlN3Bk1sOS4s+/3Ibzp+F+DUolbmOosUHbExXfdbxUxhKr76U2nzBdf\nPi2t6fw42cOSH+G/Kc+rdFPZXJDRmmjfZeMI1CXcQFDCk4MNqyS25h2Y7lzA\nM91ZtUh6aJCgZ67fUFmtmFWn0L//XfbRVGaBV/tVUbyBPoK3cTszAGZi0m5N\nD2WxPxqze4NTdmFEWJAY3M5RXuDTI7s41JbBLB2bfsot3KfvADykLDSVLwY+\nKfoZbqfasq+S8Y31YkluP6twh1P99fZr58ZweNIQdZmgZOghTdDsgsAu4iXO\nWQG71DvAvRUETMkQ71ljLhcuSY1vHLd9zB4rndM7W0pSpY3WfpY7HjGfaLx+\ngNDqM+BtUveSCnNt1DOEaeG1uF7xsUB0e5sd06OFPTOQJxtTAYp0jkmkBKCJ\n/QmjcOaqKDy4wF52cxd33a536XWzJdkimDsKD8Ab2H7SyC60/ENOxzGeZh+Q\nlbYokAwr2zTLlqTRCFmCJC/VWIQV3qO2boBGCwSNWvV3i1nr5HqeTlk1Ja7p\nY2z41nrArkI6oje0jhDISFFk3hu+S7EetGR/iHGzHz7q5bS4HPvrw1yd8Zmb\noQOf\r\n=H9m/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.a79cdd019.0","@material/theme":"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/line-ripple_8.0.0-canary.a79cdd019.0_1603816246475_0.08631245968157075","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/line-ripple","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e96c35cd44b898d1052d5aa04781e9b4f87315cd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.596e98424.0.tgz","fileCount":34,"integrity":"sha512-2oxqlyHzwvUihcH5tWGOyqp8/QiMQBIg7T1EeuetiIfd66AQHb0A+qlsi8xMxM36z5efShITru6NED6dqVetaA==","signatures":[{"sig":"MEUCICZfXxBS33RUr9yBXtklr+tV6IfizIJAgHhbxyMvbDudAiEAyXlbWndQy/BQ+qdHuB0E7YvCegBQyBs8IzoJhCNJ4fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZY6CRA9TVsSAnZWagAA08UP/REYIr7Qh+L/ztuM70OM\ng5VQTVLysfPGFeGPuMMbvDa+PcsM847ollUNIvUf+WtQ1/6rnKtfaGn2j6ub\npPR24vx3qJk7g20NPGdvEp8qi9hbAGXx3tMjzVDYcgdxzpjSwe9giJuC8i5m\nU0lLZQRARdd11BQUYBuxUlPJxcAxF+hvmAKnT4njZGWe55tX/p4gUslfG8Fq\nNGHCA/FDbcIETdvcbocsi5y6URPhsU0Pu0UNp4VVv2CG3AGFR4tAFo/n88wb\nlSmJsCj2pdIT6t2QaNZdC/tBFPtFdczUbPHRc6mzZMJ8xeWBtWTwEpkeodLh\niJQnkX0JCtFH3vXxFm192JX71FShgGvetihXUPRRPZmEYtNUMB+l37xj7P+t\nNBxdufoTUAu7reowXrhy9MJ8tF2UFsb89M/eNY5JOc0kcdjkfqzjUAtrPx8i\nc2rujeq8Hmyov4J54AAcv1NydZ1LSpjQZOBcHJKPaesuC5BQfEm7QRjKICLx\n0jm7YvszZXS/v7hzge1KtWi5IjjeZVa2Mx1qCLmhtuuxalqeOJt1zWUYi02R\nvtk5GfMlF1+ilW1SX7V11/SnN28Ddz0zhg9CemmWvVkPvtWV3RvyC5XBQSCh\nnifDNlBnbaLDg3UQiO4B54Wk5AK5pHy8zbwuBlGL+F1ebN7HfuSkyUe/xQbd\n2edf\r\n=/LnK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.596e98424.0","@material/theme":"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/line-ripple_8.0.0-canary.596e98424.0_1603900986009_0.10733808178219362","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/line-ripple","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fa97e9e2d7b7e022278d344385d86ab8ee266bbb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.05d5facc2.0.tgz","fileCount":34,"integrity":"sha512-+NlWPRFNV/pfQXke0En/VMKUUJZ1regzuAqMr5wfDPSzfdfbUCUlUW/+wj98B1Pl6rj4EnNq0M5xWyn+5nxNXA==","signatures":[{"sig":"MEYCIQCa/yNHNeIbTALADiG3xUGFoa0YtQslB+1Q+aPm5gfYOgIhAN6hl3Hh5E0loDk6hBEioDB3L/hREEaJFGtR5sWYKgEJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZg7CRA9TVsSAnZWagAAmjEP/RGeRk6NgeHFK51Y3iir\njWnoiaS5sYl06+E0B/GCqJdrKHrwMaqspP2a9mdISGerneJaTpB0Lllq8fwq\nTDU9tb/Ub02DwpQ90h431D0aZ/OVlcqxPHnXTuvw3xzMnov9JvMQj6XVMLN3\nQ0T25e8VJ8WFHjb9AySSM0P5f6hZNBLLEBAKbnaJxehOvJfyoCXXf5orwziK\nhqOJVfne6iZcVmUEBW1rOgowL9VlHAabeyFHQ8U8iZ0aobzylg5ec+JdyE/w\nGXvvSyDyashFrF6c4UGO/ccMH82Ge/L08XVSxBKaC5UwdCf9Ewnu4m3pw43t\nosvJeW8bjJcXL2PFZM0Qr+hojdLAiewwstUaf7Dh4eZCsgHDE48p8Nz3BCJF\ntAV+qTqh6hKuOetmRhnoMOBduSESSKdo45caXk4kaTPl0eUU+SNjwrVs3gvf\n0RUnW++w6fLGEfSkG2NEe7ffVxONgmsChFwqptCD+qjXVPAw519g+foRGJ3O\nVAl/t6CEfV+Ct9YNHELQapMQ0QzFh7jZMAu09ksr1uDYdyb1dG1iStB5DP76\n9jO6e0D7XnOFs7lfUG4NLW+g/YjOj5g+Exr0ofdjvkgckphKG8cP/qGXRt+5\nUM5ykHRfmS0+3bM60MO7OEdk6gqkXnBe2okIFxAC5+bnNVtWpsL2ltZ3mJul\nIg3P\r\n=rjq4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.05d5facc2.0","@material/theme":"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/line-ripple_8.0.0-canary.05d5facc2.0_1603901499327_0.8778263775651893","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/line-ripple","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e94dcd6cbb4ead9845ff632805dd55d97ca479a4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.291b3553d.0.tgz","fileCount":34,"integrity":"sha512-EE9baoC/7kXKAnfG00ZOKKvejxmM/YMHDpvGfyzIRfU8GDXkj56Mn8n5Ktm1rtq7jBTDcp/K4QdEpSU04sX2WQ==","signatures":[{"sig":"MEUCIBcKa0Y+C8TPAolDfjq5G3xkyy9tdGBlMyPN4lrgZ6XlAiEAi9G2T+pF0BgyhZjIof6pX1st88zxMe0RRQ1WhirB0aY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma4ACRA9TVsSAnZWagAA05AP/RpU+xOSJX0p+MrRxbuZ\nICAf6gKDYEpDQ2/RI9K1IueX/Cj6anMXh/WPDIukky8onxd8dL3L+NBgY2lH\nwqMEfZFAdnsldHZMT6mETdBCGsWePdZhq4QLdJd5BcN8zjdm/o1/Rn3bCNBS\n2+9k2J0BhIKMYMJLi8/nURK5/7qQmBn6qXW1jWwZYvY1ENC14FI1DHyW8l39\nJwhBK3r0bfoVke74sDgs7SrKA4BsIjMmrwO6E6xhj7KjvS7XOvylDReCCCTK\nKPbSihWUwhYzm2lyJwTCwXKTdf8tBa9OELB/cIfxRuAoY2nZ9jC9zRuFBT3k\ndRpr7aFrIuOcOZS85NHtyX5fujhiWYSqy/uxD05H3cz5i6Lp2H3CPdgmH6XS\nBeXfIKj3FwuoroiIoGle++HfdbE/qsvx03gX6lR/8sy/uZRoKEOpil+36Pgo\n+V9ZTs/7YROiZLGk0WDUHwopsjWOR9z4kWUSzGEmcaxuG2HcnslobUqFQZdV\nr/d79/Da48ChRe15lE5Tl5GcTbtBjTQr0XIHrWU1gPbov+8YmFJxOJiwpMbX\nYhJ7vTkI6VMI2tr8Wq5Hz964pdfen+WGYt+Wl7m/FwFly04q6EDktbQtjhBe\nBiyh7HWESK9Bx32b57vCV3eSvwg9pLTo/9TyWTPNCZ+AY1Us8FUQqvafxQ0V\nevfg\r\n=k1WD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.291b3553d.0","@material/theme":"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/line-ripple_8.0.0-canary.291b3553d.0_1603907072417_0.346694974518593","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/line-ripple","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c031da7d4ca99bdb4f33e5f5cd2713b0df509ff6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.dbc449b09.0.tgz","fileCount":34,"integrity":"sha512-sGVLh1GKv7UDnKorE0b8eq3LYue51d2AhAA1nafmscm17y9BooKhrv+s/4SsqPlMuRxlEhKBfozT9gqLnmlqMw==","signatures":[{"sig":"MEQCIBUuQbxmYR7vgP5pnlfAT0A81j5fCltgK9xiTZWugXhUAiAfxQYJFCjgbqnXJlzw3rfgtLGrF2gykGyRePDMoVJQ8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbSGCRA9TVsSAnZWagAAgvsQAIBfV8tn2vQYWWJeuunT\ntwKG4bNtRxMNLFOLLjZPSfCp/iMQ5tqER62nwPHDn7M9E5Q7oh5/dAj3ohcs\nwaX8RhPOWSJJfTNIijKjR/b/QbeFP5KpaRXv+QyGeZOCr2pFMB/+8fylDQxC\nqcRfJxBpIPCWJzm2QUh2My1obFqp35tbzzXX/9iUcUNaeEciLlbh8gXM+TdW\nbYPne43k3kP2HSrHKT2Bmb9oINBPWShvxuY4XCtBsTPHmUx7TF+Tm/bpbi7k\n50rCxespd2MwfiR+TuzqltOT9/5Qfr6qypJfWmtZoN58Pw/IBPamwFHmkZz3\nLdFLubyCG9r3BnDmL24PsA+/yWLEXXWXczeMsERpkj64pR3mNi+bSRCE+GVI\nKtmC9FYO+7VVkKQ+bGsfo5Ho7oOaLa+SwXo8jHHAPld4YXxmbMY8ctifV+Hg\nauUtN9nbCYWgdHqE1a7sGHximrw3dekBjtu/NQFBsUEXFU5XX0YxYzYQji4u\n0MlZA4aX9fEMPrC4kZqcAHRg0PHzs97lRyEnWHHp9BUoadru99t9COrTZxsi\n980nO6Fsd3eSIgQDX8Z4D8mzAmnvZmxxKFtfomvKWvVM0OJzeBS1moOupvm+\ntvmw1OQpp3gEXxo+4T8/eQfapZuwmRuMCty5KssYrzgsNMlpcqvGkeM8N6T2\nRofl\r\n=7/xP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.dbc449b09.0","@material/theme":"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/line-ripple_8.0.0-canary.dbc449b09.0_1603908741622_0.07657281715212605","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/line-ripple","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"05a1d580e38db5867d33ff1de144885121956c69","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.4794b25da.0.tgz","fileCount":34,"integrity":"sha512-Rl9K4jdH4pkrpC4JfQAJRZDqI2EAjCypXzLgRIpTRfpqkzLzpecXOSUozwWyJIT8kNcWe13sgtE2ft/FaJrBwQ==","signatures":[{"sig":"MEQCIGYySzAzexcFyRzqPapMdwy6KkrgM420/pujwb38w4cHAiBDJeov8JAhm7VVMPoYCO0E8nMf0J9Pozu3zSsSZVY92Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbsvCRA9TVsSAnZWagAA3VMQAJe/MKbv9d0AWw+3Q79+\nJD4Uq2NMsLhGsDBCNOvrdyC3aw/114bWKN/kGiIlLs6NthPp+ez9HNBw7yZV\nmWaSlZAkzcl6GhhHsbbFd5FzIE5xB733uGk3ZdRfPWc5zIk4QxATYgEpoIeu\n2dsLykIUni8RmeiEW789Ee+pXdDIZxR4C4+IKH8dOnQW3Nt3ooqa5SlcI9Z1\ns6LN2XSN69RCc9xVIrLp+Q3i1u1+lStiEnpJYLtv0YK6cxkzAlhVwa9xEUlw\ndBpHyBbaH+KcfSOHDvcLPlyH8/G90fQsYoJtb1NRKgNPOErmHNSyQlwLj6oD\nUjXJXUgEFTMhMvOJSuGnBPt8JeyuMSCYXdnFdTheEIPH0BoOGbeOUFelt0DN\n2RfTnIRN/YcsG+R6TSXjDtMGh9lMnTOaWTfmG504bEzwrcz6qixAJFLzUM2F\niJhFWcP/oUSyg7GlS6eJ/8rHk4bRnjfjiEBs5fVRvaQWEYcV5v7+GOohQ25S\nsVyOP31MM407wlmiN7/VMYBN6MxCTzUyeJy7ioiqIiBx/00LTEEOEoGWw406\nZKowyd/hD0e3BUK1asRvgfkBUJBYvqUiM/PaWGowP6yYGYFHFzP7Hl46Pm5h\nzjEVPZ/SLUFivvUMeblJDnL1IOjXX8d7M/PjLIqCaTRe7o1zK7YOjVM8jPdm\n8Jy2\r\n=0RW/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.4794b25da.0","@material/theme":"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/line-ripple_8.0.0-canary.4794b25da.0_1603910446944_0.46388485416315284","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/line-ripple","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01e5af6b18a2f2e2e4706ee45f2b27115537d4ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.c61db90a5.0.tgz","fileCount":34,"integrity":"sha512-mBjOcmltKJC/YTniFCw+shrKTBVBzF5jnF4eNkqc8xHOjdG5F+qVPBiId1pGhtIQyu/NPMxWOMjalW6pfHzRUw==","signatures":[{"sig":"MEQCIGJbCbvoDteB/PtcPwvV4Iksz4DJy8aQA5leZW4FyyQVAiBp9WssmPNWdVTI9V609oGGQYu55zOcf8Ym3kq0EzyZNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmb9+CRA9TVsSAnZWagAAzzcP/0TR9LRci+DNhR8WiIiE\nw71KAsBcr/hYJImHmSq5Z7Q7U21JvH3SfL0RpXpGA7UyfPX8k1WdqYD38W+a\nom+QmEe+QD6nnMzJC4BEnQ/qb9BcVn+p//H4T62bj4FSWXQ20+wdhJpxzoxU\nSR/3eBq+0EmMirHKjhF5je8ZKKPGR4IwBCKqZSkWiu1YKMm43IcFeLauLWal\nXD8lX0klMwysbUNbaWDJ+3mDn9h5rdTLKvpiJOp06pD1MR7Ub6GZqVZ7SETi\nC38jj9pnGZx0lpv9DlCZvAyJQi7chexEih+I0y+oE8eRKmLf4nZawWc13uMo\nakDwpfEAcdCeVKMQooWDthT/shaoBwuWVQVNXjexZlot0Viumm3+2OODNPJ6\nmmCz5O/5YMwuqueRVvKXAaOcNkFc9rlncA4uIPN0mnQfAgWOxgK9pMW8gAIp\nL/+0C6fqdCXGX5UCq3NquqqkzCQ61hEPQJ9HlakRl/bU6z8T/s9m9mxnWyav\nBOWp92WWTZa2KyjYOfwLv+sfFEiQnkUdH7TVkAJnUdmIXnlTanjE9pslXbtL\njMHE4F98Bbt7YGsQPBYVl2/wRmxUPD/peWiuDcxEELW+wFJZCtVFEs8xz+bC\nO94F/Q3p2ZJjXHk/sghPKZ75y4PMpwHTiXaAxc9u+TqxXcpIeijo+GUuOXdx\nDicl\r\n=I+Pi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.c61db90a5.0","@material/theme":"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/line-ripple_8.0.0-canary.c61db90a5.0_1603911549713_0.14692840193906753","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/line-ripple","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5b754b273aec2e177836bfa115cd009ec70847cd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.6d9648ab2.0.tgz","fileCount":34,"integrity":"sha512-GWrRApdWx3ADuv4i+LjWR7mKddj1S1ogkkDxVAhfOd6uXKpy22hz9W6KPKQd539yuiV5c6kqgd7F7nIvB3szIw==","signatures":[{"sig":"MEYCIQD0XjMvF3DBeDTHRuGBklvrhpyEJyuj3OtCnQnhExfYkAIhAPja41o8M2Ndgyfpa7sddRNPUBISp8jtjeF6GFJiHfpM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmybCCRA9TVsSAnZWagAAE6kQAJS38Myat3b4p6PR1xWD\nfGhYj8YcaVEpusv0U5e9zImwIi07nKyoZLUvyQiL7R4Ey55f0Lit36Nb3YGT\n3PvYrKc1TLw0YJiospmQLs89VILoVUeiRm4Z9LWsyrKS5U36w0l2HPUI7q1f\n6MRlne4aZeeTWO9/x/hOBt+2QOciDYnI4rRV8xyyrL7BIugsp27tLel9DlIe\nx4cRxC1RnPM2PPh4ARzzAOrRtH5L1jk21zHMVVq9LwoP1dWqX1qMFflSmRAT\nV5yL4LujJIyIy7rLuxHUCn1vLvz1S78iOaBtt9rrWuQLaxXE2YiuXuH9CaVh\nQi67fEkVaYbzBZ9evs8xiYIqDsCTi7c5BkPZ8ZGlyICWV70cDddpJtnhqMtO\nm9l80zf5P9jGzsBrIxkquMCrCSQkI26KP//1KiKq+Avk/PUi0tTNE34/PBid\nbk+GW2tXM6UF/G+KWkqUqKa+h/yI6PvNpJpvuml8zvMjmu1nWIAcAqSeeAU+\nsghkHeJP3+duFHS0nPxNbPYJjMYWs3479p9/deuUz09oKtF6hl+of/hCqNVR\n4Geq1rLgQ0cQ3TElely6KvCF8/gW0X/5zyzqzmsAzL3N0KyUGsn6CqrqDKDS\n2HosJ55iqW7CrlxFRxdypFhwPXs5x5o2/YINR11nYws4XBghb0jxMcKoWw68\nT/cF\r\n=jr2I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.6d9648ab2.0","@material/theme":"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/line-ripple_8.0.0-canary.6d9648ab2.0_1604003522183_0.8872725621031499","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/line-ripple","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be284d119a2a1bce88a739eff0a40096adfc68f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.5511c5254.0.tgz","fileCount":34,"integrity":"sha512-VX7Rd8yh9i701uUvRC9/+PK6GRFbz67unyeHorBRjZdJPfgvxCFLfzdarYKKeXk8qmUtm9+7SirHqfOLRgNNOw==","signatures":[{"sig":"MEUCIQCq9yKz3OyWRyGpzBIeBPrkZmUr1WgauFFmkzCV+3hbfQIgSnPp9SK3CLLzHrA8ln9ZcQvcVAFRHCo9fUadrTMmdns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFSUCRA9TVsSAnZWagAAuckQAIxpEFLizyTXFVYAKv3X\nWqH4oi0g/O+Gs74/2GqU511pEbH4ZStGcz2OvBClrsDnkoJKauVnu1XAwUiM\nmI8txT2D9/RvPnCeOigcUIcYo4YyxCYg2hIfluLo12v/zgXwNG00trF6xJr4\nYPKWbdmJHZO+ZCxipEZm0Lr63VDpbJq66bDW+mzWCwvPh89NZsls0Y/Rom0N\noEZXIA+QydupYqXcZwW0LxztebGlx5OBLuV+HmMGCb65B5dlH2/3V17eERp9\nJwWV7yWBAXIfCIFAyAbG42b6uLBJrQj7DnT23rTy2Upz5DHFcGspqLR4PoK0\nIXt6G0abv+qbawhyyzrGyDwmIfMAzcckKN8KWWXiv6fU9H8TKvUl3RrFcyS5\nUOYcVUa1J/NvWjin5Bk3kxgm7vkLTJ0LByLxWU9HqvGL/BCqWCRDWuw7oTbk\nF1tVxOhiy9xZJUctUgKeJASNuI8sb/EdPBBftbRYAFRwvA9E/zblnm68zgyd\nLDNVDMgV9lJMvpEOGkztnPremaFh13TwYBLVz1oijLS2LjJGjUJ/q7YNfuCB\n3/wM+ywEVcVwV1KXVwynmRTKeLKNuBnCbjfOQcszd2HBUSPPwBf0tZyuCb+2\naKEaDzBIF/HQHEXCZf/y5yURqxFUgJbrwPqpggxUKHjOESN8nGphJrmTAyTa\n+c0+\r\n=TyX8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.5511c5254.0","@material/theme":"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/line-ripple_8.0.0-canary.5511c5254.0_1604080788040_0.2533024962412831","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/line-ripple","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"81718f285f7a1b99c190cc0800a0ec9a73390eee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0-canary.bd6e302a4.0.tgz","fileCount":34,"integrity":"sha512-h5vKH6qTBLJNUnxSyQ4B8QgqB6i6OPO1ff8Z5ihNOXwjrW/96z0pP6JkQUII57yelr6JEYOV7eCFMa7xqzaoaQ==","signatures":[{"sig":"MEUCIQDhhn2GFspZNG3IpjyxYL1I/IHf5Nsap8jU0mkS/dZ7SwIgbZgIjkybadksykaJ7COhBa3Yng1iF4GL3bONg5MRE24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDwcCRA9TVsSAnZWagAAQUYP/32VLXoRb2S2EJ2HEKWA\nSffjCUq8ZkZ1gijFtlsye7gXc6PDY+zWYE3hZXGt5lHn3xmSX3jBDzn7XlDC\n4Lwfx5WlZw1i5qR/gjvUB1X3B9E1/+NWwmSUbIkXEa73GyfhJM++/MRsJvqy\nbN2TRrfBQ7M7yORIzbUhwx8LvVrIcVvjcsjx/kmCMk6bjeDmsSuzSDFF7vr4\n15uVsu102n0n7UZfW1T7ku3o8H5+4/7cJLeiIzJGBSfp7KwXG2OEoGh0euqX\nysMFKZvaTVdDdnL81k3tD2mN1yW0co0Jd4vh9sjcqNlSqtPgAQw/07CjkRnB\nmDUY+EQUgr55E2ikZnNfTnhHTNyz3hKvtALraENnhuUx2LJuGnygheoUIX2T\nBDLOWZCyrgPL82xVjDczfwslsoFJlms7aASVyITmtN+r2IrQNBfyneAnbpCT\npqkxuPIe7K5C8prSq+c3yLLurTEHGp62uDAmNdzqU31IIGnzlXRmnBzNIF2m\nY9uTMOtJga1W6CAWBeXLzUTHMAgmfDBbSJ6qXIzSCoV3CfL73J46kvAUvvrO\na1tHWArQIToi4wnyGoCd1cIaWwvzGd3ohM/zLG9aOliaMlkt+3/CelPXKPO1\nTZEP7zjBFQ0SHL5araL47MTPrMZmkq5USM8S6VLo0c6nUAgOr3ohrNx3sXzO\n8HRW\r\n=sJ93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"8.0.0-canary.bd6e302a4.0","@material/theme":"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/line-ripple_8.0.0-canary.bd6e302a4.0_1604336668223_0.8877017761153376","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/line-ripple","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"00d651034c48c12ead1d45164ec4bbecbc742945","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.d6b5cd418.0.tgz","fileCount":34,"integrity":"sha512-oIoTB8p3/qGQDdl/FCMSHvsAk7tpbLjJWIn7jY8dTudqEh9pGYw16Zw82+jamWg2msyDxWV3w3RGHMcggbkO2w==","signatures":[{"sig":"MEQCIEoDTbbMAG2qy6VgcNOl1wnJrhaGplxIQ4pKa2dgWns6AiBlKdIgFO881ok+m8ytIAVFsHa+CIBFppckr11+ETf6TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI8dCRA9TVsSAnZWagAAaq4P/3fs8DK7/IYURCZbu/2o\nRJerGY+HYyCe5lppuvVw4VxkhmBtlZXsQTpCVkXWfPsN3vLeMufaMhTJfBjU\nq7M4CHyYTks9gRdM5DiEPbC+i6L0ounQ1gPM6rux63N0fcZDT5W+8QHjU3Jg\ncWftCVDHUBN+hZBVXEV+f04K4yS9tCUZrBb/Hadd3IpfyFV/7HEwJSW2OAz+\nli3r1/2JTggVkzwE/9YyxIOuJsk92KPmYw107e2VK9KG2EL0tykMJVWHV8D5\n1Yvc03TqnnYTcx3oOMxDkgiPOsDTSV99Q4yYF+yjijWZYflrIySG1bWE+xjO\nzyzEj9LMiQ32PaaHrU0lThDIYYMS4H2B029vPAozH+ttbCbQ0G0Eq0uHnKK5\n1PJYvwyvsRbNoCed91k88UJw5jPJbktQccMrhe/5aJ73bFZ5BZpzoNwcv6FZ\nPrgesjcPAYneFSYbfUrb6PPvTn+peZz48GgiICTzFvjVXBSBDSdBBZiO5D4G\nBj5/v+mfLfGE4Yscs5zyMjUxqrypcCkuRYnwUVj5p/D4G8LNMHxJ5456z4mV\nAJEKseAALZ9Jo8s+Yem4uOD/Ra4DD1EYMWRB38ozEWck3+FVYwAqniTgT7By\nciY+MvvNod9Q06bxmhGMtuzraZtBh0fhOp9PE/IpQpN8DoftzY3RXzSiFDBN\nPykH\r\n=Qc1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.d6b5cd418.0","@material/theme":"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/line-ripple_9.0.0-canary.d6b5cd418.0_1604357916839_0.2800441036453951","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/line-ripple","version":"8.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8d424e0c65a391d27b938458fd05cde37b725211","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-8.0.0.tgz","fileCount":33,"integrity":"sha512-eShO/Xm7SWD9hpocIE+/+KWdYi4/dQEoTWyg7xZeLzbg70s+9cANLDE2+pkI8hsuMEhCTkC51XSOOBvTDSAZrQ==","signatures":[{"sig":"MEUCIEdC0pkQE/m5xaEtzFWiTizW1ZbeDV8AlvD40gvWncgjAiEAz5hhm/ZU4kEPxXgF4+L/CrpiL9qjln6xm2piFhA7zyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI80CRA9TVsSAnZWagAAyTUP/jCKjWpjshRZF1Q5cZfD\ngMYzGRCdnLxvQGmA1UrWkzXJ8UH7FIKGukZXDnUZ7yU5IQpIOQNvjuGJc94P\nQFQSAKzJQaarjqAsAXik+2ffvI674WzKL12ytOUiDdsLi6Olel9NauD+P6ry\n8blTls9V3YCX+0yLLiPR78CKw7unLifHUznHBZteeeZiuvuohLCNU7zsK8oV\nyLJ4hbRCpP5p1Z0uvxQfzw2xbKtA+g8p10lmvNpoI5S0MdTsZ3oDWIEB3bOl\na0CeBFoso/UvfjbeuCCkHT7C2fsk47LoMWDMYVyf4hs4/mWfeyj8EjQwfzfx\nVOMssvVUuDi69Mj/MagOuCgTpLqSRj52DehrkSF14fEt+KbOz//Mdea8ZCyW\nlc375RaB7eFI8lR11RG+BeZi/JLdH33Thenl1BE0Ahaqx14lCMs2WfC17hFx\nWa9IKS1HFhw+TkImbki3MYJTLexGBilYX9C+giO1SHcMjNqSOlOLQ2ZUlsnL\nbTxAPP6I7Rbh0DDCxxjbiSWWg87obzz1GMEz9SoL8zJjKtJqSrT2Au/Wzfmb\nxaI11uJKJCN9Rn8Ii0faD8HvsTtJWCeq6EfHEv91ScWetlJQoq8X3vCaMMoL\nSXZCZikPYhg2eHLuxGApgtj5ujShuLbZrZLuPxG3AcY+drS9EPMLfbsZDq/q\n51eS\r\n=gqpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"^8.0.0","@material/theme":"^8.0.0","@material/animation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_8.0.0_1604357939574_0.4733408044812113","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/line-ripple","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"218760df24aadec7d6b3445068a0fa2911730c2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.fdf9a2634.0.tgz","fileCount":34,"integrity":"sha512-baQkhaNI8MvdptzFilnvzk2iWej/fSjUnDRL4pWYhWee4bs0tCeXXSUqjxAdDApxMLP6R4df9y6gAcnCO0iLiw==","signatures":[{"sig":"MEUCIER8gqn3AfgdcUw1pqbHtfCcYhvqsprlGQl0o0RhmDnEAiEA1mMb/wyRI2OKnD9uTMJkjNiZngOdx11eurQNtHNrQMg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeXgCRA9TVsSAnZWagAAMIEQAIAtaN0CaW/bkypXjGJn\n9lV/tdpev3l77FHxCJ8m3OIcpWYYhklWlGpf+DzGsvRIR0ccuvTdqHkA0REk\nG35UinVfiEfB+E6sNxZy1hxjd+JmfCV8WeIs3v/xfsSWogOlxVo2Fu9hlZu2\nJCrDy25zyI3z3v+mJwd+GpWev9AvFsXcO/RVSLO2BtTKn734q2a6J6Md3/03\nQwX25PsCFAneQKe57ejd+UqBgjWNPI3ieb0w7f79mPOA+FVYxx/J8ODVAJoQ\n0K/oolMzct7qAWtV4+XZaOZq8vWTjXFkhbQxFFhr8ReKWpm1zzsO81eQdhfs\nNe9DTleUtvGyWkUij3YsSo/nmi3GPHdOQlEv7TWtMe0dIl9DBzpn6nI47fqy\nKiQuDpqv8AVTyAgDbFPrWD0p6jIi7K9Wl90AaHhct1zCzV9K4sKiO1lGsLBZ\nZleg1+DOS590RO3mMlh0QRt5P9RqAY0rOtyKINt8nygGxAUdCyNzwUsGwEGu\n3bhgw8HuLNIplUlHCb3GgUSITv5IOK7WXbhmnu8KC0NqNtkf3m3O5Edb6TSr\naPvmsbeEf4cdMGCZMIWaqRH8Dc0bdVY1tbHX74MDVZEqSkzjurw6EgEC5K6F\n8Bgj1zw2kr6k4oxvkYelXZ6ilC1hD9M3i1Max5jcqsDqkfRV2MRixAVlJtdZ\n5IVr\r\n=fbca\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fdf9a2634.0","@material/theme":"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/line-ripple_9.0.0-canary.fdf9a2634.0_1604445664282_0.5321210510514902","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/line-ripple","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8851917eb07aa7bd6ab3b59c2ca7f27936e9a505","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.4a86f30a0.0.tgz","fileCount":34,"integrity":"sha512-VsBKC4BEk8LTTQnP7do4IjNxQKz/yxpAMdX0OGCRiUORu3RJogfHYStzkOeG/qgZTWPYGEHTRfEfybrqfm312Q==","signatures":[{"sig":"MEYCIQCgF4phiDUDO5LkxD9m5iooY+1W5/BtEvT+ixwItcaZ6wIhANvJaUOPypYx1kPZRoUfE7ukBCUEgwFP0MgZFzdNwh+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeddCRA9TVsSAnZWagAA5FoP/iHa6dgDsNVOVQPOy6iL\nrxVUI9nOHdwPp0zWt0E5o+LI6CMYzU3xtT84RIc5XEpxFpWL9Kbyx8U35nCR\n+DNP/T5uqkCJnb1/oQFc0MdESE/Jv3aP80z3Byv3gDt4+emBPS9X6NPtdAA0\nHPQ/Iilt9uILF9e4kpefDAylutYPXmMynUbqxFD3NC6Je/5fhZAKmv8MneCr\nql1oJux2GGujXdt1ZUwcbGD8c8Fcvi32PcfveZHgTI+j3lxBkV3S3X+P1S0b\nzvZSdkKOnhklr1mE9bUu2CtJkmXBb5sUtOJiUZz3aGkExfFl4D2KWnqOtbYa\nHBezc7K12ZUqXlFDIVw+sUPdQ+AYBIgwhsxPsXzO62bVRDuc3fyh3tmQtwCj\nQ03lT4Q1H5ZJq8iEcGdeWveeJgWVSVvy4Sdb9lNI2Q3MxDDaeWQ5tB+a/CyA\nMuJR4ws9cbtdYhnDM224p/togUD4b9TahnVxo72/8IrKFOqZS0naeT4Jt+uG\nuqckJ12hiEy/NpQLGuXiqWST5+MYOnE0bvxNgZEz3ZbUp24prtKrtboFaS6E\nJTq04IH6M5M1mNyNp81SmF2QhA7gQv/L546QYN85xBrBqt/6cDkJJvjbOdLG\nBI4wIUREJXFskW0n8knK7Kt4Np7jQAo7QADa7F6PRx/gcBu5GLm+LSdQ9r6o\n0Or7\r\n=Ksag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4a86f30a0.0","@material/theme":"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/line-ripple_9.0.0-canary.4a86f30a0.0_1604446045192_0.6223139630685672","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/line-ripple","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff6e23a42fa8227f74a077701902f5aebbb65079","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.fc8b045f1.0.tgz","fileCount":34,"integrity":"sha512-KYmktVofc/MX5Iryqk8+GitsJ1jnbaAVjy2RgqHLOwwwxoI4EiETNUvsl7u5Do02FVz+Pmz4xceSbgty2KYq/Q==","signatures":[{"sig":"MEQCIAMLYY7mr+ouxKwbiFTXJRjSur1WTwTHFpbhVJN1EdKvAiBrJ+U6kipMBp2UCh+THSAfNIijQfMwXvvtvCdKHh9Osw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoemNCRA9TVsSAnZWagAAbuIP/2xrunxTo6Zh/ifquko1\ngCjAeWjRAwbpn35wsShpLNMMzUDc9j1VOiLKsS4ohAEQdSI2xW5S99LwmVvf\nAgXqMCleE33ujRZcs3dC+1HyOMS8wMGJBegJDWgXL6P5zcm+SG1FJpv+aPPx\n6pgX5Mm6995JZB6cR2d2Ij5eevgBbrlwMLMsdxqUXodEJgc4j01bOja9833C\nNogQQE4LyFcCD92aZM4m/6L36yGIK27FU4PgsShgs+qiKfv+mANKowiG98MR\nOAa8fL4DC7MJg8NCB7Sppm7K0xUZe/Q+sksxOabTWS4PSYtNlTfRgwdrv3dL\nzV5prRBlJDpCgaoJfDw4TSouCi9EZT5bMJ5RJXbG0jbUbs3chMS0Xz/mo/04\nx+xZ8p6UM+JjZzEndhyBc5ZkMs6Dxv6kzQAi25j/87R2uwH8f/4R7f8/Btoa\nUE7Glmmhjy4YVRSqFttoEevW8RMpWF6cDXayKEU9H+CNDbxq83QYAryRB6xv\nDVtW0fwwiACdewtiQ4woZ1/K5V+hTYDIVjGiGZKrMzXDmcK4L+VmgL/APMyv\nsIzO4rToKthb49FpcsuWWiO83wlzfJYCI2IUnKWlaMbts8FCU5hDTMweNLCO\nrq/keSkD7H4wNkcX80ZfR3MZvm022s4gnQYOjxMARDGqH1H6TqKlgbIuR3lK\nKhul\r\n=Pb5i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fc8b045f1.0","@material/theme":"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/line-ripple_9.0.0-canary.fc8b045f1.0_1604446605083_0.9801406584261318","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/line-ripple","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4ac4dcb8e7d12487ca2b8bfb209c23b813261520","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.a0b2db26b.0.tgz","fileCount":34,"integrity":"sha512-z8FfaCBHfFVPTZHYCqx/o2sDy1qbYOwRR5XMHNWJhbpNTINzeFA7DfD+tjzRfwc3I6vMDMM/PIDSEnXPcJc1Sw==","signatures":[{"sig":"MEUCIQDBdkXB+4sJNK0vSVa5innBO5qe2bqtXsZTOv54oBjm0gIgOtIardGnd1Sg+De9nLj94NtnzJkmdfncYtUIX5PDI3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofD0CRA9TVsSAnZWagAA9ZwP+wT8EiWv97lx3gAokraT\n/DX9SPJbW4k+t66qZ/V0CKji/Qp48btJgVWBLqTXmumVntmhp3aiUZj5Av4T\nsul3VsPS4DCFRqsC5fT5G3QV+iHl0s9jia5fqC1sFOVbG0XqzadWxnp7Wt4Y\nKoZg/bnoNfoCWZdNqgAhbn92aINsqrsD6NZvgA/6RNDlCnCxAe3g2rhKXIIG\noXWxzQllqGZS9XL+CFrfV/b59nfFRdI1dhRvw3dyZNemkouRVYjzX28OhvGv\nSfPHQSZypcAray9T0CKZrBu3qhqnnh8zmI2T4j11H+/CQHaiTrTPGFNhpusv\n+ocfKGDKcK+ynraOjY601UAhuFR161GuTq2aboms3zTR88JWLpsUwxx3iZfo\nWid6X9WhV49Cbt+KbG/O+hdfcfpdim1Njr81j6PBgsbOHYvzDgHk7kVS9LNw\nzKb9szUk7Ky841009rnL1jZ1VfcyyX2MS+2mywuRwZWosup0AaDkKclewFF6\nvdZqQNZUEUL6xGIh+31eO04ZQjiLfgmaAFwhcfMB2WzCz9Qr+Ral+4qDaFuR\np8I+IKWbZLeiEgIv2aHcf+z2rXgW13jLaAi4z8YBJhnZwUKVQ1wfzi3ujvds\nrARyDzhxh2B2HYbrzWJFWMSPtsNVyYSG70pfZqiBqCIQTVaO8jAconXg+HI7\nuJmE\r\n=4MHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a0b2db26b.0","@material/theme":"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/line-ripple_9.0.0-canary.a0b2db26b.0_1604448499598_0.014912632765673228","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/line-ripple","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"93c907801827346b76a96b3dc6b99eacaede41cb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.419e03572.0.tgz","fileCount":34,"integrity":"sha512-GYQ3XOH5OwcvA+isg413JTHb5HL5j+dzV1YH8pL+hgyGu/vLk48ACrRG4jOBfo/DVy4Td0t/R0E+AlOnvDhryA==","signatures":[{"sig":"MEUCIQChjepqCLzJeVcDWyDMXRELC3kQtyYLUopV7H22mFAlGQIgafqVyARctfPdSLSi3M0fvdFzJvaPbbEsN4gDLJxsb0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogS3CRA9TVsSAnZWagAAZa8P/Rzm9MXy3Dtl6CuXp0wf\n7FZ4Uge86kuSP6VFVolHLQPO9ug25b0Wiyhb4xo1quobqVI+a/+9MWKIikwT\nHmYePa9V9sUV6UFljMv48zh/Xt1i70gRD/ZN11NsNzMLieCYRKc35ViA8qLb\nXpBZUq1ZcHbd9wAn+ytKII8mEGv/zjygEmpvUXt5ycuElJPVRt1gluX7slZD\n8rlNhWGTiVyaJZ9jVr2W+HEK6RjrKfDr8u7e0w9PaxXhrDhvAg/Ufq1eJoy2\nMTfiHRXAnyDZTno4Er+4VxqwIzkz73WLY42mAlrcMQisaYfSsUap47N0WLxe\nQqyyP+PUSkaav5z3PvvcuWyVbUm69NwZUzWtvhd5EDLtDQoqTo369Cc+RC9V\nRxi08TVon5Iaks6Rch8WDdcdpqTAzTxdqTOWUOSgPG49+Mo//2loggkwlWW0\nnW8tFSCQ9o9yT/FE8UInBhyELuJGGyNGQITlazrML3XOwgSTkRiKA2r5xr5H\nOiOnjkW9UBdEqgMdLkgEVTtm8fhj+z2feI6xMu8EP6FTbZmQNgtvhnEGCKFh\n5BvlNZW8AQrc8jltB6J7JsI86w9IpeuU8/ENLFrA1Pp0NyWyoR8tlJsMzhx/\n95tO0bZaN54xSkbt7mVdVFryqvZlXVB0GBPVVRo+hwKDB3BEmy6COgK5xupa\nvznB\r\n=I3it\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.419e03572.0","@material/theme":"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/line-ripple_9.0.0-canary.419e03572.0_1604453558710_0.7687357965212465","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/line-ripple","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5e0a5a6ac449de19882c0b246db4163acdd89e2c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.a432ad542.0.tgz","fileCount":34,"integrity":"sha512-eQ+CKwJt3M81iLRZUJ7/NELUt9MPun28J1yYG8uvzmMC97vdxcAlltxNMmHaUrCwlhyNK7F/wLTgGpBRBvqYcA==","signatures":[{"sig":"MEUCIQDJ+IIcdlJNH7C8dASO3+BMr/IcJaEcEjs9VQndZOABjgIgctuPitQcr4PRXsXh4MSRo/plxETXneTWffpIBQslmIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKq/CRA9TVsSAnZWagAAdusP/iat/oviJLz1OwS09KaM\n8bunVnacC4VKV8Rml80LQWSGjt4zuadsjExkrlRPL4DLM6aWdmvrlaKk2+9n\nlMhGiulKppuw4AH+PAqmeCbyqIG+uOIESnRArX4e49OAJe93EZMytIZXFG8z\nU4/y2k73HwDUrYV2gkqtD6RDgM/hfCK4bg+tqQwlBiyC10mXMia1/1DTnrm5\nctiIsaYXfjBIIX4AgHwAhn5ZcEUF0DD/evd9cVKRUZqhs+U19QjleUjMS3yQ\n7VoElIJFkXtthsnuS2Jia+1Dp0/+1Jio13oRYQ6R2xlOUYUEZ1JpqBf3z0m2\nlZaNXyI4TWOMzTG/67Zdt0UkRB1BISuxEr6yzFM92SKuzWHy8dtPuuWUHBqY\n6P0FwHxzDO+nm/YNeildzv53sPM9yYzU4jfBdWp04W059Ejlp0KhElL3K0X3\nIzVuKNE1ouZBKwjAydvdh7ogSAS+ISpF6pW5HUBimgjiYcjBYJAP2ZUYie86\nK68CC6MOG++eoqbpsAKhOLmdQxJxDpPta+X0ivxcPXQIJQ8+EcfYJ+pdzuux\nzsw4LKjdcm0vbR1x/v2c/idRZDUmANzv041+AOYiCeRaYtcOKo2i2Gc+QNAH\nvn6elX85itzbX5ADWchHBdBQwsdIXU0b2kmXaT68KwbvQPV5L5rXQwoGDzLK\n6S4u\r\n=cfBG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a432ad542.0","@material/theme":"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/line-ripple_9.0.0-canary.a432ad542.0_1604627134597_0.7169599183390423","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/line-ripple","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5e07f7805afa06698d251cb2ca3f1efe319b8a1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":34,"integrity":"sha512-dLTF7gRIeY0olGsa99gcacMAmMb8ItAkFJO/vfY7iicHZf7moASyqKHoQvwNXt/kx4Ypv6xk8nRP1rp5R/sMIA==","signatures":[{"sig":"MEUCIQDYNbW02tlQoCOYbk4rjQDgxEZbzRO1VUYBawjqzZTN/AIgMt6gGmqRyT6Bg3O+5yEA99xwo5ALlIj0MGCfiBoUVsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK9ICRA9TVsSAnZWagAAdqgP/iHBX2Vhctl5rYeLouTm\n0jnFetjzV5B2KviXoFNeBaQ04bcj0HoYVABUJ/es+BfSsAUNo1CuJzb3dx1e\nBE1hGeJ64FPD3+T13PiLDXpX2WwQBF+lkO0PNy5GwxKzKnaL7Ii8dv1Qz4it\nk4yjMHtOTX0fSqUekCYa6eoRTZ41IRyddu081pqerTnCmV/Vc+9gsF/jXo28\naTiyqqobNVbOckNwkvy6DJoVuD5c+Vz+rzSQ8fdSQefFX27mb9qBxLf1ohLJ\npdI+tHN0LuG5oc5ssA14uo/XOGe9r2fMW1464Sg73QNxlWPo9OraGu1gxRp4\nRorWAGT/1TqP8TjBB/QoEl7po84TZGLKmq5uCRVN1GKCKKbzmGQwFdTNecKb\nuCO2MFuTi5cPFhAb4NtxV9BttW7kqz2cf4kAQB8jr1VqnxON1qB59qe6aUye\nYdAvfQ6Zdw7CfFxtpR1VVnqxXF6GiLPXFTf6Oh/iDyYdLDPnEbwXId+bsrwR\nu4rNDDRAKaMWjN+zFt2g21pAjZmTus4EFM5VLeZH8Nz7sa/2/NgtI1hDhe/p\nAuZX8wp+74xtbzFHpms5CCKkeT4lOF6AkVdoMYCpou7Lu90/+gyWXo34dXWz\n5wTgcaOSalDtckAbQNDFEjzwVb0rOXc2BW2qGhcnsTy5Onj022zOiizllnnk\nin/Q\r\n=LqAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/theme":"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/line-ripple_9.0.0-canary.e2e8aef1e.0_1604628296085_0.8301856039718891","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/line-ripple","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a955a718a39109fc5e9c21f39745b1a527e75ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.ec6b68b34.0.tgz","fileCount":34,"integrity":"sha512-LjI1F6sKqyT1jUz5nSIqqPp4i4YhqHRk/DqSv9nIMp/rBUt6D4YYCyvqU7XRBWeMbDwU/veym4Xi0RxEGkhS+Q==","signatures":[{"sig":"MEUCIADliVx9ah0S9gCaab+OUUg8ff9VBOU25PsQJDz7IYQSAiEAwRSVyJtNkAyYhjpDZobBBNjwYm+ndr9rxFDmX+xXyHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZxGCRA9TVsSAnZWagAAB44QAITDG1nIWaqhJZB7i3hu\nXLOK8o5LkcHodUVg4aD/8lPP59aQXQbEAk2CVCmLlId3hChMEgq5botAAfMs\n05g1faHtXK0lWQbNN6fW0sRb3Hwgtkt/jdr3ndl8IxUgySui6fFIt9EKkGF1\n/Q9VGi5jXa9hyAFpSrTDr/sWTAlpu7IPxMqrvxw+1cSAIE4NpR8fMiChN9ZA\n9s/0oPhmcWo6actqJmUvinsBezRPLcq2ndYmluZtLkrh1TMzCx8XLxXl+FD4\ny5b/jU0DNs8TLC044HNH4mitodFMga5mTGBC7an5rlqWPr9L9ZbJUpqil3zv\no9428BQYdpY0MY7uXL9wkc/DNaGw1IWE56HTLtN0G4VZUlzwnUKSPpGUd4kA\ndHTP1+GEaN+MXmOPm/dv9w8UkLte8+hnx6DmgutkE9ALCKANYRbKgChxEf7+\nKQq02b2k+pAu6WSpn2afJbCJS+b/G+7sB7whWCcFKSX7TVMM5BI5s2macWC9\nWJMv1eUURpFR1VPYxY5Uod7zp9ZGw122HrBSoOq8EzMAy/PnIO7vd2Fdx0Wr\nBi0RF64LgTsiDk+ODZ73mlyFBmzR6jhXzifEV1LUfOABu93XNl/EaEbz3ctB\nbDbk+YUaPltvoJXGA4aqXYMSzo9iixiTkDJJwaDFTmxnrwqOvalv0BfV89OL\nYPoL\r\n=fIjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ec6b68b34.0","@material/theme":"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/line-ripple_9.0.0-canary.ec6b68b34.0_1604688965815_0.5402583310831348","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/line-ripple","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"146a7143b4049111ede2e75ed0a405ae1ee24c04","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.b39094d14.0.tgz","fileCount":34,"integrity":"sha512-/c1J2ugMJApdwtPtVVXjYUMK/6mdWM0MIrnRCWCtAoS4HsJFCcw1MwnYAxdZ86uHFUuIjXnownDt1oiT5fI3GA==","signatures":[{"sig":"MEQCIFUIAzQx76eDaAVVO5Xa3xyPjwn8Dr/0sb1BUfJ5Efg7AiBzmwpUdfi8zkM5ufzihNoduQAieo8BaycPKJEV6le5Mg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpbz4CRA9TVsSAnZWagAA/owP/0Nl5YJKVFtROodNLWYm\nN5ziTMwb020bStttYY6w2C7PZAYmGj9hek6Pk+CuwOZwjJyiXzY/qpL/nKeF\nwxzt/SOD5gZj+cVr2U/vGNyh832NPf/BdDaq/LqM4IIcUQyGyVLf12xeXjIp\naALRo2YsFfelH4xB8uS7pOhPPjmcicixb3DEo+B3ko7yntkv+jC6Wd15Aqxh\nDZDvyNgiAT3GMtTwN5Y99b6fYCyjhDpLMRhJPAQOh9EVYksnZr2YWUSPsC90\nit+lHl9zMwqqbygTRiWrnUEOVJd48rAoStKUj/Q5vZz45UDza0ol5yOcMH0z\nbm6EUyGtga+c0SCdMwFB4knt/T5K2BrRmIVIqYaFaoFUtpMv1tAb4o2cTJTM\n/BGn5WJPJsgYE/lP6BYHCiHHddfv0vDl43kJVbOMGbCMBwsfOmAbmHrafGzP\nYVjVEI+cracL91UDrsFQXZTJBL0wPG+fhbQ8Zju2AbBcXfEJF2AawY/7RsGN\nJv+oSF0QzmIwXiUmjKjcnxsTpjHbczhxxkvewaz9o7hRIPDnZUevNGRc7/bQ\nrt6uFkMo7tm6KlNHpZArmBfL6Fg21zPy20KiaIJOYSm3nQ2OEdFM9rInL6U1\n+JyHqllXNyjAzNSS/GrFTyWeNcBfYSk3GWYbQUb6aucIbJ0asTMnLGNoXu4P\nPmXy\r\n=pihc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b39094d14.0","@material/theme":"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/line-ripple_9.0.0-canary.b39094d14.0_1604697336465_0.43960443304933317","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/line-ripple","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fa5e053b805dbec30b7674709656f5bfa5993f61","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.8648b8258.0.tgz","fileCount":34,"integrity":"sha512-MfdznQKLAVJ9zcW2IcrhGNWACkHZE46lUEGzEh8or1GeP4BRcKaBcni88GYmlVtBWRy5QZtc9fvn+cYL6Wnm7w==","signatures":[{"sig":"MEYCIQDCTgxgKgNrbxj2u83dobWkcMtrDVIIroU9BpUabKUb+gIhAJc/GpWgTfNUv4u5bQo9lGWjOdHHKBFXJyzTikWj4wVo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRIACRA9TVsSAnZWagAA4iYP/RxbUe9egYLxqFE11eqQ\nfQO/Wj3pKXUBWdEg7EihM1+DOrIm0LEvFYRUktodT6Z1PYVgypAkz12/WWq0\nR/TsKctlBO5DGbI/+i7tgUnff01X6NaZEExbz0wJAOHfhdKLiMP4kAoMen26\n5WJS7WVHuYp8pbEiS/fFi+L9Zzvqwyxi0JKzf0c8lA+15mHpqgnT1GG0FWx5\nrw/fpPDFAsZ784wUP1eLQJpKLUIa24l9jRVvbdxgxSeT8oCDEmfF9gzApB6R\no63g5zO54qgSi7b3gtQq9z/SOv4h+Jq7TzsU1BlhLKpKXbJ+RVGC9PTbBsVp\neL2QxY2LK3zwpvZWHkLEs97vT8xOJRGFiRAK9JiXX+1a+XJ3Yf3JRZfCRjzC\n6dLk6Jgf8N8kP3HBbZ0RAoFT3dLxqsRoxptTmxA9jZj7h7g4iOjAQLKzfue3\n6NYUbaDOoDIARoe1t9RVGsGZjFpUyShT6F2+36O4fR91oBANyJv60PSDTjLu\nZZfmYaKmGGIchBpeuxQIdF540gGL1OnDPWY5KWFfeacRqi2ezw34FR7zLvfr\n8dcWxosWuW/hsV+33iW2b232IUG7Jf8KpKKPk2pMHBE6ncw4Jc0dhW9iKz/T\nyg0J64PWvc2ZKjn3QW+rEvRVWPck7f21bnOxDil+NyQDtb77LBjmf6HHntpf\njrp/\r\n=RxIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.8648b8258.0","@material/theme":"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/line-ripple_9.0.0-canary.8648b8258.0_1605177855989_0.9663853408716088","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/line-ripple","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d0721253f7aad4c6d8f94c7793c23d909292db64","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.240c5f74f.0.tgz","fileCount":34,"integrity":"sha512-qMjfKcD47/Q+A6UCm+42zsecHwupMOlrF2jzNTXFrqAuFOFVB3ucYAWjBR/6jg3uXGclFGGE9DwwXrKq+UursA==","signatures":[{"sig":"MEQCIA+e8q9VDlS+iT28OCKQ08V0Z3nUBiFSb+xOl/VMSxbjAiAmvoPX8qb4v5tN4+8Vig9FhACZ2im+ZUkzZ2AYuVGoKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZj9CRA9TVsSAnZWagAACZ8QAKIV2z5eg9DVPG4RDobD\nUnq37UKjvFuwFO0E91bXtaiZ79PFMHFCHtb8MloZvlDv5dqxsFMjpMsoNXBc\nNnXNJj/oWZNO0au2+EbbbMAhd7h8d/ZjaZtYtIyuuadLobEiLViG6Rxp1Pwh\nUZC98WbJNp1HdfiyP60eEWVMNe5d/RPdj8JyTEfqKLp8Mu6Juqs1NFkQ5vI5\nFSEP5cMQrlsIBaR7mREBfDdKS6PZl9Mhw4Bw4WojFMaw/LoBFD/iAUzVSCQp\noJi/pvvTopgNtSCm2XrTNDoWYPJa1afYbkF3EahZdhsWubxxy4a51sLfEB/v\nJLsqm2V3JeTeucz68VoNuJ/b/15aoz/D6tP8QVRDD23KgRIcNfbK1L7xPAS0\ncf5+vXqCinB+y4pyDamvCUaWAh1wXPpNVXlwf4KSd7CEfQiVAC84cYyceWJB\nmZDPlqANvdObvP9wlF2iDBG9rs0oEWylTipfdYuHXewk+yC9ENZPQapu+Cop\nHXKq73kuYWjnv0WFzY2mXehbeUdvmDUZiFN/1vGIjkb+IMdnzP7zPAVg8Tib\nmnRCZO2cQ/oQlgPS0LWzWcNjx4DTmHsJ8Joi67K3xD9EOufWnOrRVH2s0Zjn\n3cUYPiIhkWCSygIyECG56/I9uBLdk73jsi90Urygng6A6tB7xHkChzkGYXaW\nq6ua\r\n=W206\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.240c5f74f.0","@material/theme":"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/line-ripple_9.0.0-canary.240c5f74f.0_1605212412951_0.05782465476413101","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/line-ripple","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e63574bc9e13caadbdd50c97d37548492ea0f511","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":34,"integrity":"sha512-Jx6SIouBDUU+DAg+EukXMLJohbKQNUYS4CxEftXreLTfiFuFQ5UQpB2YErAY/k0oOsLnYKYxltsLIL4pK5pnag==","signatures":[{"sig":"MEYCIQCyJzLCq6pYjAMLt+ILUMzmP4XZQNEUsS4vTPG/b1Pj3QIhAPkoqI0tT3EYsj9lsxVt62gBaB2CIBrxorphMdbeB7ly","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssm8CRA9TVsSAnZWagAA7vYP/1N/Rr6TEmOWuuGcPgoV\nXgx6eJuAiDIhsaoiYMLKKa2yRrZ6epTFuVmfFuANwlwV0Nd6qJmN5SqijhNp\n1Ty2AO61aMFpF1kaLhM/SvIQniNOib97sKvw1y7s+ey/uPv1qghq5j33IJMB\ngmXRszm3ivalm07UL469UIoNbHqU0RyGX41JJ81cLO6de0dc44efDn7QZ0un\n0x6vOTGMl9O34WfDJXJt//+XkU7GbV8DKM8b2qBvRU2EGS9CE1g7IYkPG7nR\nmxqJY+GNzxQsRpYhLCHM68H0UOy64XRO5ddDRFRvI52eC0DRCVCfaZSh0sdE\n1w5BIG5GxQtm/B3xgTewwXHxyb0gEvuFV7syqafg4VH1Lo4gdLODwaHQMLl9\nBpJpRBtMpqsiRZESFN5Ml0A+2ieOx8AUDKWK1NhvtCohqKaMBQVQ6/PUrxT8\nuf1nf+8XXZ81UivDjmfBaGsP6htAzLm+yAHAxaBlhfkLt9/am2YU+x98PMjx\njewKGeXKwljRWSEcZooMFE9s/bSfuy+q9pQKxgMMT5xDYzWf2KUK6mx6SwNC\nbLmAg1ul7+cqaPXgm0e6jGWUHY/+DvNg4Yi1kTyLmkrFzxuWUS26tbO0VrD9\nmuQdoTG7Zx6V68d6/H9BPKT/ncnCHpugfcGvv65uTU0ZEMldINySFyEgkiM5\nVt3w\r\n=uKEA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"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/line-ripple_9.0.0-canary.6cf6ba4f4.0_1605552571885_0.6393590577098354","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/line-ripple","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b82d1b9fdbc78e7aa89ecda3b401ac3af80e6f98","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.07f3e01b7.0.tgz","fileCount":34,"integrity":"sha512-WSJGFz4R3jnlYntr4IqTjMRruCeSsw2Qg+RJ9w2exBI85zSTF02enDCj6Nct1sWLHuZ06QonoiYeTe/9DqPs+g==","signatures":[{"sig":"MEUCIB3ezVhPgt4m7y3d1lGGoaIxHJer6lOQasCAkg/SF6zYAiEAycKy20WtO7q8pEOn2s3I5JF6myzTAKnl2XzSoXndqmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvLuCRA9TVsSAnZWagAAYQ8QAI2s2YGzNbEBWh/NFSxQ\nyyt9yTMAAv1ZqHLOYKSSDzIMJA+ka8rsdN3ZhZ9bd9Q/A2rrxB7zdGbBW+YP\nceDAOslih4pWrUdzfSJiBMF+9fK9FHLtsD7W8H6duy/u7eQTrcDPpcV1AGzf\nLuLVrSekWh/b4Ql0Q3JTpEY3dn64LLARPWYmvED570O+DWmumOQUktxDa9m7\nobw4LTaUUP2zbOO18xIXZ9a186WGQjtMkt0aDhSCM4nyrNWkx6TBJeCaKEEm\n7oVZ0obZlj0auq6JTJZ6Wm77rN/Us5uuA6JvbNr3sN8JJ8QHWtV7rY6PVhoD\n0s0p1I8VosbH0yLlEZ/G/eK9yGtv+cWRD83OHMoeqdbXypgC1MUnLsTmBLXW\n4lGn+AvTymdecfgJDCOCy1x1p1bWcewULOD8XK9CP6+PnaP+ZCyCiPCSMBRC\n5tiYyXpQ/dd5DhFjk7VAx90qQz15ZxDRvW/YQw0RZlBQuIelZDnQ+KyRXGYQ\nF8VpJy0m7G4AerbwpTz8QuT2mDhoiqRQjXhd6h7WhEjJkZSh4HR/06GdTog2\nFDyuKv4pZhUjJ67dO5elqdaBdbQLMqccyHxIzmrghuIXc02yaNn1RkuCF2OS\n0HI95t7g5vqm5dwRfRmyPCsH7GzMN2VtOSvWsGSjKYCnJEhmqLuk9y9pB3RN\nPuxk\r\n=bKXv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.07f3e01b7.0","@material/theme":"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/line-ripple_9.0.0-canary.07f3e01b7.0_1605563117656_0.4470768577053401","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/line-ripple","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"280d80d630805c6cafbf7ac754777531f8c0d83c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.23491cf85.0.tgz","fileCount":34,"integrity":"sha512-ztN0/aQ5L6H5VgaKfFLEwQ6VNf0Zl3Wt3NM/dUSpVDPLwuzSojZL7D/xhHpx2tm1bNU9CiI9a9kWBd6aXG84WQ==","signatures":[{"sig":"MEQCIC4Y4YaLbXMo5WHnfUUJ8hRcG+W6aHPZwDXjfYWsCWPZAiBCyggxuvmDgT5aAfjuyvJk50k0wgGwQ3j1sB8PpC6iTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxZzCRA9TVsSAnZWagAATKsQAKLutzxDW1n0pRPaGfDm\nXqXUss/doyYD8c9iSzyRLlMNCRcFnM6h3rKMMczadggJFNXxmvtCs246ItxU\nNVSPvpgJ83VTRlI0jmW+YqJtvDUWxvW7/JoeyehDAK/YcK8imL7jA2rwV9ik\nxKpB+ELxzeeb5PJuyDbika6ecK4r4n/SUIKzPjH3z4hdP/qqMkjl6sl5CD1+\nqP0ZLm1a68RqSW775/DCzc0mv4dT3MUVq9ccP5m2KmSRVRqqV5H4Eqpk1CxF\nEubUWGwzotUsVx4HHLha/CebAs2AHw1fVut02xYfVJOAU9catn+SSzpyTukQ\ncv/0uiM8b7+R3wvTELNCp0QYWQNg56Z/vw/zYkJN7RmqwrPZuFu76n7ijJWg\nbWh5HHZ1ZBBBpUCByqIk5nKkDJwLLjBVMBn2yzun7XKtkR/ZPFUjBUt0y+uS\nSqtRZvredNlMvpj2SQOCteaqV5BUNihje120ef/1ATUUbidDwgTQdLGZQi6b\n/Zl1dFrM6h7T6bHaefuzaYiAJMpxoYY8hgXY57OrbIdF+mimRH1/zDY+z1s/\nuqCzbYzfEvk0jCzfO1OoBtPsxSs/ktuwvgD774xtwbgtQxMmFwirVjZqTpIy\npjVCPJH1fOYeEQ5yFKQR5vSYZDsAcucjFH1hTErzMmvljD59KikPstT7Mvef\nwuJZ\r\n=EShi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.23491cf85.0","@material/theme":"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/line-ripple_9.0.0-canary.23491cf85.0_1605572210812_0.47809829476784316","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/line-ripple","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"830f5fcfc279d3cdb165b97039bb47dc06d6dbcb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.b659d4fc3.0.tgz","fileCount":34,"integrity":"sha512-3OaJFmGgShjEbis2bmiWb6oW6yWSTIpFwFBMjmhrLECRbeHxBa66ksgFoQXKYsQuNbPBsomeWNto+SQNU6cPrw==","signatures":[{"sig":"MEUCIQDElXgYeVstPU1Jvgk9R1L8Fn5YcbC/bKJDjHrDOPY6+wIgK1FT321o+Lb5YEchl0lI9tnCxPqTbBJiUarQdAbjXVQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxhICRA9TVsSAnZWagAA83wP/j6daH6IjDo2226Kbb7Y\nhSStzpj/2gdrL6enRJ3UEFU8zmAVsioypjAyCoBmhvWVA6hLNzQMMTyMXYnq\nk5o3UXyQid+hrXPsR1FjYzNfAdjU23JmXkoiHfUuKGfKUxvDaxz2vlhWEp/Z\nuptPFaE/FYARz/4nFSx+4yZan6Z3CjgvRPNjM/0xfolIa3tpLlW/ZsHy6yCi\nLrSFu+vNgxukEZVeaYPL6Vvl+nae39Rm2ogBwkCBr/q1T5uUKRRcillcfAkj\n4swzOMhJxp8OBZenFDgYgWPcEfrF67XUjUTjkrjy4G3/6vWJ0IwHqiLBE63i\nvTpA4bqhHbHGHe7TnAhERW8YBbI26/E5nwY2d9PIgnt3JzLL+bZ8nvwde3WO\nr2hXDME8bWvYiwmlULP0MWe3aHBHnw5QNerdqUlqhPHavhMx6eEMV5KeHPh4\nTl/mpw1htuCWfePqy2SOke6YeDnvwbCAbQPWe5MRUl36OKsOSnMrPYqu/n6L\n1mY8mzN7BF1Blz5/jaXgbusE8N7it5zlLfJcV9Mvv6Xnr7hn/8QHwupZsTvj\nrioUJXLd7aZm3lnlBs1LhGmc5Q1wxRL3E/QWZ5DagSrjh7luq7vT3gt5m1/q\nV10Oa+ln1nX7VHvoJupjOyaQRKMKGVlyzoim9EViOJY9uXn0e+wuUD3lC4Ul\nBxrz\r\n=USzl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b659d4fc3.0","@material/theme":"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/line-ripple_9.0.0-canary.b659d4fc3.0_1605572679842_0.610451930394456","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/line-ripple","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2fc4a842231da4e31f8ffe091fead683b1f02004","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.d8a3aed67.0.tgz","fileCount":34,"integrity":"sha512-bB3KSEn5j5o7u5NGhKHZKgnvlSGGmvo7Plqe58wAN9K/9I8ADcm/eZrlt2gLX2IXN0QbhbLIx27+tl+jIrHhRw==","signatures":[{"sig":"MEUCIF/ooJGsa/Uri52eJW7wzuflj3hFaZTH5wsZ1QxEAEWnAiEAyTalylJ3abKUkguG5axCOxu44EfajCgft0pPUutWosw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+u7CRA9TVsSAnZWagAAhlcP/jMWPAGZ9zG3F3tC8YIn\nhww9tWveR/56UJZLB86nLWeG8tXgIdzHj8nLjKMDsxZqaO7bxOCa+BW42b17\nZwURXmAOWIGPTKTOWMdQ1jj+oEEJUWOrxNxnvuX3FiXnzEBx52EfxTvUc+2B\nf/wQAoOKBzmJaYUfjS0VFCY5UkekP/a9Xlixv14CiMOtMhEjqQHxCXk7bef9\nqssY/1dhJx6yhfakTS3GH+oGdL5s8MZ4O8pm4PpZ80a3GaWU26UBqZ03WY6R\nr3irVZL919uC+MiOhFM3wkrL2jsEx7VF9qciPkUi4a7CBCJ3dBsNsYCqbt4Z\nzcWWxXIcTXjGuNdseOPezv+p9bKzx1mEm8t4KLTPArn19PwVzTWemOzdguG/\ntfzrHnmCxdiDma8T2XT16ZyueYR7VLSs7NLL9uOc2t//10t9Ye6NSe/QninX\numy+F8wpIIjCHtGcWwldywtD5AP/Z4GJJXvpBIe0xq/k70wdIcfC+SzPwDXF\n7MUog7cWzKmR+2BvPVmjWNyRYxan4bZcgv5N7sTa8gdfWroD47Nt9GyARpTG\nf/P0tsZl5qeHr22DdKnAcY4SmwTp1SoTXleI4Cx14i6adubxHYgSLfeFXh50\nsph+G/qjFRInUhS3bQ1yq6ICfYw7thCi0or7F8v9LHBvqYZbR4mm30TzokYc\n6beo\r\n=Z6qi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.d8a3aed67.0","@material/theme":"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/line-ripple_9.0.0-canary.d8a3aed67.0_1605626810618_0.7971701578802695","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/line-ripple","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d96435d0ce1490276db2201cc9ba2d8eab5994ad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.482ff9091.0.tgz","fileCount":34,"integrity":"sha512-XYbY6hxIYnAKCuPIcP0MpFNcTUZvOWR9ggB51DypkobkCr2TjZX5mCa4rMJCxLKdSYYp80LeZcF9wnwk1uALKQ==","signatures":[{"sig":"MEQCIAGrgqBSGsQsjLPrs+sHZIx1IIX19/Nb8sh11SM7iTSKAiBCTzhQt8m6a4ONlyBx+gKB6t8SLb3imfvILBIhLhlyaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA8PCRA9TVsSAnZWagAAXTwP/1+R8GQmvaMqVo2TSjDT\ngqndgi9Vc9d2U19llp/J3JZp0vGUW8KOBm1VxBMuqXi4j9ItjZnqUFgCku1J\nHW8wUT9lv3tUNb/U1s9jTkzN9d+vgQvIlR8DwdMaDuHeCxXhrb4fIO0+W1TX\nltum5TUYoIMsVIVdzd2CO+dx3CsURig2tKQawaQKHpVbiZ0yBsv/OrDEHncO\nQ7HemK2GNZzQ9pN+ii2Ets66gyFDCdyNVHJUNcMklnDB/6N9JeWOAVlxBWsa\nuonkw32EYYagwUCFrK0FokTEC4ySUnGEf06Nt4FofRThJwsozEt5tLAkb8s1\nxElAtRdxakqk7YXwdKwkVPMOp1+bjJl9gUoS3yhMoTrvsdLnKB7TKBHgk/c2\nLDlyEfFKKYLpQTY2Xrp7FFqHSPECJtDbrMgsf1yuVKW9ri2gyPCHj/BDnhLl\nOuiBs0TamIb/VNdnwDOu08CEBagyYYvalTy8POpRblWfOu9WgKacPdcxIcdz\ndeiYn6aSrho6IfCnbmgAi7QKJ+0J0ToYdkoQnrYAhxJa9aprA7cZX7OC014n\nKe2u6xj+RnOIT9T5J5ljLakVFr6Gqk9wjdHkKqWDhkfZllG30UOV2i1TfNJ2\ngUVe9tM02KaHlMqX7ZYWV5DYOI9u2fGhrSSKGdOn1iEoYZC7KpckKkfI4Zy5\nMZ2u\r\n=d4s1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.482ff9091.0","@material/theme":"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/line-ripple_9.0.0-canary.482ff9091.0_1605635854612_0.5309940034809837","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/line-ripple","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a68e763920e800f70305b8a5eba9aaefb6dd0f35","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":34,"integrity":"sha512-PeQ0slIMTeyQcdweTL81ZYZLfHbT0B156j3PHZCnohLLGyoQNxrKD968BkmpteEm7qj1+gcSPHFvJuxWFmK57A==","signatures":[{"sig":"MEUCIQDS27Jqds9CugBkUAovyxgnO7oK14NwIYXScf0soPAhDQIgdfmTdrbRFMWOX7NoXkcpv9KopzzcX4M5894/X1cXp6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWtGCRA9TVsSAnZWagAAHQYP/ixU2bXYjdbHi9l9AcEA\nX+FL51Z0p4q5agusMkirTcynHJiwWiFzafZDa5D+J1kH/vNViW/XgsutBUtE\nEu3LzuAl8cWVH9XjjUxdpBGTJlfmAlOm+frSq3MBzKCeC/CHYJZLg3we64KB\nXhDPUB2C48Wail79l284gKh9PHlZSMNVOuLTksdZxdanCP+rw/xgJj8eiHj5\naG8aP/ZRFYsK/15ho0GARv5hhJTIyJrrhkveNmG8ycrjzrS96d+cN4Q2+0Kx\n3zIEtRCBT4SPQZ7FwaaLLU3+4zyPLx96moCV0eUn980VakMP56tDh0dcWxoI\nCznXOVYAbCbCeA2ShZ7FV03JK9j5c9pl96uO9p4wiPqHBKD2k7BmRsErhR0B\n80lIyIyJZejDmdfpw2Dmo5RVcfxwOR+p+MGat/e8uUxdYW1yd5TCYRBRQqlB\nchj5nUa1JNs6nJgHljnHVV7kDPy57VMMupp3xfW63CNIzHrL0V/ueC1ePuQR\nx8llXkUMsvks7bo+6TaVrLMp0m0HiqZKCsst5iCOSdRMD9c3bngt6odenQz/\nGUl8zvsClGVOCMTC0BMMDqEipbRWW7uEqZuN7YN0xjczWJ7XL3tGYcJ+QZH/\nP5/oc10NNFqmtCZ+6hM9JV+fy5fyvy7dPSVbyxR6fFok7FxlJ4rIDhBiiMVM\n4lps\r\n=H8ZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/theme":"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/line-ripple_9.0.0-canary.99cfb6bd5.0_1605724998453_0.14234819155324274","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/line-ripple","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bd45ae05d11c49e11cacee43f609b14673f719dd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.b98d15d90.0.tgz","fileCount":34,"integrity":"sha512-7n+8FSUdAI/FqtauP3bcJsavqwO+BRi24LITM7C0BfwJn5ZbtTr54rdYq422LS/xS2JaQq1PA8bLO7hkaHR9Yw==","signatures":[{"sig":"MEUCIFFIuKaNTN7CNYhCA3Gfe2ejQM9E0fVs8rgBJQu59muFAiEAl+QZyFyYGsNCBCTMiVYvV6QzEYMTtMooy38olOrbNRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaF1CRA9TVsSAnZWagAAgVoQAJHL8IB06BqF88dstRex\nX0nMqhB7HLt63cU2hyAoTusk8eEOYrrxNpoAwp4lCMHwCUsgMe2C5WtCfsfL\n/mR4bQjEQTfJ8sszYxTilJ6js/K7Oz2Cnt/mJj6+I4We1hcPJFfzV47xDhBA\nC741cjawcn6wWNgg+BagTBhjm/CKt9/aX0831PEfSzyemRGbYQi8MPrjpYrk\nysCVz6eTaN6/Juzi3nWFMa4apT+TY/vVPRR9Xf4M8ngzRFRTgihmEZxV9S+M\nELdLdMbHPyBasMH+qa7b7IGkps6iOzdjNiKc6wRm96R+iBh7IZrzi2WHPi0e\n+abpTBWMlARVkqe14MHdtvZkSmhzkKDuV0oAylPFnEBuBzY25VkD4U4gRvMs\nsKUutzoX0v+fe+l00LMqVxPZ1eYUrjoxoWXe1rrWn12sSVidRzsSTh1oY/ud\n3jg/E9qLmQNIgz5f7siHASbmC002YDSzcCCJxqw661VS59FAwyWfqEBnOORu\n/ZMldBoQ+cSth5H8dsNq+qqKI03OdiQVIfblPKIKbxIt6HXsh+/YrQ7YJXFQ\nArhh1YCNjRqJ5Dr+KwrWnN0TSHJSnL4X5+wa9ZwB1iNMDO1ftt7R/i7P5w6W\ndSv4URkGgCThprfQZhAbaqLgAjgUzKeUBYqkynCCoMhbOevlq8xORn5tKbUx\n+aaq\r\n=wnAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b98d15d90.0","@material/theme":"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/line-ripple_9.0.0-canary.b98d15d90.0_1605738869245_0.0018775997533262423","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/line-ripple","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"390d4ea88440f163caddd18f819f512b4c7e2cbd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.30c11bfc2.0.tgz","fileCount":34,"integrity":"sha512-qcWBUTDJLGl3sJ5Hi1cgq/mp9QLGL00xfUyTvexu/13xlGi9ptRhSRu0gGs/drWMFdCC3NeU+eymZLfaWU0vJQ==","signatures":[{"sig":"MEUCIAidlRCyc8O77k7BdO1Bh+NNr+U0I7yG8x+++Neoc6jtAiEAsjpqmH3KuCeCT/TTSiL8AN52UWb7YRww7p61f91ydt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcmTCRA9TVsSAnZWagAASXQP/3I2A7oQrhVOwl7vxaBR\ngKDcSInxh0xLLxrgGNklrZ/D8l6AoWJsvqAR4mk71MhkrvUfgMFqeP3sGHa7\nU00Vj9WSOMwlQy7FUxZXAzD/LbDdJVF2w3D69ozzfF3IfYuGBoZ3t+eVm/it\nCd4V9e6ZwEzW2kWxEWZSNpHp/6y2e61ffJSy+sY6+mawNVsMNlqHVno8+KIN\nsy+7MrBXhsGMAO15LrZktF1wjgu2YIhpABvWhcTpfDGYZN9UEkQA1n/bqqHo\nlvKGXRr3KH6DEzbR8Lm7fTzZSuThzZFbFIVj9aJFOev/TTCjzvVfLlNWOF4J\n6gmTAOHxXECqxcyvOnDn2C/tqqTSFWp7/q0ZS6VfMpy5lLf9ABOaaeUTD5Lg\nr1QvXJgdhR0SkF80xEhYOouIik7Lk79gUBZV3GWKcmG1EydoVeqjYkCyGK98\nJLARUQ021FriVK86Dd5GEhyiIRcPaOZoJ6tyhhDoohO4JEdKnASQUUHOfU8X\novjDO6O71TCTE060TtSyeMZ/D90hLuoZqatgPxD9zVecCpWfYxxqmz9AZqhQ\nj631H5rGeTleLhR0bX0DYwO7gZWbrsKY/q6ErgyBdKff6aii/gyJptAmhQDq\nLgnEgqKYKUbiPHpnEQPgnXK7qENqOuXQ7md/gQgyahydHkbjAAduQ+6PVXe3\nSIl8\r\n=tpQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.30c11bfc2.0","@material/theme":"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/line-ripple_9.0.0-canary.30c11bfc2.0_1605749139015_0.6004885155416539","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/line-ripple","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"08cc01e59e8de1f710d66e10f8e702e3c4951cee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.1b731d51b.0.tgz","fileCount":34,"integrity":"sha512-+Xl4fK392JNEEwNpSnozRVfJUf2/dwsn5ap9I4fxTtHwrjcIQKLjonFv8/oQK+zab84YdVA4St8GoGdOvuorfQ==","signatures":[{"sig":"MEQCIGK6xcphuJlLkWf85rl2kIeetFbk+0Kz/6sMV3ex9Wd6AiA9ZfW272T8yx1IjjWAvOxIGE5ythsRWnextVq9uxk/zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr7LCRA9TVsSAnZWagAAKoIP/iTWa1616xybnkReWUjj\nj5aTOWg+1be2pUl7JdWp3QqFzJT/YD2PSKCapda/jTl2UFEtRmRpzpVWyW49\ni5gPCyfjlT/l0zEOJvAjzfmHUG8HgyFoRNG2gYRpAEqtvn4rl4sajnb/+yQG\nPK0Ib901PplxpF0LZeOqqB534C6gIfqd5u6y4V+dxDWd5cAp+6epVMuJxgKg\nPGazHsNNcp5hgfSbobGIr+AdXF8+gJDq5dN36Qc2jF3/tXQPCn09yl5Zw1qs\nuBaUjA0t2KT5yQOU8Ta08nw+BAeWgorhJRG0nOCwZCFuBBEW7uDn+rTaKF/M\nQT2jYKhi0qcKNKp+9MER2ilPAvqJYIwooMYqV5hk50DdzjpAd+1K+QCUgYJD\n1RRKkgv03Qpp16mAynxaSab53ZYNa24g/es5K46LPjAuDTfg7gSG7VAfIlrT\n7X7H3UTlEwAhSQOxDbLkVX6j7fcZv2VN6IO2h6VJVs9ZJv0KTlvzGr1KESVv\ng48TeYHOh3J2XMpWBfbttXJg/9ao6Tif97ltrHsji6vceRxmOkPaBmLixW0d\nlT7fOMznwsC7icvgbpp4GNydrhVovThoPthbttt/vron2ekD3sJdZ40tTQgO\nQ+BTmNoPJj2mbhcQOtCtqTjYWJb8LYYQ1YTE/BnRCBdxhFgxKxGgfsa1HXm8\nsdRy\r\n=n/aZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1b731d51b.0","@material/theme":"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/line-ripple_9.0.0-canary.1b731d51b.0_1605811914809_0.14987953388638564","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/line-ripple","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"434ff1f7359a702ee0a01e2c01cb2ebe994fb792","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.4ae94ff78.0.tgz","fileCount":34,"integrity":"sha512-tv4aJNx8+HkQNlXf594JzXlc9rELCCb4Jo8Txfvg7kwnNeuY91UXA+qJ0cj2jxMqEYgfq+Ajyklo528A6X+21g==","signatures":[{"sig":"MEYCIQDobjF8kLknxZEsm9BEj5bh5g22vk2hefYvwOItrE8JcQIhAK/jJ84NVQWrhpJ7SCfer/q/OBpwEvMz0H8xvPJYbttJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr9yCRA9TVsSAnZWagAA2tkP/jXWawvLm2f84tW9Cfb9\n/SzH06MGfPQuXWzHrjyZRylN14BHSGkowdoM33o8ZycGfJLG2dcK2Go5CQKv\n+8rXp94EOIweN6yGhfDDJXG1QRS9uimbcwEl8I2f8G8CripPS65wT9EXdG9e\nL1HQn0+L5tDDD5fJhq1HbbPwV0bzf0D8VZordC83DGVc6Z8feyRK17gcq1OB\nKCRg0R5YnMhMAnD4Iu8APlrJTZ5+QE9Flm/rNR2uSqm0GyaDSNNthGp+XHzN\nLseawWs8NkxLAMUe82xocfHEvoREdibSJu3CKtb92UA9c78Vpzn5nF7aaa4L\nyVnB4IYHfveHCAeUy8Vg+h8RKB0MNh1Q/Kl6J2/ktWXC1W3q8hzvv8GrCBTI\nzXMnrw2f1v2YEhjbGbqI0H34W4HsUDaitbzXG9WHMxK/UtB3gmIPFKuyMyRl\ns46LPdbsTaQ2hJ4cd6GmxFIfJUSxCjhzOEEORzzOlpG7wnt6rAn4Z6NerHfp\nycvSlsKvwQ1ObcI60uFuTX/YZukc4tKMaSQ1j5rpB2e+znA9ozUmBev2iAE2\nL3UFDtqQ9avd13SUneypI2mg3A2rZDTSfttzyU1VtjrAmJqjwBmJz2/2GQCp\nni/kyrW/O4kecLKwWUHyCgQgKC8bBxnI/za+ilKXtfRltJv3BsQZP2R3DQld\nsasG\r\n=gJfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4ae94ff78.0","@material/theme":"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/line-ripple_9.0.0-canary.4ae94ff78.0_1605812082243_0.8198939392987166","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/line-ripple","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"257f086056d0b4e752e88e49f8d2d5ce29c398fe","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.7ad038e1d.0.tgz","fileCount":34,"integrity":"sha512-pF16f/vVf4HweCccMqsBQgc/VgOFINnHgffciNCSR9cDkJjRFE6d0yCx54pDl/NaCeHb34+klv+AIO/8KdYGKQ==","signatures":[{"sig":"MEYCIQDVdFJwu8o1lW+x8G6kvGduLB545L4KIHzNYyN/9M6M3wIhAPAu7JxKJFr+++BAFFchOyrQ8+LCC4UEvjIbpdT2LamA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsTlCRA9TVsSAnZWagAAj5IP/2jZNQcAnhQUH6do4+7L\nsLhjbNu9PJ+E/XvoATuFzvEe8DG6iii7mkPtcdbUyFuAyuFj8wWK/wE7pgzN\nBofW4n5xt2V7i1XWKvq8i2sjUyIjfojNt9D/vvRBQQZZFw9l22S33ug5OMGO\ndFV9kiNMq0Oi0Km2tkXus2vecGPCW1zFWOTW8pQn4W30fIY9ApNpj9/KrYbs\nadqokYpkF1Fq4LlI9wZ/DE/Mqc7gpa0j5QBx0rwmA1gcBa6/swCZ+c3nNTtw\neR8HLgFI8mhYX9mxGAGVemA8TyYNO+DKkF0gruU82NVn37r6SbGM0rGlMfYm\nRYjuQEqTYF8TZTupZEJiw8OzdbznlkE9hXREQkfW1YRY7HeL10usmIWI8hMx\nmUdCPsgkgp6teT1yMVWGtwVlIhUVv5jEfFeVuSOoOgNAmGdvW7USw6zZ5dxo\nYn+m5y08i3hi0nK6Ru+gK0xfDVgreZr9pb3v3PyvRvpQJE0An4z/LjBrjvSB\nqFMqtNsuoWJ69/CNnl98UYDJLJXGxvAuZ0cngwwJAlwXlbmJyyLLcVtHUf4W\ndN2DoX41INYxIoGlmDUCTSJaojZOoXGRAseHMCSmgaseVZvF9emzqqAycG8a\nc94mWiRLgAjdSDgMuK+Q3WV2DL0vn3PyUTsV5BkY2i8E5nkEVpXy859sFHHN\njliS\r\n=suSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7ad038e1d.0","@material/theme":"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/line-ripple_9.0.0-canary.7ad038e1d.0_1605813476795_0.1629923849863788","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/line-ripple","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"114abb78bc3ae0c2ca6fc56a1ac9d8a780fa133a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.a41527604.0.tgz","fileCount":34,"integrity":"sha512-ljDeyMV6hrbNqEK7+vISHARd/54hKAutvU8gm2PQfaKfok5op+2ubSapN9Wu+8eouPHFm6HMc47uyVxrffp5zg==","signatures":[{"sig":"MEUCIQDXg956dNZ7nSKnLXeQ59gJHpOjOhhH5+ddL2aXoEHa/QIgFWz/h2NPxwkeFCaCqxmPolDvmCfiyaDPbgPfflTjOTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts6rCRA9TVsSAnZWagAAwM4P/1rvr7UWjyipURIVhPSC\nd743YMHISRbCSQT5E4CIUEnoSget60zO4Elzj2YUPi4/0Ou9aSaC5p4osFvN\nWm2FAutGHxIOA898xBzxH9YltSXELBm/KSaRiLVyoi8sU5sLWsa1akFIdSlA\nm8Ww97rKc7qGG07GkH3mkq1jQYe6ASc0dt9Qm5nrl4B+otHjm7egQUacIVZs\ncyJWypOY9yYacZT5ZcirwzooJ97KoQIRl+7n9oblcmNkHQrK/dcX5cTggtg1\nquhU96QF6x/N2Kbe1X4hdYUVIWSElb4l8Tu448TaMew+xkXGbiVnch0kNOOE\n+phpAjhrcfC79vth7NvPj5hleBQyxnQziI/Tez6/JycG5ttJrL2B34421hMg\n1YdX6ml+hbEJxI/ty6mMJiN/xDUUpzVHRdiGdHqhtG3g15jxnjNBlN6Di/lJ\nXv9b6BYcLTX4PDiJf7VcFR2QETZnvAULY9VahsjAdKZBWqtSU9vEz6ZezoHN\n/kmynjZx6EqcYSJnmHxfvGV9sNFmIJW/tcPz7WX19QYYVIBqcFpPFx6HjeYk\nTHbbiVrl7p5tdWdgYirFnG2KpddqJGt5+/V9301I+nAoJjZivX929+9DA4dU\n28cIP/BtsSVVRhg3xns/J5woRz2UAXIvaA9PAs9fBYjib+Yk8JRVVTmYjn0J\nDbLS\r\n=CYgM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.a41527604.0","@material/theme":"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/line-ripple_9.0.0-canary.a41527604.0_1605815978421_0.5368337654364987","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/line-ripple","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d80e82ef3858c5c59c632da482f16cc21ed7d28a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.7b0e2b377.0.tgz","fileCount":34,"integrity":"sha512-qNw6bHQnODDDRfQWPrG93ib9yHtGGMntIZ3l3RS/YNBiyAIUBHMseTAIX72isF8zXPovc5rYngk176TkTelixQ==","signatures":[{"sig":"MEYCIQC9aUgaM1YcNBuyK2eFaSjREV8y0j97sm1Na+0bs0K0RwIhAITGJ1M4GiEii2aPS9bc6XmldlTwHRSaX8YK9lNc4XrW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuElOCRA9TVsSAnZWagAAVfMP/3QEEO6O0DqqcJ0kLTCv\n5QXztO5huOT8+htWminWGvuRsxM68/xAaW2z9kxtPPL+/AwThpMZv+wOC5nx\nzLlPFnS7Or9fzdDBPJ3DaoIzfm4KPA50ElH7A2+xtIP9aC3ljZSJ3ylePCDJ\nbmDnQzcl68xkTgQncst3IrVWcSdifGdFNbQH34fMsmtwljC6suPl3FfV1UMF\nJxDcj4bPiL3pkIYetGC03TbolcIwFjiWaIEvTg09QLbdOXlQzY8IbHTtHkXf\neoaXlQ7FhmHp6XeEogHL+NP2sEHZrfQWiiiUNvtZDtQPfH0p8jyklcf9fwxh\nfjzkExmNT+nHEGZsA5y2g2br4XmKcbAnniTSjqF5XBeHdp+X+hEINHe+FxRR\nUYvhhrkOxj2xi/Ivm/5QOMrPtNGBbbBTiL/dJ38TvfUyfSGiZrhHsFWlmMJe\nmZdtr/0pWLz82T/W503qDxAf8JkJ0fXKWqefd84mkFWPIGqazAd6iVqoP4co\ncjioy3STb7aSg4FXv0XluEJZpLXOGdeKwVKsfxWvIAhv0YMn42EQj8miEc5Y\nu3/seawq1hAN53VpN65NmsUJcdtqe9T6NvIXe5l3zo4YXqBVwf2h/W1ztLfA\nbC4mP4PgeQ6GY3O6j3ds1rUTk7yCKhuWYWYX8p9TOoyRF6Kt421lxly6cN3+\nnYGj\r\n=BX1a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7b0e2b377.0","@material/theme":"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/line-ripple_9.0.0-canary.7b0e2b377.0_1605912909562_0.6908338510288123","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/line-ripple","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"293f7d4df79e039e30d6a71c34e378af0e894c5e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.c927a5d05.0.tgz","fileCount":34,"integrity":"sha512-yQeuh1LwyHHOMy1QhxvjrprGhoO+qrImrkas8h9t9n5hU43v61Es8rYLbuCwjSQcEaUAXZaENijwYBqRzfTmxA==","signatures":[{"sig":"MEQCIAvq3USsYb34Ax+Nu0FO9NJPqI/1PUr8T/znURA2dUpWAiAGD+nHiLXbGKC4/Q9PJjZR0TgxEIDuACRHASBsYX6ggg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBGyCRA9TVsSAnZWagAAUaYQAJIwg0MWF4p49pw3DLfb\nfGigH/ii4nRLPZvYF2IkcE2/oQwdh+OiaeIphoPDUW6tEWS75FPx1NjVCAqN\ni/C9ikKJoNSa3bqLMJE5B6U7KDwS0B3hmJ19s8hPjrqk0BUvyOu630zNrmfL\nRC/SrWq7gIz+hEGdy6a8OmdAwdhs6KiYk1eFpWk6QPw+dWcDyOTusXsmjnFR\nyaozEJe48NRGQq+Ylog0+DZ0agslEXGykOM9E2IbjBD9HuioPW5FzxO+BZwq\nfziCqsO5RPViLYl7ldTNgaOnVXYelwm3dxF25EySlTYenreQcxR0KrXUjVlA\n9KkQTu7gZmcvIMOChOc0OwAcq5p8w1p1A/O9lRlQ0pF3nfG7fc6TiL2t2xs1\niUXaDM9V6evp0aej0PI01eQPgl5WmN+KB+XuvN/tEuZ6i6PocUrEvi1LuQ5O\n0mHJOU6tkOnZXpGVb3p8wYuaq6v11HhtvWR/s781Y42oF+NtnU8lv+uqj7fu\nh38hS32gXz2bnF8UzmJ26a/AgUJeewy3vZoIXE5D85J55VtMkGL9L1413hBM\n8MyZ4kq+AdEL9Uz8fbQBIdIqMQb6DinE25pmj4Zg6OGUQG7A4jSatXDlNRl7\nelxLDLGNUr4gf+bx1D8RwvDFv3JxJyVPWOetuQc2qfz5ZXq7NG+t5t4mYJqq\ng05F\r\n=s7n8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c927a5d05.0","@material/theme":"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/line-ripple_9.0.0-canary.c927a5d05.0_1606160818455_0.8400248716875456","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/line-ripple","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f2f4e29f44041f02e9e1b9bee0a7f542e0f93e84","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.b349b5185.0.tgz","fileCount":34,"integrity":"sha512-GCjJ6SRcV1lFGtqJNqg7q6dvfcQCJ14sCPyQkZNfB5IbZQ9zy5WM1vb87dWf5FlOWoJEcH7Z/gnZQsoerjIjNA==","signatures":[{"sig":"MEYCIQCNZbDGvq8DwKjpEsT4HeiykIGPIZn3dlFLPhNmHq6etgIhANxNYYXlxQ1zQ1hlZbiOSKkJ0GefOh/lkTvHDzAQ2W1B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT4HCRA9TVsSAnZWagAADcQQAKUbq/NObUoc6ITHZ8Oj\neb57tYzwEV95R+Dkm1j/Wnxf3bkULE7YK95vQBik2gQMnkVq4UpXIeIClXJ0\ncPUF59mF2oGOnJ03HAoRN/F8xUdY5v5rJ0o1qu+HqYl6138QudZNRyW64IqO\nOh0awAgSxvRhtnD9emWOid7Z7IClADQfGx95ANPau2TQXSTroNOCZQMFwDTu\nEWbxXF5u6YRmdX5MBfbp1LamHe+qMR3c99q/KJV5ke8iFm7xZiHa3NaSxWTI\nxRtbIAgcBpDVlYvxCAbv835ad7/s5Db8b3CExel2wQUaJomsGv4KY3Mu93Bt\n5sP70sYhkBUEuo7Y28hjvcQjIYj+Xe6bfN0zP+wjfmpmNnna2gv9m7RHV16u\nREVHwwDhBMk0R6oZ3hjj7Ub7xgmJnc55cjMkk+VXoI11DPT3F3vUwKB1ID3a\nX8Xg74Qe57SQMcwSXQkFvMwloiyqt4A1V3V9o2VpUD3iFyJM5rWPSoszDi2S\noL1mcJXo56Pop6N9CWnx4rvg+Bhs2X2EX6Xd2ZNKdlUEidZLzdAzhIWdQIcc\nmtP/Qb/Amj2vrCNe25oB727qjnh5WEFiJimQqxyGQYEg+u9Nwttc03PRHrb+\nNMcR/bX+5avpFLlYK3WiHgFoikScQgN50OIQnAU6ZNS+hZJ6wMgtgyOr09ob\nlhLp\r\n=tyyX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b349b5185.0","@material/theme":"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/line-ripple_9.0.0-canary.b349b5185.0_1606237703228_0.43194144912234744","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/line-ripple","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"083d8505e03676e480fafc9d0081ec1b66a3e9a7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.9083b7d61.0.tgz","fileCount":34,"integrity":"sha512-V90vgLDx7ELIFIYftVQhhq3Nma4M4CibZHDWQzQyPxIN4+YCUhhY6tBj4RwjmDXywz2dyQv74wrLUuoT88AcKQ==","signatures":[{"sig":"MEUCICAPjsi39QA82Ku9bdwOHAwDLwMYPwXaryb/8qw6MvAZAiEA3k6kp40uvm7x1QRe9d7wUHM/QXrt+rJwaTPt2kLE2vI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXffCRA9TVsSAnZWagAA3UQP/AgZkKnevPZt9IggyJ3d\nLfkYZ9IbcpC7KtlFNs9YYOT/+/lLSnifFdRgjG+Hm8qH9QcQmsWOXNkycCXS\n7dUMh3ygxbgVEWqBMSjLGXGjSkzYR5enHd6HWsgiFVMDUrM5WvZ74DH+YIEy\n1ktIdeow+Xw3L+B+xEDVF1fOUzwzslM2hQy2PtYTftfUeclVspw23qjy+76l\nN3wYC15dzMJVbJBFIsSv5l8DfhgTmHuJKj3oPX7aCnHqMnc3szUu1SusUqJ7\n4VxmPfugfn/NfF4+RP6n2yGDjwiGy+WPZcsxufaFAlDX5m6OWXZx/1JbNyTT\nGGM3OyIsQfHec3alDY+W6cFFX5LRC+yMrvgH6qibywVOHtnRM1tItsIHqwvs\nKES6RACsZu4VcKoJGxP9QqwaZf6AjfYbulVIMMq7h8jkVi0UY/KmGj8m3HXH\nGLfxqF5tlvMJi57xS2v2Jn3bF3adhOaeCTk5qeuKSC7BDU2nH8E4Wa+bqXgB\nwmpYcSzCpxHrnPxb0fXheMpEqcpFzS6KZ81xJAMyN75BrWrvaRMxL15+t51q\nuC96179/2bSaoXAwvKoLKx2QiSnPtBhqms7Z0cbQXEmbi/q4qk+n0ql9oYcr\nCyvg560gEuNCoDVOjlNQT/TJvClykUHS18VxbeJIYT6it1fkBVCfQM6zfIuS\noq4x\r\n=dKkc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9083b7d61.0","@material/theme":"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/line-ripple_9.0.0-canary.9083b7d61.0_1606252511460_0.46058803310206553","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/line-ripple","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4977d280778838f05d77e3fde9aa92140c051009","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.eff7b46ac.0.tgz","fileCount":34,"integrity":"sha512-k9L/S2sGxWjURT05AfWQk+cnwJtvK4sQVVffTb0rj+3e0Wi0Mtl+Ov58RtHWGwwveCvwg0HVi0mbt6tse9dudA==","signatures":[{"sig":"MEYCIQCMEJgfewJ7GXRuWEE83yNn49S1m26ogNR0HTcXesawaAIhAOiybPvgm9TdGfAkd5c/AEC2Dr4s/mYSXOc1BnL0BBMm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZebCRA9TVsSAnZWagAALRUP/AlJV078E1+BAwEzWeQH\nDgBr2crPJH6jstCheiX8sFuZHxm52aqGODOYkZfPs6uDPWJnsGS51AVth2ZV\n+H2SkOYMI5SOR+SZgvCoCC9uFpQu+zY/5ft70O/0g3IfdrA8yBjKNJIj+QpJ\nviJRxe4KEzwypECYd6Poi+8VpsHXm/RMNjcM/rN673v536jpmwPtsc5fP1Gu\nMO8vf4n0dYqPXdxjKNpEnH7NLd+qAn8X0+2RiiSmVM+m20UyJpiUrSya/SWl\nPYzGAEpJGb41bBSmDh0stgP62YVZkLAIhkfc+jp1DGswyD7pgcqj/1pcgkc3\nGrsLRuOMF8lACJjhGfKIgV1c0UTzERe1nCDRj8HL4qSRtL9L35ZwpmxAVMge\nOtHAamHr5AhBiGoZYkmNtrgYxjHSc/YcwziI5NbFRqizzS0q3YEfEY9craVd\nDl7bo+f1V7tqOTEPvQsPpMGwwyXWGGyhBUyLLIxdIM2Q6MJQJ1qHNMj7w+NW\nOQbvvQB35mKoEJ+InKKS/MRBw3nC/qM26yAb1m0nx36ugYw/dYg6Wp+IPC3V\nXocmJafJCdA0nNsGO+6+Zq6s7m8fXLdchfvKoJryVTRMVQPRQSC1cw5EPq7p\nozTWBFFYFSxaTU893pLej7KZll7ocdbmprahMD9WcIxH3Bf5TMvJtyVdo9b2\nl7Nd\r\n=yBYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eff7b46ac.0","@material/theme":"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/line-ripple_9.0.0-canary.eff7b46ac.0_1606260634515_0.3068661627765028","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/line-ripple","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"67ad01610a78e5cc442c3d5dd68a8098e5bf6b00","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.ae27b44b0.0.tgz","fileCount":34,"integrity":"sha512-h7RUGvyeGs3IA0eNsCKZmQ9wVo3/TxZP4BGnKoueiCEq3X2Y9Ua6PX5rtpArrIgTG1KZs0dlMVL0CZqxslMzFg==","signatures":[{"sig":"MEUCIHsMi2FR/fWNYW8WAp9irIBf1byEt6MDXRHwD1siTmlTAiEAxs9sNvXp+9IpD+NMKXN/g3v3yRLHQJRzOAPJ+awCOcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnkCCRA9TVsSAnZWagAAETAP/3rPrwAv2jfzrzWWQ8A+\nWPHRkZ34SVreFmWYqj7LWBlZ5eKQeu7tssOdkBPeIKBK4deKD9Gah79n6MMm\n94LN2wVrlC6897a0N4AQ67SyOGNmpuxDZyzS37VBK0rEFI5ZZ+p49xl7dGTK\n0P0bRHP3zFTCnQW48MxdL4h0zQRV0GhO65MY+MfDxdnM3JQX7zUb23Rw95Bq\njkJt0djFQHYRchCzjQFzBQl1YqqYm6RUH2L+89oCx3B4h2rmM205nX5oGrNl\nNsX/frii9ydXhS4MK3c7DvLGztEcSVm8BNc6L/vGJxyiGfpIgn3xwzsY5Jb1\nXh14FcDPJTfO1iwTRsMPlGMpZeircusJQEs4CAT+PrWN94PrgLCrbeOaGbQI\nHz1wMXQneb3X6bG+dtixTuulY/7BnyBFaUTYc1JyqcR8txMkpzv/1gC+Wk+E\nzkZB6EhKpfsv3aUmVeZfgx8CtVsEMcbw9Bv6NkEtiqKUfx/+ncozY0EmUCA/\nU1aHl/HeHEQ4otYkiFDgxF+4NTuQVQG7zGXXXxU71JJ7WwIUR7ykl3C10+AY\nFCTCU9CxObgTfuf+xZZU1Z6s7SF6qMMl7T/CgiyzOth9mw5lJ9MKpjl4kl9K\nOzHlNcDxVo5PMVWr9mDBGJfN+Jrx1La3nmcio+0Q+eDsFPA/tJNud9afKY1t\nYuhA\r\n=/4lx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ae27b44b0.0","@material/theme":"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/line-ripple_9.0.0-canary.ae27b44b0.0_1606318337769_0.5389515405131537","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/line-ripple","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e6d8aab35768e76bc219c26b3f3248b24d49b982","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.2fbba2554.0.tgz","fileCount":34,"integrity":"sha512-h36dNjhqtCJp2rgfh6X72VsQGD2/vjUuPZbtSYygtngMcRwkpc6AhvkSDMeFqAq3BcDkyc7RBplCyOkfQvZFdQ==","signatures":[{"sig":"MEUCIEu3uC48mm0RroflRrTsxkTza3QdibQWROur7jSMU9HcAiEAv0ATCEjfJMJB4hnHuOfXONj7mnIan3KhUrfC7/XF5PU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS5tCRA9TVsSAnZWagAARmUP/16Ll66BVQC7OF89kqNl\nOQtS9yQS6NCv5MOqOYQbhhy0WVT7ELazM4yswCmWR115S6zC0C7kvke71gIT\nP+dYuOoCuGtFejifM5oFElq00Qh2utTJ9JhHhEo4u3ptcTW1Mgh/Na/6feYJ\nU1AZFuYpiC2Yxbc5DDpO4OCTsYsTCa/rbq263PrGwghsnNUtEW0fdQd0tiZ9\ncNv8OeHNAGOT/9ilAjqX1r87BRPngfqNKBC4geCT5KMqMxEEYgaZYG2aCa6U\nd99ohdnAf8CTGnlDyhVUfHic0+gOpOMdzspGMJdKChY+3X/xkNuIPHc0WsQ1\ngFaKfCvIjwFBRoikEtQ1PkuqauBb7FDUS1wTddAwRDLM8tCZXJLRmRSQ1n3W\nKK1k5hKbepuVp7o+tt04JIFNiaPzyrjmYhlRaE2Z36pVBa2r2/ag/4pqU9F5\nYdMJ8vxsvsYhHGcceePx+7s95CKX2cNvma2ppz3TrOMjH3kzBa2CRpXdCqrz\nLhImxgq6/ev1XSkgvXRcBTzRRpc/G5tYI7N/AKguSykRil+QmWeAqAnZ8UKk\nwa1RFGd9vj9iwebDr1IfpAIeXini3VzmgW8qhX+AyRPZ40FYsUTYUOF/izYP\neFNzJV38EtmYQD2CVMYQ/kwHmDYdhZktM6/yoN5u7nYW98tygH950UVX8gEm\n+YHf\r\n=SNqe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.2fbba2554.0","@material/theme":"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/line-ripple_9.0.0-canary.2fbba2554.0_1606757997327_0.2962434267604299","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/line-ripple","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d2bc3c3c5bf9b43a6ea3bff155c5c41a57d51a7f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.6d8574fe1.0.tgz","fileCount":34,"integrity":"sha512-gMiqbiqmaJmt4+uns7g8ZAuCSqTVESChedHw43xiibn/OwoyjZuMiQXMNH2jcDvnKn7AGGnmttqYazqp4jVdsQ==","signatures":[{"sig":"MEQCIFADursGXwhCDE5TJqRu4T3CcEQaoEpx2DUGvuiKj5QIAiAifvBbBqOzNoE74z5i3g5GkmQlcMXxtnYkT2z1UUA/2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTEECRA9TVsSAnZWagAAbl0P/3soSVMjXthe1MoFU16T\nbSJmQs2m/a1YE2yKLYvQgjEvohcDy1tjyxpcmSeIrezmF5Q+mcjEgmmU4rX7\ng8d11GnX0hSFLD3FuyWEa5l/2mkbTeqvJPAC5HdDNyrnJ1nTXAoJzHoA+yPq\noYxOCTbbhbfwiPmY3wz7Q7Zu88ZnVaA23E0B7hyVO87TNOul6RtzhZslw1TP\nBsl6VXxh8VVN5r7RUexUpb2gxsen8ao7qKZ4xUdIFlCF79e/iK8ls6c6GnnO\n9UTI6YvJSlBjEtQc3Fq0Gcl7OVY1X9gE0HwUDM9vKJrLLbq0DmN6WNFnc8tb\n2tkzSc7bgM6Hl8/wFwzPiV3xzMMFzHMFD2N6egUlqU/y4OJ7iBVFH6vs65GQ\no/lxA9+bSRjf5domi816Xj1k48c/wCPNu6ybYpmot6fHQqbpk4sinGKBLvBT\nSPZgIRFhl/MMqHLt2AUUDvZWCyl75T03UbCIvckchhLvOYCD37I6CmdHMBhu\n47nH/GEyqET98yR+JPlmiXgoTjq/8vwzNYRDqscxGZaKCcS7Iup8/wTtNJCU\n1LeWWGxiQG/1ZSYXDWZNBo+jZdm/ISPUTu4l7e28+QAqPiNQAfFaL0/U+ljw\nTgZogZtrMQJe+ryn1XJrKjP10zag0ICvx/Zus93zzLgKHBklreDfq8+WQsMJ\n10lE\r\n=kNSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6d8574fe1.0","@material/theme":"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/line-ripple_9.0.0-canary.6d8574fe1.0_1606758660504_0.9670216665661353","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/line-ripple","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1d4691722c76fb9567d37b58e28acdae69f34e7c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.fd22355f7.0.tgz","fileCount":34,"integrity":"sha512-clqZhO9LCekSNzqyIo2NVQ+H9X+xFbag+0c6Lj+VAZqlkwGlPa1trwvYXCyDPin2aObyiSjurIYa+PfVmM2p0Q==","signatures":[{"sig":"MEQCIF7mXkpp5Jz/IygqsmiXmcNq51DA3Y8/kXDIpmRuiljxAiBBq0sxM6CZxqaq5yXRW52fpPLY/HkNdDtPFI+kNuJs6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXk5CRA9TVsSAnZWagAA1w0P/2K1siipj+C2rG8v0i0I\nDq9onxnnwbUQ9PFcUgVowRqeulwK+7cjgDbIvwISlkUPkyO3FS3ka3aPLzH4\n7pdtLQC0tMJ3gas7nsxl+AnOn6djMKH/lwaUbvRsGk+6XL3r8KpDlNtAuk1N\nQX462MIPhBTOJSS8Wt6MESbGlh/7kM0Gw964Y4dNSu3RXaQxSB7pH+cFEbPo\n1P55zmCIwb2uwi/7UsDx0AlFhL7euI7QELJr4t0UipCnNbHCEd8QTmIG/2nL\n1UyBno7ViUssIWNYkZ88RBjQS1Gac7DWSn7Ep1ivQNBYKYPpM19mGJ+OQayh\nicpL/oAh82DEJiLzGt3DrStDdaDbWIj3XLyU3oCKeokrc4MF3+lah2HPt1zK\nQ8ux3F9ebUkbeaPt4++ttq/wk5udxxaGVySL0JYguPjXyRdBTJ4NmsxAuRN6\nJz2v6I7sfojGMeLj6SKd2sG8Ocrg9BTL+V1lHXReNiEPR2KiqbrNSybBxST9\nFEboAZG9ED5sLCzfRF+nAOFDpfqOV7rJlOmt+YZmjcJlLkJxSJ3ETQjtnbJI\nCX/FGPa6sd7YL+mMW4fNW5BRLpcFTmbKf6R8nBMxnrRenfamKYsdoicsBKWD\nzBkVby0h2hDS9bukTqoazsIcyxI1eB62qKO/7N4YZ+m3dK1T2bkIHxEwJEio\nUhfe\r\n=E6oY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fd22355f7.0","@material/theme":"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/line-ripple_9.0.0-canary.fd22355f7.0_1606777145110_0.3999326462739905","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/line-ripple","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3d1c42afc9fd7f4309af93e83581fdfd72dd5aad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.c4ab98722.0.tgz","fileCount":34,"integrity":"sha512-8buRh4QL8bkQH7nvkhlW1ObMEzRw9fzYxxuHyt+UZHWeF7/enXV1C+UFCQIBVD6nFFEVsiAfPDy/GDGjWTs8vA==","signatures":[{"sig":"MEUCIAj861lvKY9J6wjOdWLn/9HoWFdWGdZAPdwb0pcfEWvUAiEA5gwiixKbPR/PKmnaVDc9zbChNypJd5MImMO3Otty4KU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuYlCRA9TVsSAnZWagAAuyAQAIrNsCUS2E+aw5SSSD84\nLf2AmGM40I4mjoCnIORNdTLBVLeWZwng7UXp9Xl7ddVax7bI8boTP1dQmqLu\npH7N2TNwmog7EX85SDtVkFkL8vjqBj7JTiKi9CRpKkUF3o9qDZ/pZYFA2eQ8\n3iZAHjSPLTYnJhN/5Ju8VKRDEMNCgpHOC3aX59Latrbr3f259HxKjyMBDgRf\nC+CMFOkezFjADDLUzzg2YNToqvnLyOHGLUN1mcuSjjjVkxUOy7BnHfIxTp2n\nxcwWGBT17RaAx+6jXUtAJxky3JMvHnCJyjFMMGHYKeo1wgrBJGWIj+cuLTWA\nHdQPmiOj6H+DqayLeWqO6hQBf4e4j11m9EcVuE1HpWtTjmQ1mQB/FihYNKVi\nvt2YQfTsFFgVuaBj6HRd03GJZ5z3q1DnNWv4ZWw1HX7Wyc4mpwc0t/ICe9kl\nJ9Fx+BVcQswSxm8QrmdDvsLhYo6ZO5/BrXslvSyo1+hiqt5OHf1bRwm+0zVh\njA0Dzj6iGHOYE2QuTLVPGB8nzMPzqyHdaKyd70+6h0Mpml3zBI54tRAXTwVk\nBbEH/zJ9lc4sMK78ndudawJU8jp+5VdMLbnt0q9JjJOXN5qEUgOWCTkjP/Qd\nP3n6W/oUCHAXXajEOTE/NIDtRBsrO0O5TZNH1nmrg2KgYw5nYtPZcmhONw4G\nINNn\r\n=fY8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c4ab98722.0","@material/theme":"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/line-ripple_9.0.0-canary.c4ab98722.0_1606870564872_0.6684541213113142","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/line-ripple","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"37f63583948df686b015f09fdb47bea82ed3b6ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.977585650.0.tgz","fileCount":34,"integrity":"sha512-wPAJqlx86qS8jpqWdfnViPCKRTuI0kThP9WEMqe50CappxZHGGut+RBA84nYUjZW9IfYlAI1ilugR/aHVWoOHg==","signatures":[{"sig":"MEUCIBi6oDF792DYWzWJvlswfMzyjW5ECHnM437dgyj55u2UAiEAvv1MpG+Dboxg5fWdpHCXxT4LcSIfYZSHWKalh4ZLgKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6ecCRA9TVsSAnZWagAA9BYP/jtpL7y5K5oE0YOrj97m\npTAgaCPtRFLNxgJdoLxmhjZ1yZuavLPmGe66AMww+TYLfhYGv9Y4IoycFCj0\nMUfRgOD+cy7rrovhOPTQgUTjvaOfj+aUd0XazZWhzkHn8C9tgQbCbKkdFzQt\ncSVkat/CqVMxbNjiT1zV9+WUVWNbm9vqHaeO28cubfdPzu+EYr3IsI87YcxC\nOPiWWP7IwG/MSrNBk1PKXb4S4wmh0kt4k1azyxNtM2dJT3QpMU5QNA8sfB2M\n3o1OkY9eeqhvo8L9KsiTgBr927hzFwekbR8ToJZNwDezafPWOKr2XQIGoBdq\nF7vFYx2lzcWuQWejM8xT8vVPJKNnr/5cacLmALTzHe8JoYq3F5CF6P4kbvPQ\nlsjsx4itRBfDOQwjWzTvO+kfiNL/MnUvKv8FPGN0BSCCu2HXd73bR8ktbP1h\n4VPPceWhf757YrV3bYE4OltENNPp00u1ytlKWns9+Z+jxe/u3EhDDTvqBiN6\nhpJ09rmYMX5VMpBOu3pdaLJFyyyUeZ2mpSwfGfznKkSnfCBVWY3Yh6u7JZBU\niPJwhyp5tizycknPFZoaNe80KKkZyANymw89T5jYOAoYWGV0kOeIGlERRg3l\nZEK7rEynHLYwH88mJFeLSDmCUTYFTxniefQj91RIsykae+PTrFdkJdoFT+ec\nt0Km\r\n=J5/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.977585650.0","@material/theme":"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/line-ripple_9.0.0-canary.977585650.0_1606920091726_0.18695826112750558","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/line-ripple","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"72c5b1074b7b0403bf925a8b6643ee46b7042fb0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":34,"integrity":"sha512-HhUsqA9buqC9Uk8+8DFBgJvWsu4+8NfZ71lfP3BbkBDQlh3gShJoceL51wcpjzg6CDRxny1GOxFB2b0rihq0Ww==","signatures":[{"sig":"MEUCIQDd5/NxAqgb9FBc4wHI8eTbOKYnrHP+ej34S0N9MPZp4gIgSGwLLGTnBcolsG3F4OLdL9thSYC7J1oEya0lICVf1Ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6liCRA9TVsSAnZWagAAkA4P/2pAAZtrnem7rD3U0afu\nWafZ7sg9KvubJ0+ByDl8dfz/rvMI3msb4P8+N/+lmOasr7uzmmzDJI/AJu70\nK+KPPsUITluq6FSUHz7quUch17nBSZXgTlJGXZq7SS8eVYC6VDMdiNdurMMI\n8o5KQmSqURTiHMR8BkMcLF0tozbL28xp+6t3tjmcOtW2UMKwOlEmT1buU9ll\nCH8Obevt3nQjmHcCrmz2zfc6Yw560LYlZW9xyoITktCPXjq0aDcbDHMQlOWO\nekljUTXcg3O71z0eclkQJ9mjj8tPW2dG2Eny+WybJY4K0kXHS3To5m0zPc3O\nxm6ToMNpnnkYOZc3tSYY8d2SXplaIt3qBHAEIzM3kmGDoH3mZ8/VNn2Z88+T\nuFZsrvYf9R3W1JQx1eezHVwnpUeUoVzaVoNPTIWTa5IAewJPZdkSdC5jKWj/\nqAdrfGj7dCn5myYOcvolaQ/rDHKvZurtYTl69f0tgFf7Lhnq46IwO6KpZfKU\nDAlAdElOMsC83/cd78qSH3cPt7RpufS2Bav0wItemPEhIrTXB+ZqA4EuzSiA\nwGuDfwI3DGrjgl9tNwA+zAJnRVg48oHdqfzZe4sN7hdcw/9Io138Srf2WVhl\nFI9E4zk7Opz1ReTQOm4sbnzhpsDF2fSLynz9BgcMrMGEop4nhzhezRxwyZXk\n2IQV\r\n=Nr//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/theme":"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/line-ripple_9.0.0-canary.c7edfc7b6.0_1606920546542_0.9550823127562789","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/line-ripple","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b7efaabed5daa1c7921b80aafdc9a4dd4520073","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.4f3347306.0.tgz","fileCount":34,"integrity":"sha512-MfHKSQZ8+Iky8T/2QkUZ+91PHcvkBtlg9k6Lu413TUvOyaUqVPukSN8IrM0wth9B6Ayh5U+y3+J7Fh+0s0ihUw==","signatures":[{"sig":"MEUCIClLi1/eXqtnr0JdxgwKvajvtcUSvGzUNGFUpXY3mOSEAiEA1onO/1CU/JZWQBgE2gJYkbapkePq+516z0YoDl7X8Pg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx62ZCRA9TVsSAnZWagAAROUQAKD6WJeFHZlf0oIttBM0\n/DY5yT8ZMoWSDSJJ+GbMJZIf7F7Baw8ss/lfrStfO1jJ36UfD5sXDLZae6Gc\nwZmIj63GTuOD/YVY1qx74j1cGsCyEUNzN2+nPRHtOpSb7HIN4jpLDZMwRXfg\nl6v6/IAtThc3miBQ5THOw/wWli0Oh4s0arknl89RAKW1WCC3T519tSUxv+tt\ngyl8SUt36FPfof5FAIv/kotOOUM2B69IMlxXJocBu/mF/kip6HbXb365h6KI\nLPSTSgE3t3Z4wF+wcpd0/WDCK76anSgiRJFfllJKGBu0FNpaBCbvCU8S+/n+\nsX4mcPJkQt+VvajrkwG4wfB5a5/DNYVOeCj7p0tEmHEcRf+zaD70cc2BMmZX\nOJzAiKgS6QnGzV5DvOidwGn5aUuzVX3oeXYMMV/l49hLfo7ZQLZhnRH+8HkF\nCfY9KZ5Axm5xCINDulG4Lj8fEGBt0ef4d7STxiWlgKm/ALVErfrlyQPcZxLf\nx47GMPUQoUOsNYq2onokeyCF68aByzAZwUbujidF1loKlxJbwoiDR2A82puU\njfA9nlvrXwGjEuABwuGxX7DMl3ZV/soU9Zzm5CeP1tlDKaYxXahTI+Aki/rT\n4a0ngTDLXAnio+MztUZRfz2Unt4fkwnqUJwH5MXWcaPSfMxe19ofa6ODslkw\n2GT7\r\n=ik7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4f3347306.0","@material/theme":"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/line-ripple_9.0.0-canary.4f3347306.0_1606921625292_0.7236283577920521","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/line-ripple","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b5af7d93224f238b3868516eb5033f1f5eef0e0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.37fbae10d.0.tgz","fileCount":34,"integrity":"sha512-VwhGAnWGzP0ya5vId+WdqpfRE1/fNhHUbKw2GQs6igy1o1tvLeTJt63b3pSr/2fcZPAZ2an4uOlTEIUX2jUAxA==","signatures":[{"sig":"MEUCIGZutIx0mzG1te8DM/OsyKNNXVXEI6oXMFTFQnBNHcn2AiEAg7CS/J/0D+jrJoRuvGi6J/dYeQPgJLDk4/NtdMeAN3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9ngCRA9TVsSAnZWagAA/NIP/1DLi16Q5urDPPWQbhxJ\nzh07mXE1s6q1tH9fKNvexI6lFLNdplBnvpLo1G5qizOKegdZQSYpf6p1KWnx\nWL74/zgEQcI/taXUJPB614vdDLIdIF+GsU7XTHLbB4ISETD8Mq4atNgdg/s+\naf6lofXwai3cQeEhwcHX/7QvLnsfmCQrhWS7I1ZfmCJLjAabaRrEBAyjTkEW\nZ6bXnjvxUe7sXUzl7NdmR2HfZLBvxh164pMinZKYV5J3FTgekSVZm04glZdR\nS0vUNf4FJFshjp8u0rbVM2a6rBTNcgxh0EmEgHKZ/OZCTtcfKWxUyBJUHVDf\nSjeP0L21HMF/1vEdezRsKmRZnppGNGzNwX/uk9T2C8N7fv3faI8d8aN/gl7v\niPcQAO8bs+C5kVi04bT14g9B2+5LqS6ylizVDmem/1vmoFyHuAQZF00SaAZK\nWe/lsnsFP+eXrRxnXspYBuppHtO9kW+Ony9ePSaubouowXHyah23oXg8Lwfk\n+Uyhqz71ZRkYJssSa90aa0QDBXy91ifh3VNeJQoKTsqQUtI5EMN0MrFVhSEb\npP6AD/QRuYpIdhVsBLs9vW3hJVBWC82OwT50tMJJQrLP+M3NgAkVNYypRr8C\ndR6nqhZFOkl0MuIHzZvu5XVYeY6Twn+VRN5oEivsR2Oeu5zIxK+NOP08xAyU\nWpP6\r\n=xKVm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.37fbae10d.0","@material/theme":"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/line-ripple_9.0.0-canary.37fbae10d.0_1606932960357_0.686161381009031","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/line-ripple","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c52ed9e1afa0274c4f0550ef9be0b8ab797c4044","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.11da3c0db.0.tgz","fileCount":34,"integrity":"sha512-PEq7E5tgnPrsVgoDxm7S4WqA9Xl1xpkHQ8r06sq6gOLXswgxrXyfz/MDXNL2j3vJ9qgHAEo0MsyALKiPhEMBCg==","signatures":[{"sig":"MEQCIGCOEf/iLc7iviCt/XgKv9QyXmD26bJ1RaHEvrqI3yIrAiBa9KjCk+jtVK6zLuaScJ+71QrK+ZnGK/8MJuQgzgfnXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/dkCRA9TVsSAnZWagAAefgP/2+LFtLRkoRfBmUorVAL\nY5aFs3mGXDGP8wh0PDMc9k7puOF/xdRpNaylP92nZG3a9/iCgGmm+y/jCszX\nC87uUhI8SB3T8zzZ4RFmx43xuTI/t/Q1rhMbDI18nB7bVZFZ97eW5P5XwEVM\nHgENcrgXnLgtnN26fNiyKfRoWAhINAgt2wkrKIV/njAgNwLXIpiIFVBt4R7P\nM1jpqQvnGRtDdXXFYKGJh2aYAYiaTXbjoDc2cKucFkBCBf+TXFfgGd5k7WHm\nKIo2X/jkUEAl8HqPo8B/LUc37/LV7iOlv4JuJlcDkSErGudDPEfbXhRbX75M\nCu5qCM18sIZKUpSfLkygohYCC/HSMrM7qaNmhfD4JHj1/WSlb0vcf4IB+cd1\nDaBNvBDt4U5O6gsM+kp6w4lRUECspW+jexaRz44KZBCuHFUDsw+RKtmCmgsy\nU5+TTOyJ0r+BO4zYxyIlyJ8CLaRLw2J8b/LTX6JygGMUwVVS9h+6jy5H195T\ndqjAN1Xb3YgjC539jQgjt1PPUCdjZ5yPyCnNbH+Jo5WGCEX4axceQZQSA7/r\nBbbg5L5vwCnL7VQ9Q1I4W27/1xoS58drJKrMSULz6uJOE7t8Rht8N88ezQq8\nQNGnCGxarvHkqQawwPHbHzWf7+6zq+n8HpaNBJLqGlGFXROFaVYYfT79fDHM\nFI5f\r\n=jhGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.11da3c0db.0","@material/theme":"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/line-ripple_9.0.0-canary.11da3c0db.0_1606940515511_0.5463646382012055","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/line-ripple","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d71cbe41fd73c068c6860a95a2b3cb02dcf8e934","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.489d4c219.0.tgz","fileCount":34,"integrity":"sha512-GAUP6ZA5oszKzb7L7MHbBk7Ibqev2GrnDhkH49V6BxrYDfuItHOAOt3vR+6voi7g+dcGCbWP7q8ggJmOovD6sQ==","signatures":[{"sig":"MEYCIQCVL03W3CR1Cxrk/nxxDPn3lF2p9hp3RDLFYZ2oJz4NgwIhAIaOZsSgN1XeZIZHm1tzdFvFw4Vsbuv4oEsBJCNmB7ct","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQRKCRA9TVsSAnZWagAAMJ0P/iP8tTVUTJIIOH2SAGIs\nEYHqOrUeIU/t0bMCIgmT8+IV0MdxVWzfpZcPEL6fkB6NuqwRFA33u4hyOcGR\nq+seGKFyALEk5kzKlxXuAt5zBh2o86zfmga8WzgZGPTHbKZEYptOmvgo3Ct/\nzLNrk23x61rX0hN2SjJJyoE0FUrVS0RlWNyX63bYHwV6gNAvQan5kDoQG9I7\ngNs9EEBeT8GXIYpG3HhyE+P10Es8xUF7ygNnAptOp6c9ruy5Db4dQAwLnXTm\nwwxYZQskHCnlBgm3wXp5x01wUWsYKAmgi5PA4jRyw6wMrDwanIruWn+1myY+\ndZpF0k9aFjZsuBFDUvQSdiVrzIBHo+4SCMyIvrXUariFZZYSwdj0NZDs08kG\nr4gnDQLtPC3O0wheLbvfbuxl7jjAl4r4q4+Oj9n7TKgZFiUiWG5UYRGPGyaI\n5In0huddFpjB0VYNpsSyrEXkNbDGaYSORC9W78q/ZjQOAGCW/r3AFVWeQ2Qs\nwPHLQB6yYmq9avYT6haCw4zflNyWgPOE2DR34TKK8Y7+cwvwiKwJwgVLSMIP\nWrsYnLyHhj7ImwB/HEH7BntDHeQd1oOQC5FrPSx4/KY9RYFLD5FadyxYMKxs\neQohY2hO+2TW7GeoJRt0WiF9omOS2ZFv4Di/yZaIzqa+tTFf2lcxF9MBibSD\n6umN\r\n=9MUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.489d4c219.0","@material/theme":"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/line-ripple_9.0.0-canary.489d4c219.0_1607009353617_0.2384433437756297","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/line-ripple","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c28f60b9aa0745a8689c10f02125ffc8d53ccd36","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.6557a69d9.0.tgz","fileCount":34,"integrity":"sha512-u7Ndh1Zf6GKePp0YnGw4rXp+QoeYdJDMrz8ee+86ausS5qrODprJDBsnMTxMAoWHO7QDt5NCXKTY37Vbb4VNoA==","signatures":[{"sig":"MEQCIG2LgzqxBThotMkZ1FeP+N+4+iIk4bTy/ob6Fys0sGBnAiBBv7RlbxEZGUON7bvaNURbsHl9lsAgrADY4surgdLkoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQcQCRA9TVsSAnZWagAA2NoP/3qrhVu8PzjqJyFYxnzO\nDFXtIa1Ef+df2wEfArSSkkuQwdXehBSETTT2+RUylHiRZkHUQ8Yc+7O7EvWo\nptDtCZtUvksnpm5n28HkW1cCWFlQAS003o9n6chXSHCzWfxfJJCf/jTsCPkN\nugj1sIfw93iqGvf7IR5ExMrBDH+j6T41Q6hjXGKieHaLndbmZD96TuV3lR15\nAVqn323ygASszdNKx1ml127Z3aO42jhAmEUY0E+VFggUO0Fm0UQ0prDxW8V1\npVRn1wSPDmViYba+sSF+t6IC8qkGeQFODF9xW5rL9AMDbdyTo2tbsb14hS7b\nlMTGVzUOhr5pjzhwCVv4lx7XWjTeYvLAIdKtf/gm3QAdg/zgT36uCxOnbB2C\nIS7/4pyC8RYPOG6nU3yj+urTN5NS//MSGs8cPp93QWb3lBz2GiDxAtKuajc5\nlyFcp8bboObVzGCd3GIb+VvfVR3YjQNpm4lpVSg+ZQ+3hT5JtJpAFJIXQGAs\nMiE8b61P6Zjym/JcAqyWpeer9EpVzkNVjiXWwZsV8Mupz4j9CM5HvloYzZGG\nCCKgfrqU8Xz1wuRU8y1QNOU5DrqOFuBMDXpnpqr74q3Et/o7D3lYEe9adlWn\nzCVgVBpZyhI3G3YxcQcfKT23w49XbtMQTwfYMHse1vMgF8mJYRCbIZhLN4WA\nT01w\r\n=TsIX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6557a69d9.0","@material/theme":"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/line-ripple_9.0.0-canary.6557a69d9.0_1607010064166_0.44520068280806213","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/line-ripple","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9f9f8726b084d1089cdb1e980af7079eb6ee075c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":34,"integrity":"sha512-HgR0LU/pLkMhNoaPZr6DQyPez6efUBML4UZ3t1fYI2+XFC2NBRTaJcUszZsXmyv7880Hga1DOyrcSJEzVZao3g==","signatures":[{"sig":"MEYCIQCFMAFtDRsDxOuxkXAHLm+tSfKn+s7SC11sgPTKm+bTowIhAIeSO9YD2u2ykua+8CH6wnsoPhsUIjGJ6xSQ66sDhyc9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQr2CRA9TVsSAnZWagAAUvoP/2eZ8bIRZaN4Lqp23low\nFuds0dPGbjJ5wBK7vVBKvdtYedgwvidKvJyI7ny7VyBuwpNCPsqaRiElUwx/\ns9Y5Vk6mWpGlGrG8wVDOVQWAld0DEgFS2W7czhBo3rLqZBYk2vPlBjtDxFaz\nbrc7zPM7vLrLLX60Bd3VQGTGNo2gZEEi/fzsYoRK7lGXEJKY2QQpnZ/iHoas\nhXvt2jtzItRo9Cn/q/IyOZeleMephSn4AfvfrR+3RY8hXGICuFgW4QjzKyIh\nAJddLji9J3dNTz5rK8SdjBr06VU4J7sLnq2dFUGVZJ9oDwGlZ9AsQXye+90p\nluGPGVtRMfjuVcD92qOndJuv9NaFi1ZECzfgjC6DSC6SvKwesg/VGecITRWK\ncdlwtSvLubbiqZoOmsm+KngiuvTQqxz/XqSn9c+sEe8IjqBLA2zfPLN42Ull\nPm/4afKId+K+j4GPe40ipevp+r2Ml2GZCpM5TNcpi4sGYu2xPDqmpGKvPeoD\nN1Nbgn/1jYGaONAR3tOI/rl/KK48cpX9jPyGGaewjcACZ7oD7gNRw0c982Mj\nRx3haj+Dph70YlOk4rj4V+5S+TSGsAQMaKyHanoNHPo9X8lQt0uBSuUr72tL\nJJvwqaKRXuDQZdfhFz8q5z/a3zzDSxaJQtcFUeb3A9OMgx3otb8cM19K/bw1\nAJYj\r\n=Hw/R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/theme":"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/line-ripple_9.0.0-canary.4ea1b7c69.0_1607011062250_0.08166416371965579","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/line-ripple","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"326ba5f5be854417b1ab816b6681ff31c5cef885","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":34,"integrity":"sha512-T1q4TNZAn/ujo5mjRX0y9igX4DAGcaykvil4RKRkEyKVyxTqtJ+BKWqgczs6T8ta/Oo/Gt0nznuUvCtsmWOaRw==","signatures":[{"sig":"MEUCIEJBS3ybMDV2YdbbQ48+WZ//kNALeEkF/6QU+rH3xxxlAiEAxOpGT0fAu3FWzWJgdZERnhdtbBah5v8ZX4jfz8EN7kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRnDCRA9TVsSAnZWagAAaaEP+we08zjZBcJeNXk2w+hQ\na5n4ZFs4z/FIPFlEqko17UW8VlvFtrk5zAxs6lTjWqt0RyEylZ2hVlRpLuni\nfr6q4z5ChEjUIbYmKBjFgxfKxMmrtnq7b2t8RCFUHEkfT6f8uRt8CotPGn8/\nSkNhX0FDbx7z/8ouqMabqcVZC32A4+4GPZKva0u25Bd8x+xXA8ef9xgNn7d9\nVf4NHyZStjrMaATWWv8gCHeXopbsdiExB+airt8/q6NFYTZuY4nKW4Bt7y8e\nA5Zql6nIZDoB5PgPaFYi6HsTqroDoXmHd2/zAnVi9EfJd1rV1EO+EToSZ0gE\nyaWvbYKIh7OMmNy88TCiRvyduPbu1yoIoq6+R9QqbRWi08cWbvGknH4AIBaD\nszfqgdqBf9lLBjaxrz8fHifWQD5d/qFLxTlJklSKRINZPJFOx90WyhNwCAWk\neq0uDhduGt3xYEiC40maolTRof1I57YgsZ8f0Gzj4yHFcXVd5sfWoyNoE+9h\n1RdrikUQn9xj9L46JEmYbpciS7rNtNSTSjj2ifJL9AJ/msUlNDDvLz1iucfy\nmQKB5xDZJYwmXL1VNIaZgTg/QcmaFfcJ5ozaGptk/WMuh8Dr1OWL4vKoXjFv\ng96+oY+jDq/BCMO2AHxNPKyL+wHKMPua+QEYA4X3rIvYNte9IP2QupDK1luA\nVoIz\r\n=6ZGa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/theme":"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/line-ripple_9.0.0-canary.eaeb78ce3.0_1607014850581_0.8213707608851046","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/line-ripple","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a0b275edbd9a039a1143ec4d8789a29e903c90af","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.1c156d69d.0.tgz","fileCount":34,"integrity":"sha512-TmfT5/qzyp/NQrT1shlg7yynhMYJVmkFv0r38aZ80O0fIKo4mEqtcSVQZGXr8acBRCdWgItrRikv5U7TB6uNTg==","signatures":[{"sig":"MEUCIByawj2agsStIxCa8JWTDzdx9SfN5qW2xu+kUd/IGDCyAiEAhBIAH1oEOeU44W+aJhX5u7FPsWm9gXzkG/vhxldbw2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU4iCRA9TVsSAnZWagAAl4IP/01Eg0ewqPrCpITrr5w9\n64DB35uXVVarpkZ/a9u91TE0IHc/shGqwp2dsqFAy8eYMBmZLTAaXi9IXZPK\npfM9f9b9u9hvI4L0OoYXH/4ZFsYdC489Sk2fTjdgiFfeAbCyeUVGcHpkiPG4\nEw051My5+CYiMIjIWj4+T2gXeP4Vd4MWV/wnUfEYlrEMNQ5RKPAVcMp0zOPh\n1DC3lP0pyhZCHkR0ykSwouW8ynauQtlX+vbFa7zI7HUYKB0nB6JONhchdPhZ\ncPF3vwsmbK+H7RoZshhel+3UYILiZszDIHnVCV99lzlIJgXk+rWhovrb8HLj\nxjCGRz9IC27apPNr5S4nGusPeLNhdaaGiF/1zpaXMLOa5Q0CYrj+NupyJ6KU\nfFOcgybXL4UQW5G/dSaVm3qukLx4LJ6VRbyX3mTnuEnZ2d9RLE6Q0L8QCT4q\nPDFLkXEmcbbwT3OoBg1Qx2VzT28zBCEcbRDSNdsP6P5MwMRrnbcGkAzzuGEd\n7JflObz8SfMldC2Aa4QoBRqBE0UvJzaD9lOuqdJrhTtr7fWmP7dMlRIwWmBT\n0zvloE1s09EUdHeoy+0dIQ4l0MquGQoPThBTgBE7UOSofEAvSBA7WzUu5kXM\njof1d8PcJCvIWelg2VY1Uaxo7HkVbWuKzAIGtzlS4zYpHxrv5F0XWyttBRjF\nGQU7\r\n=n6Qa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1c156d69d.0","@material/theme":"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/line-ripple_9.0.0-canary.1c156d69d.0_1607028257618_0.19391779149087696","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/line-ripple","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"97f26732971c6c2558d094dfbadff1a9ac99367c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.832668d33.0.tgz","fileCount":34,"integrity":"sha512-LTIagoKw1DYjAI1+JuN2qtHsxGtnqB0ft6JfFu12UD+h572JBbGuR/uautIZblqI7r1t+6goSq8MGAv57MBo8w==","signatures":[{"sig":"MEUCIBZVcuAVfm2rmYl8/nM+uNi90JH7f2liWlQ07VmK9gSEAiEAljJ6ANF1UC7HRYrKeMp2JqrUHgqJWajuy3dvo1XCyGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynpoCRA9TVsSAnZWagAAU2IQAILUA4RUBeEJZyxmdVDn\nUgjwSpJ7lRLIKdo/AsMuSCnsd18w9yWYFZpPvbT5o/3FeRriltDgJlyJjqFE\nUye2ixtvnty6zZ3l/CfgfNN7wr4ZX9bKdApP9xNh867GMcp4KwPNl4loqzFk\nT8h9mI+XvGqWo4Zh8ppUdatj63tW7UFyDzWiP5ccw5WJFYcz78L2nVV5PaRr\nfcJDIp3eq2xGe6hEV39RANRkdKqoWTKqqu02F13A6FeGaViXYNfpk7vwMUNa\ntIF3BH8UGlAtyZ/NfcxhB40fuB7GoSjuIeHe9aJw0D8onmrBC5vWco3GSPkZ\nc5DpapEYrFwtzdpsXt0VJFS4rshQJjtWqgnOWKKm7Ty4Vi+LDJYQXzv7sF23\nI5tWUGBskSv2dLMq3pi9zDjcgs+TbYd2VoZj39f2sNxM5LRlgc8NcoG7JiuP\nw/9perlNtRARpOqA45xnBJ42dhsD6Yt/Dp7bzxAoCbxzaI41T+ZxL3dikQM8\nam/HelsHtJgzPE3On9OPN6szkI3R+/TZqo8Qy+sUvDzFE/bxWM9aY8VZnsXR\n+1X+fsRNvNH1gWFmtK+zDgDIQlbRsCsz2x6y2hhmui+sFS2gf0LFYW7H6okU\nYqK1LoGKWvYqwrtJnsjiRidCMrqle0A9TRfBM49hDUBS2oEBFL6F6GapAIVr\nPLye\r\n=KXaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.832668d33.0","@material/theme":"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/line-ripple_9.0.0-canary.832668d33.0_1607105127860_0.40315278487439143","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/line-ripple","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2de8cff716e25298ff5152d8bb1626b10d34951","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.4321323e4.0.tgz","fileCount":34,"integrity":"sha512-QcRvk2hxSjJS9+zrzttMhcl+8wRWwSN/BLR1KEfSCTUGZy71UShUbUr2M4ZXbgIOchVMMzLWPV6H988VYhTQPQ==","signatures":[{"sig":"MEQCIGWHtDWq/t/cn2eou22z0HUDQ9IZwLGb6PFwp3dPs1NAAiBiezxIDKt1twDGRX6WkTTiRM1EhBO2RyW+qVjblDYbAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhHjCRA9TVsSAnZWagAA6LAP/2pyXxNNKhHruABqWrnO\nSbtmzKgNixRb41NLrNOEJKQhxk5LvxbRuwaPbgoUchFhhI7qwhLFM0JPKsqr\nwucAskwb1x/bep0hnmWxDGyf7gG8igHD6A4wy2qqb9AnFdcEyqW9efLtXniW\nLr9G4CPX3ZqoyO0T+kf4NGhzWEIJujXr8W8LTd0gxKdtllH7mnPS6fddGRQE\nDBPKEhOdgDwlGZ7T0ybcC7obyFBSvR7Aq3Wk8kGjnb6ndhn9kaPsqMBMnguv\nigx5ha63b7LFq6B26g20CpzEeCFb3bf9HHICTjCmAISrvnr2gSAV2v/keL+k\n/Grn7Ifw1VIyuQDBMmsCo/2X819W297M+RrU+MTziqgDPuic3Nieo1JKYzpN\n1Y+Lp5/nKUwsk7q8M91pJPlat4GQuoDO1LWubsNqmNgQScWs2Tk2OVRUVeu5\nvK/nANQ+TlhkACaBlCnvPfgY1Of82u+zWp3hjMjN0oHCdgp0r0Q39cEikLlt\nC6hXIsCaRGQHU62xvz6pbKLIvAwrLCdQSFbFuGk82vv1VEC5+umoUGOOphCz\nPGNl6K7F/oWF3ZZoGarKexv5DJ7xmG8mGPU5mK8NDNzxoXGIFzbLM9mEhqug\nrX/nyy+qnm+6k+3UcA1dmNla+qxRkAH35rPYuX1GhByE2kcgFLx+PI1S83to\n9fth\r\n=ngE+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.4321323e4.0","@material/theme":"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/line-ripple_9.0.0-canary.4321323e4.0_1607340515373_0.7564632439210917","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/line-ripple","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98fe16277309ccdcaad65c6a33bc2b24c2d2824b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.2d5f32d41.0.tgz","fileCount":34,"integrity":"sha512-G4dBgUExEseN/GgopCTGPK/q2qSz//m1xEzo4jbvrA/vvABvXg1dK285oBTPPB7+gqDx5lqJeXIOTWaoEhpiEw==","signatures":[{"sig":"MEUCIQDVc6JjSDzVCjFB82ARd73n4KeyrIynCWJkUm2bMs9RLQIgDaOuvbftIdqKdpl5FLMzm1zFHpbc63nZwV9VY5XNBjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlszCRA9TVsSAnZWagAAmlEP/2+9xKEN5tFOWxdU4Utt\nPvUbWd2HoWtG3A0wS0CzHeikr9zuBS6om40yyApzatSNNVlN/a+4wj1PQFGD\nPEFAy+xUONsFae2hlTryEwchWxiXNif0SlEgibQBBXoZUgRdVRXC3imwu0br\nZ01fu0SfRBJ2Gg71Mk2fwP2yFSI3YIHMIAaWxm5CGwNlT7P7nSyNJf6hgzdk\nhpWL85uDCuezs8KNEmILaDzZ9axD/gq9+wG26EE4DAG97Au61y9V0kIyriR2\nRsLjAlLcUPo/G0VtsVTEv7vH6KYP5MDyjA0JSmutjyowjcBUBQwMd3DFDSec\n/tCb44t1bsNGv6KPPLKX7qyJ8VC0pTHz4HC86FEyjgHeVXfSS4hrevTdy86l\ndd7pyqtaTwyyCCOJOIjyvB2GRlSob7pD0wvUG/7Lga4mJIgciFOtz2CaB6PT\njypURmCVqeao9LVxpoV3ZFrRIf+5iwDhVPaWTF0BA8VWU/yfNU73mixsKKNR\nQg95/s+6TRFUWc+mIv8GiOy4MROrIxO1NZ/wW6vXqq7QT/gk2PIqsj0VFHUC\nDQ7KLn/98msZMUig2qdPC3ePkfA51K6N7E9lpvRzGgHK+rsfzQQv1KhD4BCW\nsAKvtLlhKwLULUG/g4uvcY0ooG3zG4uWm2vyEAYrNB2JoOOoadxmLC8Jw8EE\nFX9H\r\n=JvCG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.2d5f32d41.0","@material/theme":"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/line-ripple_9.0.0-canary.2d5f32d41.0_1607359283482_0.608827086935454","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/line-ripple","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1a7862d0ab9db3628f505e58d6c7dc5aa24fe05d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.8239afc64.0.tgz","fileCount":34,"integrity":"sha512-u5GvKJ+0hHSGZdKGm0W356KTj5N9537iMq6/RJuzodbvb8QxDdvooKAg+p3/0xjfFgT6Uk5J8eSl3spRzWSCSw==","signatures":[{"sig":"MEUCIGXe+68L98XvwVDCgmqYE4M5VDxyCJK3gAeOIH0dDon5AiEAs3r7o+bQ/19Il63tFs/U+odE6YdaYlxwluYCCq1acgA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzocwCRA9TVsSAnZWagAAZu8P/1qppNw4Zsj1Gidkuu+c\nwWVnu1Emv3Ff23QrOiUVzqoQ/4WuQhle/8EqtfaY+IQ5wthjFc7VUIY4sHue\ndnNnvZlRSzZU6A/Rz5nh2jlQh1jIrk38XCtWPGr8+ptynAyB5MHjjpebV3ax\nIGq8oAUqK8sIpYCC1b3ABti958fC6SCri6MpKlXW2RXTpZqvKTY55H4UK78+\nGuA2H6kzxVO047cS3hMSDQ6nrd1BHPBWhpjbfBeEKg0hvutkrFDX9sR1ixfI\npEPuRJiUQi5oIIeQBN45xXuXmu/Jy9p/w/4777MrLqgmVuBDEZro8+tWJ05X\nKl07T67PHFE7ODKrED2y8neKpHp46UBDQjSTbOhz36EcE+dAMnZzhLlPYTyP\nyUJYhSk6o84kIqU+7Y8cUqxl3BxjAaGbv7A9g6so+NQ9AnQ+rOj8vOjmSn9W\nm5pDUrHQ0TI6ng4cat0WlOiBQcdPLmzoawbadHNxFvOWJNYis0av4r7AHc/t\nyhoWCOq3FUOwBQR8MwQd0t10sroq8+1/lG79eaxkH9WUyR3uNhmExW3gjA3J\nJ8dP1ExX0InfDnl/Lqq0n1gCobPfbxk8djLrGKdMwoz1Q1WXFDkZodkE87jp\nvWT26fYbaIzV/ZVFVGqBdrbx2dLdCcsgIzLXLa/mgkybLR3gZBDSlge5/ulL\nbNi+\r\n=yuYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.8239afc64.0","@material/theme":"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/line-ripple_9.0.0-canary.8239afc64.0_1607370543879_0.8749383707395149","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/line-ripple","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3af5ecb4a57801811ab6322c1f2d25ae8fd5bb40","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.6871336f1.0.tgz","fileCount":34,"integrity":"sha512-b0KooCpmKDUOCsi2KWhlkHC1EW9CKuwjoZ5yoYXEnRyD5MBxWZ7zYcla7YmzDn4zQ12WbjJ3DvpT/W9vuanKKg==","signatures":[{"sig":"MEUCIHN1JWAyiL3EKav0tBaOJ1Hz0BnWKBwkk4A/FefaAt5dAiEAmbnSQC3EzpGvfmN3QcG9pfNQmv0qaGu7muW/lUS2K4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6M9CRA9TVsSAnZWagAA3DMP/1IIj2w8mBmZQZUV7tUD\nMk+pcOeCJRhw8pbbr+pRnCLi6xuXj1M9aycdTjqz6Pyy1cbhGzV8aAQH5tHr\n8U3t9kMa9OTUZiC8cgJzNCIS/5kFjY5u+4dSmDfEv9GUV1Sb4IOX4BXb2QvA\n+Gg31aYHUGvTCn+r/VtesU/GtiSzxA6DuwPmR5CVacW4Gf5CSN+3e78lyM3b\nV29ttXrbxYswnkOt7F1lM6ETYxZRGxlzHEcNDVd7Jjhj2nKk9SORozOctDcb\ngLOaDiyhmMRRDD8KbU4/Pf1h1CsSXUfjMm0adZodLuNBfeamRpo4A6HA8ulq\nDJ1EL5cbSXHD9ZZtdps5J18n+Y15So4YNzAcX4DGr8I+76atCxqOrcwLdusD\njit6dfP15WpomspslsfbEot889rUnrSQU9Uz18DdCHyqNlb9vaLBokthupwB\nIvG194PKD2gcklacYBIWyizdt140/KKfyqYNFvWjQUDhoVwRc/Xvmak404fc\nmAGfUh+KA9bKGJEU1uIIQ/pPKskaJroUjvyE44LAq4j7wswC8JbR6AEK/0Mj\nG7c7HCQI8R9jas3xwz1rvqckey7NTuH5/7BVQUi5xDJW98PgpXsMGGYoAzqX\nfLGae0/qI8jAUUwNkNUeOGYIiCO4tdwzlO36aBPTiXfK4P4jciaEuT5a/Ai4\nDw2M\r\n=QcH3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.6871336f1.0","@material/theme":"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/line-ripple_9.0.0-canary.6871336f1.0_1607443260552_0.8100506379587904","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/line-ripple","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4d4de756d36674187869775e05a663d5cdd7530e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.9f718da94.0.tgz","fileCount":34,"integrity":"sha512-olMT0+QHYY7Re5EtqhepiPUGQmP84C+MTu/8VMZk6SlnqO6i/RjsY3tnkO82HdSxJD/09XxtY8N5o/Kt6/lC+w==","signatures":[{"sig":"MEQCIH4B8batlk2uWbOnCuJWG38yJRM8mfqirNzBCGriw9xXAiBUxGP1oaey4RRHZFna3G7QWCryo0pSA0xNcS+s4UfB0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6X9CRA9TVsSAnZWagAApgkP/Rd7JIei40bCXRSH5jp9\n+a/f90fTm1NNQNN3zTYbgpqepiq9CLIBBuc1h+tBEQynU8Pz/goskBR6pFt8\nrjVw6OlMgCocfKsk20SJiGbvmih0pDwyWadD9sllNd1er+FrKTfxqqmrXtZv\n9/VPeFy5R19dDqLdLoi+TAn1Ggsj7tqw5SLGJsITZ/J7zPQ08vv2Ag7tTRjj\npdwanok6P1vOcPSD8XmmW2SIltckAjcTo1SBqM1uWwWD711sHPNbuOYIctOv\n6qdoFo/GLvrNyU/D6rlSsjPFawuDrNoT5v6t4DetDr3hf2/hr3WE4dohrrS3\nxWO9XanqMUzPCuRo60FmHLEQGkFvg4QB1vFfVM4C6pYjsdACryZZdgxb+SdX\n00Vu4wn+1ijMcci4L6yTlChixnSRJqZqaEKRs2P+zddHoiaCNRm1yJzAJbdF\new/q5lFSAYMYOa0N4CZMHaW22w+3qLhk9ktc0Vtpre3KSX0Pirb0A6yEc3BS\ncPey1Mcqhz85CHOtalCtXfIFF0iGGQ+czW4NsR/DrnCoF6cgcBKFcTmflHBg\nU+0f/yh43x+8burGF7YPJLPKblitOEonM/x0p1d1FksIp76MZfyxGrAnq7Aa\nB9oQSvmMLReHvYGeJbu0vaUw9aUK4TDZYjiImIC9bKg6mTSCN+dXCH98hHoF\n4xnC\r\n=IEKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9f718da94.0","@material/theme":"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/line-ripple_9.0.0-canary.9f718da94.0_1607443965450_0.03471694941256498","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/line-ripple","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ab3f21245df7b1d8c49b6c82ebf890f3538ac04","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.1fccb1418.0.tgz","fileCount":34,"integrity":"sha512-JjGNe5hPYfXX1QICHaYDZXaKOM06PMILl0iyRrPRSeQALtgQB7kMoCZS8ta8AhzMeTpnFnEZeBFD//Gk5Q/w3Q==","signatures":[{"sig":"MEUCIQCZnWIEgMMKshSlf/jIbVmCAUUbQPBoO/nXjg1NRPQc/AIgPCeRFRYajvnXI/OxpuroCKZpY259sn1d5SkBYZePNfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6mGCRA9TVsSAnZWagAAbN8P+wcuza5V1ZZqpsmALa/i\nZU3+yypinO20WhxdPRPsPyIRBkla1S01Z+h1M+w3C0Z8dZ9Ch4trWDcrygNZ\nhcaDen/3O8L95SLIm6ObADXh9Vgd6mEhIm5dYkSyvkZYnL/yF5P9avb70vhb\n5UCxUKQdYQxDmYUrxXNhViuMGpIUTRvYLlwDcPSCaKLieCNgwcnJYYhGQSLB\n897vZRddZYR6qSsbTJULJxvoE8D7awFW4+CqCZwMqf8A4Gko895h6VipZe6/\nE2YZZs0VNABUPxRBNykjenQ+BN7Iq++dv7RtP7CIYtIHRieeliyMDN+Q6DQo\nNlI3TN8ELNiLYQjQHl0YfOffKIC8Eo5PR7kMxm+e1x52CKefLko8w4Y8NBRH\nyU1vL+lEvkXNzfAfEH6zW6rBSy2lLmW+jpap8ZVMSn8lFbW3LR6fQSOFafsN\nUMQyEunUiM65lC9jDHoZ/c/3RMimQerR9deqijfn+8RH0cQp2q4NjNquZOhE\nfNjlqzeStsYn5wWZxLdCPHYQKMF1o2tNCSfmg/K+U1Y3hRQ3l+weFTgXY79J\n6Pkl/33xzxsJGifDkGwSL9pan0g6BT4gx+qUtnYpn5hUDf5V5FzHQ8GPaIAp\nVgMjJAkzgGCHvQT91iaf4Weoi3UeSVTJmYMxhvZE2TcQ6U7SoJUvnU4dcOyw\nSBFd\r\n=subp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1fccb1418.0","@material/theme":"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/line-ripple_9.0.0-canary.1fccb1418.0_1607444869472_0.534525520946636","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/line-ripple","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa2098e4c8435e08130f437ad480500e0d171fa8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.afb68894e.0.tgz","fileCount":34,"integrity":"sha512-Ut5mEoiGEpyes9iJVQHKkPGUzHsmJsnlCfiyANyjCSFqHSEOzwVrxOusMfa2b4Jm2VdNkTcX6k7IYCCWdJqZXA==","signatures":[{"sig":"MEUCIQCszqrTh7ZJn7n1spEGdmgAMqFz0reBNh9MTOdWGIEkYQIgVdtJrtBZeavBneRKhjaPy6+dIWgJbNjnYVIXwRjKVBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6pxCRA9TVsSAnZWagAAo/wP/j+MXeRHjWjc5ygt5Ljg\nvkRnvSdjLRm4xAlfrs6r9/QgQxgG09kJDVIwTkw6AEJR8lEijeY0wfi4cR3/\nskPLUXihDObMIFr0hCN1UuCa10L0jvbcmTh0D+YWLWNVJ+KupHrti54yEPsE\niPgd4j6kDtN4UUZW4l00Qtukg38HgE3fX15mowFhobRuZ930f7xWo4e3sz0l\nUNFnZg4aKnivxGtnG8H0bd+f3qtNeChHRrn4xwG4Va5BYtiVxRJP96jGXymo\nkfqxQYWfrCNE9n1xGxlfZoH9/ptSSJACtc4I3s1Rodwmli/ucTRF+PgnM9/D\nkP27cidl40O9eRIVqvHIew/BBRwSwzmqBSIcqqcRcSJOa6CMil+XcxBdRsET\n3Zhms+R/+3oSpKVdZcmvB8RxFodBcvgTWtoUdtseXxJWeTeosLmvfGAEhoMM\nqFn4sPcfaqOQJFRomk4eXLS0bt9nrSNexQpuykFPQ5j37Xuzs1EdjxXOLztZ\nPzupqmHnFjCOtmtFTopBfkjIMrJzIzyh1gF7euXsxBWHYRU7H/U/wyVXlruT\nfRYshEI4DR8aQtJLpZ0yp0jry1PFRqIbR3DtgQ96DRuhctoK5qMytyTgJwC/\nnGDxop8m5nTuIpWtkADm6toyZY2SUNfG0OWROOFAPRjprYyjohQgxlCcwiCb\nXgBr\r\n=w7Tp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.afb68894e.0","@material/theme":"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/line-ripple_9.0.0-canary.afb68894e.0_1607445105324_0.7140504780841415","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/line-ripple","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1f114986e3a6fc17036cd0aaa0a68b55180467db","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.fd88d40c2.0.tgz","fileCount":34,"integrity":"sha512-TMyeCcai1qMt5G1aA6CY/P0/SEpwx3t0kIo80j0pa5s1Ly3lA7iHIL+8FnLjS5o8YIF5BUpvxOwjmNnqLSXjzw==","signatures":[{"sig":"MEUCIBJg1RuHbQXJrDIwvn+AZ1RYyyAxGFKLCtt3ARQ4kikqAiEAg/htCViAKwIW2wEQdhlzQhsah4xq6Waq/D2xOMpSyNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz62LCRA9TVsSAnZWagAA9i0P/RhbOK8qH7Ii3DcLGAmL\n3anK4AzowwVbL/SyzfOHaGp9otNmFQvgLEUhFaDfjZsCkwus0VgmAZuR45Qy\nWyb6XPjcJsNSvJkBDI5c7eg0eResX0J/ItUcMc1mPFLgs9b2U5ExznRRAHb/\nlm2JEeyXCzAPVwhMt5jd+7NuhcY1VYP+1GsRBpPKbLoDbxCtlZOx446FIPle\nInnXbT908bZ/GkLtd9xs8Iasb2T9rsUoaYUAOyBN7nX0WbzjqLjNiym7hq9J\nlLJ5OhGTWpEuZW7zbdpQQ1KlWvsl3TSOCDZ3q8wrS0oAM5+hoPS24FxXBP0l\n8xilRZhP3EhjFsNdXd9FQKMXLKj15ii5PVxj1uLpJCy416+i4BzNYlDdu16N\ntDH8qK3zpT55CsrZ2j/jserb057mb5+jmBJUsWIoOLKwZcOtrP6B+5/f0l5T\n1I0VugehmfLuJXq+THlNBj9xHZjuiIALWhFVnUbDDNdWxqJyVXJU5K5znLcu\nej3y6DSVbTZpxnqOc01eSRmTpCXZ+MDJwCK4ceAl2byoCLLrAw/ayUXiqi6T\nZjaWI7wnkdeHDhHHLGNfctptZeRPbhtFek5Yuo0/EV3lCz4OSsIgKTd0dZnS\nnYI0JcQjtAyDBFPuCeL4BoVNsQcWTIxcV4wCfRyUIFUYAp1AU1YSAWdDnApE\nggPy\r\n=D6ig\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fd88d40c2.0","@material/theme":"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/line-ripple_9.0.0-canary.fd88d40c2.0_1607445898927_0.7837338625933685","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/line-ripple","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"50d2181b49535ac30ec4d2020037a135d24f28ab","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.ba9e3109c.0.tgz","fileCount":34,"integrity":"sha512-Yc6kRkLKHHXiuVTqq6qOCzyV0LRcW1MR3lmRWVs9LQW3FdQTAySieSZNApwuHH3rVvImOvTrWxR1VauiyODuQg==","signatures":[{"sig":"MEQCIH6KVS0Purq+MyN0DsMRtVim709DlzGoMC8uWEh54OcFAiA22W6T9uiLU6w3gVSZLCJCHVEvdf3uHBE4NuYFNJ3ULA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz85UCRA9TVsSAnZWagAAtGoP+gIsDCxGLoSrXZbkPtyN\n5AdMCtKWu53HBJjIJwv4H7Fr8rjeu6G361aC2O1viEb1co+2C5F/s0MEOqQd\ntf5cUXo23O9CfTrSTB/1qua/Q66cwK8zNbfm1h90CqTyDcq5imaKk1KppVox\nMyRxNX1+7ORFE64lujETkeRvLQPSPHnqwWBMi04R5NhCYtMqHpw070+GkpWh\nVPS4a6d2ppA6C+ABPvwzw8Gaze11Pt36+5Jo2eOJPXSUBQj9nACm8OzpvIZx\nUBko3H7pDAcqNlXdyKTtPKYTPMIbRF++vo5a1Xfai2GDdhQEGuquGySDhDdn\n3gxd3wf0wJq05oZQoeqmY0nhDcUTWpYDpD9124o/se3uHXK1aLB9jkgltVGS\nx1BIMZ4/WwzkUP/4oaMCUDPs/CVYACs0bOeNJj1WMH9VqsVBVqiMUofXISLZ\nzlS5Liuinxy+tOX19sb8jtJ325pdF+kyZIR8qZs1Z8L84pjxeAmxuKg7HmTe\nowG93+rtHKfBaLzk/U1UnttXBC9XV5WlZR6dUbQk2Evk5w6+forEYbJlWxup\ni6cEAFzeX3wA5PSDbjgSDK7pKTRkmTOuJYx7zsl3ylkEEN0OhiDWkkR5XonZ\nojXd5OkENBII77UVLrOnIzYDlISUOqdaYMHeX+wEXP9fLHUi9dyiSn7frqEn\ncJDm\r\n=zDsy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ba9e3109c.0","@material/theme":"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/line-ripple_9.0.0-canary.ba9e3109c.0_1607454292389_0.2092440056846312","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/line-ripple","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f549b6e311bd1346a13027e64782cdf75cc2e240","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.1085c3b2d.0.tgz","fileCount":34,"integrity":"sha512-VCZIrdAWZnNWlWO/FpLUVYAXKzNVe88oGnirxqxvGH13oXHM1n+mnRU5opdwVqdq+XYracgUPvQc6JHoQMHecQ==","signatures":[{"sig":"MEUCIQDKbINat/K9AfcNH4w2YAip8qMunAamqmFzZGCQdwhxAgIgTdQ11qNr+2GRDTtqt1fD9WEmraEJT5qXScRbkwyZTMM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SEnCRA9TVsSAnZWagAAruoP/jjKfUj5UyoFq+/I/Xvx\nMt1iaKKJUIpyCiAmzQxD4iMVWX4SgITJ3Pm0UgZBl14WdRiAUDRoiFOY+Si9\nCcoWRB8FHrCUUGyvS5hXBPjqo4UhHgmjs4UU0kFMtQrOOchlmI5GR7meCKD4\nLbtfF2JhgCf3JtPLrhnllrj1I2P1X/Cd46QeJaiItfsGrqgIR7VbZsE/t+Fj\nCQRNj/0gXLSHGNMhJPbFjFzUpSK4Y+a4vJrUj1FjWJYefyH3+RW0VvaPe/eY\nWFkeXzODxP8S8PkwW7aH2M/NrKR4YLX7zbNlzJf2ZOPXx6p0TX37V8j9b607\n6gk+VsjmTkj46I2DPgIdXIK77b1EawCp9AFocXrqz8DgYYAqCJNyH2wtidUA\nsPw7ntWUHBK7ln2PM1KauxQ1PsU4WxapeHChm0bUnZnuCxGwodLNMvcamdN1\n6Yxyypind9dCBXlOGCp5b8BiIsYVcJ6tdQLMiaaG2S8o1REFWf69Xt4vWeoE\nHIFJ+SFPc49Ikb77CUqi6BLg/OTw9j46YvRpQ7z+ePRD7HunGqelD8G1u5xd\nAUvfqLB+hHitaVj85tKQDnj0HmtsTWHMS6CySYVekNXeRKfj3cT5MynFr9Uw\nR7FxvWII8bZs5jbTR+iCYwV2TZ/HT9A+/4T0XgZ5gguxmrvlgGwPKqyD5S+R\nOv9p\r\n=ryOc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.1085c3b2d.0","@material/theme":"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/line-ripple_9.0.0-canary.1085c3b2d.0_1607541031313_0.5717697613464408","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/line-ripple","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"76bca6cba0794c9f51a615f9c4a5695a9f87d799","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.c5dda809d.0.tgz","fileCount":34,"integrity":"sha512-P0Td0jqN3Xer+YymqcW4X6rp/sEijVv6+zU5hlmVEomzqP310EWNT8MevkrNIEUG6A+zhiPffrGF0WYK6cn/3w==","signatures":[{"sig":"MEYCIQCJr0IbdXW5TwoOI2ETJ4jT1IjX4ds9l9YIW8DPsabnoAIhAK7RCRH4gSmQXWrPTAYU3dt5haAXXFeHNpAypWmacsQ8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0ThJCRA9TVsSAnZWagAA51cP+wZ3SV2s7ABY/C69BN0t\nuS9dFkuiabsltzCaY12lVClgsxOSuGaf2WK2d/0LH0TJ0jWOUbksRdRrJV27\ncLasAn87HtqSxl3erKPd6gsuQDXUq3sZJIgIDkz46ndIROBR+JHCqPCuYiDC\nnAJrrPo1K1rb94vlK+3yi+hLtyRaqC2q+HA2swVCQoQdzzMOcqMvhwXnBO3M\nm5qLkQBxRrsKjyvyFEbov2Y/7khAXWjLNQnUxRaYSpL9J+uZwhDBjObQoxb0\nNB68L8Z7pNfmCyhMnIQTgbragWX8/lmqZEFQhjO3s8+4gmDO2vam4iQ7hPiq\n8kNZ2RlCl6xFfHS5Og/GDRsLr677Mf6jkMdT1pg6RKDjiR23j1Vz78bjgsVx\nagzW26OOm3TTLPbV/xD+IkCOwsSEF8FU1JMl9WiCan6WTszQgdfssGYooIC7\nxnrFp86TkNAFjIZebSLzoi3enjp4LbnMBsl73fQFCS/NogrPb30Whpn3u08D\nd+qTz/bVWymeDZpB9a8hkw8A6NAhMh55guKg9amifSEXEfnU+i4tNTKFcaLF\nnrNe3njL3GP982XFrifSCmE7RywV1MhMzdlXyvq8DmH10ufHB6WzZwvySKxZ\nfaTZqvyaPry22bYvA5dtWo+reoNA4HeyJGDtQWcRZMb5ucWdlMOiC+nFHV3F\nzfQ8\r\n=it2D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.c5dda809d.0","@material/theme":"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/line-ripple_9.0.0-canary.c5dda809d.0_1607546953179_0.8604251875560678","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/line-ripple","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5f1fbfdbbc203c37224b155c378e3a15c1fb6bc8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":34,"integrity":"sha512-6xs0ucATRH7xMtQw/1dqyLXcoI4pD9ELouRLAHGSSASuWRDldSshjY/tvby9bugJ7ONL9Czb/ahKQrdYtPAsXg==","signatures":[{"sig":"MEUCIHhG5SApnQ73D1zlkqPkKpws+dX8f0Z4W83KPnnigWTlAiEAv+4z3fuCLBTlRc76EM3eXE4sdDJYVZlg/lGXNuu3Kts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TyMCRA9TVsSAnZWagAAkjUP/154Quh1D4490Zq5ZLqx\nzG9fu7venCQqq8o2CBpom7ZcKkLDdPvIK4SQIrBSUkq2IntMmTW/l3plSDLw\nXONMDcJaCw+WIUZYfsrpt9lIk8a2k+AHazhVxz0lNDbvpV0k3mcp+Xe4Wtwm\nAXofYazWttnTGsRuz34SkFmY8mFpaXFBMxmWteykXBykmj3QF+xIe4QNE7Zv\ngfXYI+ipH1UjpRtrKxuEIxtcUL+7iA56PQ0IxQgvLbYWB8ZdmqhUejBCBuB6\nZUx09xJMIBHu3MeN1rIQHnvqsQveiU7cbakMJ5KHsGJm7neOzsmAED7BOfH5\nrET7RbKWMsonufq2fbIV/tTGfSD/YzQTt9QAMRZrYW1CT805A/B83hgwtqXT\nI/eCkQdf3d26TCMA94yfFczHH8rwi++YMQ4ukYs0XQuBDYjUc/G90Zuy1lWX\n6lql8oWWODDKPisKYVOrICb6MGniFjDYWj85w+IruC/cDwCD6dQgMtFabqX2\nqSbynz7urwSroRlGXKPKFWLsTTLtZsqeQOu/py0jLW5gS7v5X8hZiQuovgUI\nH6Eokyg6FhauhB47MofrxPAM1TbU4CATvVJklVh+z1clKR/9R+JGlu6WsIeY\nYehARbB8bTZ5OCkON5MhPwyFa/hQMBFByFsX0z3oU3gcMZNYubFbOCFslvqo\nuI/v\r\n=xghT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/theme":"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/line-ripple_9.0.0-canary.f5f1bd86a.0_1607548043772_0.1256798005251898","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/line-ripple","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f0010d7d306d3e01756d69e774dd87e37cfe1a56","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.00f38200f.0.tgz","fileCount":34,"integrity":"sha512-DNFF5Lj8mJHtliyRAXx8hew7GKZJ/ILjI9seC1d7iUSOZ3f6N1UOZXy6+XeY8lPR5zhewXUSKKLy3KTnBXwt/A==","signatures":[{"sig":"MEUCIHcix/auLlpnsrJmv85TwJkcoT+0K7uBbZ4YbOL1GoTBAiEA6oQq2aKq+gGuvU3JknjziHiVDMBqJ7yElDm0lrFO3tY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05OwCRA9TVsSAnZWagAAAUoP/iM5Ud303HxdcJOi0vqf\nSeNmUFnDPH3phYdEf8bZLkThqDkgt4VbmzAbz/htJt+IKjPiPWjJrqVFyeS/\nFHd5+h5EtgomZbx2VuGKB3hurI4txiIV2/SXhXYti/spjrWL0GMEr5cxjM/A\nYM2qCtkweqsaoVnnJ7HJzknr0Y30lifl35prv0oFpMxicheobA5/AEXldNex\nt2mkI7PQ7CjZj9sxDaTNSFu9vb02Q1g2SYZoeMMWNV5JYUlH/utwh7qI1vIJ\nqOQB22P9CWlQRJ8ZMdhMfTAZvkQoC2WLnj4IWA7t/GitXHOig4JKlH/6GMk1\n6C+gqZ9q2fl2dvNWBiHT2IZidMwEqtjZ8xujYOno6OX1rRwyfVAb3WF7rfvI\nBxgP74s2oWEF7jst/ctv9OEP8jlIxNxjJnyAF63ZTrTApcC024hR1fL9S40f\nQ5DVd1sTpM8mG3NdLUc81Gi15RhLtEQzFHM0m2xMBJvgKSa0o05/QPdJgpIU\nlzWSlEVw4IYQ2G/+/yM8iF7szfru2aDs3gZMXCLLJRjgCSCGaoZHOn4WzrdI\nbAJJqmfNxcTZpcOAPmYiVztE5F4DPOHKK+m04etkzHt17k04KJYO0apUmhzT\nxCky/NhbbCB+N3LpnIofubTbmDsTLC6Erf0yj7IbCqRLo65nLZ+wI7gm3PzC\nU+iZ\r\n=AyW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.00f38200f.0","@material/theme":"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/line-ripple_9.0.0-canary.00f38200f.0_1607701423987_0.8890823547357307","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/line-ripple","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1e92420171eef0b0ee13d75a8ca525f98fdf9642","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.ac41a5729.0.tgz","fileCount":34,"integrity":"sha512-r0zJe9dN+mm/E8n1AtWFVI/sW6QBVFxw6stdvlLswOlYOQFSK/m1GjwQtB8rhcRp1Hr1XedISM5ege38gWk39w==","signatures":[{"sig":"MEUCIQCcqVW9BQ8NvftqbNhFYNeCY/BWnroI9a0kGC27zqt2rAIgV+NtlzcavGZ22k78W8rNdcxg7hLwBR3mui1fv0iHMrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0530CRA9TVsSAnZWagAA9kcP/A6UNwnT0HiOt4/2+f5S\nlM+olj9JXpz12PWbCqXItxKGRQ2fh/qcTq9lPr0LCCppykAIYVA0JGuGinpX\naUo5DI77Ru8b1T7TpcCjhnjfJ5bCZQHuzu4x1CFpoLizJEfN1+tQXDngRDnk\nBPZW4hPnSyyHRrAFkC/ecDHGSmRZhSFXjbYCLz7fjpfWC7A+2I81jivOPLB1\nX+Po2gqLN1JhsfZXdivjunaPd5OnGufBdCTf2ky7RLU/mcVbyb7bFJKdKPTD\nftQYLWzoGIZ5vAsnV4XG4DgkTnYSn/uqzqsv//z5fwHqXZNTX988Ro4u8+qM\n8nGhPr9B3uxYBRegr/KPJnT8k9p/+G1fN+y6fdKdLevIFlq32c5BzCDUiYIO\n5YbesyM8cmc7DND1eMa95NJy4VljNAvVD2WiECtAIKxYny9bfl9MF6mQyykd\nXrm8IuucfumIHo6dWuIWU+QPDJ9Z4h/2/8rLFoIg9nRnqH5Pa5J8ueMcambi\nYzhue3Yr2H9xbagvbPYW2+nFxHuomaPIoUsw5uFvf0+FvEzrSuotk2/Nn4Hs\ns+gKedtfj4G7jJElZ8UQQG+L6YR31fAoBrxiAKD++B/GggK6FQ5tznyDyWUJ\nvUNdsFLTQCNhI4BhtzOGmNSrBDHpLUwyvgKOk6tZKLVt0cItaxxEGEfszUh3\nNxET\r\n=/BQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.ac41a5729.0","@material/theme":"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/line-ripple_9.0.0-canary.ac41a5729.0_1607704052245_0.4246077696718822","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/line-ripple","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e42c99a50b54727c952e82c7e9f8fa86906818c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":34,"integrity":"sha512-pblGs6XRuuXwKo6WjboGpRWqqbIpfCMum0IQiNdvOIgZx7dAiMZTxh7XkKtzZTgk6n7LyyFow68OuW28pFtY+g==","signatures":[{"sig":"MEUCICrtawojM9/2dWTS22utxQnT4DNOaY6zJ39tuCEo8CPeAiEAiXxGFRIWYaWQZmMWuUNOrh4pKqQ76TLjmz1KE+PRKdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06a6CRA9TVsSAnZWagAAFaYP/jEM0CuaDmSVHY7KNrOf\n3s6ETyMP4GfiLKR5v2gNULiSi/mYVdqPecBXd/LM+crUrB6ZqV7e+Wpo7Zv5\nO7e3bugSYo3OiIt7p3k4JTErJjU5fnrfrantEZLo9Yqg7POovgCqiAwsXLLJ\nXxA/Q/37BqGnh7zB1FNEYnqQBRJQXjE7QppkYk8rBW8EgzKNwuvXTM4cbBtC\n4BVT+shpjKwut67nsaOlSTVcEV2gLmXHnerGZNUOotvzKVJLcV/sR73rtagM\n8o1oouFyPNTWrbBHlauyeh0XOOfcgOkCmhg6jjkfTPkD9RQfOaxWgn8RLVB5\nPhyo1RbjfDUYvCWsVoe90EPlY8JPgOph1HNtmd78yHQ/BylID6o258anGfTj\nZy0L5Fj571akSLU9EJ+wD1dGcRhmOQFdwLMPr7v/KuO+VVxgHI13cm34Pos9\nJdZJlDzONTqIEmi+PqMyFaolcnl8ErSefDq2x0LFV/Ivz/kK5XeumimiasCq\n+YL2zGf6DdRfEfpqfqEWAoipuL6aGxJAn+26bIVRIc0dPGOK/G9detEXMvbv\nG5+hB2KWBlpNheR+d4iyZUb9U5PDmMR/4nOMThtIfxvdpuxCtn8Sega1Mtu7\nL4Mx49bw/fANapIlKIYXnyPmhafs12r7hv1j5a7rTsskVMkXx0+Z139CQKk0\nthD8\r\n=Mz4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/theme":"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/line-ripple_9.0.0-canary.7fe0e4f05.0_1607706297850_0.8675251388520437","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/line-ripple","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d46d133de7154a98d8938c0147e28c70148e498b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.9244508bd.0.tgz","fileCount":34,"integrity":"sha512-c54/MBjGes2vnwZXkMCSbaVJa/krdKQtd/nTRGqQJDNiBoElw7FvvsxX/hFHJKMfT3bVkeHBAoJ0gVlDX7azyw==","signatures":[{"sig":"MEYCIQD3RKM9fr90dIkbzafGeMR/2VIuZ+h5BhwQgYUMtE8stwIhAN17RStfaI8KrG5E8m2M1ZJccxtJWseWiT/oX0xgv28V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08NHCRA9TVsSAnZWagAAY9QP/06r9fiYpZSV0Jy8aJRO\nhEzfae0OOjPG64oRdZ+nREPyLR72FlrWFqh88EYBvI0qIA6HU2LUybcXtj0y\nFpVFYY0dN8DbzWwltJPsMbyUAITpi3rgzL4z0jwgCxf1fp5qrz83Jv5Srg9l\nMpW++hDMLNE23hrMkQoV1RXytoYqCLX8BF5YgxuItYsCCZv3EdJ/SPx0JkIE\n+kVdEwjF/fUIawNpbwaLHDab5jqgwTUD3DQjT/cg8ken8lJ3fiqCW+LTQFT/\nMO6Dtjo8QVD6ADslScs6wvsozSVLPywvS0F2Dgs9PERxzMqrM//nTd8HOQFR\nyFNEek/7+JjXitw2hAfp2revTLNz9gVpcXA8Ihx0TIbCAqbZyPPUqas5uW2H\n5uZDNxKh7FWhMwCuZeD9O8VubuHqPGHB0O59Z4QDkZ54zkP1Q+QG/DRtZ8Cf\nq3ZRFGZ6aGizcX/L+dckuTUUDVkaAkg1CH/TWMIM1iMHGOPkeoa2XGIG7jER\nNAmmobpo+qsUoyl94TeaN7bBxrHHGB3xNaDo2D2UvzFFkIYlINZqYSkugXiz\ndRe+agWXPQqy5YQA6lK7v8EQ7LlciXy+EYOykHzMLZ2Pw0eeWczpxCnnX9Nf\nzBvmbj/oPPEaYM49qwNrTjV2e5MQLAsyDt77JDD+waBLDvLOScDIh/GbU1/A\nlP5b\r\n=nL/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9244508bd.0","@material/theme":"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/line-ripple_9.0.0-canary.9244508bd.0_1607713607152_0.8824913049826824","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/line-ripple","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ddd7dbbc6b149c3a8e40a3182dd839e3ec913fb1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.384a8eeb1.0.tgz","fileCount":34,"integrity":"sha512-+UITmAALVizdikXmLzdKhLyorCEX2i5R6zYbDcXAKtmlSxNlXGzamTiiDigpDctP5PUr0HRYwYtTUPHj1wS0WQ==","signatures":[{"sig":"MEQCIEAaRiKb7txGEz4cmL3gl/la96/Jl9UlOar1wuSOo/SoAiBUn7JqeQzv3V8rYI453ZrR+8tx5wTkLXuh7v0uNxhLXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j1iCRA9TVsSAnZWagAAg0wP+wXhuRuHAcGe+mx+jGmp\nk8o2QiJ6FEPY3qlGSBnHcRhFVweGu+NqwMDpuDTh1r+PAHitNQaG5mgk058S\npv5ZfJAYCfbW8c8Tp8a8yQ1QLD0Rwb9b/Y3r6cRw2dnzqQxaoVjjHvJcHgXz\nx+r+ZFifJHcJinFGS/B0cL0MJyCndivvMLRlkH19NKkiwnCOyIEMlNmh663A\nEW9XffRu2o+pOpX7AFUqdTL9zirxybJB/R3MT3BG9jNb3kJHm66xDSI5vlJU\nhFLCokswmEdLnoAzrXwPz8qi9wWeqrQgd0B+kkCCCU11dRAck90suqKeJcf4\nKNZrKrbgSebczybG5odwPX2vCzd2awfZz/AxlvwC0xNjP9b3jfWtDiWNlMii\nvz/XpV2ZMEfjsrjkJqkpPZetZnMTea+KXIjg3A8KwsTKQL25DBuqX85npnVL\nWrVjh+bQT4wOYx5lZLmDxFcblkJb4Y49xTnd9hj4h3c1E4rFRm2gnhlFJ/zq\n8CKBprx8x19N/mjECMOJAiFqbGyrR6c4bQmBew/XXtjVe2UZ5HE1icMNVIdv\nMhskwz7IH/UIj3noJbIyzsOFy4/tWUw7TK1KAGKb4aZ7nkYkNcxQvdEf9skd\nsn/z1+GFgjxCohBTgIDKgtrHGcaRQ/j7RLIpfRtZMVQpH0cuPwD9cUHSmsHU\nXZx0\r\n=buHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.384a8eeb1.0","@material/theme":"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/line-ripple_9.0.0-canary.384a8eeb1.0_1608138082284_0.14374871786123244","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/line-ripple","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b0ef4e13efd45939ab6151d798bc563e6a5f6a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":34,"integrity":"sha512-qUSJR4t4LpsxHR5tb8c5wRWELiYDnaUOeEoyHQ08qIzvZ03jKxlKw8Xwz4hGYV0vcJPp/GFU/EfJWPBDJV6rqg==","signatures":[{"sig":"MEUCIQCI4vB98As9UCboavFJMeVRla0ZO7ue37jOpDqek0L/CAIgJ8r8OH2V1FpPKALr2xV9J9rx0F0LxdSOV1+DxBjdTQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lF6CRA9TVsSAnZWagAAsi8P/0cBKHd3BOQFqWVxPfOa\nova0bE14D3tsaFMGkQ+HYvRnRvnYX+Mreo5O6IuW3ju/ZH/SCcXTcCMw3cr1\nZr/PXuj+QigTosFTodGwdekLeaL9RUXH3EgBOXBF+OMQBUIBGf19902J2fXo\nnscN1lpPyN8WpAolchm0W0bKi0G5nPIDoY3aMM7mjhgGPZ3YXEFQsKTqV1qh\nCGGIWiwXxI7nql/aMNS0IaRwuKaYrGFOgdJqO4ZeInHsPKeeoGRzDcDQTlGF\nnLaJFRGoZFZhpfphsXFsER1Lq+4Z2SrHMBvV6PBDGEzSVbwZt4hg4UT+TNEp\nqn1myqR1V3BkYjqsjTO8bCMBmY+PpnBcqJwKLqmMzlNUU07+T3WDm+EgAHZG\nK1b6sTwvenNXus8DWHWjN3m9z1PBNlaw1DM8Mf59EYLFG4uQYiEsuw7wzpMm\n9qrThmZayDkZ6Chak1xnZrGM0+gflXuRSr/4CdlgawJC1YszlkD8MsJXUUPv\n/9W1vARW9IrZhD6FUQVc0qeHhbBJXrwQTADpPhdSFX8m4m8JL0nkLRMXdyH1\n9FJ/gcHNa7Odksj/AiVtt/3WitZqVBgv/77FXPgrk9HRuR/ddvc3EamYH1Ik\n8oB1ITUhXT5Yo2CfVDx7xxHZT05evz31fSLNZHKSu46fsz/TMZxSvoOQq6tM\nE8y5\r\n=s5gx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/theme":"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/line-ripple_9.0.0-canary.eabf9d5c2.0_1608143226055_0.5949897156312947","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/line-ripple","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c0b80b11a582d2425b3872c759a2f64119344054","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.30fdfd06e.0.tgz","fileCount":34,"integrity":"sha512-/9vSFMQflCpNGcyzXZ694e8Ox4uVgfbikaaFriZo5P3y871NUv7UMj9CdQpmWOrkYF0501jpl1hY00JKTFp4+Q==","signatures":[{"sig":"MEQCIF7zp3CCnkudp8Ta9Mlopp9SgcxhATm8xLdlmH6SWqmLAiAQyoP347vqzzpPCjpyostDqduh5pID8utA954syTMuWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lrXCRA9TVsSAnZWagAABdkP/16NLP9eQt8S4aJvW5Sg\nlA9WQMF82v9nUKl17c7fzlebcmEO4j2ZIQA3bqteHDWwvZ7HKAR+QpXH1g9g\nHuORfnjgk1AG+S0/7DI8OxXj+1fRdbnTNQ8/8kIAvYK7Xp+1R733/REWZfBL\nlLmn+682eIoWTI+piyWRrCQTsqJ36sHBcsohKTA6ABiDvpRHx00mv2T5uSZJ\nCHK3H2XeoYK+LV35e3acpQAE718zUyTX2PdGU/plc75PqCq9VUAK83WLf/pB\n1QzjYaMFSYKtGXsv4LzDUNzsZK8nXgqRrs8SdnTPk8BUSv9k5lYAnXqVRlwH\nEl2NlFzFUapxdjoJ8JD85XIbR623FcBL78d43W9rcUzwvBteh5TUUiWHBKGm\nZ69t/aheuHsxAWzzsCLl0I5KFGWgM0L3r55+LfgszrImq3nb6BtHHAZr3EW/\n2ErclR12NMIkr+05GV/TzpjbDQHkO7dk3eSJY37WRFv3c53qijW7/MgeqznB\nYDzkj/koS6tHThmeHK0XZYGOS7Dcpic6YKchki9lKOfI4IKzEf8ZKGrwlT73\ns3q3HmK5Q0AMYXR1nyzCy/0NPZkPaAtb+O8kV0b36Tfhbg+dudD88YvWbz3m\nZBvaIFZrc6VtxdP2f3t5jc8EyQIYLaa+VvUeEqgkcx85cch+/zHyo8cOt9JC\nN5CR\r\n=k/bz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.30fdfd06e.0","@material/theme":"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/line-ripple_9.0.0-canary.30fdfd06e.0_1608145622833_0.20742610826710695","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/line-ripple","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fb61098017c60f87d263829668f246b505c1eddc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.9590a8f90.0.tgz","fileCount":34,"integrity":"sha512-eWfqq9HSFUNWEm/6bzn1kWvZU2hRgjnE7189FDKCv1od50f71LqEDtISxAR+6K5+xRkCY2k5jkQlZjfciLqLzw==","signatures":[{"sig":"MEUCIQCvy5Aq6BTjznJ4TNfIchyDvSPAEWAZ8Yh0JanXkJ7EjgIgbs23qiXvHE2hUZWsWdbIUtAXc2lG39m2E2xRNdc7WRM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i/KCRA9TVsSAnZWagAAf9MQAJ2UPy9h3kiLz1aS6ey7\nl8PTHIXb3B7MPlt5smcYCDoOncDYPrd1X54pj04oEFHM3jfQD+YbX+8uDTaP\nyZBaMVTbgeADiNfsqKhV/f0hyXCLDuQtlW8UCThXuJHWK5vLHfKX8vLvZYnm\nRrmWda1LUZgccX079p2ybFPNSxdRa4gMZ5Rm6lK85RIllhkDmiOV3PXYHtLq\nH0xlmcVZv13mc4npUMSFn+MxIg72MTiLEW9aUAYdjVCmZAENatmMUh6hF476\nc1Wtd3GmNayuxUY3k2VD7uYnnmySumCn8/nLaPA8ypphyFFeRx5zqa93XcHM\nYp/+c1j3oCd5m+h+FDJ3ZNx8Qm2V8dn9pB/Qq5KU76DtmNdCW9PZt5iwYSuP\ndnM5sICsBC+pXFYxIz42XXGdj10Z+96iNDpOoWzrHgGYUrvdKQTbpZshVLcl\nR+MN2xRSxnqRjxUkDa5KUTMn5nq4U3Zy+rGc5S4ej8KQL3YaaFVDzca+81/S\n0j1i3AqqPphHobSZuLqtlocavTSre5AHl88LzQ7CxuzFdNlj8Y2etlFiNgir\n4xjlKGGZa4FXkQoWq3uF4nI72P0ZVpgbTwgYSMhRUqW1ZHWxTdrmpTcam5dZ\n5EtGxiopwhTFZFoq01aWT8AUPBW3lR4HNUTFNY4p5gf9NC17SYuNkIcI/6ip\nr9Dz\r\n=bb4Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.9590a8f90.0","@material/theme":"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/line-ripple_9.0.0-canary.9590a8f90.0_1608658889780_0.38347292877311423","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/line-ripple","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5167b8fc3f350b3e8524408a361db62721bb1bdd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":34,"integrity":"sha512-E4hLl63PSQ2VkqYCk/Tcf8/h+n7epWYIvBNT3/mC/PPa/kNRPYyhHJ9KlsCxrYZztw2yntoPddl5mOOzzNPsXw==","signatures":[{"sig":"MEUCIQDEe/Mw5VfD4h3/aqxnR2lNhnOPPOlpMPFL1yuK7IlYTwIgARac6v/OpohYC5zBbF8IChzDVduWsi6jgLuOzcLV7QU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nuBCRA9TVsSAnZWagAACnAQAIOmsMI0Pl4JKs58Qz/H\n7h8wiPqC3puVMY5BPDJll6kYOBD/ABovYohsWM3GM9hW4KENJE7a8lV6jbdv\nZIWWehKa+eJlJEnuU/6BPwkl7wNQOJUP/jaQNU04t/fi3VZgDHaMJYtslfKs\nBDzMkhsmH3pL2X+sSGCNYwUde9uCAbnAza2GDOOKQcUJqMk0dkQp9l5RHRHa\ngKq73BnPudjKtwtKVQuBsvuKyWIRopJvKp6IZ4sRmvI3Z/Cmd+ShZin187iv\nmjAEFJCT3AQLlTjnxLGqIHLngDuRwXDbFkSS2yOJvumTYYtjhPBHKk03aiFQ\nJmRBXFquaQgeOQNeTvXP/7eg5iWB1CmL0k+c07JlaeVzs/gonWDnabmXAoHF\npVGKwzUBYlCXGTBp6fyxop8YutH6lC3JnVGlMzDM1E7wBPq6DcN1rb91kA+H\njNBrToHdW2DtbBj7OFqcEG+OJpBicU12sYciCP6/xzk3rhR5P+PCg9OFIqyo\n4xRdCFZRGk8/lauKi9mwp4pJkAqq+8bkXizCmvtdZNdnE5PviOcnIymTb+9U\nMLnhoIZ9hamo28JE+kg0SiV+JaIMzYGdldj2S/W+122naHJoCsFZ0KkzHHFK\nXf4QKdMIbCRijgoEQNIqLKrjFVR9deOUbYJ8q7+ZlGBKAIq4K1+SHREVLT0r\n3I3i\r\n=qzeG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/theme":"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/line-ripple_9.0.0-canary.f89d8b8f2.0_1608678272799_0.904933570992938","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/line-ripple","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da1741bbaad104635d17845220afc17504b4f1a4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.fb194dd35.0.tgz","fileCount":34,"integrity":"sha512-l1mXeY3FqZWnoL28YKMikA5TsPPmmsEE3fZSDgvK7AUNXNNuePvoE9f4La0UUG18Ljtojm5WB2yRJJd4SFPPEQ==","signatures":[{"sig":"MEQCIF75IbvUjFhxrobiDbB96aFprH6okqJT3JXyrt6Bgv6tAiBzfCwLTtbD1zh/eS+DsmmkSWkmV9E380Mks5fuBU9s7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kPYCRA9TVsSAnZWagAAYn8P/jKaknTSU7oX18blhrhF\nHSYf9DyCNysm9mW1CFMfViLPljySiRRFHwUD0ssWOJ3w9oH+kHfTYdb29Ozo\n0drPW1FVY7qOtvkIvk3FV5phdrOm6wkm65tuuQV6HlhdxlwItEP+IOFrRo0Z\n2AvDsMTrXI+lEQ97PLx8pjjpOTfaJu09Qxf0mUu1r/b4av1jpkt5xdvE6PdC\nSVMC8t1/zvgSmqWZkUv9E2ADJAEJj2B4SBCLOYPJtI1j8M77Nyc5sO3wgY/b\n3QEPrOox0JC7+aNcr0sm8ttF2Zmr5fmKK3GuIC7A7jTa+5I3YBx1IDc1KtNQ\nZJUk4CBGFj7+dbaQC7o6RlVsn2BRjVMSzu4jTGaeEt21ATMBontOinQbCvzZ\n9uQgZzlHS9jgJlbElITVKQ9J6NzA421lrp2tGl7RIRO5TgXobEI78a2l7Oke\n7lN3LHURlghHWN3jZsL8Ik2s0ZIMfk3HOyE89ZT3c6U6HMft6xtbundB/ItD\ndaajZNuvMZqu8dNWjksk3QdmBpf2EGNqgvGn8VSp92pJLNAt572rlnjCvU23\n1LP368kMWWlmkVqgl+7NN+0rHLibWFYSaD7T+NBqvG5bDGPUPTOW8HzHXwEX\n+JuhfPxp2wSOJf8q5RdKHwz/4FKk+6AL7qYpGrQPG3AI9haFT8xbQoc7K/Q6\nDfCQ\r\n=G+Um\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.fb194dd35.0","@material/theme":"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/line-ripple_9.0.0-canary.fb194dd35.0_1609188311648_0.013663434304475475","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/line-ripple","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dd34fc3b65602056a6deaf286b5ec57bb2af12c2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.64f36e287.0.tgz","fileCount":34,"integrity":"sha512-XPrARM/ju7zkWcMCGkyog7SOXoOZOJzYJK64lg4lzBh6GkJNpP1qLct1TNOJlmFZgocbahXcGayLTL/174Kdvw==","signatures":[{"sig":"MEUCIQDWiMyRPe1dUk5DuMcCGz3w+Rebc7BEYoD2kpGwJTafmwIgfNWwnxxNa2x5sRFtnUgTDNEZjqyf6/ZGNtQu9ETH7CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kkxCRA9TVsSAnZWagAAH4AP/218w66YK1OvuCnOotFJ\nm9+epbzSCk+aCZT8BNHbcGSWrhJ4WZMgIf5IqPBOfhy5EyQZZaDjf8R+B/62\nN/0mFYUkuwIEkF0TvW3uoVicgatbsP4AVmYfq9kt1o0I+BTYp1Y+KKriVOjl\nD1WKSoc/OQfZF0kUoOt8n6Qcqq39oWocOuYX2O+bU2ySsnWqtAn6Zy+Ep0zd\nGA3YTq4O6hjTckf07YAzEWx8+lt1LfFxsaU8OzKw34qVieKA6Rjd+31URBxK\n5W7DQx6hOOfBCsu0mCb0LhvD4KYWPbWiLUlrEsPw3GVUFGTnAmmmQx/mDNyx\nEZRhPUXM4non+hjbBJh86nlq8JgyRG+jn+d96O5Q5y3NWvrUVM5s4Tg8SlY8\nUDdxoZ3Qo688AQokZj/LWgpHh+gRtYeneYeBIYDWhMiT7i3M3qURa69PaPcm\nOUwH6z9S876MYKgy6oZfW0kyWTa2vDRLfTNW3GrRAKuyr+l+Rma/FVEN5INJ\ntb3rVd15qlgq9T7yXMNakMPyJ1jbr1ffZMSAe715wStn9bo3+zUdHhhdM8dy\nOBtCy5PmCf6newH/YrGOC9QZdWRJpOqj4gz6ZamNmhI08hUPRwB2Qh9uJGx9\nZW6PNl9yL9VjTuXQD7YkyC7akAfT8yOWCtb7luBXqV4pGGgIiw/IXAa2S6tu\n0saC\r\n=sdk/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.64f36e287.0","@material/theme":"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/line-ripple_9.0.0-canary.64f36e287.0_1609189681176_0.4355410780628366","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/line-ripple","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2d512a29b562bc9c1ae2f180391e5588fc010b35","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0-canary.b7bbe7022.0.tgz","fileCount":34,"integrity":"sha512-ApUUT1UUb7tzXwMtoY1p3SEKKvFFUn0g/nLgjZTcEOwTU3nXowZW0RkLlTgr09tZMmqgG8iYS1mY0wVtPK8CoQ==","signatures":[{"sig":"MEYCIQCYUJKWfLUiuJ3wQIzgr1IFRwmQip0N0HWA4+m/FjVWCwIhALMk97SEXdLW2jGXR5ZbTybg4xqRT/+aN3B3R7zp9XWW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63nFCRA9TVsSAnZWagAAfEcQAIeHc6gE7gfbrXD8w0VC\nN2SdYJSJtGhiCurDyPxrFy7FXptPWC9QKPdx2gG+KRE6gVK62Kj8FOdYaywM\njCsNXeUFB3tLnLwDie6Gv/WUMAYn0dfpBRD8a7kVTsePyV/9qtABkYywJvOy\nYQAvLAubTAhVehs5gqJq+kuOxJhMShutV3gemjdEUECzK2YOmGKj//NKPCrI\n7ZwaCF6t2lcDqdZ5988PvIUztI2jxR2zBoWfk/ND0yi4tTVxPDsl+NpVQhwH\ndLaacUMzqomz9CovJ5pF3xWLh8UkLn8VGl2WoZA5Y3dugV4NvAcPHp7hAzO3\n/S0i1AWOwn/4caJs6BcHclLay9EIAGV0AIr1iLwOchQIPgaIVbnBTMrYwBPc\nAiS1U8gFltwwj0lFjpBd/PBEInjiHSug2JYpfPkhVF+c9thS41V+KodgdbBY\nAbBXYYm1MrXol/PQPiYA8P/UQZdW2S1+UzKHZf7CnqtpDKP0qbGLmSRs1RAy\njAJNSmmGFKEFZjRZJkXsH5SJfmPjW0zyJfq+L7doR+0PqaFXrG7ePay6mpdD\n14vSGNCrAuKke8LR4GL43ImtM0Pjkt5g4/xusbOQynSFoF1eZxkujiywsijT\nLinDD/RSRZowLYGDiTHspmKJpkRi7H8aBam27RfEQ3pgJt69UmOSrw5QXWGY\nFjxv\r\n=TCtS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"9.0.0-canary.b7bbe7022.0","@material/theme":"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/line-ripple_9.0.0-canary.b7bbe7022.0_1609267652601_0.0836678888654625","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/line-ripple","version":"9.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b7cc2aa82cea4b59d134b2a9c63505c48ba43fb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-9.0.0.tgz","fileCount":33,"integrity":"sha512-hCIKLMSE+gccRRKRiDSPYg82m0enuHqoiahmNQtaVin5Qb90YteuipwFodkvW0VRnGSo0yFfhC033Hly/Nkjuw==","signatures":[{"sig":"MEUCICOjuAUSEOXMoF3R1x3Db8Zvx97u5zLJ+meXnQK1goLFAiEAigngubzbO9ElyFbHe+KrtN2ptCXGZ1DEB0r3FA0LN5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dbCRA9TVsSAnZWagAAufcP/3LFn5FrWEpZqvMcR5Fn\n7mcvvtQF1Fp6l0weltVXVWIhBXD6OqGsjVDsR2RS3iHFXM5VMt8i6Hc7e5Aw\nKeRfiF18QbrNUh0tp/6iE/mSXUMZPoVEkbNC+CSThziWS535b3RsPVLpefQX\nk0cLjNvvezbvGxx3IwcN3sqIdlgroU0IV/o3hm6HtV7pW2vEUWb4o+flfO0x\njPwrmTlOoBe+LTlguvIw0ayJ+TBDqsHgCIOLIgWLv8BCYwgCwIZ+uIuppU13\nPG7v/Sky4JLYc9ptTOeTwma9taaOS0eCEC7HTyK0kJS10Zyp8+3TUn0KbM1o\nAI/2PQDjEsycPjsLJQdk1OuHqx4o1ed2/lWG4/5sIJeuHItmlBsHAvq8GGyc\nq8ji0kyO7qnyXxNGXUtlXk8AQTZZ2R5WAsK7OeR6DocI/8CtlXMT8N7yofNW\n88A7GbvtHP82i7fAUEJ+dJ+SLCt+w3W5E+W0DvmLS4qmw5Kc6YuPn7Ha2q9H\nII/aYvv47KCEEQzL7Oq/5fgtcMdCghb8ArieZH/7N0clfv4FajZAqEm7fDh8\n2N9rSbJC4S2Bywef7ZHC/PY3DLGjepj4mFRzRUv0ISYRyqfdG65rjgnv80cO\nOxh2uPOFI74mDcHvv0AAIuf0kzUtaW8xFByjjYGcxWMFTnWX25y5cN/8G6Nt\nO/Mj\r\n=Io4m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"^9.0.0","@material/theme":"^9.0.0","@material/animation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_9.0.0_1609271131112_0.5064047898677584","host":"s3://npm-registry-packages"}},"10.0.0-canary.555aecce5.0":{"name":"@material/line-ripple","version":"10.0.0-canary.555aecce5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@10.0.0-canary.555aecce5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cde4c3b77f98b60f07e625cdda5577fe40bbcd86","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.555aecce5.0.tgz","fileCount":34,"integrity":"sha512-bJunEG1J8t4rMmt1Rr6Xpsj1MDkjVMjARcrn0a1E5KkPYcKk6tUF7aaSI1lyUIh1nrrzONPRwk5/0xxgdrh1Yw==","signatures":[{"sig":"MEQCIDXYvmysGu9fW6ylDc0gWJKah/3pHyiFRmCMxhFsh+EnAiB7R2EzV4DZYiXO8Y0TZT2IdbFuSq5I4L3MwZAzEWLQqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64dmCRA9TVsSAnZWagAA7acP/1MBRSJ7VvepRpQdAagq\ndOgwtYQpmnCGd0WW7WjusAW+mMFFNSbK/v/dxjI1O1u/FsJmZWXPMYkOP/po\nXM7drf3gkkw9CSvjgf3ssoQHFAtAfIDmc3+zgh8rmGe2anzOUx9rAiO1ZtHg\n6g6x5to06u1BdJGpg3lulXtVWviNAxH5XQdU39Ur4tApSDi6+w7wPtz56NxI\n7+lHttrNye3Bwsw0vGicWHtWJW7N0/KnsQ9zhhgjZsanChQynt2yUOYotUld\nxvRXYivpfra+obE0KQbThkEM4d834U4P+TYTFqRqHhw4mODnwGQUbgyat94a\nXd8uDQKUT2gx/3NqQ7AWD8WTaQxjZuniAVtMZH6amjOZ6rVl/+nfGqVzmFgS\n1BS6tvtFiSq5RQuAwRPXtsE/u7sAFlTQnCRTlzJ9C3SjEIGbVuybCsDdmEnd\ndPRXhdT4rFBNCmVgOZI+Q4/95Dq7Qa45wGo4cYvO1e2J693mWjzuHUVOmMuS\ntwe8p+v2rfrJAg6+94PVxWlKg62SKOApV4d/QrvSgjIScFaAbbok0HL8qwSN\nR2uQfFi75cLgnKqEZ5qOA6CUl2Y0KU2Hbwgl83PfszrTBNMnvNTld3MDtAuH\ncI2qKmDccbcyRmv/jLISGpEv2TwYgvGLeWBAzaReh8EeIfRbuNOCa6Kozjb7\n5e3y\r\n=5tGf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"e455ee4f81b05c032a5b779ad5dacc2b952e989a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.555aecce5.0","@material/theme":"10.0.0-canary.555aecce5.0","@material/animation":"10.0.0-canary.555aecce5.0","@material/feature-targeting":"10.0.0-canary.555aecce5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_10.0.0-canary.555aecce5.0_1609271142118_0.32086770267568765","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/line-ripple","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2ce36a61a1e2858fe35a16db8e7e15194394a1f4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.776c18681.0.tgz","fileCount":34,"integrity":"sha512-VYkIsyqxiH5+40hwlc/Vs4qIjA2VOIPG2X/vq5XgxQ2iTfKRXcEJFq8Z/mli1xYvUaD+3c+Glfm3gMXxacbv+w==","signatures":[{"sig":"MEUCIH2dMfycWsE7ZKJ+jY/s6yfdM3XNprwLJtMkH+HIKnrNAiEAl16RR8i/CSYHOkMjtmh3F13SzDEaAwKhke1rKVA2C8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68xOCRA9TVsSAnZWagAAu+AP/ix2KJ/IsT1LF8C4rf20\nir8CpU8jQi/lr4E7D/br33R74/zWZ0Kg35k5eFrAsx6v4L/8WCU1NMDanTic\nig77kDwk3WjrhhGVcodWyBgWDephG4iMrpt6iTIq6VYXeFOkH+emAOufJ5Jj\nsOJYKecnF7XT0VdEmlTa+mPUWBlFCYPONP8va6o32m36R6b0LOT64wRZEnRi\nf7mSkoF8Nmd6SZifTJrsebjl3Ucx+edO/UDXU5AgLB9mmNMl8ViCpHXp0CIf\nUX/W4KDz4hgI2wpq7HYs6G0XEGcHXvMVAyPHCIv/caFlvov81TNrTKpNafn0\n/Pg0k2xh2xPD3QO8v2L5vrxQ+pm8wtjNQdxXJ0OkmRvxxHAhgZ3eh7OR8oEG\nASG1gloS/w1myZ3vmCVbvQq43tEX6sFNiV2Thf8E3xqbCKYxiZNQzcJu3sz9\n6+ATLCAGey3iGpa/IV1+1JPMZGGii+fqdQFzGOwEj9Ip0ZUtK/dgc6KfMdei\nE4z4sk5jkSY2m3Kyaegr8HTBM00piLqp05WStECZ87/TBUV4YSQHj4BOd59d\n5wNVXNK8EkV+E5jh6tMR1kQeNuGIClz+DKYB6J3x7xyUL8iBygjiSjm3Svld\nejLGxlBcFDNOmwv2tFE1yT4IjZMWO0k8QJzvPIP+I1b1GGhm8+7rfpGa/UYa\n2kZO\r\n=kh18\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.776c18681.0","@material/theme":"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/line-ripple_10.0.0-canary.776c18681.0_1609288781866_0.6903455217943959","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/line-ripple","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b01ce967a4c0b380aaa1d620a3cb4934d61c6fad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.671d72d95.0.tgz","fileCount":34,"integrity":"sha512-yo4tV0QpbxEUBWh6ulG7isCeFziSccrwLeww6iOzpX6edVjL+ys3NS7+g4wRWQb9p/OXuLVraZ8RSu2New41Ag==","signatures":[{"sig":"MEUCIHQ3HTz/yTnQ5E77h89gC2NxCkif4JfImWmYqxVR5L52AiEAoTixd6CucC4bFparhL33sXu0Iaa21967LQJnEmcYGmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N7oCRA9TVsSAnZWagAADq4P/2+k+DO61QyLFB0942Ah\nhuhoJbu9QEYua2pTEjlssE0xaiJukA13+M0Kl/INUjKi4cxp5RZfgYSBq4FF\n19/nPbxbhprddNI5ybbvjBin0QJ3Ut9LUOS3wG8Zl015XTjuXJiL8mMPt4Un\nr9cjDN2Jb2zPbK9Gbnbd7JANiTisy/O2g6zPfSSyEnpIq1Qg7F149I83UidY\nODiP3B48F9YRWtSNFgUIR/oWF6ggS27uyiPQl5Jpxmjtqu8PaaqOb9kUFWRG\nqbHjVnybfv/KIM4RHgn8hTuCsxolmjbulXYmtsyWYc3PftvDMqQbN+jfvNOk\nc7LiMatPklUjHeqmtl3FkcHLSHCUqSh2R6hIE2MykD4kc7p6C/3v7FS7VkTm\nhXaZ/YE4VxofZrwGgVB7qAI0ok0fp374qUbftcZkrnfG3yKmwGHTc50JBCj6\nAJ4y5XTL48jGQuL1Bmc016JD+4CD0l9Qf+X2rpoqljkkI3Xh8OTBieGEB7pp\nynhhE29k4Y3vmHOd5R+v0fiJi5DTHqNASaSPgfuhLZDrQ7+5HoOfxQxTwK98\nw7TLO8pywbLYX1XZIrHz0248HFrfbcVMRrxUpGBZ8MXuVabVle7KGFaP1HKa\nZ7kydSU/7Zog6rBl6d+e9Nf0UooZO9ZzDuBwhDvtJbiASbTgoQJ2xP7hQDes\nsR6B\r\n=RJUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.671d72d95.0","@material/theme":"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/line-ripple_10.0.0-canary.671d72d95.0_1609359079985_0.9704668015076692","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"09e3dac1d0d5d7e37b1b1b36cde061908ddf4178","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":34,"integrity":"sha512-uFFgKw67LvCh5fGZJ0p0dKN1fdHAQ4vQRanUHtgKONjYIU0n0EVTPQ8mjUk7DgkFngFlzdW525DC6GqqKSttkA==","signatures":[{"sig":"MEYCIQDwb+jj5U6uoXKQ37Rv55uRLW13a21Kvwn7H7pl20fbKQIhANGJ169ZPfw7bavyD8xej39MXGRbEWD8RXcjKQvqFNrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PUYCRA9TVsSAnZWagAAR/oQAJdqgAIQjyXp/GZ4zZR+\nzkkWDhIlfOD4wVFdkJBl3do97HdJ8UbRjecdoWqQo6r2IGHOnCVGgfMB4Gsb\nBPSxpfOiyV+g2lBIBtz7YiZIpxwa+4+9wGlLobVKd+k8EaHFLbt2nQv6naqt\nCmB5fZHxF943Ag7pcCiYAcpWVUct3HdumCOgJhU/bvrZEjcnkRyjUOE20S9/\n/EuDYAUybTJ60dIEsjYmqfQRAmyzC2+dyqUYAwYi9HWV6GNbTT6W0tZSWLut\nFjP2qdPds6MJvH0tkIYBqOchu5quREd2asiWqpRF34rfLMHR751vb1YPaurS\n6G1EKB1YpYHaiftfeRImDVwzJtVomLpdAS7Q26MXkanyQ74i9MDMTxBAdoKE\na8+RIfAc/Rhqz5LrICyb6r+OUgt0OxkyEwUxt/kJrjsQN8LnMTl4U2eCIl6w\n48AMWVjo8+WvnK+2xbYtv5X6+F6+j5JbWMMW3xVdTJu/O2dR6jUaHWqTev9j\nwomFKC3nWlfigaISaK79B199j+obPGPT8B36xESoFEGF6W8TsWnFsBp7MDJz\ne2Om4eYK8qDodDXFE3QDCmIxvXD7IGowIk2uvdB4dlygYJe6BAU1cZJq/ck/\nguIOck1xclymSuTAQ59JYFsTojQojAwSF7Y8ztONaHQWRqQrcp6i8l6wV6/+\nVtrh\r\n=QhyX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"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/line-ripple_10.0.0-canary.b4f5a1c9e.0_1609364759668_0.08244735665594782","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/line-ripple","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a43ddc82456a4fc52ce161fe92de1cf7474cb03c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.a94bd8deb.0.tgz","fileCount":34,"integrity":"sha512-zKlvaHXXk7zEM8P41/xDGEi5zpEccvZgtde/lpAwzf5XKXIwSQV/T3KK+ZqrhQFDmULX6BIovfxhsqd8RQPwuw==","signatures":[{"sig":"MEUCIGHfZZC9wSkfXAdUEzx1a0ZaQCLs1XKAXKcavUFvmGIRAiEAgSdeqko369WIbWX8gnmxiYD9h9M+hMOjJCda5L+g7zQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PlGCRA9TVsSAnZWagAAlZ0P/RRbwnOUu5n9ln+rLMKt\nmGEYpzNKeofmRAIMI3s3yAfGPv9A7YYENJFh65ACb9mmPbJPqEXvIXMerpjC\nRC9bxaJPSXctshpEddkvRySuY7XlZDTnTn2sGoywXhYFO7XEmNH7qAR5i/JP\n9nHc8ogAkD7nh4MGK3K5u0Hghd3Jp/LibC4plvkWN7tSDzZ5Nn/+Ez4uj8Lc\n9LZNfWHH6jAN1eclrc3MUo8pZjngqJ3KEsWAvdxWYbKmbCF8Mr1yfV1oWqz0\nd8EIgJfjTwVlqaD7X/ww6T5B4enT6o0WGrNtJ4jxki1dgb49cKnWqWNBin3S\nfRJfeWi4Gf4vJMwcOoEDVjL0LYHrDKBhBVsW1zN7TmIQzuKd9CiAbjIYpfzA\n6XQeawmg2JFkizWidvLzd8Ffifn08CaOPA5l507bc8X00UkyndyJrmW+Oun5\nwHfTmpAgbV/W5A82+w4kIHgNfYvRTwwwcw9oBWkg9MbRO7C1C+bcPUZijpW5\nDQCXWcTQrnMVt8reqi7AchbLjdfCoQ+JFzePHvkEYDXBQyg/2WhrDAAnWxkK\ndAQ6DE90VT6L3i5vdUYD/NQIZ65G1fwQEHJVoAiziQsXst67XrSaXb0/w6m0\nTi3wlGtbOwxz5Pvih1A2ptrnhOxGvpTgsvNUDspLY45Kco+9x0nipQqXFYMs\nMui4\r\n=UTg8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.a94bd8deb.0","@material/theme":"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/line-ripple_10.0.0-canary.a94bd8deb.0_1609365830448_0.29424458568139755","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/line-ripple","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b83af58a8e6441938dba907b6723edf6cbbc649","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.5d128511b.0.tgz","fileCount":34,"integrity":"sha512-3AODZBhoRe+E8Y30wCgatJ2cZLgmWsVJY2Bi+QFJSk4rePOrqcSVYZTcSznZHiIrGEBFQKyl3+jVcyvDAAAeTA==","signatures":[{"sig":"MEUCIQDo3HsTxczHorXHgynZYWmWI+i8SjZsm07qfJ/98knkmQIgG/3OlPmN1zzWvURdcnemviT/DrYjnqO/RcMcqa2phwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PqLCRA9TVsSAnZWagAAZv8P/REfePWYEtV/przFvRrB\nLnnt9oZ++80MdOeSf3hMxHvLYVBDPf2dfIMr4VQ/ya1EtID59hsMvtZ47BGA\nW2QOBp7RWbDF59Fgu51ooy9Bg0pJ6illiQGWYQ23nXaguKdXCCSTG1/N9V+y\nZ2vuw/z3MUMmOu4tFNAjxhTtpmzf5Nsaw4EWdRzM5lBqlEi9q0MjdO5RTDE4\n5aRHNrdy+wWNapfWwg3IQDMOGBIX8XSOGDGVkSttt6ZlSbG2V4sUVPsy8IKn\nyWpasaZ/KiVvO/HO10PoaBUO5TAYcHVYm7nNneYji3iYSOKIeHZVGGa+LWwg\n5o/qyidxBT5mxdC4SFwRoRgNqOBeRDRlpncYf/V+1jkiTz+ooJu9mN79fFW5\nKbgmyD4IRJ6NvHnTmVyj98DoNN0U5FwYVYUMQvHZfs8GlZYk2CO8IU3j66mH\nNRysrobNjtKjTG7qokk3mXPaFSv8yZpWx/NWQF5F49ORMDAVqh9jYEAdM2rW\nbzOm6a1QKslURJJO1gGkGa4NyNM/dBZS8+pojYKfUGgG0wVgjueT8t6Hf+OK\nt7vPCl+e71reUDedesilF9j0VfdcviwkgIO64lqIIs3OQoj9BcIDxRPrnh57\nl7tDU12kB9flx0XFjJYpkSpBWqc8RlYa83J/V+LTeYx0HNBt2XgzWpXp19TS\n842g\r\n=3teW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.5d128511b.0","@material/theme":"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/line-ripple_10.0.0-canary.5d128511b.0_1609366155395_0.9411447267139774","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/line-ripple","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ba5d2c99de2a879866d7ea1b81a5b99c1464ae00","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.365c69360.0.tgz","fileCount":34,"integrity":"sha512-NcL3gxKiW1lkdbZolc4M59CkGKj6bYYWD+3Vf7NNXfzCoAlG7ex7eFpzCl5GnMFaxa+AfSFz8hK2MYuwPXgPww==","signatures":[{"sig":"MEYCIQDRSSQGS+bVIvCJOfKex/4J2+rwYtAQGFnRJeWNUeFH4AIhAI6VSVLUp2v/rfCxDb2CafxfENtkc7mNb3+kBzocu5j5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KZDCRA9TVsSAnZWagAAyuwQAJw6+1jFuIOwnMQSjXPp\naF640by4dM8gSWKwcpbiEwFamF1k+SZ/d1tpkn8KGWdiZYRMYDZ7EemlKJYw\nygbpWeIj0u3Csb2cawjnlblNoJ99SAwWUjDN4oqTz7jIwmuyVM3RJcLL2fyg\n8o4S09Vfax3C4LcxmUKo+jGr8stm23wIa3LhusAzSVbPXtZWEOEvTtUvNqi8\no+VCLLwi/RFF1jYUjjTxCy8QDKy0pFov/mQ/KxSeV1DQUHNKyqK6hy7RrnZv\n7QKp1D61sfga+YvxwAVR0upWVedzWywEwutBJYAePTucpK14jJkg73kHiFTJ\nCdlPgeaQiIvWtdo8KqIjEMDyvIiQCgFDg1fWjomiSWM3yTGcinXhwnK090XD\nyNc1t+gZ+QO0vS5fW3TYUxurEBkrrSaRiaHIgOeSLchST9PtHshvCaLVN5sp\ngxoUe9LNhzFIhO0uRc5vGYq+jwO9f5aSSwFqpz7+HeSaf7E7UkThYWNA158C\njB7YVJsefLT4Cld8khVCIkwXrmQYJrTyw6zELwGsV8+FJ1HCO0GWXRwyHKQe\nlP4tO6qMuRbp0QdIrI9o5sL6ImOXfL2aldBtP7vmROocrn8QP3wlyajJnENi\nNkIIDQ+upnOYqapf8Ev/ea6nKR+8EUNrOIYXPcYEhj5jqQtdY2Ag2InC7bgC\nd7EW\r\n=W0wV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.365c69360.0","@material/theme":"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/line-ripple_10.0.0-canary.365c69360.0_1609868865935_0.39855397339784737","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3906c48eec76ac4c2a2c8e1ecbbae71621bc2460","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.700a8261a.0.tgz","fileCount":34,"integrity":"sha512-eZdsrLfzXs6WyrdUy+1VEG3Dpew6m9LUSAARye04bdJmhXKSqKWm7cwuf7y6boSj7P1WYPkx9FcRP22TtepuCQ==","signatures":[{"sig":"MEUCIQD6UdSGjoBCc3NWGPM9vAhly/U2FQJK+YseUqs6R/4WywIgXomurzMzA0JRG2jfj6uR7Au2ink+0EjWZi1cOyHdgnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NNRCRA9TVsSAnZWagAA0HYQAJU45fQbUEB9/TFltRNI\nRmpj6HO7r3AqnPYnvsJ2jRvlul8tw7CFjybc3SxaOIWXhXKntfOPS4btcr55\nvllGOd7VeCNnpgO7ZNKBh9uGbGsoEMgNz7Z/AVHv3N9WD62myO6KL36w3Tku\n/Cd/47OopSmiQDLedTayKnTfwAxRNTAJ7MN6ePPdDFT8viKynlxL2GNQ0Hug\nFeMiMKHm4CZNVHlUCLQFBXbDcTvWXOf95vLLzWio8uHBwMF9Gr2i6n/XrxQj\n4eMDEeKtU6RxnT/Db6cIPj41Gy6sLlM7TBXOuZTrBsIDMNNUyo2o35y9ShUV\nWKAGDUTXnz04cNMwMJxC19dlr3SmTj9fn42oZoo9VyopzXKzIafqfriR4YkE\nFAmkQztTPJ7sFKfucUvXYpeno7Nux+v0z0BBmR+VQpyGn4nvhT7UDFk8TPeN\nKRHhjTFpp2WtITrnDNWC5YM9LZ+C6b1gKXs4HUxcLrOj4+rqkarkPVJpzFmW\nahLW7/OF+vGnDdYb0Ra0fQB7P8uQDS+OM7E3ruztgY1P/H/NzM+79fOMAUki\nfimCtPJl6M6mffc2cjzXg+X1ekop1Z2IA08XVTu+xKarEGtIRMIP9D/l7cMm\nH07+/4mVY2QlcxK1ecPUBpdSFYUKqY1dHHV+zaYiOkRFye2cE61XWBAGbEDy\nzm2r\r\n=/knj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.700a8261a.0","@material/theme":"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/line-ripple_10.0.0-canary.700a8261a.0_1609880400492_0.8778089633636468","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/line-ripple","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d04feb4a705757dcb6769b5ae168eaa8a4d3d72f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.766981c15.0.tgz","fileCount":34,"integrity":"sha512-J17XUZ1RvpKPGm3OTD3CIRC20ekqwKF4iN4xnhiL6VrWmlIP81BR5LbakzM0hWHSc7xs5+r6JGb+n0zIkcBkOQ==","signatures":[{"sig":"MEYCIQD+NNmBimMlZxAJvBCPRYPRJ3ZddLdrQjwcuJSS8KmKvQIhAO2Tn7a+czDblS8HTheNhvgssZaRAQwf8XVlt/Ah+VUA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OquCRA9TVsSAnZWagAArXUQAKMIUvoUThBPDVpfvp2j\nMxCLA9+FKnfE1KVa8xUi05aJD9TQcdXHDjpC74aqGvo7bgRdd7yDvfVqUDta\nAcmGOU6FHNPAfX64C7NcwysNuZgZuIXIjoEVJCfAsbuALnCiAU81wERPsO1H\neBozkqW9yiUOFgKRk95Dj0x5VTJuuFVb4OMB6QtuHR++Gpu5iYaJ7DLuFhqG\nNXqJpJ7UGtFWE+NG0VbGoWMhz1xe5rYfKvipeXZHGGA8nFQ2vqHZo2JNvqvK\nkH+kpdrdE+VNaVzTMRuCT+CzLZRV95cJ//+klSQ8QQ/o8DqKk7x8xiw6kwtM\nmasLfWuGFcXrQmesfSUEldBCmgjeBKKS0QvP6sw/1L1PnLGXAu+r4aV6t3mP\nBc66l5fkLHtCPAl00TfXvaW7VhQWQKVOJXDd8WDvsYZNsDJ4V+LCKhp38qHr\nP6COrZ5ISwlRzALNxIl1ratDKgqkVXeVKir6GdQ1hV2sdta+06zebKY8tcWz\nirLt8y8A7150NRCyx4YnPmMbKt1ropfCDgYKkSMhGUCYrE1ZSvCxCQog7efo\nY2H0tXbJGPQskbaUXRgsrSyfz6q3sCiNyQflx+cQpM0riaMI+ukot54qTA6G\nGvD1F9fzo9nSwJtCi3rZxyJINBGjUeqQ+5ZB5hvP2ak6XFB5cGNZBBLuybkq\n22K/\r\n=oFvk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.766981c15.0","@material/theme":"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/line-ripple_10.0.0-canary.766981c15.0_1609886382157_0.7344451626775328","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5d3818a1b751686ec2fd4157027d2686f5d933f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b28c576d9.0.tgz","fileCount":34,"integrity":"sha512-k+UNLgmp6Cde/LYv9Yr+tQBeAJXQ4mW3+s9+kgTZ2FiN63STMzo2Dbk/5s+b86+eR9UEJs+cQczMVNivaicO2Q==","signatures":[{"sig":"MEYCIQC7oqsFquQ7mcMo+PzZ2AsaDLHrUt0WKi4yUlhEL/w1XwIhAMgupGtwfb5TaIOVuDbzSKSXrCSrXE9deM0SFcsM69fg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Oz+CRA9TVsSAnZWagAAdvIP/ROJWEbLZV8nfi/5G+dL\nB74ZIH3osBvQXUkdnpBiW4oeBCTIZHLR4ZOpFeRtglHfiNAwWAlmUtFadfWD\nihWipyaqlSDEtOm8TJGG5+DqJqoQ+uGNS/ph7rx9Q4erBGULQ9JvBQefysK9\n57YEXmQcw6pe3+4lko2Va3MqWD8IJnwu8e7MrM2cpWwo4GIrnQPP3ooN1561\nePhT9TLcov0QhVxaTgnpxfs+801VPAfV8VaMOnxgr8wpcPyCkNvOT52/TfGG\n4zunxur/lXjkF9gbS1MxUGGNYBCWO4JQ0C3tHzzoQhdxVs5YlzlR6Fa+l1TR\nT+1EJsOktrZfI0mvwALF9Tg8QdZR0zo91x9wWUzes+nQpv3yM3OpB6PX3GlY\nt0nrno8uqjiyzryucuS77JN3jk6NHES4c79nnVD5k/cR8Sx+/uVta2MnvQ49\ndAvm3a6wGN3CQO2hBBS46U5FzExKPvKAlqCnom0otBDYnyZH+eFbNQA9fBPj\n7Y1Y0/6qULDYM7Q3Ygsd2in/fX+4T9vpp+Ogz4agLuItg3bSUiqb1W8tnyVB\nMbK8gnBvEVGz6QlqPWXD4pLFDkib+qCvFKT2fHmZAEJgs0Q8z5F/V3rgD2fX\njZ+Nmisjaovsv0x2QrgQmzXDyuSBUkty2hrYySpYkOLs1nZvgiksgIVG+OWf\nWtnJ\r\n=H1cA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b28c576d9.0","@material/theme":"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/line-ripple_10.0.0-canary.b28c576d9.0_1609886974309_0.6636059913166359","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/line-ripple","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"86758baa1dfb61830d811e6ad0b3afdaa5052803","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.968735356.0.tgz","fileCount":34,"integrity":"sha512-eSvOPtIqpjbEOK95IKk1cAj3e1kUpDctWAZ9gIQ4+53NR3Q9Zi6tCIBdMdTlaupTebabyhBnMv0nIayVPsTS8g==","signatures":[{"sig":"MEUCICJJuC18mjBooBNtBCFRxznBKIpM9gdBiyTJpyfQIqb+AiEAzld4/7siH/kuJU9aBG4MHoWzwfRPQz4JTAqDWm3Lw7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dwzCRA9TVsSAnZWagAAwdsQAIVHuHY6++gGyaK+Y/hP\nf7hQ7pyRL6WyxML7thaDeoROrvC9xptRcsaM6ayGfCl8AXLnGJBH5kC0wemc\nz18K7uDVUStu4+p86pXsOyRfuw1K/s41VofAFv57oE8XUX9Kt+KDf7foqDPC\nZXIei52WHOCbFTMwbpU644hIUG8F7R6h/jhqEEC/aijx4uVqb870fhcQtTSk\nd3UTEVTgyWCOu6TSAWNBulQiKgj/V67tRL29E5OIFff8WvFVZjXMTADuQYut\nJPQC1WXvCmBu/6WQSc297u7lvTKzX6AXR5/gBqg8t2A5eEQI57wjIMRmi43g\n3HBobOdS2+m5VZTsan6ufe6zq92uKTof6Ini1TG8qiER8WEY6Sbveo8k+F/O\nHCckTXy7YrmmEnC56xEG44mM7MBFK4iOK++lq77h/epGHAsoKcem6QfU3yJf\nHoGjeUaKRd1q34Yd8zhafylBJG3XchDZtXux3r4w6EteELcfU//OYqan6QHR\nF+4wa6CllOwyNVqEptMHfrVoykSo5Giu0YKW1u/Iai99VqwqiXZsK2EIURvH\nUXyl4akYe57IF8GFYERBeV+xCDLC4tSclqKBxg7h84YnuykXr47kwNArSIYS\n3LdV+A/IToS3AfttYWRoWIRLfsPiBSQEJXR3hBa+PXuZUssZoicST6I6J0JY\nFG3S\r\n=HT/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.968735356.0","@material/theme":"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/line-ripple_10.0.0-canary.968735356.0_1609948211352_0.363332496213443","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/line-ripple","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"67704e6be1b65ac195436ce74ab003b32ec70b3b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.c5e18b020.0.tgz","fileCount":34,"integrity":"sha512-iQ7u6/kilhJehCncUwwZdyFRIaigXFL3eJehJ4zB0fjB9Wo1pAP4dbbzI26ML+RwrtXY1xRDKoPqCzHujs07hg==","signatures":[{"sig":"MEYCIQCSXwjh6MjtnSP4VDS0+9GcTmLD7CCSoYisqNCMI+AkvQIhAK37Jfn9uutcT7CBvayguFJut2UqtwVo8+OngazcutGn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hLqCRA9TVsSAnZWagAAPqcP/iUd5uByrfgwCKF7Mt2l\nSqM7/HQW8xHZ9RavBx5mYPK+AKeo4FmmnXKpTLOQW5SUqARhv2izCsgMl5cf\nhDTgbrmgNZikIOx4odpU+djPFqeAdYluDS66D3jY2f1xG1YNfXcAJuAZhuBF\n58wtNQtS6MO4dPxZORiBWwBZ8Rgwx/laJP+ET+O6eDSqOqrrvhy2ji8EiL1j\nhUfo+xJ9kn+Mi2HS4GfwGd+8rPtXGfeP9kWJKyFLOQ83gZvdUpJ0rCX0rY+n\nKoKXA/4WvIA87GtMfVyl4Xz61WEChZmGSDW3J62g18LToplsesVwylmIyW++\nkaSMvWBglVIFu16lM/XWtrq4RuZayR6YlO5YvITJtmV0jbNJz26+C/zb7hiF\n5LC8p3rbU+bskwoscjDXpjN/STI6hWZ5RT3ArfpqJ2GgrbahE3TBO/GXC+vy\nkWlIn1k5qgVjLvwnjsuZknBf3lGT3g3C7qA7cbVXL63UeErNpNvUPlHXkTFu\np32fRUG2F1Htfnc6VEHD+Cpwdg/DWHaKCoyvdm4F1S4RuXcN3jxQWg5Lfs6r\nKF5KSM6vvRPo/6t2z0PEDgtnjanyv7leT9aOrTIbMx/NgIGNU4IUEXhGuAik\n4A6RsX817CleK0vY18HD3JKj2ZrImjNWKviNDo91eLD1h/LYzVFpe/Cj3/ii\n+gVj\r\n=IRdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.c5e18b020.0","@material/theme":"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/line-ripple_10.0.0-canary.c5e18b020.0_1609962218261_0.9555406556404327","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5b73d74b20903e9b1cafaddfeecd878b5f5a8d9a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.bcff8a66a.0.tgz","fileCount":34,"integrity":"sha512-s9dd6BbNP59U1T/lkF2HhcZdcClV5qqH8dzG9xG7QsP7hhvOU5rFkcF+Io2F7TxGaQtqYAefW1t1W7nTXpej3A==","signatures":[{"sig":"MEUCIER89vSFSKFatlQ+mT30mtl4L9gQ+AviZRvcwn3eSfyMAiEAsaZZL6QXwhacIvbbW74x5M4hns1j2HuoIS59p3ChfX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hzOCRA9TVsSAnZWagAA8fcQAIk2Ta2/7FmpsH/yf/Sw\nFs/tFwJ4ymqv3hxxiPeV20U56CqsgQcnuigisjo3Gvg4tbcokwGmdo7Ohpjj\nCs/5mVyBMg2+FW0el4Wpu+4DNp84LtFFk5Tg1v6ZbxIHQiDSmRUKDvkmBsxX\nXRZyFfnuglkJjCySYU63YpfCudgWaZKhguzZTxqmxZoYyIUkdZJ2nNXTculz\nQE/vQYYA4koJaJC5LvA+ESEr1U8vClk0pAkymCEG7TVKiR1pBfsmQmGjq9gi\n7S9bEgxjrFJvS1VYMcVh7o68YvUI4Q6sbpDv5q18VdSH0iBNvJgG9qa4sTLK\nQECqY+iYR0MEuwhuctU8+gWH1FOFbjozhond0QTEuxyVxDWDq68Uka9fwq56\neDXX+8Kp6ARIW3PeX+Gi9KKvRykmYDmWUG7N1NwFko9s+8qQgT9zQC/apTmi\no4io7Qd5HAiJTYeDZ30ZwDVaszjs0Eu4N93jQZu0L6ei2+/tnsGm713PNJfq\njNQEO+aYw8g9mbHjMcYeJg22VzwwQCmCYCsGk8AjQ/3CwlX52L8m72DV3sAA\n98WU+w4kaq5pSqe2UEeRmvP432JiFxkRX2760fgLHodH84gRTfABqNX1hGk6\nB9RCvoqhfrKjh+chj2mL7y5QUnuxUcvqBkXA50+QoqB+FyflK+AW4Grn1KNR\nskDM\r\n=aPvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.bcff8a66a.0","@material/theme":"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/line-ripple_10.0.0-canary.bcff8a66a.0_1609964749735_0.2907047222675543","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/line-ripple","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5bccf9f3fbbe79317d35b1d6d0860bf8bb2442ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.79328c9ff.0.tgz","fileCount":34,"integrity":"sha512-LWslM0SDviC26HkItm0ocQqYwnUj12JdOjr49cH0qztXYRhW/CjDu/uuFtOBp/vRI/rrjlDA4Rp5l4hfRRJLpw==","signatures":[{"sig":"MEUCIGE8XBjBk3obrFcnNj4+vNnbc5oq4qi3DlnvUBLEwjvmAiEAmblwh/FIypBngHFipJmdGyrC3vmFNwSt8f3kO1yRvzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nMGCRA9TVsSAnZWagAAq9YQAIsVvMvT0wOydxo1reEC\n7OB/NSRm5fEpsuQCLjFv0nECtS1r4jfPNYMTnoWTX9Sf9TwvcAVPfcXFspOA\n/tAzRbX7htskSa76vOYevgU6QWAqkxB6hDIx+sg9YQtyemYIVRA5pVLQ3/hd\nGKsdX9Fq3hvMDHiDKX7EBErMdZ4SQ2WDZ6LFaBZqyltn8kSN8u8Pxsgn7AMi\nvHivoo2+jqrSu9/3oy7Luq3iHzHNL2Cb7v7C2v78N9kRvo993ksb7ow1J6Vs\nEePOmbXfoOPp59V6e9lWNoL5rE+QP24eMlu/CaDfD11718dN/aHOePzLqpDz\nGMERqvtUOzEqTXiwcgidPTSUrhXCiJ8Q/bug/i906UwPsziExcpbMU7ozt4S\nKGfCn+m7nBGPyLF9CZMj4mDn6F6XHwD99em9ecrnHrQK1GlcjLRFk9u6MnQV\nIByCEqdsvJT6r7JvlOZa5wnIzsqFP3rvaXH5ZEuqaNlSEJbwGJVa5rue7vD4\ni8wffYm4ebCwIlcYgXaehrw6W5PFygQ6zRcyhxX0BUU6PDf8Q7zo3ochVKjU\n5Vagy20mPm/WM+ieL+5zvIu70p/zxQmaPTEBB5XLVPri1ejWmFS5neJRPlQm\n9KELGCy4OsDSLCxy6Qony5W0vwgZvJzKybmx7CzS6YIdVDggnIUBt/AnGksb\n0QN/\r\n=wpxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.79328c9ff.0","@material/theme":"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/line-ripple_10.0.0-canary.79328c9ff.0_1609986821698_0.15841978873322105","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/line-ripple","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"685a23fe783abfc39c541ba37479ad8bcec40ab0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.121e1f303.0.tgz","fileCount":34,"integrity":"sha512-IGTSLOhV/IvUo5AgbXtFPBXn/joHYAIkA4E4HQk9strHyW+bli1mSKhPiEEmzgt7QpLBGFQ+FnNMIfkcw2gxZg==","signatures":[{"sig":"MEUCIAPN0kWNa4In9AqZc8VpB9YBXgZPJnYjaTj82gCKDRBoAiEA6OS+V/WjAm473TLaakmlG+W0ireQldsA27M4B/zQfu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95b6CRA9TVsSAnZWagAAvzUQAJO8rIdlbA0NxBbcmrIO\nut/QDFnr7ih5XkRNCj6pQ6NOYhvQnRpYslm71PitfofLyOJ7lHiLZ8gT9VcN\n7xp7j6qX3Scc4aX+fIEoiX+IZrLl0ZGFxdHWtwqJaLqgdkJ87gINcrRTg/bC\njqUFvekOrL5oTVI/Bw5RluhNAnwaLisurVUTP1UFQMGnbW7fNGyhqCuFhc0y\nZpNGCBy5by+VsaPzKGpZi1CWe0D+5N+NYL3Akd3AiC6s3Fpwnd+Ta7ejxugQ\nceZRxexMIPuYpzxNYgf66IT3coXEM8drbswYA4CcQ1T8vmuztiJ+TnYCXb2m\nfJ7Bc2ahcPKeBzhEBPuwqzaKpRMNzNdBQW5YDrppQmh37v5G44VEGD7va2RX\n3kivOGSHKzCU/UMUXvLLjLLnbKs5hCjsB7gC1kWyBni7Wa929FSSu1BVTklO\ndxh4TGoNgQuERqxGk5gcL2y7C6Yh4x4h4i9tvm6PAxkLWWUNacYSBhUux9JI\nAaT1WAy2wjHiV+YjLT4mjZJwUM5YcEHqAu0BhAK46RpTYMv+98VDe9JxKQgk\ncG8Kx7EDORzatItVrB3zJafIvQsA/ZpotHQYPF1D8j3Y+xC2QC0JdZkAfjO/\niHewgUH/0omElZ21CDTv4PhAxeftA8FtJXX/7DO7MiD9fV2Ib7MTFzfoMoEr\ngnRp\r\n=nRoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.121e1f303.0","@material/theme":"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/line-ripple_10.0.0-canary.121e1f303.0_1610061561719_0.3754800391920654","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/line-ripple","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"43a34cf1d8a1eeaf3c9daeb390b0a18601b9e168","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.abdd10065.0.tgz","fileCount":34,"integrity":"sha512-M4XQhDaACn0E50cPf16gr/hQqPOwjMv62EspHllmuo+X9pYpglkW9lN3UCer013fgoF+KbjNoUBkfeKaXZzRUA==","signatures":[{"sig":"MEQCIBFAEneMyN/Cu282iPMu5qYtSZJ2f/SgD8UAOfV/yGBZAiAF7+N7YYSaP/IiP0bvf8uhK5bx+18W9EVZ4aaX8Dj2Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+JuFCRA9TVsSAnZWagAAngQQAKF9UY3ttkqpSRdtugs4\ng3RHzqTJzig5f/4FBHbjTHXKlToBT7DtNnaI7wZt/yoE/CnFTGaeBGtxMzGd\n/9/SzAqDCSqe2bmRMk4FgsKLfcwljLbsu5zi9sc/45jNJRTJrnp3jjwhXpUQ\nktvWsA3PTvCwgzWQZ2+4pjCcU5I9sAroVLVeoKdu0mm/OjPnRreDgeRTB5uO\nG8aDKTNpTIr63D345ByW7qRdSAl6rP8H2bN++9qsV0WlOOxVgcl4HIikyht8\nwZUT3wUFNRdCeRFWLEWyjijSX4SUrb1JvbmgPKAYH+KTayaq+etVdGEL6Q6b\nY7brSOhrYi9Bvis2XvsnmQggqjJlkyTUirjGFxuQCejPojC6yDhDpoU3klIZ\nPxUSXGagKGhtQ1b7fNsLdsS+XpKiVlI7he1QIJsNVeuIZDn6GSz7WVFoQroa\ntQMivQ3j/2abwluhssxMP/6mFfkdYe2X74pfsVr/sTdjhei0XuZ9tcs0fe4B\nED1OG21/s5PSwRkdHk6daNYvqZmebzmYRoWunpDhMsup4br23c1pqLSr58d2\nIQtrCpibaNOsxVWSWhUU0cdLyLYrVsWuQU5a5MhuZU6YHbwqobjTicwcELmr\n+4kG7V7PTj1tApok96BAHUmNOgnH7OgZPNgCbJ5ALB8soON4KAcZwuuNUoUb\nO/N8\r\n=QX38\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.abdd10065.0","@material/theme":"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/line-ripple_10.0.0-canary.abdd10065.0_1610128260607_0.8082789776703181","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/line-ripple","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6946970daace3447f0ccc46b70c4936dcd343938","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.089de519c.0.tgz","fileCount":34,"integrity":"sha512-Jiyz7LgGFMTO/MXKN1gx054H7EzRMbGR5ecq6jbqN5zSFYEeP/VXHWUOM7WYmfQPzCf2QhzhAtcJvqwneECAHA==","signatures":[{"sig":"MEUCIHc0NtvgUSXTZGGuzOjj4kdx/yIeKMg6ReV5tZvFNP2YAiEAy6L66LqWiZwnnwEVbxdVpgcbl6mnzRvVcK5Wb3EIaIY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NqdCRA9TVsSAnZWagAAxqgP/jARpDz20E0lWL0e5NvV\nt8RaZ9oEYN6MqczqTm+bMJlO8JTbPddGU19+yZ8mp1B8CL1RyYxzh1bkXiUs\nCarl9TRIsMZX8wr0rjieD6dHEwmbC/uZc8GEmfDVYqsAVm4wH7ieXdhwIU4I\nEuGoxbQcaIi4IQVfm3FSrxLOegEKpLI12XbPjOCaC7d5ehpBC/4z1PD0/+rT\nd5V3E/A+zx3PWEjFj8W1thbcTHCB7NkM9Z1fXSJBrg7rlB9vlpRuvhpTVDdl\nq+GWehHEtO/z++qxNtYdbD4fANXJ599fXPI9DJqfDKtMfbqtoW4vdCeQOqhS\nrVm2qaZw5epuZqSbEiGlsp/murkKxgh9qXb1tSZNUxqPM7Buvbdu2SfyNqKF\nTgAe+muP/EUAcVK31dgS6qI2UjfXpNTBswor6PQIsU5eho0xJ2s+zNxD/9FX\nGf+01t/YFonlpbladJfZMHMP685exYUo1u7h/G/jlMrH2RIokW623OL7vlrT\n4IFSV7++qjZuIbdEg+0WFdQ0MQUQsr4kgZGmf/wnbzf9+nsQjsPDabtrzdfy\nyhNEqTEmrT0XD3ixyJyFWhBV4/TVBTgy9LsuglGcUt2p6j2cDICHDWB480cR\nrI4AwUpLJ2rQxrp4UC7MUEhYmkoCnBWfo0Wd6b1fp/mqiZFFafRFcWXXY/P7\n1vl2\r\n=Vffw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.089de519c.0","@material/theme":"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/line-ripple_10.0.0-canary.089de519c.0_1610144412827_0.6997325681201281","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/line-ripple","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"44720da80539a0ca4a5c65b22a2c1970bfc5148c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.163119837.0.tgz","fileCount":34,"integrity":"sha512-LD6rKUA4XVdbLzvWS+p8xZJz9cauyED1yIo0svxi96Mxwii/afH8voNsabErHO4TDkIcgC+i0s6ZSpr0tWxW5Q==","signatures":[{"sig":"MEUCIQC+utof8uXyTro05qIYuoVq71ax2g5xlyOTzcqPMl/HOwIgAlIU5JMWa7UFIo/GqsfuacD9sYPsl/+jDV3KhvqUVpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O5pCRA9TVsSAnZWagAAg6MP/jQyc/ckx5OpmuoyLiJ8\n4VgO+K/3hMPGpt6k4GxxJ7r4cAXX68sGT1NoA1htXxFmPwOpn8UMm4gHPH1m\nyQZEno1iC1qK92Dbk3j4r/AmfgbhHDojw3iITNtYchBA72HNZm9mbEzQ2PVW\n2TOJLxpo3LZBWa0ERgNToyawzY/iGKHGoIKNScdRq5h26KPHlBHab5SAont4\n55w2YXWQSLw131XBTku1/aCFDnsrre4nEQyzcwRGXu8YbP+FcLds7atr8ZIq\nKMJzi9TRlhp/8caVFgqF6nJFwo6uLUXLE4Vs7zGwAo5J4Z90IhTpl70fMwYp\nu3h0Mp06NPjO2JYoOkgdw3ejtAZgKVLQmllVH2u/k29cwmfUDo+uGkQHby/C\nD+feQnOXJ+bRzFkxVjByWd3pXOjsJEew3H/HoDfgmdPslyNbrAnq85jeL0/A\nOFMqLWx0PkSgHQS/7NUmazZuGIQCIrf80YwAbP65lA0Sq97oaOKqByQuZmA5\nKv1YMoec8qBTJleH58W1u63UPli+NzzfftG8kJjjyyUlAtHsS6/b/DmeceXV\ncyqVWCD+pkXhkBpNM78Tpk3+O1CZNU5qGkj0kdpf2CnYpE4hGwOtvp4Bay7v\nBEfQTz+QOyiyvTu/jfVkyED1aWeigBBcpZH9KHN8b9a2pkbz1OTH62hnD2jA\nxgDr\r\n=utCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.163119837.0","@material/theme":"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/line-ripple_10.0.0-canary.163119837.0_1610149480682_0.7016007328417402","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e16dd338990a1f1dcf3c1bbc0e6588409f64d9f5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":34,"integrity":"sha512-Sg+kwTigNTNK4By/xcCtBJ7h0PN+ZFU45GDawbcylCxWrGW89wzJIXu5itmiiOd7RL8tw47PjQCLjAaBiREfkg==","signatures":[{"sig":"MEQCIBDwiJBj1ACHVuxp9Af7ZAG8rsuYmONkcySWvBnDkCTcAiABMUywERyt4xRvEgUonh05jhS3DLAinasBLaKTUey4uQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HuLCRA9TVsSAnZWagAAfzcQAKNsaSvgrOOy94UnN3MH\nLVlu6fi0kXxsMNeUaAozwHLjOrlIgbbDwDKshnyIpE6lAy1OICysDmszV6sf\nEbUAjTG4JqU/gU6C9GO8zMEEZndeW/qSUoR2HIyjo2vMtiXHSRaFUIeFc46G\nMziNq5TJSMcAQsOD7OLPoCVrV53C73LKKZzrcLwQv+cikdf1vsXuZC2PqQSc\nK89M0uytH/sBV+mytTxVPOlVFMgcvyGCDCPk64wkJGPLnwmyvNZZjDrH5a0U\n0nExWkO6bea2wI8bcAT8Mj9BGqF7W0q8h88H/pRq9Ggu0gXPkoYavwCZdCbn\nDb/Kt5bsDuaqB7RaRjQGHctdNCY7clDMfOuK/SkWXt0OPxyFbpGOJgwaYuGA\nRroYCz4B3ao25Kl6ne2AFq7Nw2Kfa0vkYDOZ9vYxkQFPcjRbhWQ2FDUhcxo1\nBjfmqN1PEOs7vcSnvq6vAuEwiNWoM8VT30CDi1qTmZiR4ssO8UgWjNED0Qfb\n373IIUh52ctFUbMtGkt8pkyVBToC+4j06TSQek+oQh10BWlyhGPLPGN4WAxO\nfcx61lsHVxFFXbZRDB2mKwDz+skQeoFZdZFcPNbd76FNc1EPcim4C+vJBjZA\nWee6B1D+c17wCof245r8a6iZtgl7eQlzYP6bv9IhrF0zGNC8iEOKyNym3jlW\ni1so\r\n=3RfR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/theme":"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/line-ripple_10.0.0-canary.b8a1a58e4.0_1610382218511_0.2301365808706124","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/line-ripple","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7be088965c68714bd1fe22ff0dc0d434a87ae19a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.7584267ff.0.tgz","fileCount":34,"integrity":"sha512-1SN0KzCGCT1eJfJtaCmWk0AIxZYO56OQBWe3mWHqKJVizF7fuXOgSHEAfe7D1VrIWPTS3De55qE27j+9839EUA==","signatures":[{"sig":"MEUCIDR5sgleQuPjfjhfLIynFgGxW+Mf07ChoTZnSR496gs4AiEAp+FDI/VemvUV8laxKBLbuAvHpn+KaMxaqq7xjH/VRpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PdRCRA9TVsSAnZWagAAIvIP/i4YsQh0iFG3KU7mSJGx\nLO5oQ85P2PJGwVp1Nf6AzYA8Icd21TRbzBegowY6zj0wlhNfGAXYCOCPuNfU\nWeVTnSrYx8l49xY2AVAK6rI/8BdTgzloEn4RFpbwY4ZifdXwEikL2hx7zIG0\noRkfsA4Cs6iiXI1W1GeeZ0StxI6XB4irfnvDTcjrCRd+MQdbMVmrGHT7T4rm\nE0/PjpP54I31PLtewpHO/l/bcUNa7mt4UXkY/vOJyeAs3McZNMN0sJONyZ1l\nFO1r0/bljNaHLdgmNX8MchrA1ucIDs+12BvecY/P0C6XQfCbpAAvrzmBha5L\ncCSnOjTjiSf7QcoIfobbsJRl+yeGq+N/bihwx8lxzL2X2XofjbB8UnO7EILR\n3yWfkJTVukFrdZzx+xITbWy1dm+fvwoV6/lTBxDOvPKD3i2SbFSMO5sNjjdW\nM5wpGglhkQ6FO7yqYesjGx5cnwPnOwSR7D9YWQMfrHNX0AJoGcfahyXvU02L\nTdwjBvAtbR9S0z4n+6E7uD2bDYpSD5m/ah0M0E5VChTYgBs4CLz9KotWub7H\nzGNQbsR+FFUx9EK0cQcHMVPbM+2kkGk6IcXP2LST7H8N7/EYOgYX5UVTreW0\nOIoQ3Q7paNFe3a+Fia2c6skEc1W4bghh870MZhTqtRpxSBPI4mOWrYl1FynX\nZMBs\r\n=OC9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.7584267ff.0","@material/theme":"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/line-ripple_10.0.0-canary.7584267ff.0_1610413905233_0.263013692158345","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/line-ripple","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ae2b827635042f8031f3cb511fef9a79b89fc31c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.251ac04c0.0.tgz","fileCount":34,"integrity":"sha512-Ec+HMUr293MGGV1W99C7XCFykQ8phxm1C63UtEHbgmjX52IvR4sUNMIydoxE0sGdK17qtPdGa5zFNHPDentycw==","signatures":[{"sig":"MEUCIQDfhLboG+mttWENzAKEH1acHGK77fY+6lZlLhTeish/JwIgUGcizlnKG+lD7w4glnv8GOwoUjWm0UmA8hJU6U8HT9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f52CRA9TVsSAnZWagAA8x8P/j6RQEujAAzoZpN3VzIh\nVk5hB6Mz6igbu3gB7M8wBX0VFyAG4wMMUX/8CTi0P8Q/36CZMHG0bQBhvT86\n1lXq+XoHIhcPwC8f1CwB4s10M1ahTyHf4MpTUQPCx5WlICiezOcX+kMY7oW2\n5aqWLgtcq7x2oBLFewR068i7WnuaSMLXXPMuQdiVEnZipR312aNUAJnMyR47\nYRKHHogNX0Cpd7Oqa0akfdCXbyu+RRwbNV8iYTFzhy/T+DPHw08/tPWVS1bL\nuVbuVDb85nzwjkem4+c2w5P6Ilv/xCf6NjQQO2O2zLyEQNReBjDCqzl8DUmL\n7GUXb+fotEA2J5XvbnAsWlcGsFLBNwlJDD4YxIZXzi11jIArs/GV68c608oC\nGKGqSlFAveoYJwj7mYyrVr7tLhAIexfZogXtdP10HNpeHjvWY2S5vi3nHRtV\nXEzz9qzAV9SOIsVrCBV/kjWdnMe/nLyRuHMvO17qDi0pnKoG26knFG2hoOoc\ncmKwOsuAKXLJ07k9GN6Kmzy7UOvtPfOF7iYorHxyHknW6FieCd70fplbwip1\niEiOcCGUoNI2SrBd+sPwFxcOqUf69/F2PFBP7W6WoVTEFKm0Xl/Re+Aolp9t\nsqzUNj8RDMfmxPLKN1PnAOOzEKBrPiLkPz/YYzsSUBUdB/A2+Mp3Yw3T+gIy\narTZ\r\n=IyXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.251ac04c0.0","@material/theme":"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/line-ripple_10.0.0-canary.251ac04c0.0_1610481270263_0.5772498658998129","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/line-ripple","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2588013790496583ce90f295d00afe9310966119","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.772cc1068.0.tgz","fileCount":34,"integrity":"sha512-Zh9IsA0NEVR8XjY4G74UzLAmY8B6rTvhtXqHaX14BfRwmQM53tzek+R4OoC8LsJ3TNkDTdgl1gJtV3PP8D8xlA==","signatures":[{"sig":"MEQCICD2KgMijPRDA4IFsLM1wih+vKhAMTwJ8rb0C9CYcbFIAiAUnvzcGmboYMd0SNVqJSf4pjqx1D2CthrKkpLAjO8AZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4r/CRA9TVsSAnZWagAA814P/iNRQExiq45VW+P+MEgQ\nANVtMh4rhgWWzd+kq5v45kyUgLfJhBaipGut1F17x7UtrgS3dlWMdMDiyMUx\nzbtarLAp5N2KrqUlAOS/FSLrBrcL3H77AZWm2IdRNlJgrSOzMlAn8a2uWNsl\nOZYT5ukDly9/tUn07T8jRYN2HvqEZ49vsv/jV1q29Bl7Uqdo+0130fDuwnoO\n3kg2dUhROSlGzri9UlzGtF7SZRxzLFRtHP+M6BvS7+SqdY9HP7k+WmEEY81s\nAeDyHZLncsX4VzKELaWrS+Fa9+Wn8ACcBuSOpuQm90/hwxdwO/OjEn8tbRrS\n6m/xOjNPnAP3UNLIPsq5myX1d9WDrt052r3yXzJ7IxASf+B3RnedFWzizEbq\nnVJjvbTIGVuX86/eyO69uOd5Mcl30AN0+LHgDsiC0oS7XcEGND4KKyFFfxNJ\nL+6j2cp10nbi4t8stAgjEP+gMQLtaOd/hXp1JCp03w5jCtWrqZd0q4AtdA+p\n2Xaw8kURUHt+eFBcCpo29XbDkbLHcYwdkG4tIBXPi6K6dR+3aBgip3WtxzVI\n3Ry2HobKGawbs909hQyTxVoLrBXotBdsGrBMM6OR52NgtC1ipB/ToYIPS8Tt\nCKQHcf1txbDCAHnEISvCzK+ALoVb+QH3svTutiT5RkFR7bWLtMabxXbpQi/X\no9Oe\r\n=xMFz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.772cc1068.0","@material/theme":"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/line-ripple_10.0.0-canary.772cc1068.0_1610582783365_0.9413612021534818","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/line-ripple","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9e25bde0eb8be4964e167b2bf750e509b4bf805a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.fe13dd130.0.tgz","fileCount":34,"integrity":"sha512-ksSnvfs71qlsGLMWnKfEAgdj2ildVn63jIDbmSSZelYdtAWLOEJa3Oqh/3Pu0z0TmOEYgGr9Vc0W2iSp/GWiSA==","signatures":[{"sig":"MEYCIQDh+efP/V41t7xncg7HqR9cxkOXawsVXK7wNkZwuXxagwIhAJSlgOFEJ8BpEzpyTXa/aWvDPTxDwalIrGNE35Eugglt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5nfCRA9TVsSAnZWagAASHsP/0r9nX0ngzOZyZo+plsG\nfht0IsJWcZMInY5OBQ3AjY0NOW83CD+v9jepIatxu5eLJW2yzIO4OkfpzAZq\ntk2MmtQgYS3Elwww+SuHKZRbzW0GO/Qkb6PzBisDBTgP1CCPJqGjneELoQ0W\nS+yjCKXWmcXmkdQwQ7j46nSMID+Q0thXuUa9WOWcYx48tFR4FtJQR1HWkL/v\nEssLMBGxldP5rLt/kNv9KFVa3KYbw0Swna+Lmh5QXo46soUI5VehPaf3Ehiq\nicCtEL7R/Yga/sjqlnxNAVtwoYY5iR4150w3d6RCe1i+LeUYRUzxJqx//XtF\nMMLQu6ASZ/5w5tsZTmy+vkaa0twRrkHwXJRhBikAU/2sMu5XYwObqJGK6C8c\n/cemA0DyUK6m6OeAt1+InsgV7/nDIUGbBfphK+mA3C2AJ1uTA/Q8uQ/op96+\n+YHiHqZIW1uWYH10lkoE+QOVdAz7OaLfL09IeGYeLY6U0D0X0oQnfj9D2UM9\nzTp/hLRF8tk+svv2CMM/h7RBhfrU+9ysFeHjR4unbkLnbSQJeI0uS5bz91iZ\nn1qYKLtsXKK60XImQGGdYIGEX1VzWvptNPgxnNv0riZRc5H92yCAfiw/M9ds\nh0HHgUTM/IEJxABsBcS2x/eeLZOB9txPAbKc4MrsCf2FSzg2hgOQ9vBXa5mF\nz49C\r\n=69cK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fe13dd130.0","@material/theme":"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/line-ripple_10.0.0-canary.fe13dd130.0_1610586591413_0.13484215259772392","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/line-ripple","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c8a4b6e08665ee6e0cbf401420a22fe6caa39a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.c7c5da28f.0.tgz","fileCount":34,"integrity":"sha512-X8PLYcCNDdhL9VEemoajJTWmsAslgxqzd55cdn9dmMogWj1SIhjLZiIcPoiZxa1tMLlEq5qJ6KmXmkhLzi1KeA==","signatures":[{"sig":"MEQCIHnQGrdXvjOk1SFFs3jsxmc8OdLZ74xiw4KE/jmMg5OVAiAPsfQEK/bWjERQlJTJkoRdKCmSLId0KxAwqzDg0xzdFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/59pCRA9TVsSAnZWagAAegsP+gJyD6lIpC47xwCkE5cC\n9mVnUZC/sJtSDO3jkpSp3qG1C6Xq4QIRBL/2PGPXhxDPCGMYQxyC03v++KOu\nD/BzLshTQx+LFtHd98XpQd+/hA2DwDmwLAroGyhDvMKr/VUoj+OgenS0mZK4\neKanmjNk7jhMxMW2DDqAA9QNF7FIMiyzaoRUX1B89BzUPg4X7v+G9YP7Z6E+\nqoNq4Lh1h+6rqChs972V33yn25vXAclG3wkh7r1qWTn3mpIfdmpTFTv3phLR\nQOZFQPpqPPCnzmxdNfZztu+EXRRUj/wpq9vpwOwuq/+it3hbkgHp60pCtMSb\nY/m2NmOAK4uaMfC2ITVCr6LLrpkNwhqmy7Uh4nhjwVzzs5MZfQzoQnpIhVGN\nxlmTStufLeRzUkf2eNdt+AkpSLRjrfnn6fG1uVzXphFGrG77wY8CxbPYIu8V\nq4WtWc+1MEd6tsh5KHkm+zs9/q5setrdgMp3p/8qPcpJIS5wWH3R658hMVKU\n9dSeqadOxZucvvRMIWEkUHKf1gzOoNsDKFC+A814N3VhOHr2qGg80QrcNNxz\nobrcHn/jBz50EYCisPvulixxThqQG8EMZAGDIKZH1fNFQAnKzdWc2lFOxaQw\nX6LW6w4anKjcKqWlyBG3S6D7aPbhAzm5iEcN9spbldOElGQhWxRhxg5aSjI/\nSNeO\r\n=mblG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.c7c5da28f.0","@material/theme":"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/line-ripple_10.0.0-canary.c7c5da28f.0_1610588008521_0.8124186068363308","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c1746b367d6a9b3271ff54ed30c0bc0d8716bd95","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b2faa116a.0.tgz","fileCount":34,"integrity":"sha512-kHZogpzzbNZhDAWGVTyy5JPzR7rah8htdJX2T7VLSoIiX7secEcx+lajX0oo0m7djIyAx3siap+I2OfPguzIoQ==","signatures":[{"sig":"MEUCIQDkTEkEWKdDNghCXVv8NMIux/NqoPJnB5twwHSxLZnleQIgeO9iXi5RWynE5LRRKQlmzCzVPyk1qsdB8Nr8YxCSxZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzJOCRA9TVsSAnZWagAALWcP/RzKDM4kpaWZHN/7meRZ\ntTZeIEGi2b/NPPiBHwrajGA0y7KlMj7n6+R+gkh0C6zsB4Eng3kiKEb/QCQQ\nOAkj01wE4z0VnCrM9DPmACM84mLs3ST0uMtgQdowXOqYl/Ojd4WX8yb21rSY\nxuBVqhIlffKFG9URZI1g6E6AgYxaJeLc+T1IDg/WmSR2ack4AT5vR1EKDbYh\nxjh1I9GvJK0VkrP4XN5v01e9FzShW27Dai4VYoJyQWCpjBCAMMC9YHzwL/K8\nrg2XrBE188VXdkIcy79gqSIxKrqPPaU5yO8ePHKg0mn0Dc0POAiDtW4W/cKt\nK9OzCaz3s6a1L0pH5IgMda5jRD+9vceIa4TqrDDhlzm5gVJwFvYQjEeS3+Za\nbe5zDAXGpqIXZ4P6i7Da8bGNBFKqAtoE6J741gSLsepdaNyqTyZP6hR1fWWG\nfrhCxeZ8j9xcuI1PiwPgo+c4HfaUM/llbRV2gL9lmXlLmWgwAMQ9xmxGa09f\ncqSWvIs94lMm/+kp83g9ONblhQrwN4n+Ns0IEi/0XIzG2/qubera7ei1CxEs\noEtBdUt31QQN1rExGe8wjEUF+oIBiCVwJCl3iw4KPUC3pf2k6GurSD/2fqAq\nYf+SVo6f0neQQTZpylS/DuK/JJCnkuPbvXPEcb/w8rUb22i2u4g7/2HP79Cu\nseDR\r\n=/wxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b2faa116a.0","@material/theme":"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/line-ripple_10.0.0-canary.b2faa116a.0_1611084365900_0.783673120191325","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/line-ripple","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9f1d8562b134f1de07ee8223d4ea50133687fecd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":34,"integrity":"sha512-sxd1PZ/e1MNpi1HlU/NokgyYarVfBeYXOJqUEbPQ6jVvVbLHxYM6b30TQsNBvQ6Z9+ERqlVB6tjSh4mZOtTHaQ==","signatures":[{"sig":"MEUCIQCTAXxyjH4MwZV/QS8xPfUpamJ7k9lWWjHlW5V30mMHlQIgfCxCw4KWmAdjaiiPoeLQSSS3CsWJ+F3TZ+ZD+l737LA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2LhCRA9TVsSAnZWagAA3fkP/01rWezkPpHrJd9Mj4W6\nz7qWKWmgZfy1XqLRdmohuDGDUMWIS3Tq+s106vJHfDsEHkvnGMxjpiqm+SWh\nPnHXU7JY0oB0T4h3c7B4NzbHklNQBhhDfclWpc+YlTJuJdPuFxhGmi9bkhrG\nl5GnBvyNbsZMYVPoIsc9uJIXqNWUxFa41zE1BbJ6RF50l10TjBP4mK8Od4oV\nOY388lHDWF0coqy6xBtefaUOiE6gzTA4hyY/yieG8JDKtFXxziz0s4za47wW\nPYreVjVSYnStHka6g3DA3g9RFP+/tqy8OBTKPQE/eqiASywao7V14xJD+LS6\nsWqFr4BeitGeoCzDtIFvGyTzuOJbUQ0nkfUyPAhoytqE/L4U5/ZJ1eULvNaG\nTyYSeduD16ZfFzExZmKW5x3d+kQjJePmwVYNTIgD0QxfqXE2n9TYdz4jBYwN\nsjWWyuvPefSwOMsnvMRe5sL0Y9f5krg1GY+5eRANFjZQk/ScGX0D75ioIlEU\nmTAvjCPmMbUfpeEZdjIiPb/bdg0FZ30VfZVkJH+AVosO8pinGkKt8uDSGiuM\nLgV4K615cmJwg0L81cVJjuwm9aiPqgKYmLS5iCqXLae2NX5nlK7aXC3NepR2\nImLy4/IC14A4Aidi8OrXM3Jz/gkgiiKXrl1701D8jUOeCQj99bCpche5WPl3\nTuXN\r\n=bulh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/theme":"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/line-ripple_10.0.0-canary.0c95c9f7b.0_1611096800887_0.2708509215481356","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/line-ripple","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b77e2e6ee5c456f4ecee2f4ff9e2e400568b8c46","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.5268222c4.0.tgz","fileCount":34,"integrity":"sha512-BAtRxSd0lCypQtNC3VmtA+3KGN7QTiL5UDzcmJYzoRmGrjFTn+lj+v6ZWVhmcuS8f7YjAg8arRWZS1U4FO9uDQ==","signatures":[{"sig":"MEUCIQDbvVd9ppBoDQ0c8G/17tvOeEbKazWntlsNwMq9OMo03gIgJTnYqzTzPfJ2F7SFSDNxBMvV0CbfemOcuGum6IraeTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIIMCRA9TVsSAnZWagAAKXkQAJQmiHDAArA79Bz23gG2\nUYPIikuC1X48sNggMaFccESyp7Ulx9k3fqm9+yhA9yplWLOkLSSOsTyCeCn0\nswRlyPlUAG9uD5mW8gJzEgX8+EeP/lNnG0KKvv/VejxMnBlbcI1y/MLkCxp/\nW2q1RQnuc3gzwJDce7F8Mj83XI5xviXldVfnTWUtE33xHR8GgRB5pwTvwSeQ\n87n0J90KIEZ+WqZzQTOt9T4/phF13h2yUg3EtrF5vZ5XO2dKR+amtM8l3q8R\nr1LsC41MYSmy33GNQDkj2MjiMDRx4BC4mKq9HmL0SJ1D/vUWdHwaM4J0uaNZ\n3SG90QzhMu1UBCVtEwsJT3bw/oL/tey0/9k6gFVOqDMhqInuG2wopEcHmh/z\nEZkxx49Mu8OhNue50EhzkU7h7kU56jaS1d8WTxfSXltRfEryv6UckXk42QKN\n1jOkMNUjJmEDC/0aqk1IrLhcMsbz2DT4LhZA8Vqs29754hiT1I3Oc3Pb0UYy\n7Nr9nfWS5E0EZyW5SNCsZT0UE++EVL6obyEhF/wzdoeC1Wi9d5GHa8ww0DJX\nKMpQUbxrxtWz5N3SIFkiE1zxVRhS7t8ziMzxbRPkaKs8dRkgh9Aaom+QcWcV\n41YF/SBGi3MuGLc0tVNVkcvSi7lach/TjVvfv5PtXFn5t4jZbFHofB5A85h0\nFVvV\r\n=QrX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.5268222c4.0","@material/theme":"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/line-ripple_10.0.0-canary.5268222c4.0_1611170316330_0.8399505951333772","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/line-ripple","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c25047fb5720e358b7e9dc8f73e738b6837ebc3d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.2ed2d829b.0.tgz","fileCount":34,"integrity":"sha512-5WZ7GEhT9sEpmPbKhPqQGB0za/bb/3tqvE9MDeUm721bGrHHtQu+gTAwty+EC4RNmoyZ1kDnxhEIJLguePufBA==","signatures":[{"sig":"MEYCIQDzxb088yqeGm+yFEJwHghTqxvVS1J/nqwMxCkITG1TkAIhAI5lP6AsERe3eTwHcDliArPqS80w0kcqVMkeY2Fu1WsF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLe2CRA9TVsSAnZWagAAY9AP/2UL60bGOaplmtKL4Wl6\nAymyKIS4iq7NRVhnjeq7mAOwh3YI4xo0CEDjAZwUkbFBRcPr55KQwsAwBBbv\nJCBg11n4PdEflDv8VltDsDkrdJvNbgoIGmipXqxtkk6iW3ufFwVQNSpV40sg\nitw49UHZwFpwmSIi7938nV+QxnniRcwFdvqmukmvf9nOj+i+5Ly3nmNA0ys+\nOGp48LvnkY4ZA/bVI2EEiwoMi9J7cALBSsyXJpTbgtEVAyUvDYH9iKqvlL8s\n8s6RslHXzZEOHh9R8mLHuSOUbESwWso5sERjvNXlMKw6BCh7WZuMv9L2zm9w\nSmmOqgydxTnjLbJgQoiGMZms+123pjFRTTMQoTI6kpJ8az8FS2kCbMcaqFNs\nGL0784WRqOcgWYoOQlKag0tXFazRHrCk5gXcHn5e1VisxzhVA4cmsDHv2lNp\n+FstZMGU7ZOTMFKCWUPTyMCouAF+Evu7xYINPpdn0Bxk2adxG9UuZhwiSohl\nWMKc3L8uWK4hQcmNWZTWGg6DB2VWE6miKhQggttGihhC9Ez2cNVqEPwjqrBv\nhGYibRaj8h1IAdiVtjpxjeFIM/u7UXaCRU8FVKD1FwyejB2Hqgsgilamq4Pt\nIAMihLmq5/FLWSQ3uU4mJGk9RPPnQSIOydEmB8eeAwGQZW3vr+1JQDjEAHan\nnkLi\r\n=QCzO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.2ed2d829b.0","@material/theme":"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/line-ripple_10.0.0-canary.2ed2d829b.0_1611184053962_0.8335478511585865","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/line-ripple","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e6eb0a85a7d36a1edbbfe0b662401da202c7de06","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.df00c2b30.0.tgz","fileCount":34,"integrity":"sha512-mERPI67rX536cQ4a7U+URRY20GWvI30/ZkqRLldiANC/Ij2/w87i1vZL7GadDUI9+HNtHpMUl+CUgEGCociLpw==","signatures":[{"sig":"MEQCIFi6eYjKYoEvMvFHTd7KTQGOQjDZgX+CFxBoa5iWKFyzAiABvfOCYPvrBzdwihelrehdSQFae9jr/DB0D3Y7Vuf2dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdvvCRA9TVsSAnZWagAAkfgP/1Lm/kODnjVnIu6OM9Hw\njHBEQh4lgJ6cjNsdB6ZSTYwTv6XeRfIPvlcQ7AFGvrDhSGv5PmmRASwdfQBL\n11uJ/t8WWRGD6DO7EhFYP64cXUbZebbkvQgoVTQ38wyy1vGPV1yXqpcq5rWc\niV2wwSlnTjSaFPuP7UOjJM/g5osSqs68GhYnU8RnTTigJjDSmJ77w7ssBdNY\nSFtiqycL+xCVq5qMdDXFroJvKHndolKc8BTHjfr+iNEzkLaJo5KeU81NO7UG\nrEoGWKnp0prmBw4xixFU2OXBwAsWo5ykqK7F+wynBZqki5t3ix8WrqDs7WhB\npCJ4q1FctyKIgL/sD7iv8qp7PLTFxntj6o7LI06XniESdO+04JEpG0BivdL8\nAbyCO17n0KY+MATPXAT5QK8SL/kxMfwEOl7Pdav+MEEj4ZcXviBD/w/8BpEx\n35qpFG6IkYyBqjWRRLx6zHYNK10NjwQ7IsNpzlj0crOi1+W6SP29Bs/j0HMn\nmuTcRla0bF8Xe1NBQ1SToB6G3IqW326vNxpexGXR8DY/aYQ7fG+qsggxm4x9\n1PfdKT1KRQrVLFDUxntMZdgpdeagVVSYLnU7OW9pJXR9PEkwu3a4PcdyQSSl\nfG9hWDq3qbclr9XAVe/VbY7YSAP1nGJRhKEJcXCYhm3M2u+tJSJlYfjLQ3o8\nDmec\r\n=rg3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.df00c2b30.0","@material/theme":"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/line-ripple_10.0.0-canary.df00c2b30.0_1611258863226_0.02878870288998603","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/line-ripple","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3d8047b19d6465453e8b6969b214b8f6aa6961cb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.fd61b0476.0.tgz","fileCount":34,"integrity":"sha512-XoU0byPABXMSshUsy1srQyMQBm0IIhf9bvWJ2WVeWQg4uUq6uHP5bXYy41eSZlz87DGGp8A65GoNFxvXNogAwQ==","signatures":[{"sig":"MEUCIQCY6tYwrC5lEZ3+MsEEmUnBhn8QrpA1X3eJOWqD6aNuyAIgW2SpyEyQJVdSCa2unMOPPIOhAqQ5sVN2FcP0A0YJJ9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd9hCRA9TVsSAnZWagAA5BcP/0XyGErKnds0swRTXX/9\nnipmgZwxHg03295z8AJxQc5MF9tqQk2NbfHf/NEezDtrcrSyLq0tFIGjjdOA\njtSAu++xpEIjz9dfaxcIQLTHrNaq3T/LbBFQnyBrw4xuaR/7KCWb50BujSw9\nvXT592O3TEEVirUA6tLSuNeIObJN7cyp1lZPg/Ca4v1XrqP4aRmN9Vl2kKZh\ny0lS0WA7pqZhLOZv/HLUW/Bm//qNoNZfngFzeNqsxmpe7HCJmaLYtWmj0pBZ\nCWu3AhlTcNkAPRfkahO+6MKMykV7HFul02dxHo9jb6NTh6E7aTrgkj9PZ6Bj\nn69dft9XK4OQpWY68WQ9SNOOUy2e9PRDQcIoeZbGx7UDRaT4Pn4F186/qW5j\nv2kSAyLPQl44mHMH2g6GReVOOWAVQLgxHoYjOMkv+Xchzn7rEoEReYze/Pp9\nX4Dna6a2jK3svk1g+2tUPeQfICvo3B/jEZ9rC/YKEcyzzYoBI0Lx3QWMW+Ms\nJC8yXDkW58zjgJeq83zpnLXoIz3jFC2vlnog0Xobm8uQ8tDlBja2wf+9xLfl\nu7uMPQGEGR6VWODUJqmzB1AP3iFMO3/JISPKDF3l9C8dGS8mJvBPunwGUCYs\n/imEgFz327QA8l3ORDJcpX1OyMQeB+G7XpxBkRgNYryJhDl1GibmSyQaOCRI\nD3sZ\r\n=Ojgo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fd61b0476.0","@material/theme":"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/line-ripple_10.0.0-canary.fd61b0476.0_1611259744677_0.7572313177031795","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/line-ripple","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2cc57644b107164c00ccd60873ed0b2c4c9939c1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.3fb3a0265.0.tgz","fileCount":34,"integrity":"sha512-ScHkMLyfOA8KLzlqtq93d4uEtcJ8tN3j78LuJ8hN26bW8ehBNAWrFBbrL0fv5wtNRM3dH9hrmv4vdwvYOJnGdQ==","signatures":[{"sig":"MEUCIQDAo0IXVdtxF+w+lFi7gJhTxMoGSvFQ4OvkG49Yd7kQXgIgCCauYYTBWDVmQOxSP6iQwXa+Xy+CGzqXwwxQefl2niY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChZ/CRA9TVsSAnZWagAAtoMP+gLKjtZIBzv2AaJ85may\nTzVrYR9qZpTYbXqi8zO+gR+MCS7R/W0u+fLndBp5p4Nbu3oM4JKn4P4S2gE1\nyK8X+oR+UtPnqKOb6MslUAa7unc5fJh58hOK7y6jALw/MYJhwXPDfbuzr43O\nOrgHiPukPK2EBSq3YD6IIDdA8uADSaECQCoiIMiQqu8PmXrHDg1itQ6xkEcw\n85hWltkVrkNeXn8wO0nMznwJjNxOwxrbEk0vIs0lAq2+HVl36skERt6MK76T\nGACgdHHg6ZDQbU9safK3PlWtAvVzU59ntzN6TtsUNnL69c3auA4+SRceZ9Bc\nvqMtXkPshhrANP4MoVhLqPR9g5vLHgjmVjbnuzJVuzpIDnkV1TzXFsmmqaNi\nUtAhTLk3FBj/FcEYnLsWolsv+c5YIxux0PXdP/A/vtzIHbEagD8PEu5+UVB4\n2YkLrl3qnXw3Fwy3bFhzsgX2A/GDRGCjT4ugmwa2/cKGROIKum/l03h30K6K\n1Cd3OScL9ly3o8gIeSGrdVX6aNNMcPOHkp5i59WUi3j16/LV0D0rd51bFFye\n7DQz19ehqA2NA8BdbvlGQzNDgG0qFRozipAef8yP/BCTcOisD9IjRsrQqJyx\njIjypxYSRPkE4ip12plz2dPZExhHAngcLX99H0pp5Wb2nIDgn85jcxeaTC7h\nHgpB\r\n=1x2f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.3fb3a0265.0","@material/theme":"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/line-ripple_10.0.0-canary.3fb3a0265.0_1611273854878_0.14346262745106442","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/line-ripple","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4062dcebd98b1b5c3c9d8f4e978141e397c3e7b7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.07deaec27.0.tgz","fileCount":34,"integrity":"sha512-Q8fFaKQGdsVCz1Hmc1uJhGZuHqv7OiB0x5zguPu3nh3Y0Q81qVZQJPHBK9/kRDPNWyasPTpUGUmsd8dzdQFMhg==","signatures":[{"sig":"MEUCIQCXQTtiBXKS/xP7y6xNbboi2lb7dkFAi54zFrO7DUikjAIgQ11H6PP9Sic3hI34+V0O7OFyWcKbkOU8hSKqd4C65sI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwOWCRA9TVsSAnZWagAAO1EQAINvnjDU0wlvzsm5tSHc\n/bn/kDCH8bNiSSe1kcik3UvB0ED5Tz1AmxkCTLmKnERlZmgHC07BohGy/OBv\n4AyfmmDVPFX0CeTa6dWmwPSQri8n8mii6mvFK1Ju3ldrhgmTc7NBKgZiBEF1\nBgQ2Xcd7RZ0CBY7FOVpPJlWHLw2jL2PCHc6n46aimrJxVXbbLC/ksqbH/sua\nTFaqeojxUqab3V/o6KHmuJ/qZoyyNetB9XV7YOuAtNJLKCK0uxz+vEtDgHLA\nIuHn1MOBQ/1QbTsfI2nPD9bnTC1hza2C5YzZzm1V9yNNdHIJYwwmcLLP85xI\nJ7xOy5mhaNkEtjBIYj6vNJTSSALzG9gVbxPfcyrSf30QAwsYR1enH2SvHN/u\n9akqhu+aSzdjTe0vDjXCaEQ+LSkWBcDaW2WKLZfYBnVoL9m+5URJSfZM4AFY\nMLFECErCRTrEEC035tz8Fx29LYP4DQmjhBwDCVX8bh56EDCorOVpZN/eIDPJ\n3fsdyH1zLe55A9IWQRiznrctPKC4NnpNUBKLEpAZ6fYoZkKuz78PMX+Lc0gL\nejCWsmZ2sYeFuM0rWSdfFV43DjKZZI90X4uPsIOuQBX8ufrRXTr2N/iOKaHb\nuyyjO4MKsOP7etcz4GVwoeT95jOnfZpyI7vtEYj5xYwMPZwhsSfSPRnSCW1n\n1n53\r\n=cCYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.07deaec27.0","@material/theme":"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/line-ripple_10.0.0-canary.07deaec27.0_1611334550335_0.63961893778826","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/line-ripple","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1a653bf7b7c6bf71d6b211d155e1f2f2575b2b59","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.d2959b16c.0.tgz","fileCount":34,"integrity":"sha512-v0u0Zh+nuBzxAbCJVU2qEvXcIxhyc04A5L4s43kH6alwE/SFYL+N5eeUBAXAENrK+SolDOs7WGJ0ySv8Z3PcoQ==","signatures":[{"sig":"MEUCIQCGfRxGRZFhK+zii/Swofyz12aK6dJPPGyb9iDTmKOu5gIgZKvcS70fMChie/KJg10WKehFhahSrD03hjKhVYnamcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx67CRA9TVsSAnZWagAA/PoP/igjHaR1fljDJDGgTZRR\nAkkgmErzl8Gn4QlJrdNDIjYj/X8Nuzq8gpm+1av1Pk2BHOGhr9n1kuTs1D+6\nXwZC6alqwsPtU1NkGfXsnY1P1uvgdNDH5wkfqt35vMygUgz8KG3sIMkHJZh2\nn1sBw4VZ0GNu0+YZ9c0MjRZ/CIx1om2bYN5pBU/NXHUpS6yQgbD8FkEL0nJ0\nZGxYe+ZAnIWhGTp9cKQZHWtsI9IGgGxbKsPfOXf+haWYmebiqqRIztzlnDqt\nAUKd7+Iqi2pX7G2kQWAO9XxRFZe8kzdVPXERNL3j3NYDE5sm3OUzRgiEl8+i\nFzmt8ZNxGVt1hd+ltsLBG/Jb4zqvydoSd+ekqtg+aU3rah1aRF0C9mZtyf4J\ntl4HGZ23Pj7wRVjHS6MG+3Kt3OMQSQGSUAQFnZ8DSKGCXi8L/npiOcOwRMz3\nyrqe4kR8iiHAg5YjUuN2rq8P0CheEJE/pV1MoN/71eJxshSrScm8dDQTdc67\nrG2TM2mstiyYTEi2MZofeohGRpo8G690AdCkeZuvUWHjnbEj27dXwwTOGk7Y\n6pkdO53/5lQQqb0InepAaHALzwubDDSfknNK5CFe+t8zzS3/zcl8AvYLC4JY\n+F9h6Xl83se3Ow2myIQfhtsvi+nyYUJ+rmZsPkusGBfrY0Q5d3K4yxGavdGJ\nam0w\r\n=GHbS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.d2959b16c.0","@material/theme":"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/line-ripple_10.0.0-canary.d2959b16c.0_1611341499413_0.42430505164254284","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/line-ripple","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87a47f02bdded18a14866cf6ed3a53dfc99c0dbc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":34,"integrity":"sha512-8xf40BOeQv0VJ4fkF53C4UlfV5Nrl3iRXNcCMCea7TOebeEjhiI/OhdVbv7q++Vycn2v8viCtzZxpBXRVwwdbA==","signatures":[{"sig":"MEQCICJf0gQTthPY/D945AQrmwhjM2+8967XkA4QXU0uZ7ZCAiBWScM+vPubr4QT591xMG78wj9b70VWqr1E0Q+qfh0haw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1bTCRA9TVsSAnZWagAAGcIQAJvRD5dUynlaK66Bc2Zr\nUw8ysSx7JpBO2LoTJHHRjy+TZa1FeRcSSGY5UjgL/UWph+tUMvGNnEOEMdqz\nTQiOiJmhSGtCqaEzVb8s8kbC9+NZ3AhWvV2j9jarZ6UOt30CiJzEbl0JVYkA\nqjNvFMko5C7ieyhchxaXFb3eGuduzmuP1HDZKDvv4nXe4ktixwSL7VB+tHJJ\n4vbxD7vdAKQWPmpUTK+9mewaoeUZntWuDQ9e38zz013RzKPQsV1JXHRgCV2f\nLl/sgnJAtZwMW9YDYnX4rKYCgJkJttelUFeTf5DGpPZnOMNwLLhiRyeR0aVY\nXW0flRdtmi7o3uDvZgiGr6ZShLBz69HSW3UemFAVbCGWKd4SH5xWRYbOWlm7\nKvvH7fg0bktFWEocwdd30jf9eHBaoBZZ1louH2LhTXVo+Vh94HW/ltvmrAgs\nOfvuxNwtv5paB6z9gKBJ2CTsFHqO7/FKd2Ae2XdEkJUgLqHzaGOfJWTmI94m\nIBgNATo3Wga9CDfxZY3UjToArVDSvZmnndd1e+Oh0VBfydf3fGejsHgMQg2r\n93Ge86vLyysfO44D4+r7rVBnEop5ZLLGIGWDO4bw811ejmAvFqQrm1vjL35U\nyUkY5USVVripqD9P2ANyTQawO4+oKp/ZFjqtyoLs6/FQFvOHgvNCWQRu6VSY\npZ+Z\r\n=yBeB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/theme":"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/line-ripple_10.0.0-canary.75f3bfe7c.0_1611355859378_0.23379551088218764","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8a4306cf9143d3c130771f405459a1590c725db4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":34,"integrity":"sha512-5G7yP+dVKkW8FKbTgPDujdnvFBcfOYqwYLiXwajEN2CTFSD4CIK6Ha/48w+Wf5+CQ9YUv3vYG9WZUATe/HtLsg==","signatures":[{"sig":"MEUCIFBTTpFFrQgo46y4nApKLGVP3Ir77pdZy3fui2klDA5cAiEA3TVHBvtYbs3Lv4uuius5rz91/ajPd//bKJFBkdCMG7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2EfCRA9TVsSAnZWagAAUqIP/iz+nG5v0uxFc1EEUwrK\nlPRAPZcASnUk6vCle3lA2isvlnlLKKATyTdvTmUmE6N6jO2lHcE0vG6t5ylM\nINygpE0zz8+lIr1MToO1o5w9YwYno5x3cHBV94gQlV4Ei5gWQDLkseZPxj3m\nVLtUdyBIAHsEr88S6oxa+lP54L2wOy3MiULKxS/r7LVirvHcuW5c88GDfPXF\nyN1969mYpv5G+z7EWUzAdbn3RZPd2nhKtiOuYRMhvqvhF09l70PbbaLZs6qu\nKXp6wb2hbf9KSA1li62mi3tde/h5djCJACDZB/U8ZuoUmewFahoJatTZlGVV\n6U81ZmKmzXB5hbSK/tHCFyHYevWK4D62syi07sJf4NoHPruq0QksfMxnNr94\nYM6JhqgBM63TaaNKccelfQvay5nHf4yrGJmkaQDpAZRqgQXHzWF/BuAWDxN+\nvEt99ARKFEZaOpRehJ65hIqgy0N9/iJ16U9Z7AN03IK5U/CWhrX1NrtHrbO9\njN8UHBtD+psxRMSx25wpYpBoYM1oI41lTd4YCFAlZ/mrC/LP6yHGgbFzZI9d\nqbwQ13r/VtX8ctpNTJAaw7vw7AfAtsGt96iLxMsd7zQM5xsR5a6D3EaWPtcy\nnWWuYpoG6Xjwjl/VXUE5YKZhX7N+MbcUtk3aJy/9f+8LQbkJpL3MOd4aD1si\nr4dT\r\n=67Jx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/theme":"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/line-ripple_10.0.0-canary.b9adb7a0f.0_1611358494759_0.7802941469227895","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/line-ripple","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1a663f3730e88ba9b6286cf698289daaa3d0bc8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.d29ec2862.0.tgz","fileCount":34,"integrity":"sha512-X3Xr81GbdWftuV48cRd31hE8ChRD2Rznd39+3W3Ln1NsRFhD5K7jFjceDtyhlCakfWGsrpHnjrkkMP2P9z9I0A==","signatures":[{"sig":"MEQCICbuCWVvaM+8M9uJmKSA3ws7lYe+mhu5/KIy815odNBBAiA1BeERCR17OznsEIlTe/Lyx8hCp9/nUvvWpv2KLZ/QJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125232,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvBuCRA9TVsSAnZWagAAmAMQAKAfUqPLDnEKR4GD2sVK\nLb/Bk+B06J3Wul+Q17zG7JupNsf36qc8NEUT1NvBqiirS8+6ic0/XXSnw0hJ\naAXa6eOnkaQ+CSSVRzRcAdDk4g04JcE1D+7n3+5bXi4gxN3zx7sSDi6UP9KN\nJCILKVVRKSSoUEzRfqPsSH2uMUaCmjL8Rn47pnFWHfdMBAzwV2g/lAlOOGYh\nunUOJCNlDaePxOO9asyLfC9N+i6dQiVLzvXzsuGFu82fL6X83EhmhqP9wAxd\ngabcBQlnZuUGRP+qJ+5cYlRWf2MX9BDibaI9E7H0OgVineRNcZGs8JJ9j1da\n0JDV4NO8Ni8nbFmv6yj+dSPGB7LzJtObSd2pKcU60OLFFyCuXcq1gDSmS/ei\nprLRlkKp4egGz3XUjrKKk96F/jspfFv6xBXf4n8Dwvr1q9WWaioGzUJ6i2kN\n672evZWG+mY0E+/FqiAHOhRjcPOqY9yun4ciPW/VGRas+v+rSdzbh/r7vb8G\nHSOEEQqCo5JKw1ge/sSH4ufSrIBwrjH1W89joFcPo4/KOkESkIKOf3GqvVxv\n5XlRGup7eQQcewDPEhzvPkNUA6VJU1wV+VWphTyE+l6UCkmlaSOcEcBDZDVL\n0Ulzh7N8BpMnOqBHB/xiV2zSuucXkCILtBFtv4FWiRhe80HFremNdnE6p+84\n2F1+\r\n=6ONI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.d29ec2862.0","@material/theme":"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/line-ripple_10.0.0-canary.d29ec2862.0_1611591790366_0.6616889429050745","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/line-ripple","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b8f5b7953b6cf1b4256ab5f59fc5c87c8badd6e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.96be07c68.0.tgz","fileCount":34,"integrity":"sha512-PBE2FITL3w8HeCp4JRm4VkubkDMDdzVBTDDg7LZDUTSu9UxUlKy5LbK0zDTt6KzgOn1Ubwh+bsFf4uu7HtG6mg==","signatures":[{"sig":"MEYCIQDc1FlkefG4yIwdkv5js9frX6SsLKG/K7ODrG46mmSmSQIhAOOk4EbXo8J3tGX9ElDYvKckIZ5dEdgSPziVqD/eNCvm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD125CRA9TVsSAnZWagAAu88P/3lmkGbwzqW0DYhtyI3R\n8T03m8xp6kZklMYLFtI1iAcTpA33TQ5qjnn+4G9IX7asEjc9lVrQh43+TDWB\nEDQ6jYyhgl/twrGF2hcJeWx1cQvvTWiysI867pBxzOsrEGontD6Y0wW6FLae\ncHQ02Nmnbz2tvGOjl5RLXwIi/rmMY0EBdUGPE5uJHdgnkQtaHbZjrBH3PJxl\neHYOfrOKfgpialCRDZ1zz9hq0gS13GGmOGosokyTazzNBLtx9XFmnyaUR7jc\n0yMjWgxyfw+Mi93ord9athWu1FFr+s17OKY91vpvOpocVhVfqGOUR2QE7tNe\nNr+pz7x/Jg3gYY4Mmu0nfcJz0nZmIM0mcdRB1OYiLOZ50nTIKGVDq8sXeeEd\nfNp06t44waSR9A0lYiomKUBGwro+mOb6Sy+zlptpF9XRVMY8Styw+fNUIkCq\nEIqTLzO/xcFgI2LQ0RsQ/qKZJzkEgk+WlYOs6iL2AX7EjkArtnxVgZ+L7T3k\nuGzUOESe5sRbNSOoHpHjTCySalXijCyeKXH5PVV+p+TSIZ+loG5MRP6P1Edm\nTnC/Tcz2imfKifGmFimk3q/eovfh+dKNQvP0gHWbBk6NJ7oxKhutdsDXbqV4\nBxGMglCIVPYQ3roE/6DcG2r/ZakGfG8Z6nSuYIXPHobYKcnjd7P9NrsSazje\nYVBC\r\n=5trN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.96be07c68.0","@material/theme":"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/line-ripple_10.0.0-canary.96be07c68.0_1611619768759_0.8635728806569793","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/line-ripple","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e232cc134519469704e30ea3b34707316e841028","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.e383944e9.0.tgz","fileCount":34,"integrity":"sha512-Z+LhIEh/CE8YQBVZTRdNnHQlrNQSmUGNhmieITlRp5hIlY3NTGHtziLiIEMvYDyjRT9+RKnnKSXXQelNACatng==","signatures":[{"sig":"MEQCIFlcNTjSnOeB1I0NLhJzxLituJJcMTDbuZxZvMVEQyxjAiBcqGa68ZJdkLgNx/Liht5pfyZ5GZl5sEKCu8AaG6H4zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3P9CRA9TVsSAnZWagAA72wP/Ryl00p5gU/wcwp8DhHH\nTzEjoE6wQMIB3D1MNOkcSGUeo6k4BNxAX6iEo0ehJT7vETSjjlccgtbe6Pzh\nrhRFfet7UZfaFXImK/pOKqM6xFr7ujfatD0LlnPKhloF2kfQ48HTStky+jHd\nE+C51J1IW3IGWJHX9ySbLRUgiyHn5G5PdI4Nv9A7+8jFvTjF278nYEm/mtCq\nPEvymNEr/5f6sCZImpZB0w3X11QzxCgJZOe6xfMVeLsAaM5JfbzmpfoUibRY\nLd32dqU3A6e1z1xpqXly+XmFX246KQ6/gKBsZap3WttDhBhkWgxcKwsOg1qZ\nmguDnWlCyfFbQNCZCLfGYU8MivqAqU0ErsBfp3eEZSxR/iPFvIz/cx/qSWuR\nS/Q+Uq/27g2aQ8/yKUyolDjrnN+VlgzefAuhgbKed1H0qow86fNtA/A4pkC5\nq+9x6e4c5yJ9f8Hf+UG8xETeV+JknKCntJ0v2ks7Fv+LKHo5tq9t6VUU97ee\n4NC/rMjhib0h52kAf07SYVwg2NPh7vLxqJ6pXtEzAiap04Y8D7MHp1hGMF7N\ndx0z2P3ONfxcdREEVfA+eV1JZ6f3VQyaSYXGaJG59RYBV4ZGMH7Ue4+kxDfY\nz2CxBKV4sUvUEjhCFKtYn822c6O6laqbONLM4EHCAsyqfwE+hWFMKg/ckncr\nt+TD\r\n=mXS3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.e383944e9.0","@material/theme":"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/line-ripple_10.0.0-canary.e383944e9.0_1611625469441_0.7313067871895618","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/line-ripple","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"09b21bf21e066548d74155f3ee7f82758f8e2a63","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.623af861e.0.tgz","fileCount":34,"integrity":"sha512-NcVlc6zMrsAOjoRO12cDso4iGmIHIC8NYbYk9OTRuEl0CvFBCsQ24q+nFvXA9qtBaV2rcRNhSp2e7pHD5DHEpw==","signatures":[{"sig":"MEYCIQC2L4qzbS+fgiOhXP1YDvw0mKq9v1oukoUgV5mWn+o+swIhAN9ItcQymOpIdQHsLxnTLVa4hO8ye0lXX85qpRbeVT2P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5AtCRA9TVsSAnZWagAAl1AP/0ioki0zB+afPlFjb7K2\nmTPosUvwQxPSdFBegInCU8No5SZGC3XrIDp0fkyl2drYKCHCazJmabIvvGhP\nY//oOy3mXmP2QU7siOiSlk4gZ1jA737nVWZ9eIo+KQhCDuE0vvHpNPahclze\nbVBk+qKMEUH1sn5b8LzejqdY+RxyTVTOjIiXaBI+Iq4hTS7GXhlFr23/GGf7\n9bfiaYkvwFby0wDY01YV9EQkza1UQGjaZUPt2Ovn06KPZGDMxa3aEYI5pGsN\nYAM7S7rwywPgexRbVMK+s7zP7Oy4KtX8EbVEaltbtxoW+SkuGBEQpnPoubIv\nSDR/9IOp1zNSM2Jygw3FU24auV+cX6gNbEl8+6r4gNY7Halu1ylCUWa4NxQF\nmdO7bO9Aw6E2PUHK0N7tp4TlZp2ZGnyUU246YJb2fK6TmIrd8qaCc6oEPz/o\ndEnd4jFCio2YLiMQyfdqRnVc25DjRCGEDTT3d8Is6+0OIXXva+CrT1uAHpVY\nCwyLf0h5nfOInIuD5qSZg9Nmp8HyUvq4Oi+p3RsbW/ZyWa5zdCfI/rxW7jVz\nNZXdsMpgKPoXo6kaSJFskKwVHzVwc+EAeZXengTL5cKcKm2bSM/rGgIP7wYL\n5MXyRkokNiMplpWjiNXRWFPW35iAuE0uEZavErJzxBj6Q4FLsYdLDO9wj9O6\nIt7P\r\n=m+wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.623af861e.0","@material/theme":"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/line-ripple_10.0.0-canary.623af861e.0_1611632685059_0.6397388738386891","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4b7245d6870ae98e742325ae1edb9e47c9fb9087","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.6863fd43a.0.tgz","fileCount":34,"integrity":"sha512-trWhi/BYtTBh+frpDQOWAdDTE0XYRCdbhNhSM4vMAKAWcKm/iRwlWClNX49xTArsymhtdjMbjrpNWsYO6y35Uw==","signatures":[{"sig":"MEYCIQC4pD9a7peJo3pu+cIe9pGX90Ern4atbNiSEQv9tf7MqAIhAKjR8g8qnPEYdB+ZnB6o7qkJ1tPYkuf2FF+W5O/c4EVF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIpbCRA9TVsSAnZWagAAW38QAKC7lZOjhriV/HzhqFeL\nqfVnRO72Ukagh7TaDACA8bHHKriVelum356pZckDso910DHSN4jsL42BvJ/a\neONIl5NeDbcGQLUUr6h0JF294L/AR/li2J/r+VCPGGDGx6UsAEeQnSynYLox\nA2xGWumh9pHImeVp2jOzyeRVXILHNtoYKX6M4hRv/xJ5H8IU5AF4Gs/kPVMt\n3oj20tyO3PldQSjYBTvm5LZxvf6fPvqIsMnt1AGLaJEAUPk2YwLHyPXeU+a0\npMdw6f1lyYAg+aj0pZ8kToCaQjNChOO5e8P3c6/HqikBltmRxKnfXe+/bA6D\n/woJ8Y7adpa1oI4Ds+sxnEU1l2iKEIQUI3u8xVgOtNb4R+cDjjEAyY/+FMZs\niDp1hl+83rF764T8T3TVdQ8+Vmi8URjJ4uu/e4C9tnz0XIgu/9pj+qjqoorw\nflzIbqtW+RjoF2FHTZoObDdM80AFq33bi6FdKLFkW0UEz3loUGqEMAc2Ghuc\nDpKXqmwae3uCZyac5X66WXGBBAejx0sbzJx1Xg5wwBJ/jy8KTauzEuhfdwyu\naI7MYoWuAQVKdNUkRwWvIx5kPfTj4y5D+Pw/QnTiX8OYDuXTqvaEtnzlaJ5a\nJHxyle/WP2O7Jd6Y76zrsCVlmQRZV3tBG26yzy30B3NdMg8qEa7zH0kOScpE\nGipV\r\n=mwOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.6863fd43a.0","@material/theme":"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/line-ripple_10.0.0-canary.6863fd43a.0_1611696731102_0.31136011976260414","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/line-ripple","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0cc2df248705a87077d9abaa1b5336cf18d5cba2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.ea55b87ca.0.tgz","fileCount":34,"integrity":"sha512-KrlZ5nm0BG8bRk/Mg5ez26w7J7ReijtLGifyTxkvKRfZ0xD4B+fBoyelA4fhuGfNOTxJiPAcYN2N02T8etzBZQ==","signatures":[{"sig":"MEYCIQCNAq1DfaCEabVqjxRVdReKwGUMI7RC934PwOzxrebzMwIhAO9DpAjN0e/5NvhQEzy5QRrlUmChbppQ7gUdmjNwrcTw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKmRCRA9TVsSAnZWagAAg6UP/AlO/EVwViLnmeNyk0x3\nrsSPj0OxUcxnDOWw7FqODNM9R+P0NSA3BHPA47rqW22AnpE4mjxZykL6rOPd\n7Wwl1c6pT7ApQDDRc8aMcMaf9h7JbKOeVXwBbR7dvzkDCbNwVO1K2VFDmpSy\ngNVRU/XTrC20TTnR6UrpWe1muLFEewwhHEEr0uuByNFQzrrz+5dBUIt8iO4N\nmzuvZnsmM0/o8iE9LgJ9Wp/6gbnPwCFQqfP6yB5w+t4l/1H4J4PqyzHBtVLn\nMKQER6oKifCaSIVs20VZtJylgUh2xVCHqmJVbOyVUvz75Jn89aC9RE2XKIFR\nmmYXn0HU+huAqYbsNk4HB/SKv9CrPqhYGmnH+9sQ/2+8PqpB9icWcnaOSAP5\n/3wibwX8MRTJxhheqtiFQd9Gj+AFWB9nLjKsRrkzkeynCiiScdiI3pAfpJpo\nHYF+wQDG4MasKDmT9hp3TLTu8pZTtOIxBteETiaRAno06LZ2ZADmCZwL/cqO\nWgtNTHq8m34LhQm+fccIEA2xfOfa2VJTuTue4cYfB3ZjLtbyQYAwVv3kviS5\nSX/vU8JzWGc2S3S9KpyAtyGH3MnEG1kQUxnvJpO1fJf45446GHhKP/xhw+ut\nZSAR/nPLPCc+4mLq/gZtA6JCci7PUJZy1LCEqunaVzfsVE6Be/eCcdynER6q\nKbYa\r\n=sP7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.ea55b87ca.0","@material/theme":"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/line-ripple_10.0.0-canary.ea55b87ca.0_1611704721338_0.8316994711464081","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/line-ripple","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42cdb330942adc397831ffee9342b751d1581cac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.e902ff05f.0.tgz","fileCount":34,"integrity":"sha512-GngG3GDI1qEnmdj36HEUa2L0uHrWe1JRcPuh1R2cXI3t57bxHOcK6nSiX45zVt7VdDlvi9l2sOn54hbJ5/tIoA==","signatures":[{"sig":"MEUCIQCGpJj2GtNeJPublDnXO8NgZuCllKDbgW3E2nNBZonBQgIgVyBKgrA+lwV41HvjLGsk0M0SbNn/31uDJ3W091xM55c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK3RCRA9TVsSAnZWagAAR3gP/1kTXRWipj0P5Hzmnbq1\nqtnR2EK5co55blx2rBfLOWHFYOpt0Iw5pJSB7HUzs2YTLhGAVgeEeBPooGic\noXoHHU5GGpvO7OjkpLr3s6DChO+Q2LpBcmRWokWXHk1e/DlS/hSqSyhh4675\nkx3cBB8xV/i0KaQ7fPnTCmLX2pP3OiTlLwB4GW6vdu5LjNYAf3F4zq1pv9Nr\nAgfdCY++G2P/0O4Rn13rrhNdEa/TYMcu9wk6rQiLbCIFTazg2s9VYTTq/Qc4\nM/wO7RFPxIk+pDRvuIk1Ix2CXVSsRAypUfa364bUpGqmDGU5LnQ/e+tqHbT2\nO05j6mepAfQwQPUqhpEtjaZoAS6omOirbrm8Ss+emgGK0lZst4gpYbgrgjGQ\nWS4Zot9j2Wxm1xPbyoHBrnt60BY8Lqhs2VcMwCc5lqhBCKhVGqG1RCnhNUvQ\n+DuKk1dF8WZgFxEon9EYnHRMjBITLD00M6YyZaLF7muONZ1Cm/jEk/7sxPC8\n7iS+XJjy7RXMbGmPlDTLEczpuO/iM1ORSnmH2EzskgwMYCGyXCcZDk2VMEM1\n6zie2yYWJbMJYJObdkf+R8XXQAqJ00xfw3kt0oaaYYIgB/OzhsxttFvt/l8v\nfCRPnWTr+TTpYWfR58uoBjC1ai4Ju7aIki1Ogc3FxQuRSyXKDoPX2hAOjlyj\nEZDQ\r\n=BDSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.e902ff05f.0","@material/theme":"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/line-ripple_10.0.0-canary.e902ff05f.0_1611705809388_0.3736841975995271","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"88e23ba57722156a0cfd18a9944659b473ed28ea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.2c9fc538a.0.tgz","fileCount":34,"integrity":"sha512-y06kP89DHLKN09JulThSc5vdTMs5o9/C2BPxT2R/IQG/FpQ6nT6+jSk/CObJlTpLU5+Z0RPuVPp/AoKK6B1Egw==","signatures":[{"sig":"MEUCIQDA2WyA5okACWniB0hQFkmPb/KRPRKA9JKXugVXDg1vgAIgRjndo9NObC5jUZDsYPZAKR2X6348sB7gPa9VBzmRejc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELNBCRA9TVsSAnZWagAACOYP/jRCeRxx4NWfMGkWlmsI\nhuXEMMBHP70G0kzvGU0crghpGUsxI7GUSwqzmDWmpPUoNEzvNePsZd5egqfK\n00bQQrIpt8MSMOG/j5kaIGLdd927mGYH19nrT+YvK0/V1cC8usUm5d7Ydmt3\nXnDAFrwRBZNY/F4EvcEEVeBCAbnO+3lbMyuZqg/WweJAEMlb8JNOR9HPc04w\nc/U4n6K8phISEb35AnZzUWxSox1OXqVQe9L7Grqc2vO7x9NfqvpJXqVAJ73w\nDuvwZXYdl+bUft2wMVhzNAWQ0kFIB/qyDX2D1c+SNLOSvx+hRluW3Sd6H/et\nneeY5Hr1Du9X6fb5LCHKNaxPc6VBeOsezNu2noOdhJS3fKdEa4MbLrzzYFLx\noET15sj7Pcbal7p19DgTNuXu4jgPWFQq0reKLREIVJOFtxwI6l4Y8Ps7jvz8\n5qq8/3iNmv/7huL2+8TSWezyYXtj0O3h0W/I5OA0QvIwljPFCQCphNBppQI4\nBS0d0vtnofrbMpd4BMQMvoK+fJd8W/KmR7UWIeuepEzjRhBVN9APxDP+igb1\n3oEew0dQPDT0DaybtbYnvBytgtT5esu6/C90Ll1KTvU+68UDtep9fEIsB2LA\n2zFJbYVJQ4PakXEnMxLMU1elAT4kglzxvOq2sZIC4I7un1Ecae+v/SaIhyfP\nm3iI\r\n=LJVZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.2c9fc538a.0","@material/theme":"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/line-ripple_10.0.0-canary.2c9fc538a.0_1611707201197_0.666184435666384","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/line-ripple","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c060bd53c030dd37ec6877fdce5c640c2c6f9840","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":34,"integrity":"sha512-fbk9rM79zrCaHuXxqtHjtopdPx85mUs5qSEBxs+v/HcXrfs+A35wfPUMRT4JN1la5yxTB7gfJgeumvkMruQTWQ==","signatures":[{"sig":"MEUCIQDQZPT7w1eNXiId4BmYC0InFayCXYqbBfjCXDZL/INW2wIgDiolzfz6PCqulkowUyG/wv8y+aGD7WUP/hWbLaxgHnc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEL+iCRA9TVsSAnZWagAA2+YP/j5puXU3frUFV48WYmYJ\n6OqqG6MWXgHEmaJ19dQPw8CGtAuqIYwVNhQWTphZvJkaGEOsLp626bJe/Iy8\nt/ozJmyW6FHI6ptcTEuvpUGgBfbPOhi/zdDk0mJr43hW5g/91uHkyJvjnhCz\nEIQGF3q2uy95L/5g93W1gUtvh7a+1rL/EjI2oxx9ypRqZ/GqoegY56jjfLeY\nQKI+cOR89Ewd44896CQhUnEYBU5cYUfoJg0PLP/Tfv5NRdUeoMSTl8ApJ4xx\nr5cfXTfX1f06Kf++sPTZjmNuDar+uyyFf0qOjUvxAaHx3kMJZ/pcEz5bH7b/\nMX3V+3VYdgqeSgRFRy8oeJ4TUa6TupagOosfgEdVkuAIdaTMXzd5Qg27ardK\nBWmHd/3RfAbIL5bXbCeNP4NJ9VeCiobInT9wxZq2V++x78eZPCmc5pZtKu65\n6MP7lkxBzYBQN5Hb18PG9AU5XWo5bQTFxLGPhlaaozAVPOfyHPosotzkAAtL\nAqMAp8o1wmVV4OUq7QLbcqCIMEkz55WavDw6LW+olOAt+jwwpFv/iWHrqy1q\nWXyicnc0Q4J7yiHt5RogVcJ5auB/v83otd3zm6Ky+cBncKZVpC71KBHLnwC4\nU4UIgRCVHlwSDqxjtYtw8/RO0/0WQG7Jw9VOzRC+4gd6a/C43yLMS/mb1YEI\nnuBO\r\n=Oba9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/theme":"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/line-ripple_10.0.0-canary.6bf56aaa4.0_1611710369773_0.2547537795675625","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/line-ripple","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d6f67e1bf703f560f8217486901dcc0dad621cd8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.994873795.0.tgz","fileCount":34,"integrity":"sha512-QNwwVpaOBiLsgyCGgBzWSb5udpQb7FtewHiY6Qtv1OxJkmOfwlWjadeAEjntR5wdupLZeBixFnRAbhqrt4puFw==","signatures":[{"sig":"MEYCIQDoof65ur+A6j6LMXYbXz0rU3sZxofp4/bcjuok1x4dvwIhAKchLSqkEy73eaWWcczYTgSqWlCAnbYLhxmuM1w4Ay91","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX20CRA9TVsSAnZWagAAlQMQAIKgctExgXLchDPnypSf\n/fLgwHmXLNtJ9OeBTT7P1su0qZrhx1EGy78IM2yFDTKOf/1CEMbJR5H9wkXl\nOYU5FUkBUa/CsEMrWQZ2PrfOf5kolIc7ElR+GSoRVOxT1jYT71G6L+kbNoSL\nXcmntnrv+gU100ZIsWZGZnCyQ0Upz8LfIxfbJ7JA69VHhynKXzj2Ze49QH+h\nKpTtpn+3crht9s4z9RsTjKFv3kB2LF+pfe2r3YRYSsC2P3C67wnPGGxJZtIN\nKLNvU4gqc7+9kBP3b0bDg+4UXlXzeUG8INtvAQ9q+iuAY5OmCdUCD6Fdrkl/\n/lIiA4P76Oq3Fe41vK5E5jnibYsfe7Se8CwZ02iiXl4OPorJ7UFfbqJds/6m\n/60g30W9C0Pp/yicbJZdLhwsMhtzRuII0yUFgNFOESRg7kAm/4MUvZpZ3ymc\nCgPUY51KRs4exj/MaajbEdT1Ak2h7gHQv7kNgHGZGbMxdKr3BQqaAekqCCHw\nN4kTaP+YVqxiQ9y4vKYElVtnKaZNUIAYQCvBpTRpCoNSaQu3b3eChnqitJ7q\nHr2X9arWHB26SVNACrsihf9KztXOR6fWlNc22fpSMd40CLaxWO2+4nCb6qTT\nE3nV5m94xxF5mgmXamdl2FXyHR7bqvSIdh7wn1UcrtuPh39CWz3AgrSSJe7V\nnYw3\r\n=UVqz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.994873795.0","@material/theme":"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/line-ripple_10.0.0-canary.994873795.0_1611759027868_0.8978653862397024","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/line-ripple","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3f1560000323ca449f3ab5d20a8bc00e80d8d913","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.96878e1d0.0.tgz","fileCount":34,"integrity":"sha512-/QJB3yUVOP+kCmIlnonLtZ+4fNukFPmT+pBQi72h5dKXoLYDgczM+M4ItI1Jd/nfvHzxdH3kTT1LcSnJqdrV0w==","signatures":[{"sig":"MEUCIDt2q+dXhsOeoH5l18T3OGJpv/MGFrPgjc0yBY+hWwhdAiEA698GDKejsJG5HOMdBPAbo5v3ZhZIBw9k/F9S9RgphYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEap8CRA9TVsSAnZWagAARYwP/ju1gPTaOUS60w3h7WZW\nF94jUdJtXwg2uzAg0/YOpVEJh184SgljmHBKVqUDlkcOYvVNMHUSBdJIs2Ht\nH5GQgz4enmuaXAyTrdTAy9EpT2q89L+znqUJQy9iF0N10iXsdCx5EGloZoLL\nldcNGMSyBEPHQtDGH9OmfVfndBeOFdZlxpA1LlSswAT8UHgqYVfSaNULjujf\ntFSolMxjmZC/it81jqdgcrCsGnvOn5czw0gtEqiOxZefDPYt/3meYDT5Lup9\ncw+CNw3vxOZZFS7Y9bBXjwukw39O/YWEINll4GSJk4Ow9iukxg0YOsvVc00r\ngi+yHVKLKHG1WzBExI65+lX7qW3sBEiQ33BIIwDCdrmqBnLOrp8EeXR4eRQj\nNoOasbSh5IYoieZO/+8Z+9nZHjECdF8nLLOLzuYaTzZPMLloP9hzH9xbDMsC\n9QJB90beK5wlFGoGtqVe4b15YboiFHxSbBKHcQ0oEqqM301bzY/OPZwyk+xM\nC4ZDG22swJT0aHG1BgiIKeBGIT2d9jjxXiltp+Zt2i3zh5wmTh/TmQD9xT3+\nsaFGKVWtmBvS6j1aQFMaAiFb8CyyOGmt/9b9jhESkX3uFfMtO8HhRZqFXo9S\nfBuSHoInrw/Y+EigVoR2XvGhlwNZTOVqVfSHs2YiwVNvBOks6BL4vTkwYmP+\nVDGR\r\n=lxZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.96878e1d0.0","@material/theme":"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/line-ripple_10.0.0-canary.96878e1d0.0_1611770492419_0.3073053349552506","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/line-ripple","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"20eda461a6dcdcd2b2eccf877cc01693266ea213","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.3c117cdcc.0.tgz","fileCount":34,"integrity":"sha512-DfHI9WCVgA3sIBZH67COW8+qQoocH5XBjrAwDeoE14mr+BfSGLu2EnNGbwXaodkoD1DcjkIgqgeiIDnT3KkNmg==","signatures":[{"sig":"MEYCIQD6x8+6l4qIKNhTIikKdLqkWmdRaVk2jLQf7PvAOpadYAIhAOtb999VHmZjo6rC3vQoFek7lwws3bLF85jhWiXSwxQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbGSCRA9TVsSAnZWagAACJoP/iQ+YOie7V6yD0al3mkU\nYrmp33SxhNgpmsQ58QOKzVxMuGGIPMthY7zqsabT6KiN7oKegdQ1tD/vecqq\ncsV0vUApV2+OGJTx3TRPAqv+9g87hwQrjKQUEId6SlUF2za2+Qg9OfHVZQvU\n+qNj5EbwBayzmFghAZIAwjgKl7ckyLs3PXgf/yXS24ln7wxMp9JvB442ztpb\ngBUCsu0gLsc86f87apd1Pouh4Aj1ECkTrR4ELj1QNPVMHYHD960ei2sPSH18\ntxFA+f6lPxM77JrItKoRrEbyHhsohSLsEVhFkMKDXBE6Ga8BT8+spzDxqr8h\nDTy1bHTfu/ww6t/+QfbuV5+nYXaUrdvc37Mk3zKVK79nGRJL0A9Cs/PIEbA3\nPR+ai6t9sSbuRwST0endaUwymx1A1hIYse4+M9a6QiKZg7JlMHP9ZDqx+zFT\n18i6W1SBQ/vRJyQtlYt5RXYAeWajMVqE+bvAmsdEBQt09Kc30H14gTPZnshg\nK767+0pjXSCJE9BCipxFBGCtU3pK04uSPNv/SX+dxAbGRFtwD9ZsI3bM85FS\n4aMakWnOhb+LGrC4Co9o0FOYsHt0i06f6UiZzbh+MQ2EjK3gakkMNk5klXea\ngfmLsnIcaU1eEtOPkwZzUZQas6/FkvNswE2q8VdrgZ6KbVpsGTwfcONnANaP\nO1oT\r\n=CFSY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.3c117cdcc.0","@material/theme":"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/line-ripple_10.0.0-canary.3c117cdcc.0_1611772305748_0.08809047265219094","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/line-ripple","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1f290e7bf8e720158a389ae2d893debebc8b9edd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.b411e7033.0.tgz","fileCount":34,"integrity":"sha512-ak/XfZibGLnbMOeoS2dULQs+9xQcHhFyOgYQBNHhG4wid5aW2sVUK/thykU60BKIaA9EEmR7M0cvmcyDHxnYdQ==","signatures":[{"sig":"MEUCIQDNahVNrFjgiSOIeJQ+ZCuqTWFQt8L0TumcV2Oryz76LwIgYKFUupSfo0zGkjn+1O0V/G5A7aGV+AiYujRoHnlInOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeMUCRA9TVsSAnZWagAAHY0P/04gcP+bpJyOgPcCSz/O\nExRHQyjWsKUj/TCeR3H1fQxRwyey9wN/waOagwWO+xyo/GFjvxXzp/OPBiJ6\n1jk2d60gRM4drX3Fp3W3vNbVxUyHwSuBOdudtdVWdNQ6+Ky+K38eqXrBKJ1U\nOvIjIX138/usyyeHi4tGaHHqyo6xbBn5IUFERcojnMKPdRlgU5m4W5YGx8ha\niTAAJ94HhW5XNI+ZSovTYIxNH2EzR1aL2erw8ajL4jd8L6BGmGNEQDFddwis\npuUmHE7DGZnU90YuiAsT6NV358xN2u9S9SGMl3xYzPPFGshFCQhc8AT/0rTx\nSzLdNNfMpQDykKOCKbR2VwZpDZxfw27/uam8aVpYSnwNTErUm14VGAto7rAM\nNNvQUkXm9/EU9ozdkCCXS/zF22bDAUhYd8PEXadtVsGusQP6V9jFAIbL808l\nsd7s6TPTlRCp5zGae/sycHuNZK0XT06yDdLQV2c1tBHZrMdT1hh0XKFkp1np\nsI4S3sjOleIVFVLkR9DkRYlXo2HLrVs396kjK+yxsa2aZ5nr1VGcRl8+JZHt\nuuSn1wjj+h32FP7WsLd7Qvo1FeHSb84Gqb+7hvfcmwAqAfmDwhY843iZp0XK\nBCNxAxFwaV2TzX7uZUlt7d/e19laJwAKwJ8UlyyuX46GiFH4pATEXnc25Y/R\n7iIq\r\n=tWjX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.b411e7033.0","@material/theme":"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/line-ripple_10.0.0-canary.b411e7033.0_1611784979739_0.2003480809675675","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/line-ripple","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e957f84af48fb21337524b2a9e1647a417fec947","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":34,"integrity":"sha512-VCEJ794I5kolxZdr8YZ5oE1s8h5kx7g3vlLWU8xmv4pVyU9jAws0DxFA34qwTRwbU1Z/UYgTW11onARYDTbhcg==","signatures":[{"sig":"MEQCIH6alowujt22c3WYnr0M0H+cDbcE03sSkSLthJhpGRLYAiABirr6XVOKDiXG55k/rkSFlbee5GPvqwF4R9mvE2BMCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfEhCRA9TVsSAnZWagAAfLEP/1NSkOI18BPLacYgKcd/\nkY5aQUhmkP8WPJLWPE3x0DLemGuEdDpnHuC3tl1bhuQBRf4r00qtRMSe5lYX\npHdnse6sGG7J5sJ64ctcye0tdJatvUVncHRyxRcFf4zo5KK4kpBv5BC5bUxg\ndhDTOjRDDbl+kRH07wMveVJHGswbkUk2M2oinAYsAod3tzPvFeyQpa3PWaq5\nl3jz4G5LnAk2fkuzL8FJTWfQL2ygZ1DDrLfIkMR4KuDS0VRb1+b0HMC6I17E\nkG3rxxl6GwMrKK7fRioRMXwN/rqEAVUgfwXUw3SoLKCVLDacb/BPQzebyfWd\nFn/mwOGBXR5K9NJxVdWvqOZXSm+HVy7VZ+1NTFyP0ekcTNJCffwG5JaShEFy\nupHCHgIgjJwiozTBWmehnBCc6cb8CsyM/GagmDQSCZnEDv7evRxepNHaxoxd\n25FWQW84BMXVXyw9p8+rPP3XVyfEfYcdumkKtYWXl5nwRfR+5RIfeceO0Ru/\nRpB8fcoSCLzWFOrBvItMJTK6X986MAES9gm8KdIxxp+OYzhkRWSV8ltJH7E3\nhomDNLWzyQ67eIjpmyJrGobnD6w9CdLILzfhVcVc6BvEs5uPLkRbmmRFxGWp\nIhh8Yf6uY7xdgjaK5PHG0ECdqGFThoTn7k+VXFCc3mDzHxgoJw1mZnLBfFz/\n8va2\r\n=Jd+C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/theme":"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/line-ripple_10.0.0-canary.a9ac16b4a.0_1611788577017_0.3561371337669701","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/line-ripple","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"866628538b7a9f72867bb112acd6a908a8be341e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.fec7b42ca.0.tgz","fileCount":34,"integrity":"sha512-NBsEVZTwWeKAW51Jox7AnAvGAtn/VQF8/xe3oGFcoqCmiQuTXuQEqqg5AvdIVtiX9uxjbffie+OEKsFQTGt2Lw==","signatures":[{"sig":"MEUCIAmwJyY7MCUEhkIQTPNcndjV6g1NhYtW2xz+qL3wtZ7pAiEA7EXieTRYyh/PPQH4FCNHQxEAJOCEIfDbrCbgvAVxej4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw0ACRA9TVsSAnZWagAAiX8P/2YEzcOOVnOei5NqGXqj\njNA2UByUJca1JxlfZYB2zPYc+NjRH/Jzvb1BWFjGMd4oGygtLUHaJqSSm5eN\n0d0y2xAE4SN8Bi17fgbAdQoO3m4Wp9AjXz+KnPhprdVJhvz4rVEeeFOnn7AL\nBOO8dUB5FgSs9oDVimnDYZIYE700rfzoVTukyHNtTarKLwzBYxk+xnuRCaGM\nrqI+aarYmf8hy2u07ITwc7A06AxYQqLUDOQss8q2UTnJw7opUHP+IjloeNWL\n55+PpB1LivVlkdWxGDN+Mf5N53lgLgF97hmfB0BBWVWWh+kLcAuXUL37Q4pQ\ntxb+6yK0/OGi26ZcI3TK0wlJv6O12JsDn7QvAK6qkdlYoSKSwqtFRxDby6Qp\nHGw+CELxRbt6TYGvLtsLkuI1RMbjEnSLL9zKCFfBOX5imM7u6ktsFcXVucwR\nMNdVPCE8QCcJwUqNV6wsji5JSU2gzr37Q0btT8AnpgWxnZEu1vcahljnrYyo\njS12TJ2OoIGWppgqPf+jNagAIvOYPNTPf3sCLlk3MScrMDdrK7I2JUkmhnIN\nYqRBlFd1zl0+69+CpOfWcrFEGacDn2lM0iiXHbQBKF9JZUbyTlYjUvuG2hLd\nh69RcB7B6JJ4q1xs/+t6QxA7W3AwcwaFqh9t9IE0N4sLVkftYG+Hkyc9OlUd\nyWMh\r\n=k1A1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fec7b42ca.0","@material/theme":"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/line-ripple_10.0.0-canary.fec7b42ca.0_1611861247564_0.9313232149145481","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/line-ripple","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"633f2c3f8c9c5dc5e74f91938dfe7ef56d940264","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.8e66dbfee.0.tgz","fileCount":34,"integrity":"sha512-9BabNlN1jPYr9ZmiJNkR7vK0NxOKTsb+lCKEUgqBbRJIv0mMntGOqeggLsOI/usgSCHnhsqbXj70DUk3/jih3A==","signatures":[{"sig":"MEYCIQDKNd+wspt7VDy+UrBzFNIJx/dXnGeoyKHYbptQm3i5XQIhANDBYcNEF5bUHP0wp9Lxrxv1GtzrW07gJU/35TO3GoNT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGIycCRA9TVsSAnZWagAACeMP/37P9JGwSqyE/CEfgq4d\nVZSnYQuJRBCW0kFzQ+IPTeGbAhG1Bgr5rwDih5T8LL3gwYPd5FZqPGgR+vsr\nfEYzoLboSDOyNSNaa0YNVW4sIRxN4+8Xps0QIAPFBMvqCWbz3BXFboq3G1PO\nxMt+wDKKffqgOKF45n9nCwGTGWsU/kAfJPCW2kGD3CwOQRJ+oTAYwkUnBAdG\n08ICh2xJLjLYqGS3HM7Prr0ddZrrjsOuwKaV1qMn0ztX+2n7ipJPREtMGfr2\nYJ7Drn1NKYdBQnvWvomLkQxI6MWvDOGnV2YnlQOX9ZRxzHmPlX2HxpJACBsT\naErYJIRjXt035pQistuwGXEys1Vv6xq+GgwtRUHLS/4h5qOeDsLOZfjYKoNc\nt7qSIc5T1LlERGGETMei6SyTyidu9CL1wknSbbuf7Tk7F7k4gHLLifVTlbpB\nj/lkLkqCZ9ExkZ9zztrmDta/sVXEQWtdXw6+6mMPVbqM2BTpWkbsmRwv1ZC6\nN1O4gQIhc3TosKxLUzaadlI9bBGK8pOl+VsdX4c4ADZqlKRnXdCn+0LCNWTm\nx5xLzoRtq0UZAPxPTY2nZJZWXObo5QnTaicPfLjqGzTt7YblIhui/mC0W7r8\n6VZRGsUD73efP2Gc809MB5w4ctm/yWeaQcf0L0oRY915uZs16r+FY6J/H/zZ\nLK8/\r\n=I+Br\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8e66dbfee.0","@material/theme":"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/line-ripple_10.0.0-canary.8e66dbfee.0_1612221596235_0.6739894362633112","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/line-ripple","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5dffb71ca3b97f4cc5cf765c908ab755e3af56a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.637d15da6.0.tgz","fileCount":34,"integrity":"sha512-OA2UBrg7MJnFsA+LZyuavzlO3dztmZHQHpfV7K97QDYPTJmf9Tu0p+rBZHdWVz0THux1EDDRa7AESTL+SXPUVA==","signatures":[{"sig":"MEUCIFYR+2ricBujJyw/kZw435CMgxRoQiCiD+7mxUW3SyAwAiEAuwTfUrMFtm7QGFrqf4iaQNlLYpulGmC15UDwr5LIQ8s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ6FCRA9TVsSAnZWagAAKhkP/3yiGjPqXncEYsOORJA3\n8JTMeu5d+Klde5YlY76KWZxDvAoFYhIw5zy646mjoIwCXsnbzqJ0hllFEp3d\nB+R927tQuJ19DpBh8Q62FmsgP7+Hh9wbLFTyKMtshmrwiIDwRI/PtIqLQtkb\nt+NbFNj9sW59YwdtrXTGagX+sa7QFN4ATitr3O6JUJvAI/7ELeV626S/Vxkb\n9vCPuVj/dnLrd3wxaaP/91mpE4biK6h3FKQPJxn2ZhpWB4WlFa2O8OwroVki\ntPZfYo/0WalkTwgQq3KQESMxmgsSd8a9JANlo9ppZNtgfVJ5iOexhUGHHlGK\nPbXnK4vesZZsIIXh2APDvGX1kJwkv111FK6LRy3m3MzC3DjDZu6mVwJgrbNA\n43SnDo8+upOGmzvtOItnVb9V4mFsXP2ysQLTuYmSe4ZyBe/E97X+AmPHNBvd\ngqwFTQqmctA/6VMNGprdlLdga35yC+rXn/Q5beEGt2Hnpx3qqRJZk2UCmjRC\n/1iMeMQoahnk2UDFY1TH+c78gl5ZoRs/KvKymP5Wnwc8EweYaE37qrvUY2/I\n47jjiJ1pjBwrGd3znn1hjjKR+ErfyUmtmInwkslfC63xFiFy/jddwOzHYcUD\n2VOP9Jw5TIzrJdjeCQ4Q0bKqMSau/fkbhT3RSL4wgthLN8hYxHGkbo9jgKOe\nJAPs\r\n=O7PT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.637d15da6.0","@material/theme":"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/line-ripple_10.0.0-canary.637d15da6.0_1612291716670_0.00963431583283092","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/line-ripple","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ef015f53d0a425eb3f70489626afabefa0cb9b5a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.fb793939e.0.tgz","fileCount":34,"integrity":"sha512-Dryti81i/BBKKOfP4bTwEMyceJWMFnmCmmVwuV7trZmd/5VEhY8yEPehUBw4rwMGmnuBbA30LARwdY/H5CzY1w==","signatures":[{"sig":"MEYCIQDXB1exNi0TerfYc4xeCdJyn15wB/ck3ch3Dfw1ojeDbwIhAObcyAWVe/yByV1LNkD4SJmUYpZW1YiMXSKHmBupyKxD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGeNRCRA9TVsSAnZWagAAOlkQAJ/qtdLD0IKixXMmLPmi\nrQ6s9qqcIeo/fS3SqUcJyp7gMy2ULzcsb8wOYOfbsp0IiGPvfPhhBCvtUgF4\nX1TVNDKIOsHpXL6OP+7RDliM3jVy2txB/n7UDTTwbByPEgtNjENqHHOC1wQx\nlXmJymDh3hjtoXbXpVAhSaxys46ieGD6feGt/Sguk1zF2ILiELV7mU6CgkVS\nIMdY5WvqBQjz/xOKRCbxSSgJ25MY096ts7jDgRlQtpEZIsX8L0Z7p30MqnZG\nKHfHbxJlw+W+MV8J10FjEpdQP5anHHaeFredG29jLwLQYAecwpHW8ifRr5a4\nW9DSu/BsiKXL5PLy9VNd9qGZS7CHGppF9geBsTYC99OKM7YEARrDaxJddFmn\nojtX0KVtP8vEvn1LnfpkySVFQphQNnIEmsPXOSjp3K/J8EyEOLAHS/ktf5xy\nKaakjDPaZeIo2a4DjLzfd64Bnyd0HdUFmQNcssagLxzjKFKqfwK81WtpN3uo\nCcxl8cvMoveAfiftHG/k2kLsTeuN9AAyF9Vee1wttx0T9K0su8pCrR6KefdV\n6/TJpqyfnbeHnDZRy3RkTGKSOlrxe+fY8PoxZzMx6u2lX6SiLmCDlkY5hRr2\n3fQcapRsrIve94IJ2Z8ddMAAOw5RS401B6bQj80NEa5y1aHLVQtpBhMm4Kq8\n2dTk\r\n=4rYM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.fb793939e.0","@material/theme":"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/line-ripple_10.0.0-canary.fb793939e.0_1612309328480_0.3983585577537039","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/line-ripple","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e400d50261de6ab2fb69944b04629e9d804aa0f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.15a4d40dd.0.tgz","fileCount":34,"integrity":"sha512-eLG+reZ7TOW5ZY/Q0Js1wqWwOUripN65bCl1HEK1wDQyHRl21eoYjMXBjYs+e2VYw4UFO3hShAlCpfiChsppAA==","signatures":[{"sig":"MEUCIQCZjVopG3H/M0I7ZTM3X6jJjmqv/s/5SZ3a3DMmSihYaQIgegBMNR8bk3jknbrmeOuZkq7ozAZlMGQiymiyurzinps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGgfbCRA9TVsSAnZWagAA/3MP/jAo0po7KTQE/ryHuuIz\nzYaBjJxR3cHKflo7rX8yWNoIydbs9/O2GgPoG7sL1nTu1bkgXvV8oCFy4X/q\nKJDicS/ALxbYZJ9ezK/YVbUGLyiVJ/0M87Rnit5yqZgu+H3rlvPrtL7T4b3D\n5PVFn02rMn/QMkrDe/q7avzeOdVMUYPZJssVa8qFcVQmiqpb9Sclrkha9cnX\nMnjkKA+BlSF2xCcWmAq7CQXAEJkZ8JI3r7InEY7n4CYRJdc8SNHDCzjAxpEk\nq+ifs13Lcjz/STiXqEETHbsY1Ml7IB3LfLFqdFmIsx+LwWkEqSgpvcv1GAhX\nER7e+9cFbSZtYvfk65W9OBcNE99wDF0ba9R3XBAsCIj20cAXbn/4d/TVjIUG\nwjtvE3d9Q2anVqnbrnfeP9hNf64wFbPHN5eg2rSG8JaX7o7hTwdfWWRwfU+m\n6phN1RmQRSyTEMFML/PEcv4wUzV/n5RiOmjyeEmhHy8NS/8kdXE5U77Cda9U\nnvCoGfuw5/MkOj8ZKzcEENkVFvzxuWwNwlRmLVNukDWihKGvkKULSlZDF65F\nZJmPaa8441lK/PejbqfzGZ+g73w4zcbsD8Pn1y49IJn6cTc1aV6uCELavNek\nh3cqTTV/MoeQk9q7739GL0tvT/W3/nIH9dt2WhTJNOrEelq5aMKbpoDH90DL\nmDX9\r\n=YZfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.15a4d40dd.0","@material/theme":"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/line-ripple_10.0.0-canary.15a4d40dd.0_1612318682565_0.04892519495799075","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/line-ripple","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"248cce76ceb88b0bdf42f5302f5857c417692e30","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.7a003acf0.0.tgz","fileCount":34,"integrity":"sha512-yAxvfsAx5QCbsB4eax/OYYH4TyhUg0wontTxp82fTU9Xd+oUpH5wEciGpvVXhb/waY18CjKOw0J5NSi67iwMGw==","signatures":[{"sig":"MEQCIA2e6naEQnIemG7DT+r9H+05AbL/XJAnzaT5e1fiIBdHAiAX+jAHhKuiawgQIhVpezVp5jAJllnGqydM6fUW25RePw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG1z2CRA9TVsSAnZWagAAKwIP/RPfp98EzTkRYT8g6FIx\n9lzbPFBCQ7fnftdRtne4Mja43U09UP3tfe+P98vh6JVRMoszFSG/zxKGTg3C\nfVRGlpyRDLMQfjiShEDbACg+bKXWW2DgaadxlBHBBfalkRtzE7GypQvIY2Xz\ngQnj0kU+ac7E0WCHFl6B5l8iA+dI6HoeaZoWobNl7PACVVXb3lpWK9NDgiCM\ngRQVzEXphUXtOwRSdAjhSaBr/owC7C1Y3Aqo9OP2F/cCrOsdM0MrEWIrw2LA\nKibt2/Jc+acECo/vg/7V2nctZ+egE07AqMyGMzT5vXgi8hqx2D7DuWr0RDCy\nt1miA/EiiVkX/oaomfc0ruxLH3oh2gsG+NaNdpi/ixx/lRjuzZU/23ZW24Fy\neAbvFx0zT1hbaPepmOqAIWc5R2vdu4P3m/J7Q+XRVdqfhpQRcPHAvBkfpvWB\nJu0Iw/LdsacZeHO7+oFhcGYSO2wxRW8bi2DPRH3WYkKZwB/Qoy5hX8UM9ebk\nOtC+6z50t5u8HbZuQmPVmo6dv5oRMdB9i8CLVINl2hAFlj9de75SR0zGbrBS\nWmRQbhHeVnPPg0JXLESNxl2gnLcf9O5gW/roHQfXw4N0FKTQn1+1GNRh/QJc\nd8dqchshceZfDTr0I3iJoOy8lQeo6NcX4OA5WC6hPNtoFbBfpg6npij0ds5u\nLuYk\r\n=YCYp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.7a003acf0.0","@material/theme":"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/line-ripple_10.0.0-canary.7a003acf0.0_1612406005653_0.6921112431634484","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/line-ripple","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ff2db1ff13c2e15728a02c1b76c644db607cb99","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.05f249666.0.tgz","fileCount":34,"integrity":"sha512-5RALs84FqNdfY4HgvYLROy9qAdLryolemXQi/Vzra010ra5UW6w50XD7V7vMm7tm22JKCAlV3+2T9SZsSliwCw==","signatures":[{"sig":"MEYCIQCXq8KM/5Vx/qtXCPpYshUZ7Rz68PnAezZgG9lXnB/SIQIhAKrtvuiPHWXxcNPiMAGOlJWXHY1Jjg8YZaFRFEkaTFUz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDOyCRA9TVsSAnZWagAAQlMP/3AzYqFGmTfnorq9+Hjp\nQj2zKAZcSmjbMQXUl1a906PtEm201nTswlNi7rAOswaYpPzzSkztiTRooEst\nOyWjiRM5eijiBaE/9iQHzw2QcBO133brIaWjMCZtBRo/Eop4cqJBe8q+DQy/\nHchc1po4tOEmQVnacmTu3JLcE1j1yRqvh9sqtj+OfqOeIuhVpFFfhm3ZywZR\ncCqKLW7CZ9ODVNRwjFHnRPzSt2L6l2DDwt8wCAigzunSGKvRQ1OvGOKVyQWs\nfHR+w1rDzr9dCifJ/u44T9bdF8t6pOjJ+rc93i2OotlJrdhWg8bxi+YAnUW/\nbGJoSn9GMMZhqjmy/Hoq450qcpjnJENnCXKahS0eoUnfPaOmiZJiojlHL9K+\nRMiHI1Sj+OWpsZJhr6FzVNQqn0UA7o/bqdJDk2vmiM9QuAm5ez4ygVssIy7v\nXhkC8Y/aCNf7runLqd5ioa2oclYMOhn1L4qyPGNjv/c0+jSFL7n/tdId8F68\nm62QjZN7+DmXYZLz6TgQRiASEeCDz/8Um3PjdqA0hBDVvjnLCp86KDayzuaX\n6m91Gq6Cnxq7dE4nzTrtbcMo+4IbZfiQ2pPnvbh3CAapxxH42i5pu8dVdd0a\nRkVid4bZBSF1QsG2q5Iy2idpMWqq+s7cJB4m9toIUjCDI0Mhzypf9e4LMBbA\nrT8W\r\n=VkkO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.05f249666.0","@material/theme":"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/line-ripple_10.0.0-canary.05f249666.0_1612460977477_0.8659474959351938","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/line-ripple","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5f9433e08ab173f6aaab3cfd91c23c3bcc3eabe7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.1a3a39629.0.tgz","fileCount":34,"integrity":"sha512-/5Tkh12SEzB9fKoh9ypd5/BLkHiedFjKarRBb96JR/ow/JeKax6mDixMr6iy6OCJC2bkIuVYFSftvcrkQsqOiQ==","signatures":[{"sig":"MEQCIG1+bzm/pKjjDh61NTqZNdEDRIkOuO7iA4a91RGXtN6qAiBem5lzR/9FoSrooJ+1/VkJmtpULaMBSwU1GcqQQDmPOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHEAZCRA9TVsSAnZWagAAojIP/3rw5w6tC9w8XAp1ebdd\nO3CBA1WYM4LWSqYRGnahL8m+lmMXiu5cHPqYP6AfwajQap+fXQPhGb2SapKa\nfACL3SKA3ri1wlSOsBDs5//3EmVNKdIrusYCBH9or75ndsj6qsmMEpDVa/Gp\ngQgmAIKAw0dz/5xSeOjYFxbMvN87FRgZfXRh0esFO6WbUNgkPr/yJdbooR6Y\nSAKZDmfEuqPJgfg6ldRWe2C/yBJD1lRej5g+JW6HTzm16D1ljjQyS9i1q3Ec\nyzKoRfvee9dAcXJqve859zCY5sHR/cc/seUEOdeC17hbB2kdbNTX75JiTKP1\nq6ZthDIx4D3fu1phlt7yCI46WB6nIoZ+AMTrLuWhpfSloAwOtehkzGfDCu7p\nRPr+bm+Coetn3cXTNnwlm77JLgfvzv1bhn2wlNoCFuTz1wAZv8Kw+4HD69HQ\ndUdAOQiECyZYUyRAp9i9a176rqWRl7IPFrsVdGJfFLNRRd7+CUqE+DTznbSW\nEZ5s2EjXPxIvZ1gWk2E4ogwOtNK2nKfgRjvyrvjIEcx60OzNMFzd/Y1Vy3Yp\nIK+SDp/RPHNZXxClMCRaISQ0KebJWb5hqeWfSA9FUMKtNw3bcX7qzeLy+S5o\nRYaSG8LgRFK7EmQf/3Gg4znmtVj0JqOeuFD2+G/9YNAlj5mFDopgypd6OZYu\nA1eD\r\n=0Fpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.1a3a39629.0","@material/theme":"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/line-ripple_10.0.0-canary.1a3a39629.0_1612464153069_0.022107021554642836","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/line-ripple","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d5540f309078ff385a6492635fd460e58a0d827f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":34,"integrity":"sha512-9l0wENkVIarwWccTXXhJaijF/rrLUCtLR98eiserbLpQfJXPRqr1Z+cTvarV3PMMdXoJvvo05FPYU5hgKT36Iw==","signatures":[{"sig":"MEYCIQDiSOhbXZ6WwvEN2USwq/jGbYiQImXxFI4yrB/Cg68CLwIhAKxNjJVU4JEbPz0Yx5cZIIiHM3XeYOfEcecD6eXiUiM6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHZiCRA9TVsSAnZWagAABiYQAKM2xzxznaoBMYGxe8n0\nj2QB/gfF368phBAnUUhPWKIu0ZqhINiQUxDN7f25w5U/pNZ6PY8rTJNB0Kbp\nfaVRjmedPFTY7h58m3Ca3vYD8DJ0lBgJcu4lrc2f5tgCBZN5PQKnegkIntej\nkDq3B+DztpqGTl6Vq09dGQj40Sog6cU2gTfMgC7L1cjs7D+qfSFEyADSxrYc\nCqf81Lt/eG0ujFo2/EhUMqsmLy6rzEwntO+0SXvwh5Ms/tM0pkpq6UW/yyeK\n0wR7AFLYbiKMm4NRY6L0c+MylfJaxgmVLEYiLXVMh5/nLgQCc2BZr3cmaXEM\nvvD6lE4jQCKA08zcDZVRevkBxG0rZO4BgqbRmQA/4dMbD5cjfZaIfMbv4wPN\nW3kUQHWI1VfZ6BRKj9yjk8dN4sux52OXqbON/gbD9eAi1Q7dW/ZaaU2k+Ste\nlbsQs+8d2qkE7eRDu8xte1SvgscjEQAGmzTG4XpKhcjr5uFIrKnezRoqcszo\nNZTuPkenfY5JaskyNuyFXAUFJs4Z/tvP7XXZAnc3x/odMcwOmnE1MzD9SFF5\nOLtJRQS/cTGgCyRGE+7OQvkL1ZUmRNEzrOh1HTAbAji6EJWev8KCRxGFTeDb\nDsUXRKX18C4rO8kZ5dXadrkZ7EuyrfiVNY3j9uXwFaXB8qAVjg3ioKWE2F3U\nVWd3\r\n=GhUj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/theme":"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/line-ripple_10.0.0-canary.8b1cdb1be.0_1612478049803_0.9535175204164426","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/line-ripple","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b9d8683cdaa50f8bde269a9bdc57876258536e85","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.8271f00f7.0.tgz","fileCount":34,"integrity":"sha512-uAqaTi9o44L3GjBBL6dpjKPBRMxvCfuHUpz9HQkFiGtVvdRUZAgx4lpHg1puWbUbw0W0lFiBoeCA4oDt8MP57A==","signatures":[{"sig":"MEYCIQCm6eR3TqKQwGmhS5679Z2ZyOg4uz9me7twHOG6M4ayEgIhAIYKBBKPttHMPXKp6E+stZvKMHcIR0GFi/JxkWr9bwft","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHx2CRA9TVsSAnZWagAA8JgQAJa/pxQUIe5b+GcvLdPy\nc7Z9Un7BFmzcuT77S+qR9GsngaXpryRLSxCUSsBfVQj1pVV2DchhYXuXW6++\n4cIZwbXIuWgkN06zMLhVF/W93dWTLXlQXwtxK+m2XN31ypp7RaUnFooaB3gG\n7pi9yockbSj+tIzJqHBG1c8bqRxyLz1OiFudkKhnKuTPFd7GzL8okHI+V1vf\nwWUxBe1bV8fGlVz7vMmWe29Is/l73uEyFbNhWBoPferWt7juIK8Ve8YTG4uP\npNW3bD/y9yT8GkZzWzEzVihjRA7z5ACOrHPxvMcl3AaoibbyPJ56+yUA5/FJ\ntECpBXTzj00JbAZKQPYNDGcnRazk4s4ZuojrU9uuklWUINdGVCw7Nig45JKG\n/cDR3wCy0W8XYSaSjFr8r9IZ34MbICOzJh/eHf1xXGONVA1d6QGe2cgJeZeo\nKE8K1/nwqojlGgxVqQ8hWCqOGWWBRGEXs8HQILvEgTUUpWraMnX8DHoYyPBk\n34wXASsEP5t4g2UdcjCibt6fZ9tjZADafJSBCHegbsc4haKvI48/s5/ji7b7\nS9elxeXaCAGebPoREDKaOW5BQXyP/i7uDHId1tDxZewj64DeTB0K5kKBDZCO\nVkkCaGXo7DzOXDwqmeOUq9whJiiJe727iaRtqDfyBAX6ndnwaxCkwshr2Zz/\nXMgZ\r\n=BMRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.8271f00f7.0","@material/theme":"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/line-ripple_10.0.0-canary.8271f00f7.0_1612479606021_0.21268455555954713","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/line-ripple","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e93ee7f9f7a308abc5a805ab889222e655e9cec0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0-canary.533092a90.0.tgz","fileCount":34,"integrity":"sha512-LWmgS1YZSNBB86krxA8IWZD81IxG9X5okkNyemfEmGZU8FWKislcFQjx3ARB8KXKMt+vepIpHqwPqwsqtpJvCg==","signatures":[{"sig":"MEUCIQDbCWGAwRHn7r6OpbXCyI/q+HYR4k1vEoMWdI3vRv3F1gIgQX2sBistjiOzLrsh6NQjLr5+hQRSnstl9jMUFjjw3Fc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL+HCRA9TVsSAnZWagAAd0sP/1FrAsVia+Qm3Wu0Nhzw\nlDbM4fEDeSfodhAn7BlmzBqA5dFkl6bjXdZfcETViJRT7dmmKPWEJdDKGaIJ\nGnF5weO7dQ1HjitQp93XNbDoPfkHh/EVeNwpd3v6rKusG45jf3qdoX7zoXi7\nC/ps+dof8SShq0oMajisXFMZiNcQtbnLEXCuQjCry1GVcLf2vzhoP80zcTEb\nQ46P7aDTg8L+KigXnZbmfAPwSwlH8MJzSrEy1F6PUGp+3WkHUMfIY3FLCcpu\nuZOlic2fGV3QmQUAGC1HTDE/Z/VltSispiamTzpsLsRfgpLbXM/72JeRZpUz\n7+x8ZkRuunLNNuFHscpMohYU1q1hYLbsgEVDndkN8HMhTWVJjLK9uqadlNOg\nBt9cjE7EpmejladEMW3OB44lHBEd0ZgH0b6tSISpOVQ6CQFrLoA4Rwc6LoAL\nkxFOhFvmamXrSJpM3jeOTjgOZ82Y+fDmQOpuukin7xodf5MMenLxxW97hkQD\nYrppB1C5Vw+9SRm6+nCPE5GM/e7F4RPnL38livpRl0jQl9pLfC4xqmocTn+w\n6rMSO1a/juo68AX0NW8aoA0Xn425TYSWu1rDDfOLOaP4yzc/4melt5zX3V4b\nsvjM8xfIcNe0F9EiMF7V3Z4wNWF41u+0eu541YM3WWcR0BZ4y1KfpMtfzSQT\nNA1d\r\n=oT9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"10.0.0-canary.533092a90.0","@material/theme":"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/line-ripple_10.0.0-canary.533092a90.0_1612496774796_0.29337945038625723","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2436338586f639bb7e95d347bd344f21d63bbc6f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.633a9fc7a.0.tgz","fileCount":34,"integrity":"sha512-FIGMvHl0kkrtDzSgqZtq3lfMfDUwHv/PdAymlyEX3OgwdefnvSWRW8/QIOyz9GA4gy056afXY9diOjJR+wZJPA==","signatures":[{"sig":"MEQCIEF2Qz2NZUS+TLGGq2ksqVNnji1jI9HZ6HDIfF9vgEirAiAlRv3vdSy5fgx1t4A30IxvF9/a34tu1ElZ8hU7KAaEdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW9vCRA9TVsSAnZWagAAD40P/i7cfnSF2VNF54PRO2qm\nn9pnBmKRb7Wc4gHTiirZKHXyTVhy9R/3D+jEUmHKLsuPwUvh5s0YmusPBfii\n+iS5iECMHJde1FFWM7egFG5LZH8tIRLcdseWdiJWr7IaJp5hQlZYTuKyoCaU\nt02e2Eh0MYYUmRHsUsMEqlqCSUqBwNAM8Ey1wVYnn2rC6l8irpCoUqWy5As7\n5MRojoS368NmoRdQsE3qiDQ7eA+Y3b4sUsP3F62NkiNJMRMQ8F3EVVuhiSAC\nYrMm7aV0hnhXbPCtSTS+czv6f08yWx7rYsZ8ZK/mMFdP+8YNZEUQbUPQXl3j\nuTqclOYZpGwWcZbpK5m23fH0fNiWeEuuBaC5KC4rVrF4jt4EE28gy4bs9wn+\nE5KGBtCMhgrerQRnHp1e1ypS4K9njHEDneVep9UlpeSfrxFmXlk9LAyMoUxA\nUMB+EzxZBKEyMgN5qUzHFGe5o61Iwjpg2+s6RWGZDmeKJ/LvlgD+cpe/WY1C\noWcHHGc0gNOiPTBrHifVibMZq29Hmp+d1DHAHp06MJxiR1F0qQSUItCCBI/e\nVVEuGQFfWWqn4I5nxnu3K2b60KC/UC8vvVeUxy70WUWxzrAPvK0S0looXmMq\nMZlj4j7/AseIKw4Vqa3MNwGnU/iEARLo3HEvj39Or7FhCblZCYQkUudsKzqx\ndrF1\r\n=d/DC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.633a9fc7a.0","@material/theme":"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/line-ripple_11.0.0-canary.633a9fc7a.0_1612541806422_0.0594672281787747","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/line-ripple","version":"10.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42a6a158d7a131b79f4b72da23e8136d723fe3de","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-10.0.0.tgz","fileCount":33,"integrity":"sha512-68Kn1cs2T0GWRdAfdtoDz5grROVeGtS9WSYe0kCDsoXFmHEjGhxVZfIT3E6as6NcrP7haLPJEV6ACg4tvzr8uQ==","signatures":[{"sig":"MEUCIQDujn71ey1JV1V1soj9sWF83lYk8rX5yhoudduoaGnZrgIgf0i0sUSa9p6EttBpDvicnoCDEYHbNbdKag94Eilo1o4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":124784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/CCRA9TVsSAnZWagAA+4kP/RSGHWxs5CffiiAsp+jC\nJsHUNiTz7nA9HrcwpkD0HptXGJo46YFXoI3+3scQDHD4L3xeNj0BawckJchX\nDIuTzX6sXo6VpeRIX+rhrjMLPQkZIO46O33g3pNaBgPUr9SKegmuJQtdnVI7\nwD9KWLKFHGDScP7nAT/CVkDiSdcqmQepOk+B52jFAsutHZlNzstxas7E1HLe\nuOvsesuUMxZRO3J7dWkdz3woQnMdDb/9tHQZQPdN/qxwiosHpJGMmXUo/jGK\nxWIE7RBsx3GwLE5AM1okF6z+4EpVAqiQT901T42mtRYrDSwX9CDN0motP2eZ\nDwDcxhW77riBqkCUWENMKnTlZJTWYBYs8fhhldojN8SofzRuHgWjqv7XBIcb\n19k7+mbQjp9rJeWxTaboRJG5MM3JkgdWzv8COllA89v13LFESEhJPZnyYFTk\nMoQoLeMzGmZU8EQE+pY6vKopGP3k6TMs1ilcZOtYd2P+xGnGIE1ejtYbkpJC\nmBEDzHKMd3fwIpp5rxsShV1xzlnnEOcoCzNZU90RJjRKOmotS0n+0RZo5Fld\neDy9cisrhebkUcPul6FCSXzzD2oV/rFpcqN+eOMuvtwivL4hXZZe9Dd4A6JR\nB9+0Auh+QfnkJYpmglKnBL2rikTH8UBxHp9Nux1d0avHwhIGLtAxMHC8yUFU\nba2Y\r\n=O/HW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"^10.0.0","@material/theme":"^10.0.0","@material/animation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_10.0.0_1612541890544_0.9032332431101715","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c5b9d2c7c4d74786fc623c77de06286c5d13f7c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.b5227247d.0.tgz","fileCount":34,"integrity":"sha512-LH2VD4B4IYOV5QPmS3Xtwub2kl5zkZ9bdFiwO2xw2J1dFrWQ0hBpDWmn9ccfMyqEiMuZ790k/9GkQg2UeDfJxw==","signatures":[{"sig":"MEYCIQDrZVyc49/UTuFm5GfObxNWwj8RdDyBGAxkIpSuzoQ56wIhAIbpqnkd0IXQVPAyyETaRT0/EaPzzO+vVNZfPbrCJNrm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYNFCRA9TVsSAnZWagAAOuwP/3V26f0AP7PhjIOlaaPW\nBdYOwhdPJhS12DGmnsXa+RJKpIApnVVlHrffzR8mp0YeacvqfV9DJmiIzj86\nd591GeMNd3UqS81RrBZ376osrE47H/M1gu0bm3ua8EcWh4b/U/7dh4GaFa7e\nR4WMbsFyV3z6U5xAeX+b6H0G58tkcwc1ZOghsOwxmzJQuIfv6KEmLyMex9wD\neDln48MKUlE6h2iAX/TnnmmmoI1jqeX202kDmhK9fdpfx7N+nx2lTEKPfSce\nGmjSpAQTAHfykAj8nVdQ/BU1+QBjCHHNw71P7qvApYWGEt+hjgrvesnQqp8r\n2mGPWxmwCJf6raAeeGHyNfJPaFD/+jlDhlUuyfEl3jbZ1l+RnuIppy/xGcct\nthdvTtTnl+SksXxs6/W9D1YWB2XBOlXe64u0IhpKe1s8oTrpFuakOQP9yzs+\nA4TZLQ5XwY/SpfunHQQBESTUJHzTq1XMevFpQGrZyQ5AWxLrBvRmmfK0OLCn\nKr4DYAzJFNFv/ps5fvJz06RzHwtFSvAv+AHwxPWdvySwGeh3zJikv1JUPFwC\nQbKMp3jVx9dBQRw1cdJHDnfXGiyZ0GdYegDOXowlyhVe0gPVGfQae9l8GGlu\nrZpAepZ4baZj7a1OTUTmNcrpmVVbaEChKQEE4G0mJhFvUTdNzA8Fqfaeu5nV\naTCT\r\n=WUIR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.b5227247d.0","@material/theme":"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/line-ripple_11.0.0-canary.b5227247d.0_1612546885144_0.20727576974565154","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"40bc6800444d2576b446194fd6d20e294a99a067","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.95322b11e.0.tgz","fileCount":34,"integrity":"sha512-20Y4X/4AFCRq7UNYACORqbdHzhdbLxYBs0uYCiL+2sY2dERSVPz/3Oql2MxRdVIrMAMGcz7mRh6IeV8CueXbCQ==","signatures":[{"sig":"MEUCIQDjqSZIl4FV9WLuvM/yOw270LuOvPIG8Yb2aQuHhXqJqwIgCQ2govAu157RCe55AAkjdu3oUaSjDmZsOivOIj9oH3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdU7CRA9TVsSAnZWagAAjXoP/3we/reabJ6eKb9imqKr\nxBESJPq0qqaIiD7nveL28dNwphXP1ncU8NwvdhYvyDfAP2SnJVQOeXBv4d8o\nwGWut+TUYdITof1XzTznkOO3jKIQLNzs8bUQtS5MWDY+YwOouHO5X5ucgrSm\nxnPjH28PvmBoVySmyUyRNPWu+XjZoNxNbphJKsKpqyAmLFCBueJkvfFV0fj7\n1OmIC6ty4Qxg/a3klLLXCywkYPDrI0SuudbjZt9i6nsYeTtn7uKVyIalWNFT\ndeQDfECshFiyfhVgFjvQaSVOAu/sqbMMBstcqEDXxe3N/4EON0bvZKClbc8A\nfDxJdO9mg+LuONqODDDVC0QGrftCAPCVBJgSc1IHulXbin96xIeobGyUdGQC\n+4G5DC5f6hRzcEp4PNcq6u++FLmbTSEU73TYLc+0N36Rye+34B0vZKbhrN33\nWk4VkoIznz2OKJ8d42cUeb3drL9eJxKxiVXU0DSUXBZROlQ0F+vLH2uQa0S/\nDsFy81MGGTTetz/6H7gG28B6+SLloKZL+ZzlISKYe+H4nl76JYVqstk+m4Ak\nGnxVQfEEDEC9yEgpTA7vDQ0vhWsiXH1OJB2VylrGExQCz/SnKLKFYLTx8bae\n0yVbPF4X6IB0Ux6iPFOoLi57uZtrmOEqr0S+3xI5bazMHSeMTZwULe+G0C64\n3Wi3\r\n=aV8a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.95322b11e.0","@material/theme":"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/line-ripple_11.0.0-canary.95322b11e.0_1612567867237_0.7783457950656403","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/line-ripple","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6f96580f350c95782bf1a156fb2c45c38565ce76","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.1f318ff0f.0.tgz","fileCount":34,"integrity":"sha512-x3tF9U0MoN2dlyy5JeBIFtvkAFOzlPpspXkZmkkE9DihWRbyaFiythrUeMNzF6t8OsIR1RGBM6SyaOBhPA5rGQ==","signatures":[{"sig":"MEUCIQCl/Iwpio/z+2/AKcvGgXArVSQfl9xfVVey6aqGY9YeEQIgZKbmlFToviVs2yZPQ1TEiOMDzO6Sb4v3r783D/GrRXw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd0FCRA9TVsSAnZWagAAlZgP/2br+NB2+tTbfwiRLQQ4\n+/mAwGJtygTHth+8P6Mrgu3bgGlB38w5EMof+zqhBCJtTiyWXftLx4U2Xop5\nk252Ivd8BDEaXJy4Avoh+tIMgtsUBAt0koltuEku8TVs/GThchWMsbrBH5LT\noqUzAl8G4fL6fcYnE3i+K4i67/xuLYusFJw1OMpCDRpAyyeOwyX1psA9YL/i\nCPbHsW5olKRRnicnfmzQDWiZLAmXeRwi7DLk6BbQoGdSQIrx6rCNltfilQbx\nh3vNDukn7AGgXQEK0KPsPBMZ84M6D20cl3A0ZSAroVhShVdY+atq7riL4k49\nKxvdJdRLBuv5xKxXJobKjpiek2lu/h5PMGRjNctvbDOu4L+IwbawCGeZf/Ty\nvWA81pN3TcKfMIGT+xdvDWUOqEJZANa0FOGbxE6W8vKRrpoK3a8ldurKG0Gv\nl9N4/nHpTyaRA89lVif/gClMLnhYkrpBenJg2dGV1ysdl0njkfb95YH59JGf\nnAebwt1yRZLd7wS84mE2Wjiu7FXPfp+LnBwEVz61g0wi8/+306x8S77r/xJE\nfIsYeSapiTRFgv8lkSsE5FosS+tiOt4SrLv8709tXDKksT3O9yEmGFAKKKY5\nUz9pT5H4VkIl4FRYzXySsRI5PEBT+jtm88Vn9ztnHgo7EkGzGUo2AhCN5VIW\n7t+z\r\n=DO0Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.1f318ff0f.0","@material/theme":"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/line-ripple_11.0.0-canary.1f318ff0f.0_1612569861328_0.8233360235041971","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/line-ripple","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f4a5a1fd181e79c13213345f39fddccf8dd11b9a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":34,"integrity":"sha512-cfHRzwO1ItYol1ZhEdbruAQKhDu9YKqvvQMSsMteBur5ZvsvqpPgGqB5QCGtbzNh+jWHYvpVKfQM7ve70GNkig==","signatures":[{"sig":"MEUCIQDqw9Ql3aYl3HE+QU1QY+HTwwMW9Pp0WL9xyMfOUyihkgIgFqJEeeFYwUXrRXlsqumbSXsbgSw81HnLkU8U4xoGvos=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVKbCRA9TVsSAnZWagAAYaMP/RU+bO+rfG8X+Uqf696C\nfyOnJ+KTFc0u0gEMGMqz0kRVMNtVZd18EQiRGTiWgj/MqgNOZpNAWTKvEh0V\nvv0A12rmnDdSD/yOaxyejAjF/Cl6r/bGCADboxSkcK0jbLN81IfMXP1wd1Jm\nXM9PusrTtRBAjLoOY3NbEz5+mnMgpcjlF8uMyQ8wh1sUFHgA/rnHo7jbaQGW\nzXkABLXg8y2VArAGg0Y890dhQt7jcc9TP36G6Pq8eyeXBA0CMNq8ZM2EvZ5I\nucu1fijfKhPlem29bB18E6s+ZwzbT2HKgtYW+LszTLTtYypwymSI6ihmD+hZ\nMZldYzsTdirA7bA8O8zM2u7GpYRyQmg9AzkkI011pTfUruAha5jxfhYjVEI5\nQDtxmttrfjMDyA6nchjDB3JROcACzS/qcnFoDhvdezHI6IM7uGiLi4NX5jv9\nInXpCZNSp701DQQtjNZjoMieLqhnNXSqLorW7XROXyJw7hMJE/geEF60mVce\n9USUS2bCD7S0QJX0qFF7eCnjhgqEW9SsmK8fkGKuTy78ussIDInbrK3Mh6iS\ni/Y8I8LHPSNeTrt2q7oGRS47O5I/ZxFB6vXJ1fUIQuMZBeBAbmhaw7LN0ivv\n0EQEEMQ+AIp76i6YjawizQ3NSWNtiRufrsgonv7qlpFhNSufyCa8IXKLhhLg\n4BzN\r\n=vuCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/theme":"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/line-ripple_11.0.0-canary.ab12cf7a3.0_1612796570229_0.896769708837031","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/line-ripple","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f475fcb990fc88587d21a8ee249a0bafde5d3a0e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.98db2c5ec.0.tgz","fileCount":34,"integrity":"sha512-E24EfKg7xsg5gU6/z2QP0f+GkZ5OSNFsFQAPh4XnYnPeyAlaf2Z83qnc9dek03H1BpeKZEMVzkb/CBehLOfEoA==","signatures":[{"sig":"MEUCIAe0mZN8qDkonLRfZRe69kl9owCPVhDh0KtBYXHljD+mAiEAuGWKFytFE16KOsBSvoegfouA5YDBepLmvnONO55lJik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVnMCRA9TVsSAnZWagAALwIP/3+LhsFKsLFg4bkqethR\n4gQoDpsIrA0cASPmaV5Cfs4w9xZqHtILXcY9B06py4M+R8IyblRYdNIaNM+/\nTULamwBEHV1nAGuBNO09AVsTIcXN6q/eBBS6l/bvH4y+KmDa1rKoC0ekov3l\n/rBe2rSuotRgMsOcfJixGf5lSHUoftVlsOotevh8xszpamrGf4uVl40KG+RY\nXYpRZ+82oV6xfw4NuclxoUH7RrxMh/nmWvhyPtdtHr7AdO0DYF2HZ3Fcht6T\nx1M3qbmkUP/ART706od4dxIGhYAapyO2Mp4x1ghybxD3ApUbsKd3CXR1k0U7\nwd+2J0gChZ7NYHyLuPK9iYkIGhwpslD42y6pMIkV8xES7ZYdItfeMxQZjHQ6\nKxn+RxNtmETT+fh+ljAI5wQuKYqI4CEnJ6T3PflOv97C1v/uXQsR6FZSMk/k\n4vGN6AtpNdIl8cjUKRI1rqxwx9s19bOy4qz8WmzmM7RdwXZlvoaQyj8hTIyf\nxfwALB0nLOaW4rOWGsELa6Bu5kaHtMdq89GZfiIKF6vvoyr8mvcXlqkq+0EA\nZUfwrcfgrjhg0d6lW3gI/KgOuMiBp2hPqCEHh9Fc2eb+XSXA9BcsbBplEUEf\nmiDDAzsIxjAbiAxcVHUdaK1CReSoNlSwwqtZN7RkpLxdaLSZ+WcyiCsTKwNB\noghw\r\n=d2QH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.98db2c5ec.0","@material/theme":"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/line-ripple_11.0.0-canary.98db2c5ec.0_1612798411990_0.35350261848456377","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e165cf107fe84bc60afde31883b0c8332befa7f9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":34,"integrity":"sha512-fu3ONgCqbZBR40m8e6BpJ+VsRoEIezoJPlKHKWBoLJSjM2OturrOTp/Kg2sfFsLTbJpJV9EEhtKauudcqR+URw==","signatures":[{"sig":"MEYCIQDac2U2Dupx+N92+I83OA5CrSEsqmNsMmUWQegLArW9gAIhAKFn0I9iM2q5+aiFplOXGZioG4aMzO8P7Ej1ME1ybR5Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXH3CRA9TVsSAnZWagAAQMIP+wbT3xrEoM1pPzqpSlnd\n73ZBX/IKYv0bLLuIYdxlMhbalINKNyl/JtylIRR7kcjjjjSRicu59U0Wz/nR\ngNLeWxWhABKCQ+tjU6VQz8qZdB1lhZweaMBJbCo2VoYp7V5B5Jft28cbPQ8G\nlMeQiJUIR8G9Njv1+1bpVoKbDzl8Jk3ZH3ziIokeCZ/uFofdl1iJ8siA0MXw\n+I26KsLwBsfhQ/YKMwDoDvJwf5FdC1kRQD5zZ1idaVEjL37PGP8RHYHSdiIy\nb+xS4ZdVbs+B18pq4t2zUyNGEOHqwqMpu99gtDR4DcAgaln2JF99WpI31FYX\nUSL7oYvn0gL54tqojHyIJgWZ1Zr/FsAczVv79wYNondEkhAr2PjVzTXKyCoZ\nSelPCE4NBNkQCRUJxqd1Q3vfGNNTbkzvwV5jj6lNHmup8HYjRbcjC8CgzkBY\nXgr4N2IgzK8GqCp7jLAqRsN7z/ELelczBIRGh6RaeaofcbCmOXpHE6nJeqRk\nITJ9jViLl0+AKnfh2TEglHYx7KrpUscUhIty8zyzixq/CFLfxGKh/QZYsB+L\nlJEn+3GILMpjRivJ17RPiOiKHDXpE1B8rHe+H1PMfwpKnEUoZJhbH7EUeMfd\nuKsgyNla2d0S0FskjwUq9YhsJVE3UCcsZakkOYQ33zepdUtmaN7aoYWG4ter\nvgah\r\n=iw1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/theme":"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/line-ripple_11.0.0-canary.1f86b9f6d.0_1612804598961_0.12800823180048404","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"542c2f35e6c9ca51996910243cfdd57e537cc002","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":34,"integrity":"sha512-S8jPdCf9L0jNwZSO1f2vW1xdUWDkG9GnbCW76z8UakW02/JsB0PHfLE60NMKehE5oNwtwaRvcxrF2TWMEZOQRw==","signatures":[{"sig":"MEQCIEvQq2pHII9KBhCQhX0JFoS01BQNEDnTYVIPGZjVrEGjAiBX+mAYez2MJepecDdcPhaCDO+2U99HTXR/+ijfCzJs+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXwMCRA9TVsSAnZWagAAmkUQAJAPiuDVNYtAPD4W9sEI\nTHoBc4xE8JApmGWrB41nBU0G4OEolctG2LWzxNMwksO4dR8KLBEBeysLqWMg\nG9J5ey+vnk+btbMc+nZGAf1EJOgsdzIkmDne4nxcQZ+DliIHA/j80Q6kTt4Q\nnXFL6toYQP7O/DXMIkTqJNdHqpS45ybBhlPnq7+vgvH9TdCYIQuiryV8k5EA\nAyib1y82r3A6zySx2vhnCCbSZfoIjnjmOer14y7+y4B0XqZw+afYOVEICtT/\nWOY2jSBS7xFWGgLe+ysaNLQrgRdqCTtxu22cEqgXzXhexCEUTQseDYyAXDio\n4PhBI6FUAKlKs9r+B8YBKgVMwrkY1OtehmoWxTl9cHWVtRUTDlgo6AoHKYKE\ncMixgTKQHU/oZ5Gj7jyiyYpvgnN2Hwu9xDo790H8/Tzf1v194Fab/iiUtyXK\n/UH08CX9bLLMD6OrGbjRoGMKTPl/zNENBByrYKdnaDNLi+T1ubjfEDycgoWN\nlC3fHL2AgG1l8nsiEdmvhMdID7iIz/M0RjQwZPTXdoY/0WmTL+H8e16OlRod\nVUhDRtMA21CjyJxvwzPLHNnita5EEdmT2xagGehoWo9XXMOQXGDJ+YNqB4ke\nHmDeAa/AwuQOJYMh3sFs7Q6hHgsZsemnNxyGIUpaG9sukJM7PXtLQ7FV0KKc\nEMV2\r\n=zW9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/theme":"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/line-ripple_11.0.0-canary.aac8f5d9a.0_1612807179359_0.13813409691303913","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/line-ripple","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0e830f943fdbedc1db819cfd431752e78de8e9b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.750e18fc7.0.tgz","fileCount":34,"integrity":"sha512-kX1LXbEYNDiJAgiXGexl7lOq4rw95IqCFxZpQ+VWAc57QrQW59tv8CzElAXsGYFn0gA8LxhEg8eH2SbWVWIALw==","signatures":[{"sig":"MEUCIQDa0pja2FX0JBN1SQul8mV1gh+wgZGZn+lqB6Ohh2K+oAIgSOiCHK+IuN1z1qtWNWAJIsbZEOkmUHcNIWoXPt2WM6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIa/fCRA9TVsSAnZWagAAWP8P/RIPOF8GENeEv1NTVM8K\nSkomt2KPuXjmwd6Ce1HqcmDlGXGfFH1ax6YYd0ZYIi0KVOF+W2Z7VvvpkZb+\niUQqlSEk6dzkaeD4eMRplu6TzruFdyKXcb/it2P4jwCDlpEjdIIaUsOYtoFe\noibJdXTkp/x0TZy5tGKgqOQszL7CWts8GKNCNP8j6nXgxjCQCy+pJHRc4fIX\n+KxzmKtl1w85IhRjiN3sw+TToVqbfRdhP7hDCm3PsO2jCFkxW4RRiZFQu7eW\nf4IB67ot+TaLzG15NiCNPWcakxaSA+fDnRLzbd78RjH6D8WvbOQ0qciAuJ9v\n/VZ1Bpu4/J/wFUpgghalXN0lqzYpBHohiJP+Wc7GX4UIOJrejSD/JeNe1mou\n/tQHCzJnhkPRidhc8Af4PbepV176dvpT9pVyq+V1bViumThwbAVEFOy33SjN\n1/mJj+ca0drmswQD+2wpgcGKDaiv9uXNIDPhY9CkrWPuGxYR4ljaY1WvT21Y\nA27cubkD3bmH1CSFj3eE2peKu0Hy9lzCJAfQE/NIoW5mhXRXw1kF1u9kbFAr\nEKaFLiYhHGKGm8dT4lnrjeYZTiedr11v4Vn+TL8JKmd/g0PtzUyW6MUGCgUd\ncbZyS6nSIYc4UEqcSxv9ajX9K6qYNzpk5gVz63Q7jfVISuPPZ3T9iyxbQp1J\nArzK\r\n=+PzH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.750e18fc7.0","@material/theme":"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/line-ripple_11.0.0-canary.750e18fc7.0_1612820446988_0.256734279639121","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4880ef709e8234af095a9c7a62495ba1a122f222","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.b62b1266d.0.tgz","fileCount":34,"integrity":"sha512-nVm/tyVAzKd+xK4ll1jY0g/3nob5A9o6wIYS+EYMdWyk9TDpPPAS9/t+OUOC6Kh2RBPksA2n3MFlKzOI9f3j+Q==","signatures":[{"sig":"MEQCIF60/KJ2lYgBo+eGNsqtOBwzk88eTFXwS0D6C7BZZV+PAiA6Hto8xbCVe/l38Fh+ox/b/mXtBO/O3vc3MNgKowB6Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwQECRA9TVsSAnZWagAAnB8P/ic1O3GAHetWHtpuk9KM\nanbEO2j4lKJrWW+IpVIaJc6Y49Xpan6lgDlDIoxFMa31cdF7wvmeshj6Ub+k\nczcPtQAJWPqgMigTvDd5YESDbn6BjjJs9gYaylHUblIHo9P2KnDbQ5+OyqUe\n0h0Wvjw7p39Gq+eAwqYwYM8zkIW0JYFHH4hnmQtRDAWRTBweBC4oBn2lMdaG\nv1ZH4Y6oRVukvvkKTXsUmJVlLPPgtMXJxec5J63yJnNUXZO8aZ+s7u6yRlaX\nBYh3sALq1ONhAYvY1f4t69XSUt8HlgALECwMgtsyeaTosDmG1kM8pINss8/2\nGLWexhrDibb7m7x2oQjodSa19HfxR5rMmxr7/mgR5R/QmT8oUDjNMWcib4lH\nqnSf0SDuOAQb9J59qe7aR7fIHEkBg+5OdMiGwcA48EGrZoVsdvvO/o3RVsmv\nTx5+PWpHoCdGaaYE/UpipqvjLxYJrf2YKMmFOuDJk7E2i30VubwOW3WL8QgE\n/ZG9NGdpV53llA5dpZUvBvLcFQHlMqwNZl0aIGRXd9lGr1I0aIFdplXq2/78\nFgJtOA3MABV73fjQpSFsBjH0hQ41O/qss3J0iP5qLGS3XUOe04Sv/lhMA1mH\n6XWi4t3+zPiYKlHU3zzHhPzFfliN3WU7dAm1wa1g3s0XgzeNV/CY2V7adsek\n7YHw\r\n=tfKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.b62b1266d.0","@material/theme":"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/line-ripple_11.0.0-canary.b62b1266d.0_1612907523811_0.9605586347304726","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/line-ripple","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6240fc9f19d6dc4a19f878a039ce100542c84aba","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.a6b3101fb.0.tgz","fileCount":34,"integrity":"sha512-XyEYZiV8QsLAo1H5MVMabHvS8e+14SZ2jD2YpS3ovB4zPMbfDad6ttBKpnS5bOKUi+ZcYyvErYzk1emeve6z5Q==","signatures":[{"sig":"MEUCIQDgcxP1IQbQw71p+Lu3bd5i+AlaEowPA3heT9C6kvxUzgIgQjZQDmcuVKxGITXjjR1+iueEA8ZuBVJXPn0e8hB1DbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbrICRA9TVsSAnZWagAA62sP/RU8du2Xf7m/H312qO1x\nV83TDJoqmTATN0VG3zvr/nTS/TpEFJPihBH3nwDZ89B86Bk08Sz+ZTIXib0h\nGU5e39iyxwOv5R1JljpWK6HBcTrv5deQhxXyWCGaQX+0Er9qh3E4m0I9C0p7\nRUlITZ0XD0hudohBj4TaV4ZZMEc5KSI4Ui2hl54iIbyF+3R2iUSNvEDF8m8b\nMO+maThjgEQnTUXz9QDRLAoC1i+sw9yabg9M+8pK9HDh1AA2GdgbzkpvzWJH\nqzf6EkpRxqNiWSlm+t//1KYnplERF47tqLYCCGKO+gwtk1IxCm+TyIRMF7Cr\n+MKh/Z1GYy3XbP513v/Wmvse1itDjqWTOanZR97AZv7QggNP7ZOxNJxPSgGD\nA8MGeQVCdKMKyyOrv9DY30GdQnuOy02YZ5u6DBOKaIM1pXb+hmjC+HKH+Hwu\nh3TSlcGgqlPh0XNLhdJA+nE1yL1VjIoOfHZ0ac7ukQGV58HRWyXJkkjLJ5x/\nBLdZMLNd4733/ZRR9DSC6Z9Y1ea2ESKnuQ/7o8zeGvA0ZIAMmCkBz09XofFA\nTZRlfL3IfZ1kxtoHuYq/Bpp3pVukf6lwHYCd4UIGoCMcP0yTx16H5dBGhACp\nz18xZFtTS1jDlgpI7uRqCWZm8TIhE7rl26LNVwneUtEalc8O7c/uIW3WiCy7\nTPJ6\r\n=/iM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.a6b3101fb.0","@material/theme":"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/line-ripple_11.0.0-canary.a6b3101fb.0_1613085383674_0.39988692624203814","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/line-ripple","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d110b877f0212a2826d5373a575aa035529c17d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.ed88df700.0.tgz","fileCount":34,"integrity":"sha512-QXHa0l9cIheODy9olklqFMeJRdiI9BoqqJzkGyZxNsVqlFSOvI5WdWt4wTmT164u/e33GWz+akKezu8tfyoBXg==","signatures":[{"sig":"MEQCIHvOj4afMvuRJWkebGuz+9kupIEXiGomKb8cK1dwkE2bAiB1aOGsxEIsh9i7Ttx/q/3idquFrouoSMjsWQkZo4dhoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcZwCRA9TVsSAnZWagAAsnwP/izJwTc90QvbARpA5Ry8\nIcp+4VLSqoz7oQjwyw8aT5Vz7DwPUX23E4DXYr9UkvX+CE7ZnxTGPG6fo/Ft\nUcLimghyiZz/xD4FtukyHLU0Zlfwa1yN5UFcHcfeO1LvY6frYJ9E83HtdJjL\nfVz5B6P6JuzPZTRjRuI89hK2tHWbD195JUb5/7duOtBV8uGnsof6XbeZupgJ\nlrw5lS1CtLGrIXsd1W+6bP1xGxS8wMPCxdbv9dkGhn7+7G98KeBMTQGmZrDu\nUJB73C3i12oOGQ3rTR+IuOkj6GUKfwZq8uHEgwbpP5eiDm7cnH4Rap++1G9s\nqM0ka6t+j4AQ23sfbwv0hGi/ONEHxR2iyKpq2rYin5TMZhXXuw6EEIbClxdE\noYb3YkQc50cVUsPhERsn25QyISxFP/KPyHI/d9oj8isR+0i9oeCqnBRe2hXp\ncAQoymYTXCjDKoKwFRvAM3c825Dwb5flUiRISZWpEjLJCe/hE8fkXZNf+IcW\nzA+izX14Lb0qmd7OyKrPH4Ws0+ckR/phSAco8PME3M+i7hIFy/Mrc8kmRPK8\n1Qd61zs7nWmQJsy3OSSafVP+e/hO6OxFi4OerpZiNS51lNUzlfbfRUfdkclF\nQl/Mga70ptYskgvPlZwvb8k3uQbKUmR1SrRzyUB/3kqekdwo8uiDauB7qI8Y\nHf0P\r\n=hwqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.ed88df700.0","@material/theme":"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/line-ripple_11.0.0-canary.ed88df700.0_1613088367581_0.105283998841055","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"57595ba425ed3208befdc754078f0cfbf6edc8f5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d30efe6b4.0.tgz","fileCount":34,"integrity":"sha512-6Sj7B1N0kw0kuXJFaiTH15q4tVez228HgxLaTqGmVDd0zJ9oFCGlCIqq/wknqKE3NmQzJabBDVMieFhIKa0cyQ==","signatures":[{"sig":"MEUCIEbjBa4tSBqO6nNUTirbjYzsNFfQvr46iKsJjU/Dy+SzAiEA8xBE7vdlbmtQeWGUHBB82Jl/lKu4cCrchrWgJ1Bp2es=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJerSCRA9TVsSAnZWagAAH5oP/1eGU/ELDhDbznjJeq61\nTDxJu6atK1ffokA61Dl8yC+ZtLzh3rA5Z6QoZpI4K2bcNx0/JGIm7YrkxhpS\n422i8S6MSr8fIoT7KhkXG2gnEGA1EMgclPAQUdCStCFbetH06AwzZ+cEYR9U\nAXAg1FUOiaq4kIaeZNha8vHfGgC0xLhqK4oCrrNzpO3CZ7hvdNtzXzJTJUuR\nw40IgxnI+6+NH72Bv8nzSKyJk1VvwIP0LvGC0fxHH4+BMVMAYTfDJaG1Zusl\nv89JW9c3SCWmy2JQcK8vyfNQgkQiNiRmgo7TSy7C+yesOO9s7qgeApvxbntI\ndXstoiIYLpnGWpjXZKawEz+lJzuU+++AeA88KqVVjb+cM2zjvjIkM1amLcYx\n880hVLRiSWoenGNZtLkscWFQERMIIxu0jKmngP+PHagMDNaLyyQaLox9NeUl\nASCVIzLB7Ihkr/yuInRT6L99nPr/xZ0KvVtPmjcir9obAMzSOFTDeImaWm00\nznkWe3nsXbpb1zo/1brcBqSEqjUe+DlIWF7aHaKRLzJbgyjagLXN7OtDyS3A\nEDHa8GX6oxhGdJsNnHC/LI0uqJgpKPl/THM/tGGNVb+9vBjeELVbOTS7GnFe\nJQ7AlskVWpiwh7uri3t9JUUT5cUseSg4PevdLZ0UUjjPfDQtAlmSyI2ESj76\n9Vuw\r\n=8lhg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d30efe6b4.0","@material/theme":"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/line-ripple_11.0.0-canary.d30efe6b4.0_1613097681471_0.7314941617860446","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87392293437be2933e3629f746a17e0a8080c733","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0393bdc4b.0.tgz","fileCount":34,"integrity":"sha512-OvTILYaFqxUKusjQ1eRFKtIDGYcIKUucaWoyMyF5vt2zNsle/3ZfAcIBaSOieUFeHVbT6FrV67a5KAaqOQmZfA==","signatures":[{"sig":"MEUCIQD2egWL0sixq4jBJeWisGtDOkbhJ5I8BdF/H8zRWIWIoAIgdLThozPcmFj5JeJr+df7TNwPt8HHDnVHUjNFRDjxbtg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgRbCRA9TVsSAnZWagAAasQP/jQrFLS/oIEcNlbugTeu\nU0oKIfr46mjpUAcerZ+snMfmAASj8aH47OeLnyW4ZVFlBq34Og9byKabMy2r\nkoMksGQ9GUNbCo6hEt3pNm3MxNG+NqPIWfh908x31eMwUq/T8Z7SOt0PXtBi\nJI5vL9aTK1AZq3s1vx9hM+uUiNNUGMPOcRorhOEnYMlU9EI08BeG8zdgt7mY\nEZhVC7/FZg4nARy5ggMNic1M6hWxt87lpL14LIkP4ZbKcQKP/i6x9c/y1dzM\nmI1EVI2X3tYzIEsSYR6J5MJX96SzwRbiI7QZ1quRXpYAOQc9zn7NukO4dtvz\nflNgDOtQiOFdJbFZt7Hjdf75OuvTtsQQSJ/f5Y3hlInibsHvNrJrZfsZR49f\nMdI2qZflKtfJt6uSzAOn8OnFSL7I4YAviBBH7Uo/snzLG8kbO5QpmpDDGYXZ\njGsLBFE96xdVJIPLZN4AsmZBc18HG/SZJrCZPosm151KjN8cXGogDwklQSBv\n3uFqJWqNuxxtowF42kdLyLC4wd+H3sFAqYckxsDA0CpoxBAykYVFu1O4rS27\nx9x1dHn+E/QsyRkeVJvTQcmGj+Z6Sg9qLbpMUSqdDp+xQb/Zg8zZBA64bQS6\nmbaMxbDkMiyavkzNkhQiNFDTtMWMvoAGQzHpKyNRezJF+aTzFjFtO0Iwp/jh\nm2Xm\r\n=dj0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0393bdc4b.0","@material/theme":"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/line-ripple_11.0.0-canary.0393bdc4b.0_1613104219493_0.7639742953626891","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4675ef7d68369f3d5020cc07d4a3618696020b5d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.7cd26af4d.0.tgz","fileCount":34,"integrity":"sha512-UvTdYt98nhph4mdFmvmopdCbVysDe76doyfWdzFu8kr1N5jZ84GgAyS42e8ODL9PgifKjGv4y3U6JQU6yd/PnQ==","signatures":[{"sig":"MEQCIE1ZkgJJgXnXHJP0iO2/QnCmoXsAnAED29C0BT0OsDvyAiBCb+wcXXmr3xwWoAoxyIfulHZ/gLb8Zkrq4JswladxYQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqW5CRA9TVsSAnZWagAAupsP/i0QOafbgDO0HKbFEGK4\n/Rc2QaglBqzi8tJ8c9nfJE31j9NFuDHOiwtJ6TiOkI5N40n/0sCj1VZ/ZmFk\nLRfGFvn3sM2xg9CtwNKdnUYynRGVhXWvZragLB5FYzZR51cJ9n1Y6YCxn3MN\n+dOd3mQDvYrlpTGGuDzm1b4txLSoy6iV/rieLT32M/sEBD8GOBIQ5/z7CniP\njLzFSkG7PaB7TwhB4UL9VFkSGFWhvFMc1JhI3rXE0dnzy11E55tajX4h5Zrt\nR88l4xMwoVJSOs0wcor8nh/Zp5zur3NIt7rhJQSr8AXLHB+yIRJeby6Z1KBO\nF2unszxA//55SRio4b5vdctAwQ+yNT9OZe7la+0Dnw5yWxOak+C8URxqwRZ5\nZVz33FVBrj5754Y0Oj4GS4W4f5iUk9GOENFIx/E7gLB2mnqafldRc3IY5MC+\nSSb8BKQkkBDjI6Twzm8vLLzBSIYEoph4Rs7VT4qAtGwwZdWBJdCfH+XJZh96\nySkaT9RNL0yuA8HIaIeb7PdouJ/jb/RuKgDxWwY7I/KZoyQpfmo1QAdmXWBS\nX+5UR0pdPzJ/Qv6Hqkt4hULLk1CfoWin5bGEOqr5pH/WA+/wj83S38mSRetm\n9eqxIgmf3mPKTeyFZyII7A9EAZtLr9n9T2cU3yIgYCgpyLgBwMlozds27r1t\n6Rhh\r\n=dWCY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.7cd26af4d.0","@material/theme":"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/line-ripple_11.0.0-canary.7cd26af4d.0_1613145528851_0.2960794893207841","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/line-ripple","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9291b82290dbf1c8a0ffb42f5388393c9bf986ec","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.71fe9a067.0.tgz","fileCount":34,"integrity":"sha512-v0NdZgfB3plqF8dyNxuyx+0spczUaRxgEgGuU2j805zC82bWtaSt7VWyXrmtgWciNmHLX8LQxF8Gdtu3JwD1YQ==","signatures":[{"sig":"MEUCIQCJMDG4fbNcEoFdeoLaHrz40rcNCofLu+ZxS52UKDMM2wIgLBGVYMKY4AKGrq4jPW5nax9/g0d1CzL2Ru0jltveUUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq0VCRA9TVsSAnZWagAAe0kP/i2iPJJo9OD6I5jCj4Qy\nXdS3crl1pkClvJTseADm+1h9V4RQ87yCjqvvKHhGtIYkvDTTyU0RgbVJbjRB\nilrcMFbVG1QAnr/4o9AjeROXQMGNjk/6QVSkIKPW3uUhDxlTh9pNPXPEm4/F\niZJnXdS7xlm/dEBQ39tiB8cTZB/gsmVgdI2Cxhww1rt5jrzwZrilYxQE5usY\nryC2GfJiWZ2NtfOk/h7pwdPt4pkXoXDKpGeadyrYVdRe/pmxyHiN1Qae2emZ\n9OLLhZe4Bg++3UBc+MlOrrDamaiBlC3MgwRu/++RW3kTOvnQnwuZsQZFkLyh\nH71xKanObsvP+CxiyCnTZlUHr5feV9RAj6qHObjZwF7UxCyI3oh4uXwDySRM\nXSyC9SccnHluUWs0RMFAN3UTWvWLZcQ80Jk29eDixqCV5Q6OHweWis3asEno\nOW6dZxAFZgz6rQ0wZDxY527oseStnjw3sdJ7an4Xf7cnHkh1OC7h3uJSqzf9\nyJP3pWBhntD9OKDA3JklzlGzLmUBy/Wr5w0oGLJkvypHsJi4Mcfd3hb/9TXC\nBo5XiWt5RDlnRU7VZ+pThF1w7f0Hw0DOVpnX9A8sNKAeO2EkxpGN4knhADkG\nFRLI92zpk+ru7bQn9leem2OZcLNsfbwqCByZpQw5sxLCot74QcYPqu+55sIQ\nkGt7\r\n=uycU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.71fe9a067.0","@material/theme":"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/line-ripple_11.0.0-canary.71fe9a067.0_1613147412807_0.06841065640887734","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"513c63ce54d49cd6828a22a6e6a0d75b0f56858f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0fd56a86b.0.tgz","fileCount":34,"integrity":"sha512-HyL54iZAhMyzOgxe22epk/yKlW7/8pTtfPxMCh1bvDZVbC5atVpOsqiy2QOQ8WN74HwvAuQr6ngfjp3RumNU/Q==","signatures":[{"sig":"MEYCIQCZo0steTEfs8C0hyIQVahalxeJp40H1+vWnS26HpbjfwIhAOadxfM1y1iK1OqDGze6AdF3E6PydykTdOnzPRpsfSUW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxkdCRA9TVsSAnZWagAA39sP/26VFVMMBuJTdAqzKwkb\nW/MM8aQyw265kqPB2s4c85cl8W0+mzxuO+HaJXhoSsSiZI7nPixBNIagkcs9\nZ2QGYHpIzjnIIEjqDuQtp/83f2W1F8HCxJUsaIKOz9ZEdsRitE67yw4ewxY1\nfmZiVXWoDoCsDHZdrg8gF0ICVEmbxi8SsWPx+5VEhOFYBW3wdZqqNon93OLo\n8mbvKjBrG1jbhHgs8vgEguneoJIxD6t6d0Y3jYNR00X13dV/iecvcwl7s0hh\n0kYrLDqqYxyAloeUTQ83bZbfb7RDLAR5qKMmUXMZuBr9Mx3iLPRogPHMTk+l\n3JFtmm5/AEkiDUgYonmDkgvtgg8/TOEEW+gEjB2LdqncvG+fAxsRlYYKzN2i\nBzKr/R990jgkdsSJNH5BtT72OyPYP3MNoyo+uXskxjSktEg9IO7be1IkpxeP\nAob4PKC/z9qFAUWaiG1Clm31yyOzKjYOH+NgO/O+e9ONJiSQS90kZLMHEKst\nT2CJ6KnPz2X6y+qDHXUua8nQi7Er7zt1QERRUJ2zO3vd5UAyGVDosBbp1TYn\nX3KjWY5fZjNer7fCrh8XIl0Q3PA6l41OD4uIT8jnIBM/eMd9VcwTIOPPCFtb\nIKSwGiXeHl3Si1jyqjf6zjQzqx47hbp6kbKt4/1ITvtNdpZlxP92XGt5Bdnl\ncP9v\r\n=z8C0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0fd56a86b.0","@material/theme":"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/line-ripple_11.0.0-canary.0fd56a86b.0_1613175069166_0.41142097731111793","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c90d0a43b09218bd87698f60262d2b6fa87ee167","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f19bbc4af.0.tgz","fileCount":34,"integrity":"sha512-HSR0yoGw2Y/6Ldvs5CV//hzCdP/7gO6CzM/n9eXHV0EdTMME+e7BfDC7m4CktEPknx/9hSDRYCvj33FAVmIYmw==","signatures":[{"sig":"MEUCIAHVrw+kans+Vy2yTn1brgjCkUfu25+zCv+484wW99PeAiEAzZfHQ73Rw53MT9/3kQyyiusXq/t2gMNyQO8uYJM5leE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLEQICRA9TVsSAnZWagAAEJcQAIA2Uuq/1k/HwfUf08Ij\nRfJg0Y7pcLKdcGiRgpqlW2T+mALrvTVMQgA359P5GyTIdJRCmB7tJQo+4OU5\noutuxP1qHBVIa6/ONjfS0zXxUB6m3z2DAY04yrRTvvQKnKS4rOsrmYELubpB\n7YYhQPh9HXlBM1aGp3vUqBnuHg2qpl0gDv4a8dVExJ4/4OEBXIGIZ3N6qpdT\nuYiJRNU79n888voBi2g4jCYphM1psA7AzRx/zJiKKfrDUEbeiYQvV1Kkh97F\nwgtweCiqrwwYFMwzUWXJfBuPCTrhas4wKoC/MF1UeMdI4tJYYaUa4fW5sTya\nTO79Ma7K2zYj5q0waehqYdmjC3ecBRbQNDmGs69i6Zy5r/xEOMQiQ1X1LqNC\nIJniE1Gxg1odhjR4z4Ca99UvJOqqZGuTsSRgKIa3L4wPLRDwxNy3aWwESrjn\ndbkuPwjQNs7+NDk5Xi7LssJ0tI8zrHrxODzKBKkuvUmFUqsZlsrZTOYleD1A\n+tlV28+B+1obvqhnOE8t6JT8gGnOcRY8tzGySKIUZvckLXJjvXlYdGSHLJQG\ndcs5nYa1KpR7tIfepf4V6ezrm0YBCa+/sbLmfvy9+GauJ3/VlOcXjWbOuLHa\nPnaANsoHmVFSCd1ufdYGeY6gUvxJCL+533YHiG2fADGgBRICPiRGeTGBbDpE\n1c+z\r\n=TJd8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f19bbc4af.0","@material/theme":"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/line-ripple_11.0.0-canary.f19bbc4af.0_1613513735900_0.6328268160693531","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"425280b3515650b199ce023f9d4d438bf092a399","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f9cac96cc.0.tgz","fileCount":34,"integrity":"sha512-O5tE2ob6XiHGaRQfbcNpdk8wcIO4ntW64xd5wQ1QeV68kgpzq7Bdg+BDWBohPiFAPILJItW/DQodEiIV4dIaDg==","signatures":[{"sig":"MEUCIGU6EcPBGV2qOCMJE4SI1ixsIqIxgZEyG+J5LakI3nfrAiEAukFzDgpjnMcJFMNb512uRhUf4Q0cWvm3NWb6trX/eJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLT+pCRA9TVsSAnZWagAAumwP/R1CF5N7ciFnhs0TYwol\nlYQ3bT9hYnuSTZ/fjfoJcN4LhJB4SRsJFo4h7nQiyhTECWLuPEjPkkhT3vW9\n0+zS2xpnkihzslsx85sfSICuUbpN8eknewE/6l4xeFWKhTubkbMYgfN2DW1T\nxp3g74XZWFQs/CbjFg42L7EPpqRQmzpBVGUIOea+NgC4BYxCb/wRTiQjnrkK\nV0gJcNsVsgUpdIsLp9l12TvpPnarGD918E+SO9AF0ordbjeygK0lxGQyjWII\np9Wm6h8237bRYMQ2Ec4YXN++Aco0l6HpCcdtqjaZZz4qpprlVBSagGBa/aRT\n6u8wJKnw0PBc03snATl+j+q3PK7AvZCN13apJ9MmgSXY2qRf71XmhKQPcFlx\nmmepx8+lSYjDhqKgyvhY1qSsnVSt0QSimAPd0DzDngdXo68KWHp+pX1qFab1\ncVHlfMdNmYsAs2c2zZaVhOTY1L0L+WNB0d+2zySUfWcfmSHfiqjk3eX3NB8M\nnmG9cpMD2PgkkWl+6kbvtZHMdxf372YZJIyKvko87oVmVGle6n+iZyvZTb+a\nT9ut1BXycE4wUh0T5d8MKhOfbia/mqELmBpZ8osvVBqG1iwuWhBKP9BZnSA8\n9w93TM/LZZqJJDRdRXe5Be06Ub1zj/TRjYQynl5RhzAteuCXvA2D9X1tI22C\n73FA\r\n=f58h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f9cac96cc.0","@material/theme":"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/line-ripple_11.0.0-canary.f9cac96cc.0_1613578152870_0.3337650667083327","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8ccfbbcbf47adf28f3b190d076fcd58397c2993e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.79ce0878b.0.tgz","fileCount":34,"integrity":"sha512-DuCMsqFn9C3Rsw65Hcg/5RGzWLxztVo1hGfAi0gB5g6U1Tt5OiQvcEcN6tBs87OC8k21jDeGO2+tlwklQD1fCQ==","signatures":[{"sig":"MEUCIBZ7CH5b0riINnnTBDWzVLHcH76iTs4kex1p0X5BbvgLAiEA/EczeHEcoSFzAwqWHDf3LvkuvVeQEl7DgVSV91MTb80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW1tCRA9TVsSAnZWagAAkDcP/0R6/82TUIO5+qvFim2U\n0pcogueLZKakLpmvd+VvNOMHuj+Uwx5yDDGPRPvvnnoJRhLjCN+TBU80OoDj\n0dvEAPB8YNaNbB+b3egBD6n/z4A5knXXIoAGOTPcocU5APtCFgxXaFA9MwEJ\nz5OTVSNLZd8WKeW6aeC9frRUwM+AFWO5vZJyEyx8yBC371TLxgmAnEafNiia\n1csLTvMaKNVtdCTORZdw+EAyIqlghJLaCPApWYMl/tbFSnJMh+MZ5IbPbgBx\nz5/kEPBsWwDa2GyTwtZwQgd9ITMfy5URbu1xiDdRDnKfWHBwOGqomfmvN6RH\naX+V0LKO0KD2/P+0F65tpzAVTsuOO69rc/VQotdU9jz2wqwWiGagELh7gYGd\nuxi5O/ZBll+42+lVPlJ9BUB5SlpRUyjOk+321cT0y0OFf/f631hjw5tIvAzD\n+0X9DypR/TiqSoIVto7BBTjnXx7iM5yQHNUmG8Qp0M0c5481Cg69jHucUhNZ\nau3DxKby42ETCE4B7RT1rm5U/4BJPfGEz5MdlvZmlJFRGJzFKgtLt2g0MMhy\naLjNqLcRf+e3865HgPn7ZepKiWp9IYMONtSMDU7k9t5OE5ayzUj4TcpUNyFY\n1N3Jfd1sHkv4dkBHxxAs9ApLWYttSf8IOdhK7+plbduRE1OWdAN/QCq2GhtS\naB8r\r\n=dIDx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.79ce0878b.0","@material/theme":"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/line-ripple_11.0.0-canary.79ce0878b.0_1613589869135_0.9546179344117678","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"67db8c7b81efa2bf2c682e52937ef52076368586","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d6e507b5b.0.tgz","fileCount":34,"integrity":"sha512-0361CXNQBGd0DhcVEtCSMNkpb2Y5O8qxLzMNqi/QcwsAWxP2cZwJlLOIl2jOFWjFh1+G2LUuJ9vR7H6Nb6Jsfg==","signatures":[{"sig":"MEQCIFnlEfJEYyAwxThh/VocrN5JWuQhiCfaqty3R+UfOT9DAiB3+sW7jtkPiOAPf0Utw+GOE0TPsUB4a1rIeNLhcz1kCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXUuCRA9TVsSAnZWagAA2WQP/3C/rDsYtOvRlVMcagsW\nTF4bfuxZ/kk/hQODd4oONcLGzFIH3WQU3+3Sh39sAKR7cyP2QNm/1hNLOseK\nXlXl4GCVxNqShcVy/918V9+2PCHul7wFD1rKBcjt8vqsCG+r7spcojDB6alz\nQ55rDB0IVV7IJNF4xl2rhnD6XfFFDPv31Nmh71XZX9iMP2YwiRKfs6x6fEJs\n6yWfQ2FDZQZpTCX8gxZbEqrPlUoJ4IOSanC0Rj97xibRhYdLSKF9KUPLW+iI\nEeyPeWLDCd0w/gQhNm7a6NvgC5d/KblcIAP4zbIKHXxRJOLDoIwnZQdRhS+N\nDgpc2r5thYdPfYmJBiYF+HvinMtxjKYgPwaE6U/IpKs0ysVnFpvK51jqcjoS\nCVzFw1LY4YtPbuKJ6L2iGOpt8QsHmK0WGHtp4Co/qqHHoDWJvfv4xtwit+Kp\nkbRZXNVd+pQzIy7C5RCHBzHkSafUDDA6uBlGTCp1Jm+daKynj8v4R7MbBfus\nL0/MGsazOnADruVHIDWeHjmmixbRsZ3Rfbk8B+KC/zDnt/bIgs4IRRyVcWag\nfR8iaMDUyO5zlJHhhIgEeU6NAXpxjM6FiEXcQsNz+rvHBcqjesyGn2arUlZx\nxmqHYSYblrxlAumctYA2Fu4mF0JvDt3xSlMpLa4PjgDjONeVinfuACv5FatG\nx8Xl\r\n=N4AN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d6e507b5b.0","@material/theme":"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/line-ripple_11.0.0-canary.d6e507b5b.0_1613591853587_0.2802094546798606","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e8de74d0ee73d7eeb0241dfa0f4d470fc621ef2e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f2658381b.0.tgz","fileCount":34,"integrity":"sha512-ZLsZcmCixcH5wteJw5su6qFnI+IiGPBJ2i3tZFBWpRfvXouSVIaDTGwOcKPRLWjmrvKXw46XYjZMZrSQMCXBFA==","signatures":[{"sig":"MEQCIFswhYKotLdfobHkcK3QgNXHDyqKtf/g4f+7Bw1EExMUAiBRmGlANNZv5xvxO+Wzf01+4l40QeN9ovD5W5lDQYMtoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZw3CRA9TVsSAnZWagAA88wQAJXYs++4Ncf/geemPxV5\n5CMxYHSL9QA78ABsjbp0K+KV4BTiLk/bLLTqhaDMcc1BtWSaKkJ/mmfYlr4X\nB4/MspUsOPkKHZ47N15AQpw5wfvcJg1AmINei8VNeLtJ/Ht6si/321p57Bnd\nuag3wr6f0vT17K6jotEQ3xl2VneAf7x+A2EFiiUNeMDODH3NCRA9ZHugyhuY\nGbx63ZuyfC+lfwJwv14EqUISz0uQzlUdsz6f8/0MZEi5q0i3ml7WHwwvW+g/\nHJCdgP84R9Pf7JuFAYNHYZ0jMrWzxGB3ArNjqzjU28o6JFFNZIQmYFocs+dQ\nNJChxBOz2qkpYcZQ1xRB31BOEE7nRpvDQkb+ZNN6G7EWAYlgJ5jNPXYbVwEv\nq4Ro6iz0abgcgGPS53roEAebk5DkvIwmiU02dS2SUTwLs/l8jfkPXhVaEvHT\nfv2xJ/ON1H0hEwKhocTmIReUEZKd8Qo3tmybpm4LySkwnGpjebDlLKdWJBEp\nkI++o7EnObpblp4ecCnAFPceTq0adcRoB8yXqIYlIROd2t+o7Lrg4F1cNgMR\nt5FLbBQxSl2cmGGgVnU/38oPw8pZBiFERQ21svb8YdbG8LO2An3TQYQgp6oJ\nZvqWmy9vb5L41lUqAUVQ6k6Exj1tS22za7s8sdTgiqCJOidmy+xIZK/6qlOz\nLKw4\r\n=/h6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f2658381b.0","@material/theme":"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/line-ripple_11.0.0-canary.f2658381b.0_1613601847231_0.9736622902177561","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/line-ripple","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2d74079cea12a5476b3092a92d3147630bda2cff","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.97c4d4035.0.tgz","fileCount":34,"integrity":"sha512-KLWr/2fwH07dO8m8pZi3A+VDCQRVaR0qKOp2Meo6SNOTAN2H5j7R55Rqxv+BOW1gIbhydN2hBVsja5vCYpajaA==","signatures":[{"sig":"MEUCIQDYspPihd5BEr9vIhR90+PTD1qZ+Xs3uxF+6wLDQ8adEwIgIxbPztiHLrKQFUmaMbUd4OpV7nvGdzE19BEON/mG8M4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdI1CRA9TVsSAnZWagAAIRcP/jY1ZkH6fQmHz9J2m9n6\n0OHwEmTz01tJrfeZP/rBL3ClogNSrI+F7WeEc7zCEy5uIcB8TkU1FGb7HMnh\nqb2yqJOaDlsSI/yUck5NpflYIsMmTHcc3nX+DYhhclbqziMeWNooPO5BdpF6\nbL66SRCK1X4cDQTF1mUH38Ia6x77li5pU70rs7LoR5SXWiVlwMc2PYHeQm+I\nZlG8GQi6Qf7jiPLwwzeaDe3rAOP4zlZdVKFhbnL/aKCfnElpiwSSP1xgJh3i\nLHxmeUJ7SiTrc/XKXECnnhD1JQaRgv4IFC9TlXvXpT9OKzKRkUp/oXMPMhwE\nvRptB3Nrp28DxJ+8oulOUxa5oAn9Wo3aXkT/ofwvCTBrDKY4gOqX9CjUek/r\npI7bxm5WjARU+TWAxXGDaHbBCSyGhJO2tLE8w+Fz9kp6NsvYdLn1d1KftE5R\nqSUKMQmtCTnqTPI0XNaJFE5PgkvfAwptqAGXmdgiDcIK4calqXKjiblgWIq0\nt1/kcR+ywrxT/XXCwRhxinzyudb2D2sNtJ9WsSksPiMBzqjAZu6NBBZia5Sd\n4shTBvo/IOEW1CYEN9u/Pe1B6bhNKm0OBFeyNiHj1PP+tP4MSEoHu6CmXTfg\noTbsrcDm4ZkdX6JEYjNJKm7NbShbWDzy4YinXTlB8yVRJPU5BeL9nbzJejln\nSh4A\r\n=uxBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.97c4d4035.0","@material/theme":"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/line-ripple_11.0.0-canary.97c4d4035.0_1613615668452_0.9581276918826873","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4f67ab3898cab2b6d93d307694a549996e40ae1f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f5bb4648c.0.tgz","fileCount":34,"integrity":"sha512-ht9fCqmS5C1sE/nHGLn+NoTO2LZ33TrxnSxHKmA0xNhqI1tAu1pYoyLrcYff65XJqF7hpzLZ0iyU+y6W0YsJ7w==","signatures":[{"sig":"MEUCICTMZzHkz6T4Aj3kykMf8NRgSlhA7hVsCwxRO74RAtM5AiEAgibdfda8IzdrLUKReLnKmFPaQPQVZ0h05EvVz3pR8wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpAWCRA9TVsSAnZWagAAUfkP/15LDmDj2ItW5AjkvA2M\nVLuCnGyIp1z1oj7ztrXxCtAu2YZXfz5/C6biAJyGZXLlktxrgaN97nMdnOGL\nRHKl9iWvxps2nEsIgurR/4FCi3o6u69DeO5EjsBi9ksj3hdwRislMpfNh4zH\nYJBsHotcVxPMTPlNfHqt8Jp4J6epiyI0q27JxLparAQ054zzK/SomAVZjIoA\nnKr8LoAxnnv5cz/+KUHWVDLw9dd7EkzdPzo3/H2g0Pjk1Znk8cyzhqFyZ0Xb\n8U/JCimfoqmcQXckt27KGc4JBi1F0gcgSQYaDQ2z6u3dtDhOqG6NFXzb9DGS\nyczosx5NygH9u2lx8VG/fZNxhjPWdSrijFyN/YXGSiRCm4oLB2TN7J0PTh0a\nojG8/lUxQ2fW8zbwb12UoEsZ2uirGU/oSxdXTPPT610zOTTjKOQsW3S9R9Yx\nj0mfPkk/h6e6srzUGm3+W1/wUtMhPXdZH6kBiYO/By4NI3JalWGoBW2EswpF\nhVxVP9b5+p+xtBIZxOfwR9r6oGdWFLeZ8vZqxktLYz6pkrpQpQMtGO+Gn7Wk\n5g7Y9Uyhd76iBHEzRkjOR84Fo4pacySfKwHU/15WhWVXOXvLgeKh6B8iaELw\nloZP4oJ2nQ/NEKRyazFHeSaumyv8LtPrI8IIClo8oQvGqN/Frf18wUCBLE3L\nYmYw\r\n=oyRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f5bb4648c.0","@material/theme":"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/line-ripple_11.0.0-canary.f5bb4648c.0_1613664278181_0.8626233778454293","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/line-ripple","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6cf15052204ebb943af567020d39f9951aa34536","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.302c7a960.0.tgz","fileCount":34,"integrity":"sha512-u9QFhabz8Hq8vnkcEiH6l4pFDORYGAKGqS4OLmriUeUE8LW3R/SQhz85Y27yrGzQ8iYlb0ntyhuWGCaLIY5vvw==","signatures":[{"sig":"MEQCID649hbTeEdF+byzGpjIMECp4OCmbYQFTilrxXT0GzV8AiBML/xExwUuG1aSZ3QolJuk67HUhTIDy5wIOqsq1tbnCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrPNCRA9TVsSAnZWagAAN5sQAISqgXbG7kYKvIDL2ZUw\nk0i93NSrO/ZySN9UTkxNXDKuN/hN3yulKD/tOPWhWalX0SsMs3sY9Mg9+7Yf\n/UwfIcm3oTl8qFD2C0KOdAeV4Tu4ssFCiCtZ1qPMvjAp6ewD1qxZLCSfu/6p\nuTAqeFMh0Y1kWYaMpjHwVdaW6UQL8nrQIin5LQ7Cq5vRTU2lp/KD5LutpLMJ\ncZIUbbHLDBaoAP2UUoo1V8eYNA/OQmySg+NdMsPRibVpXTFg2sGp7khtAPWr\nbCDKEu4NIjPFlNEqWcQHO/e1VBwvC/teo1Yi4ENGKVMgQxSketTH7CPUxhHg\nXC+U3aBqrLOUXeMECMrRDZlARKfV/DXNtC/3FFmc+DzaUIEj2xsEMHfu2jAf\nFDbsTH8/YMbKBfRQkI3qRy7obGUtmYMym/iDFkybTK4nUlV+62UhOS28Tx0o\nL81ov4oByvjS2cqMGj/Uk9toZgOjsjnzC+gCcsDrWK7Uydm2cMxO4lEt8m4C\nLlPt5LISDoprE2GyqO5jwhvudr+pKBDDU/ylwhtsjbBp4CbYbljeve1QJDCo\nyyyR7IlOpcVVddmECr6sgmp85NH2xEK3XsSo75+w7OFTiq7n6RRRBvpkqxuM\nba0nTopGDhCZDMjSP00aCalTXYMo8YLiQCyvu4AoNyX0LwgSsXsD7rxCZBml\npF+h\r\n=gUPb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.302c7a960.0","@material/theme":"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/line-ripple_11.0.0-canary.302c7a960.0_1613673420606_0.011397293948024911","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/line-ripple","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8b83aee546bee3f7bca71c36391d66faef0148c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.aa0aaf026.0.tgz","fileCount":34,"integrity":"sha512-2Be00VkVw+FR67Ojpg8JQiWrAfBqjqrkRsr/6lu3Z1r3OqR4/IMl1JSvRNCw+UWXECm4pz7MVfzEmrUEJpTSRw==","signatures":[{"sig":"MEQCIGVBdZdwRIHIbBWF1SFn6O2hx9hpk8kgpanCpMiOEuG0AiAT8bI8hXWeEPFRJknGOePp2yLxeRlFVqRw2gYxfbhFrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr6ACRA9TVsSAnZWagAAgjYQAIQSI7MyXY/X9ziSaQe/\ndBAQdh/pNjbxEqKOF2Nf3lyb44axBQphmgOY4g6HvoFxY/+20IxSXIbcZoc7\nj99pa+d/TCduevxQoqoRRkLAJQ1VUMq8Lywy3pi+tOSaEocmF1oiJGbNKVUK\nuXvbtLbsRPuOKbnuVye2juMwDnqQeW3aOein1SvEDkm5qIYV6LISXN6596Dq\nSoIUroXv+9G+8xptTGpE/h+7yBefnbBHlZykQm1+pRkRBcTYwhM78FW29WWa\nVFeibmb8un15pxVaOYprIX+HHbwtLSJlo/lHI+e26FZ6HsXP8H+L4c9nc22Z\nIFXTVnmNN0z4LMd1/be4PUYCIg8KApUhFp3OHCQu03amZISWKmYdtloQbzx7\nJFWppYg/Ho3vRQ8HumleN79h+qtp3h7ThDvmPMy36rXAhK4n+wZYltMozR/K\nUDncb8lzJXi8SveZS6Rnao7Ae+zBQHuvFISMcW6ESTRP/FADCBqNPPCxvKTD\nhJ3sQ5JJGLvAofzMAtqoL30FiRxjudAI3vl5YTP0UQKYr0Gf34PLmn9COKJ7\n0kx/R2o/iGQOXVd4L4tOVP2B5Ttoyqehhz50VDErLvfaJYuFXjWdqu5t2CY5\nXY0YfjqgCvFFeUXeA0Xqs9YoMWcwd2aMTN+Tqrs3DNH7EBZBDeTwkqbVP04T\nNe40\r\n=+XOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.aa0aaf026.0","@material/theme":"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/line-ripple_11.0.0-canary.aa0aaf026.0_1613676159524_0.38572026109079083","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/line-ripple","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2c6687fa51255319a0d6be36b57a270d040f5927","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.07ff0c452.0.tgz","fileCount":34,"integrity":"sha512-aEdnQozt84ZoIHpO+MEtfx50ejz8Gf89hF2f+HV6w3fdBVRMLun8mYUENPFPqfX5FPCVfDO/chKu2ctnFIY5QQ==","signatures":[{"sig":"MEQCIAbvzvyAuc5tr4Z1ITV5tOohHCT4fCsD+uenJrwbWDTaAiAPbrK++w0KqVl1vcm1RsuTnEqr9K5/LWCgtHIbNunNXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsMGCRA9TVsSAnZWagAAYhoP/17bx/p9tbrWWBzZKn5Q\ny3C3iS6rqwQb82/WAudyk0pA223zHyiDCNmQu3kQf5EuxfKJd/9hZKmblvHv\n2eSk2oxG7Z1E8wf7k4zj0+kelZny1Mk7lbGX+g+4tnhZHSWvhWOqVSE+kEA8\nltAmMLDXi+RoXzCCqQP8Trjfr64t4qCdZ/OG5AZwHBvCe0lKqbPVdh71HtQY\nRaS8Ruv5ukfdtq8pGW/pV92t/aW+cwR8bpAmtnOXrDyM3ufks39aM6r6aAze\n1LXJzwDYszo9IZdNb755SIKrYl0LCLzbZ0uENepWfxxXZDjJq3J2BkIcHGFe\nZoG23MdaDiVvGeUrO2xv8FGNms/zGdFAsEm1rGDFLAGyit0lhij99LNfhd6j\njf0u0t4VvjUCETscKO0PD1OBuICZRwxCv94b2iFZsPokiU3YhNRNbCUqCkUa\nwPQgqL/SDZB82axwayvCik+bETLlPO3iLOxFPrNop1XBhLLjynDRyU8vnguD\n+MeamkucBpvsqoNJzy987fObvY0Jb81C7EN6LpmsEc7ufXDnq8B6Dcd1nhO3\nAuVZWui/0U52vJjW+elZDV6AUODnntc5zPUfi7xt2jyVrrbqv9ZV1rzgNmrk\nRdLoA1F6fBZOK+gHknkehmMQMJA/xzFfwyDWghfes8uW/dx2ZhqkpSOgBbhr\nyaJm\r\n=qI8E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.07ff0c452.0","@material/theme":"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/line-ripple_11.0.0-canary.07ff0c452.0_1613677318264_0.7782819323216423","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a43bc45d93f2a8c84176e3cf59e2591dd7e4808e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":34,"integrity":"sha512-lxSfnHVS0dECn40OYOBVK1euUdh59ztG0Q9Qt4BSMn1sg4Rrvog2LIrB102RTKCgYQqGY5WBVIORTbKt1jiKzw==","signatures":[{"sig":"MEUCIQCo1bL8teomU5UNjyGyxhC0XHmT/XcNwY9CAwBDaU8mVgIgMghNeIeBJ7hJENbmWEC03Ncu34alPP7ZwKs/jvDh4Tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvfECRA9TVsSAnZWagAAnt8QAJx60Y8PduSXcn7TFBU4\nB050N5hd7qq5DLpNJcGCQpZdQtDd18u0UqxqDQDb7GJr9uHq0oMeSej4KV9D\ndjdHl1BLJDm1gTg8eqHEOgzIG7UCJ8E3fIEq7GVVXE/Q90oC2eLFbdmYrWfF\nJRmZ/ANN8BV0RhHWHOSuEAsU+6OEkOqZtj0vnk/19qj0kd/4dAe9NcpPAjls\nwJsFAWI6AyBwYjPOgQAFYvLXCYdoOQvXBQX2j5kSo796qtDN2GkkfmRsi5EY\nNVxszp3FMD6rih23/MwC0gcSnzaIK1mqiZxOkwwdDdf9sR3Ub3FYlVuaOncS\nHof0Hf3GqjdEFBikpCoZoDrH8oNOHCi/EJaU6H5doBAk4g+cqr5hhoqQsG1f\nJCrUINsJ8FvE/LMAgN0AIf8IuEgNvKd5ncKTmttq0DAmBW+idy9lltzvkeFp\nWUWHz16ku04dvMafb/aNwIcm3IncOUoAnvP3LFZL2deyxVIHXrhLhQyR3Pms\n7/h1aF6Yh+EBPPsb+bWI7xCU7JBQ1wAwXp+wMxdPHs79qLXShilabNNuQetS\nxv5BcGU5oSYScIMnUYMO8kJllrUNsP0wBLhGdX+id9NHItejXdNkoLAfLvWE\n6v8TrkjnKGeP4epzlGehAwceseBgBc1VaqpweJwgUfVFvIcQTZ3KDTS8R4hh\nDhZT\r\n=Dr5G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/theme":"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/line-ripple_11.0.0-canary.bed7ecd3e.0_1613690819625_0.9825027155515145","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/line-ripple","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bd8189fd0057976fdf40556c157d358bd275d00e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.06dead2d6.0.tgz","fileCount":34,"integrity":"sha512-mJIDC3Vdc5jzbureD8ocKFPKTCAQPNmqRyMYtPMmYoXcx6ynZFur9FtEH+E36JyuN9gq0oaj4N6vOFWwsWP9IA==","signatures":[{"sig":"MEYCIQCQPCkYHGxYUKeAPbv227uuaDnzQBZl6C+eUX+uUZkgyAIhAPcdXb7sdBjpihN22rl9wIuUGaxO3pBIEPtTpSlpIujA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwgFCRA9TVsSAnZWagAAmZ4QAITI2HFMQgAd/7uG2zbs\n8kukZh7MRsJExBVkXtICuMxB7RCiXfscjex/hPBIgN+P58VrH609t+ziq5aJ\nTE5ZYRuAnfU9w4KGqvXYlgUqey4ZdleXOnCIjSjPlG4OD2Y3h3coUO9rq/Bf\ny2mHOMq5NVGNWAudGZ5/yVb6j8BkdKvFAWXwbF8W8dMxZJwRmg/+27+D+CMM\n63xeDHdRFCfQZr8hSSEOJMcQxipz+bSrHk1PNaUY3t779DBE3d8PFYlDlK7k\ngnmtPvIZyv8FyplFXEJT53EnD312OkMoDK3QjRWsRvm/8Ypgdf8uVaHwbh9+\nDIMRdn0Il6JUN620kb/5Ku1n0J1JDIfNEdzI26FIrPB55fliH355c2mfk6n4\nkr9RL6g66y/aLc8borKY4cieLK3tfl/3aaESpnNhSxyYH6MtOe3qonTneK8O\nyrp2cuXcAmHFaNLaaMQnNwVLkcEWwXB/ryU6r0aLXbWEI0QRIe4iX151FjDS\nHpuaVyNgnHvIX373XUwEJOk0bsQ3vYZnumMh+4+thLrIbE3sEzNFJ5KPipWD\nKraEkyDqQuZGI6bAtXOEw7BpjnW2RdtpvTpdEflpiohDZxlrrnLeVXqz7+js\nAcS8VLNsmp7Cbc/w1lw3BIK9gekTIMVnkoiOW49w8Pj949Umf8cWw6h9YwuW\nQWQ2\r\n=mTbK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.06dead2d6.0","@material/theme":"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/line-ripple_11.0.0-canary.06dead2d6.0_1613694980542_0.9379724411867132","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/line-ripple","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fb1d67fbd752d26365be211e249dd64358e1a8bb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.cddb03553.0.tgz","fileCount":34,"integrity":"sha512-lKBfrm4Ma2Sceqd6EaTRiqtAuy4bjxg3WPVmGHuVUnOSY2psq8OqrYNHpQ0gOd9WQ5V0iJldcMhPLNBDF6fD+Q==","signatures":[{"sig":"MEUCICozOXXtCMqxAgigpDgufirmhRhn95iRJ0r2rKN1Hqd4AiEAtoONq3cW6Rsl2d5l4WYdx+GCg/9jpXedXxcXSfqSnws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLyyoCRA9TVsSAnZWagAAsI8P/R7fz0mbauOui+Ig5KxR\nMwmJxXPeUJqCdtoK+xGUbqLHMbh2+LwJ2B3htt9gd9L0qQSig9BcfuhpWAvr\nCI50zh8efWx+6UsG1xRswznOWtkYQ8NnHiBI2CnrNrK5YYtPgB0wrsAITWgS\nl0DMhpJByBZV1FFC19rbExfjrZylj//xGOiuBIi6Jt/YxZrTCIb4n3TOvDt2\nOpZWhomE1CJFsqDIDM0sxvI6Kpvd7EpPIkCYK/qLk27/zpKSFD+S36rXDJHU\nZpnTbD/t0ClcBwTQKoowxllGjbB9qbcOja7VK/W7BDTfE8GNR4Hr9IJ5RdOn\nKkvZ0RMblmKSFHQ1A9/lWoT3laPQwcEUIxGc0sfOPepcqIXJM3y5YPdMCyBI\nl8YNwPG7AxR1SMN1fe0+23Mig2AbLsPpJc6g93eu5lIKvi6l4YW+OE/9JUs0\nlMO8qJw7SMQ0w67CSyTiFG80u51rSMWCMh7BOeC29+mWFXyENuhJVcvkOzfr\nKRs315+bAkqEEGWqXOApNNS7H0CWtZPOhLwhLgm09nkSOYaY9nArtTRhGSoZ\n1bwehGFtIKvwuciLNX5hJ8ZedbtmI/CeJvduknLjeJIGBtFacS1HDSPPkdmu\n5zk5Y7rkSmcHgKCBRW21KTvQ//VZNIvG2aXGpq3CCD2gWjuIqgm9ZXkviv7V\nSAx1\r\n=a7MB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.cddb03553.0","@material/theme":"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/line-ripple_11.0.0-canary.cddb03553.0_1613704359460_0.19282889020541738","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1f04d999b9b1a055e6ba96d5bcf3bdc008da0c5b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d6d8d0476.0.tgz","fileCount":34,"integrity":"sha512-DjRGIVn2dzfcCXZCylP5LwPvxhi52bauZp20LEbNAFCtZsVRuVM85UCQ5K29GjWS0vD7e3ElduDedvOxUPUiYw==","signatures":[{"sig":"MEUCICdyNv/RupehFogK1WXvINWA3sShfHEnn+JD6yWkOyDvAiEAgQ9ZJVxuFCLrupJfV6UeIHCg1ZDuytMfHLEVcZrvcus=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL049CRA9TVsSAnZWagAAxSwP/0zQyO0Hgnu01Q4CTUg+\nW+Q0KT70klCgq7WXq9gNIeFUKVu894/Jr/rjG6A8cLwMD7RVvimf257hTr/C\nUaz/j/0/4MXux/YQyRS20GbWwSBl9lbhenBSa/8v1rdgNIqFqElDTdVLzB9P\nXEQzDHX+cJIGlp5N5M+2EFW8QIYayw5C/mZkqO1TG1hksFPlavxlnjmZmeMs\n/JXSS7lKQOX7SC56SVraIiLi1e2RNnyv3nca95aopWHPSuSpMZIB3piRorsz\nN+NhuGxxJuESG1CA+auaUPLQYl/rXL4mdyy1jUXkIKD+AksBINaIDWZPjrYB\nECYL7tHy+VdaMcSt+aFKeRCOgZZpOIzV3o/PqjhKnwbEtINWDsbvJmfQ2Qyl\n3ticz1/JugzN19BFOY+SXAG6e9gJsZWi/VgLZdhNOp4HMKSDNhnM6scLIBXR\ntlboKCjXIJD5+n9knajDaN4QloxdHpR1S9oygEWOQjKmeaWFEc88aM4S9IiQ\nTemdTQvQSEuiRXiPPrytO+jMyYVo+rR/YmtK5PS3LeSkaPboKshUrBhxe7BN\nIJR3C/xhIPTFZEuGCuPdCXCyA/j4ot0rPBfGypNh7/1D92ofXCJfrMdt/S27\nl7Sgq6hRq19SiuXLiVkSt8d3othNLh4Su2x2s7oU/3LJJLTST73uRhqQk3+o\ng3+n\r\n=ORfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.d6d8d0476.0","@material/theme":"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/line-ripple_11.0.0-canary.d6d8d0476.0_1613712957512_0.9099976958660141","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ba0d0dca35e02dcb5df65a086d1563147cf57112","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":34,"integrity":"sha512-hAhFrI7Zdm/YxtbyZlUhz6xllliEO8s2uNbyfnSP+TnZTRnP9UK9SkNou7aMR/48RCZBkJtTbO9zvjSbqVZGJw==","signatures":[{"sig":"MEQCIC7JXEXtt+HFfF5yczZhYLDz1GW+3d0PmQSmYDLKed++AiAcOWsK5PHKZuk4RRllKqLiKflzZENHvRqSq7v4FDlyWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL9z/CRA9TVsSAnZWagAAczAP/ReD6EaxkKLwK1yQQaox\n5z9WLuh5zdd9nXvN+6sMeh5Tzl++g1wCsohN2hrDnY2QFXn2FmUEzvxCKqb5\nL7tHoo7zMLjRk52CXn46X4nczd3OFRVvAS+KfIHjKa9i4d/nURTs44eT3syO\nuw3Xmo6bLgZxo7DuDo2rbEkDQ7zKqKob6eu9Hsg43XSdebLyZYyM8x1UR7Pd\nT1KhkDsoU8XTKshFSaH9uAGPZSwBteaPl9puUQJ/2GMZ0xgj/yxetpo/tirk\nRwGBkARPYWrcovk9vrAoriHtGc3wZE6Iehv3xYQk7Jv5TQToXrBzY+mHMGGg\nSGcE0EGPn+j4RY1WnK5RnEWropk5XchZujvqOr45Fgvcib3fZIvss5Pcp2Lo\n8zlFBRugHl0ZITstEJHKLA/KUIaxg8hIgjOB447YsjBfM/U50+NV6Tw7rGCo\nV061RmurixAilZv1FemHyqmrf5Pcaa4BaWCXKGtJv+9qU3P+UHK1RVEBUTfs\nugsgW6egHsNrSFSd+s6NAl9iJk9X2dlmhSZDpWUEjs9KnLjuDJ5MJ5D7WwoP\nGABAyWGOPaETs2T1nz1L0N9Yl6KDYFds1ZJtCmRkvuHGivkncu+bY+BwnQZS\nfD/JAU5tlTvjAYTNCN7vf1SgZpX0eg2fj2E6ui4Rfmz7LPDLI+1aDdDe7J8e\nJmNQ\r\n=7iAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"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/line-ripple_11.0.0-canary.0b4a4b2eb.0_1613749503016_0.13766790232006776","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/line-ripple","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d98eb55b58147446f612132243249088f2f137c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.3201cae47.0.tgz","fileCount":34,"integrity":"sha512-o1lq4qaHr6qBVrQtoYR5kcrY8VhkeLwHjvzgHrWxmlkuQs18/1ukWUPJz89L0D39k9HvLneYZrCxK3ycW1If/Q==","signatures":[{"sig":"MEYCIQDnRNgy7xIGsNNBE95NrGUDZ4Dz1uctqmGYN36BRKCV8AIhAIpf+1b4Oll7qibjQiBAYSXpAw9v74u1+jzcbUQ2LCVH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMELxCRA9TVsSAnZWagAA3DkP/izdjplyL4CRvP4Ax6hh\nym17IidC6MjM4sdY0nWPzQLT97qMvIfJdfJnCavwP9062MFF7sEln4XiGHwi\n7+Fc/YwNk8P7V/UT5wLD5mO81JvP0KWDbNkaV0AfDkiB1f7B5IYufd5ry4Mh\nHwRZjJqO1JYKgLJ6fmCO+oyIRSMISYB35okCBzSp6BdSZ/RkvzHG95PGAiaM\niMQaRqu/MdXXwYolmD2mDyYZgGyw1H3W8+q/ilhc86dRNuXfDY+fuHuFTO7K\nZ2hEdyLSUPKRQcAvmArHj1+g0LF0joBBKQlRTLkV4UuehGhec4RRV9W5HVUC\ns/5Gevnz1Bd+MYBRqmAZmjq1Yu3qD/vclQSYB9TqAnsQBU7fLgHC5KzPp6Tz\nuCUQTNla6xNW/paoXZYohDKTcVg+SuDmhnLnWtdSrUZCBd4lcAhSSMRAH2Fq\n4IHM6nZCa7eQhY22zjANNpana8IQtM1Xc9jbPDNQbaRahIqU0IWaqZsvx3UI\n3os1xl51rkQAYsWpVDUqAIZFcjdJhon/D4AmtORxjxnwm/l5rpBpN4D9t4yU\nJtmGp4zem3Z7abDP9hGHomk8wqJ/0Y2BCOU7dUB/6+j8Ye241n4G+vkkF/n+\ny06TPBDTGT/fwFpgLKPQI1BSXMSCxK613W272NRGh6nGic7lchVM9RJx+KCA\nnGpc\r\n=hgyG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.3201cae47.0","@material/theme":"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/line-ripple_11.0.0-canary.3201cae47.0_1613775601314_0.2033938454998898","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ba238d32ef4ed02558cc84d12f1eef53391b8970","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":34,"integrity":"sha512-N+odselNwF8eXGhV+ryqRRdT3XG1qB4l2G6EOZfmbjZWek5sbD3V3D5QD6nyUc8K7JBiUUSy5EmVNz8GMI0WHQ==","signatures":[{"sig":"MEYCIQCbXbiWcBROsqO2o+LSCBSJdiAubRnmo0gad7VDZMWmiQIhAI6ZaZ85pzLgcR52VaBFlhZT/gKe/QN0VAN2g6zsOceE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAqfCRA9TVsSAnZWagAAkL0QAIOguyXlLYnCp15H/3nZ\n/OzphRdbLFs43jrcSGbemxipx6plXean6xVcevXjykJzsyfGBIuhPO3l/kRk\nDOXPGn7iwjQEbZEpI9iF8kBhDPEnoXG7RqnEUh7fk9CT41yX7u9GIgTSx5X+\nhnYgguO2rA1HjEk9sfKmOeBdZ3DEFb7A85ojNmoDKUjHUqrWNQZcuxkMlhCL\n6Rnu3zQGzYg78A93OH+rqXpTm04Wq2v9aknMWKc166JP1jQ5svAmALTSBer9\nh7T/Zw4FHZ6RrydHQU7EaV3EOq3WJ04bUDauwZR48DYQRH67TGNK6oR30GdX\nwdfWnNP8o9zUzgiYXd7KizgS66XggYpVR86mpYvtSalusAcEvzmzZZgUlXk6\n76D2lEy2T7ZOLKQhv1twSn4RfEwo2Ghv5A4GsiIAFp3aEffHQ9uiy5gb5Ebg\ne+7aC9MzoLWQ/7MrAtSJy2PW503ix9gyb7ipsw9Kf8v+TxRS055wlFa3MYKP\n69rqEAdrhVoFGbpDlHtTgve3D/DN9lR+JRldMYXJMiJiQZjZ+DWfFw8sQHhc\nbQ9dC06+7XBrlPkcraYAumcGU3fCYKpBiK9Zq08gl2zrmKuKreEabMowFRD3\nFaeQGCJRjqieTxA4IjgOJRG7z+F/q3FHGQ31BZru/hbYWjIuAIpbBTRjIZNK\ngZkg\r\n=oSs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"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/line-ripple_11.0.0-canary.f1b1fd5d3.0_1614023326611_0.5000825299690914","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/line-ripple","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a0bbd4f742157c20111243e51ae94d1bd8868c2c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.7899e0fe0.0.tgz","fileCount":34,"integrity":"sha512-Mrew8KmjNDGohOOpC6p1mdKrfkq63bca6eWhTRi5rX8WvQ95oUS8mz4mTo9EVXTOnt14dU6ReouJb57Eb6GgOg==","signatures":[{"sig":"MEUCIGFOkhOAvT2GQdrBC3CglmjIDhRWEOQmxyAKZjNzgtRiAiEAwXuzziGyxnUeFq+wijx824e5SmzvunvR8LloDfWFSNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDP+CRA9TVsSAnZWagAAqcEP/1UShTKpsr0igiEqpPh7\nLqL6FWvcyW+gBw0VmGJY/cxktGaZwaY9B9y6UTk41azekxPe01AmGYadddtQ\nmdtnaebvB+Ik5k3JZRb2dCn8158kVaXoOAyGg/XQ5qALetHBx2gT2HZsya22\nhEkw9Agl2ZzXO9k8X0UH49/B6aa1PhVeMP7mLXHiVBcOr9/sd4f6fNoRBLtR\nFAof45T0LkzAgHBJSdeM5dYRNn6h/eVgb0iG0eMW3oKUFUVVyptjEt0aOLok\nYpTzX64URaAXHgB0c/AWk7pRBXVdaS4LonXM2awpBc0uU7+8iCE3yRokxL4P\nGXqm6VmaslR3GyWtd9t1TQo8/jcvYtjVpc1dH3Kll8ZvTUEdfhuQxWBe4rwI\ntp377prPU+JUz8jGlfsMVto1y2a/mv2PK0FMe/DpkQL9Oug8xy6M4KSZuEZw\njR+n594Tw/Whh/8l+fvj6+UnAnOM7Q5dFVgE6eTShNE4SwKbq8Su6zI76S23\nZen95vFd6clIhOqsIhMh510JWDjC/Ol023AQwhVCS6zthCTg/1kqvKMI+38o\nAJE37mqhuH+ciFJO2iMrcJSdOwxjKKcqW4rNpzDXM17HGmh0vJSEPZdQVjBK\nngcxlVCTRRCSbcxFjJ/Clb+UTlCX2xOnH2PZa7oBjKw2zv5YKG1FG0h48Uwj\nKNHy\r\n=C+nR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.7899e0fe0.0","@material/theme":"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/line-ripple_11.0.0-canary.7899e0fe0.0_1614033917276_0.5685795584318025","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9cc01a65b4b2513f66aaa37f19c26a01664ceb1b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f19c86d13.0.tgz","fileCount":34,"integrity":"sha512-zgpJ5kf2zRA2DLGzP0Qi6iR5nUYTpzlz7UZmQXNnb+5eaNeIoL9JccYDErjE3TYnecGbXhBTZjNvaMXzr0mK0A==","signatures":[{"sig":"MEUCIHyM0LJ1UvQWNhJh8cpgOBGknuU876wj54x5Aed6rUaoAiEAkapw67wlIg5J5sYK98xEbggIHysAxh/Be3Mepljf35Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND57CRA9TVsSAnZWagAAGW4P+wcfEfJcDjyFf1ELKW1W\nm4Hzr6JS87CKZSwXdonPG+ZXFunuomvHaRskx6Ofd1h0GaTCnnoyyneNgwvH\nbMDCgAeqLNwC1zg0RVZ/9cqEnOKjnV3UueABh2RoNO3H3uJqHBExNRI5j+Vx\n1VkuthneOPC5FeUzs8nVvkQTpR06g9J1TUK1cI+LEksODQnLpKAZGz7AgoLz\nVqAKoJ+SL8cz5EvLU4P7BLFb57OPHjonXn9G1gyNkwHK+cg3AoO7VauI/1Vz\nmHRcHhv4LVkghT1YoTZGNewPxOvs0UUVwnAuzkyegdQt4pdPZHcN2Kwuxkdc\nCv6eCAFJ5rceMgP1zNzlkF8FYsTAGDM13ALKJrKUCTVfpLBWVMZ3egUljJro\nrD6EPViKQsKus1wyUG3PqwUXpCKEaIkgBbvIVdEBUuEzNhwARigOsK+tlsC5\nUxQ991jeltcPPYkRWY8DAAfdx3pSBLKc6Qai5IFDg9eK+FCTlJXYgm0zXQfX\n9Ob+36yjuRw3Q0vKgjcAcxoK9MVMfbG/lh8JYZmPgu2LXO/0ANTHQMS0GV0c\nSQWIfidt0PAUT8EgCcTHPTaK9nXdPgMIYTrAVQqDYaasoUgWx1ujVcwb3NC2\nPtkC12Iqtk+tSZk9qDq2AKcGB9ePgOYcBquXY3bBgUGxs8fvJKklT0FHN5Q/\nhVT1\r\n=fbXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f19c86d13.0","@material/theme":"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/line-ripple_11.0.0-canary.f19c86d13.0_1614036602662_0.9343110416945737","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/line-ripple","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"77fd32f0a0b9228574f29fe05f505b5f8dc48555","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.60e892d79.0.tgz","fileCount":34,"integrity":"sha512-rE7j5Wq6bhzdfbZbVixmuEIxuFrtyQrLXrzQ0R3Ww6ugdAfi72fbDTkATmsqMQ/VwNHzBWueTvOdT59ymMQyPg==","signatures":[{"sig":"MEUCIQCHW/y7lD+kPYrB4cZAvzixxk+jqgSg4n3D0UpGGigHMAIgE+wR1J5+gZTSuHrriepedtDbjogTDuCRBQu1vtrZqVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFakCRA9TVsSAnZWagAAEtcP/AwqKHJhW7VT0s7dGYcj\nwhhsoO1Y0hbRyibSMuSqCJT70O5FN5M7LmkMS1P8HwiQCSyojhzyBIOb7nis\nne4hYdhhBI6UM1QIOp6wKfU+QZ7b6Y80VNZA4TXCjR30o1xlB9OD+D5posBx\nypUUbq0p4irzYVQuFIPR1IsmsIZPPH3ufDJR6b4KFaBV/i6SNWe3J1Lvzc8I\nAva4gjis/uH/n0Cg6nONCJftPg37HjGyYr9IVkRWRQYcvHh5oLtvCwVQF7oB\nzEI6sHnJCGGq1gKy1B/8kYhJDGBelYqKorKoDMuTNYiEKRMzHbEEtCuN2kN3\nX67R1EB5fnRAj8nJewWCa6Op0m0flTUzyUl7dT/Q1fRiYSKmtnvsxhIuRBCV\nRecDOEIQ+Om3nHAuHeTEO3uG3jMT18CQNWo1ziMw47BbfBVOkbuWBMebUZ1H\nZ27hLFFb+Y4mUG3CuR2k9VOrt2j3tPYrwS0+q+cA/aXjmJwLPhIc6DV5Hnk4\npp/S/7VmILNAYXZGxcRz5fKwHJHRf2NZXX8kI/pB8DUHct+2sCP2refb056d\nSmE2Cwf3sIY4bs5JDFoBpZQYhSvBxm98apXE2acbkxyWZq7O70+Rc7cj/vHv\ndV7mF98OUKROq50fYrw8vcjxh8nnFlAAlaxkx2/YSvaLfz4CEja8bf4vPMFp\nrMrH\r\n=x9Ph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.60e892d79.0","@material/theme":"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/line-ripple_11.0.0-canary.60e892d79.0_1614042788022_0.41942540738907197","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/line-ripple","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0efd5fa9010f3dce78acacb2e4532df0472438d1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.c96bfa495.0.tgz","fileCount":34,"integrity":"sha512-dPMPIeNNOl4m1uwEaZN9O3n8PtsEJJm42iTpL1rXdLiZRsgXAg6YtAiAwLwN3dycUsgVWlKA+xLc3aXaGAezRQ==","signatures":[{"sig":"MEYCIQDiTBe5TIqZMyh15YoUoIQ4WEjllaqdZKR/BY4yta/EhgIhANW+Fm75+MmqsuvVncIYgIt4Z/8j2CyxDHQJxU2DC+jH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVg9CRA9TVsSAnZWagAAsgkP/j6KkQ+ggjTgtPIEbfSu\nZjq0KqU5J0+hzeLCul9sEbDwMsDHTTBq9On2tT8PoDUy2hZ+A6knkNoxIW/X\ncrfroqrSN4DMRECKtFCskXemTKXUf5RRJ2tWPUFEU9EEfGmk7UBo4TVi9pim\nFHVh1d0lJw3YC/qoG3n7tt1onvm37HWzw81USggJfxYB74oQPlC56lUzkQmp\nEK3n5INgRz71/iQx3Pu2zjSUFJKhdbpAS5vBg5B/zJ7J1BL0h7AK8I/hRCWG\ny8ikLvufIuJ/3PnxESEdPBLcuQOmNjX0pDa74Mcny07faRerq4TxJzDGD89p\nnVKkczTxu3M8ZOeYrA+Dj3hFT8WrjjJPsCEgtHJfXzBuFjESZN4prTwFTImP\nyYXamSgnRYyMdGMHzTuwJP2r28M5HF2I4JTOrb6tfJs/QmTa3xpaW+y6zjaE\nSwlbHtEuDYydpA+0H1nT0BBAE6vlJA4lqrCT8oORNFaaL9iHDqkBz/lNBAMq\nbbYwESniD3UgHzCx5EF6NUC5SGH+h+7nnXaikZPtfNg2S79sf0ZdL7CxdgHF\n8vdc1fmXSYC/AVgQ2GLIPsQLDYvgfeYu188vUc1/z8cK9oLGsW+DUkihRykK\nOhoi5nlOvT+Q9BQvK8Ahe04VRMim7nQ/9UWHUbCDgxFAknCIJ2dF7iSZ+VTd\nJXW/\r\n=8biR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c96bfa495.0","@material/theme":"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/line-ripple_11.0.0-canary.c96bfa495.0_1614108732712_0.6125778469336991","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/line-ripple","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"464f7e02a60cee1a4a404078321fd52e8a19f50c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.fa9b59f67.0.tgz","fileCount":34,"integrity":"sha512-6jeL4Fu49wqvLZFjvgh+ExDdB3I9SooD+7rH0hTnLbFHWD+fikfk9dKT8HfUo3xny2MyI/rSo4y8zABGBtrSRw==","signatures":[{"sig":"MEYCIQC+3SIeSvExyJKhYuUKMm0gCTV6B9J5T65zd9XaeYVI4gIhAIyLhh2w9xldZ6kmyOcyy7aSgSPlpHNnVuLW4gdBAl3Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViGCRA9TVsSAnZWagAAcx0P/Rlet7eSMwQG3Dfs64jE\nd0RZBpZx7O6cXjH6o3hmT7Dhpc7RbiVTiOo97pEKw7QD+lTp3NFORb/IW4p8\nIub8uqCOThgQM2LvJ+cWYzUXYoMMCd98JWk/jd2YvHY9WvPdlj2K5Uqy8NtH\ntSmrolbvqASDQqnoMYUbqDlJEWvNIGX5kns8spOdG4/QQVB07LaqCNDjR7sC\n1B7v7QWgepB2oG5RPKpxk3Po4JheVNzMRG3mEH9pOSqEKO8DV9ySHiDF/lZ8\n/ncjpALIaIf/Mt6F35AKP4Efg4kn5TRGKjUz+kZ0gIVa5OXcJJPrqcykLyWv\nKKcQjLg5zKu9wKGxsx6wogprrojzY7FQ1l0tyZvcbeNDDRJ+RscD04t8HBy/\nFr+H1AawQCfGMBeIVNJEeMENQFhtaE8VnxJle+ZnG8Ozzu4IUGhleMy7E2mJ\nn6Pu9TdjEXAAKiKFlk5PYfoGBlWRUuw+48wPSbU66eqXnBCWb8CtRT8YSjtc\nQDj1fXAdYtr6z4ZJEhGAJUJMenfcN5RKHuc4KGFR9wQuOHo39TAGAP3N93UY\na2n0cZaxLu0Sevh3DnXzBRh/2MGarFmHHWeIai5LxtEq6hdSebAvcUzLkjBM\n9VcnQH70TDTrwnQq/jKwGW3q0sHOV9OZC4yfmqfMM5Aat3XiEKlDSTEaSSmt\njFdt\r\n=9DDC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.fa9b59f67.0","@material/theme":"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/line-ripple_11.0.0-canary.fa9b59f67.0_1614108805647_0.5444068693174031","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9567d52a3f25a7a43ad08f8675954d33441489ee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.869e3497c.0.tgz","fileCount":34,"integrity":"sha512-PybuY+qTmNfpUnIPNQd5mpqodTY9M/dgtJ3fr5nTDcuXTvMbUFpQIw4NDhDx0kXIS3AI19NEqRU5ruifdniVbQ==","signatures":[{"sig":"MEUCIHfuOtdnnLSKG53QlSCVYKnl5CxYwRaR/ynbNdlLYUZQAiEApr+a+Q/Gmrs1wQmtgK6CS7mOPvR7GIuX5PEjI8NxlM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNViyCRA9TVsSAnZWagAAy78QAKNWa9pHVIum3jQUAZTi\ngxaMUmgHHzJzCZvKRO64pCwQeEtqu2Zbkqx5EE/uJD1+d5CVWepOcB6kwBCE\n5t93OhrE9g+RwyJgZ95dNGWWL/K60YhjSiJJqKMi7frgilD8tvmkvb/wAZSs\nt9Pzudq+E+OM626uNDlN7I39+7nlr/C/RBmgeBG+2waLl88GmzJJAp9DS9JS\nNLPx5RlfZziIjiyY3LwZSmG5gIA0ncsA/rKzUGzxt4xYQtZdzmXPpMLS8cdH\ndW/hr8lKNWxsXWIDh+OOLPXYBwUA+9imQYIZRX6Sp15p/8wLXUrsSIIc3cJf\nRAfiss7uFny3sxtUbJ2wcQnQvYu9+g0052Yrz9I68RLNXkGzdqj3Hakdr/RE\nP4PAJpe0jeI4ZQzlvudMQzRGIsEZ1ASC+ih+oX2aKOsaJdnePTaRB+hEQfLZ\nkWgXG7b6AIwAlApGWvSu1d8JPY5GFGvbIkIByfmRVP07+Qi7zJn6wlK/yyaJ\n6NfRbpdM/G70KLFgvGvKSH2NKMdeRrwVOn2HBcJXmKZ0FDu/+ODI+GfTX+Ub\notPH+ngB0RPaaEIhUbe1WfgqTJ+6HQFIHs0Cr5FzMJHvQdche7ISoXpvjkcY\nN8NhZyc28WEW+dHE0IOWqqCsM1TDeglPSQ6NQMHwwtV7DWfFMF5mx3iZycF4\n4GqR\r\n=LuZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.869e3497c.0","@material/theme":"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/line-ripple_11.0.0-canary.869e3497c.0_1614108849699_0.823762744859442","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/line-ripple","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ed306916be00f87fb575309d3ceb034eb5b378bf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":34,"integrity":"sha512-C+GyEnCWaz1aB+RQj8N1j1G/rJjZE+BT/gEXoUiAfZqn39UxxW4wzDrRRkb8vlvE+r/CZ71yKYNSxkqPDz5jSA==","signatures":[{"sig":"MEUCIQDTRaaNkSpthDcq2sQOaMWiw0wVumJZuDA4WXCYLYEj5QIgEPR112vRkE6WQMFCznEzxclJ0e5iUP8/wvFoXcD5jPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVxoCRA9TVsSAnZWagAADqsQAJF6NhDCjpVZ56AHT6sQ\nPgc5rXpETHu8lV00qLmNR3HD7k7NQeu8IBtAtn4IHugpAY3dVd5nghSq4Kv7\nv9rslp6sh/tewPSqlvfvRHrJnb/39VW7NaA9dvAxpGKZnmHy/0pCntDhX9KQ\nxXqYZz5cz8mi2osdMKUtfFPGCcFIdIBsBZpwPRG6IInqIL8TLU5Fzogk+t4Z\nT7634ZBBl7WAkmMNYfs4DPFtreGocC7Rq9QJQUAi8pCGuHsy/iDhcmGUvopC\nN1k71U9RNG3Iy8L+vzlvCxKTZVaxFo0BRnORx+P1cxhVvBgwWCI99ejq65RH\nbb6UoI7hr6izsmkcP7rHL2E8OgauvJ5hMBQatwV3ZOFRZmifUahd/D9BoyO6\no0du45XwqXFoNToBDPVf1z2c5Fg/ZRndQTicxa56PMVfi9XMTfPIVok/xMDP\n63gs/bTVuWKhpailmIoQLDBgYVZGtLIrw5nk3302y083yzdbpv/NwiNc7yN9\n+Fl/eJ9ZFhtEAYu16L0U80v/U1lreN7VgxMI22DqCuBh+w3eqS9TzdY0+leN\n2rEJTR7bKAaODo07vogHHaXUN6XgebaF1GSjC1SfPlfM4y4ZLCxUKcPFpMfb\nmwn6o6LotcshXb/AY+lSNUPMsneOWQ8A1oN7UAG7urDjvJZ2Epr1z3tSzSIg\nsvgu\r\n=otwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"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/line-ripple_11.0.0-canary.8ecd7c9a9.0_1614109799574_0.3680689280200369","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fa629c49713d02804785824da823ee7105fb35e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.9c85d505b.0.tgz","fileCount":34,"integrity":"sha512-ipEzYKZ0SkSmG7mvAIeEShRkyxxOJPvQGpYzc/SFUbatHIU+UCe4Xm9CWzDzkQa/qMaVgjbqR6mT3oKTkbA8zQ==","signatures":[{"sig":"MEQCIFBQQxrJ2OhzThGUp9Fz0EyN76eyDDgrNm1hKfnDNOryAiACbLQQAotBtGkHDfKMY3WiuzLZsGMjb9WD7P1ULZ/lZA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX5cCRA9TVsSAnZWagAAQ8wP/RSborxYdjTvPl6KR+v6\n7ag34OUKjcnNkZFY/CeMDlCjVNqXzNIoSwSUKbj2dSXVYLgC0/i5JRoiqlaH\nS6D+gozeh6eARONOdoJUNeGxGNpuzTQdLy5sgcjgGY23GK/Ou3JOnnsxK//4\nwm23Exm7TUfbvMfP680BaMqE5OWtKBSVFhNpDX/AIzFzSo/GYab+l9ZSM1GQ\nzlPrIXhp0fH/vI8msy8Iybt0JPEJrMzy4EoZiQPadM9CC83UBlQXgeN/uHYv\n0BmikfySwjk+NOuYWJAcKH45smJeIbNqoJecKHqNxrWF+iOB+HLqPeRWXqu+\nJkQxtuEpEf+YH5P1C9BMpRQb9QsN2x4uQK9098Wg/T5l0uD94poeOJGsVOys\nWBrrQ9zdjoIgkAwPdr2cSI8DdONcNIKlsRunuIHhYM/DWM6h4CHNUNlIYUoO\nhyuyKGmJCNOsGKe7wTj4pFXwRZNsAThNdsCZvTmdqIl+D/4o54G9Q3XMKhUy\nA9BVNf/z9h0j4SG6+Vgm3OYtA17soZMMmQGyz1W1+aDX8soOHY2EiKVKpgx3\nM6xO/6Ev7N7y3kphBRmHKNcN3psPuMuHtMa6x7ir5PBIkKLlETRCaBLPmf49\nc5MOdQAAKk+E5t+11LYQrCEHjc3SXb5xq8m0uiL85ucSgO/CJc79NFacSt+u\nX7DQ\r\n=3ZsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.9c85d505b.0","@material/theme":"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/line-ripple_11.0.0-canary.9c85d505b.0_1614118491458_0.6423424366587764","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/line-ripple","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9104297a8d9cd45a5fef25eeda8057fe175918c3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":34,"integrity":"sha512-ZcgFwnTTZpTtt3lgd8DfgJWXnIpmgJt8A5bhoYeXjPxAsimG6o9207ZmmyhOsdq4gj0WCSTa5TOvaFsUSx8hRA==","signatures":[{"sig":"MEUCIHIRAziNNFiBbr8kzbovNM13xgTdd7AH9iR+6kybg4lPAiEAvQY2vqcKTCR1hxJ9aArNZS1vKxcPhTh6uz22SJ/P5tk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbAcCRA9TVsSAnZWagAA1EwQAJ2wMB3C8FcAXUiYSVkO\nyDjF6LfILKMRR94EJPrUFvyioWSHiMZlmSniw5a+6kfQbk704KWiXosszk9o\nY2er2hLhxWcbCCAixiL/X92aPUkczRHtTYw5kC6FZd46R//7MvQj8QP+gher\nTaXwmzOU+DE9GTNLpagyq/OCQAOnxhXozrstD7+81HvF/07GenPdKEC/GJWb\ngXlIfjcuQcu7g4GLjh/il5JF9c3n7pfR2UlekJ4TqyXy5luF4vxLH8bMFIO7\nXmKJwHSGeAQvxWUvCt9O8Pw3elp2mra8tfyawxSvZRrzSEr7DWnwOgRwtF/O\nvbAT5xXIoEsE2FAyiUpt7WUHSi5tfwX3CEANWTCeDuEQG02X9iqN8DI/Z/dq\nOrnIyRFFPrk8L0BCof02zm5u5F5xKRQlra9XKkM+8yUbzIuNZ2Vfv0d7aHCS\n9defSKOcFagZo4rMlR2koN3OP23yk3YmWyCi3TzJ1b9rBxwiaxJZWmjNACa5\nnVc2r3YBDJWn4U9nokmWFpAIRmwpXOw3r+j7aVGhBVZyczl/Dp+aNEhg/2Lq\nXrtvdOB5fbuUlHHM5cpelKPm5gh5JcbKyIftqtNAqm458DzYdwWOm0+5jz1T\n4jmdfZBJm0ezTlhUKf7mNFdCU0BXZXTiIThhhnUiMuCsNI1lZTOvMIU8S1XU\nxvY5\r\n=GoyT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/theme":"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/line-ripple_11.0.0-canary.9f2e85fb8.0_1614131228147_0.6912724931456853","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/line-ripple","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5bea9ffbc10b0cdadb9af5160e87b669347e68a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.19c4f29ef.0.tgz","fileCount":34,"integrity":"sha512-GENR4oL3EZTrI/hE4AGRHrb7hS5iWvZ99mxy4c2GqgyqnDU93bqWWI9eHoGODoG0AiCrq3Zg8f6lWHYoUvJPDw==","signatures":[{"sig":"MEYCIQCcDOJWIj9k/m6oDjMqMGKlCXC0ofWbVShwt4Frz+JLOwIhAKpJSqhLgU5ahZmPJVLk00I5ZmH1leSKztYYXjqxbUvh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/jICRA9TVsSAnZWagAA510P/2kdoXjUYiDfY8SKpZN7\nzT5sXnqgz7ZJ/CWpZYH9e54iOrOG30DmNaxWQhryv3v8hRvrxo5m3HqbxYby\nCXNguUhtgfVTEWPcCxoMn5f8ZODNCs1YOyR6LxCvGqJFtSBGGKkuPHKwd5HG\nEJQejNharYES34G+1oH/F8rUbn9PO3WM/ES0x6pzzVs2AQ5n0+Su9d4F1Ckx\nPqeKwBQK41EWTBhugbtt4ajj3peF2DKGvbkqSY5svxg+OqaHHcRJEOdc0qo5\nP9Fu+iuYA9SdpcASQ1WBIf5uJ8YMpdCwLbcSa1XdxuuzXks7jWT/enNg4PN9\nu2ZFH5S1DXmIc0ehneeEXGaI/eoEVdFViKGLDi7gRhMjGLe+E0louu9PfOZ/\nioneyUd2HZ8KCHvqodctBZUakBM3kcQbLFZV18HgqnGP6IMeotd/V2/K7qSr\nV1VFfSB4sTUzZVZjOjfd12U5QkmEb2z0F0FRuL7y0eZGi5HBi+8J/TtrUgJu\nR2BVE4+0swKDGNEigE+OqD/pewciUdMDKelmV0FKFXaYwf4UY5/xb2IhY4qK\ngUpr6vIwunvpEGlO6X6mfyH5tuZ74XPOroelo5vorDD5JCjZC4qWNowp7DB7\n3+SBDS3/1jNIE3OFTDB9ddD/t1JlEOUHt+4S8wca8WbAYfGdmpwZuWMJGAv/\na5Au\r\n=XyJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.19c4f29ef.0","@material/theme":"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/line-ripple_11.0.0-canary.19c4f29ef.0_1614280903845_0.7686659670124418","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/line-ripple","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0041858c7ff376627c65320ff7ee68431bbe9a03","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.63df6e9bf.0.tgz","fileCount":34,"integrity":"sha512-jHqbTDHIeqcQudkKlRXbXy+ZMzttx9HRJ8SWrg7hvCZTWy0m+0Ai9BOULgD/LCAut6iIbJoHPcWWxZFvq93fQg==","signatures":[{"sig":"MEYCIQCKoWROnGFaUr3krp0M/AeVhPlTIwDgIM/8B0dW96jODAIhAOSpDYV0+ggUJWn2ezQX8n/H0jlPCwIdUV/kTGdnnbGN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/xDCRA9TVsSAnZWagAASusQAKIfnMyv7CM/U1Lnuo9S\nvOtJu7/8nRsNc09rkdC0AdsLw4+cJj2C3c/fnQ6An+hnypQrg3rs+t3Iiv9D\ns6Seb2euDnZoaZv+SVeMiAglDCeI6jDf6ty/UEljj6sQrQeMRuslKlUrhHKo\n4a138IBxKSy5Os+TZMg6AxZ+IWkU4Yy2k4BlGlnIIMO+A7w/RcewKXtL9Oc0\nX7CAErWy25wYJXsSrKt/aObGL62uYdf3MIiw8rdlAJDyvCzg/IBuMOKgKkPP\nDTDpbz7kp/zUIou72OiDdBzKJSWnaLiStanHEd9la41PZp72MbBRopCgNf8Y\nqjVN6iFBkAMYHElhy8MZXirzrSCnA3r0Z673CIa8yMIc3kbnq9JpQQb5CBcV\nazpmJ33BHG4dJUkSg+fRkuEJ7KU04sgH2jmB3hgz6LxXURtV/Q78zPPcbeYK\nMV5eYUdYkNeim+Z6kN3KpJ0qOMpaycANPLzlWHhCi5CjoDF/VSiN9cZpwZXD\n0JENfj8mcbBkhomNpdzIHnCCd7kynlyVFYrcKaFz4kZLFaFuRp7suLpOFWwg\n+Mb9WhcKvCQTEI931CvFgGmAhAdJDCqmZzPBBHcOiTYtB4kPq85dbLS6lM9Y\nSRrayPIoHXxb3o7hf8Zlg45hLDmx3FAt2ccdQZBe2BP60AE0JNZxoA4oOiDF\ns4vg\r\n=Nts+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.63df6e9bf.0","@material/theme":"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/line-ripple_11.0.0-canary.63df6e9bf.0_1614281795090_0.9279433360741935","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3adc78e33256986fc8a07db86bc2f4967e4ab76e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.981ad970a.0.tgz","fileCount":34,"integrity":"sha512-kvqpM+6iwYftjC6O6VGrCy+yo9xB78RSQqTlO5hdgnsCtU8fQH6mJohycZ0YBtRXgQ0toU29om28eoz6jONUcQ==","signatures":[{"sig":"MEUCIQDv03TMam1Bkpq4hxk30qhpQFMW+TlQn52tYavb/eHxEwIga/jaj3WO5AZeFk8kLmWjRGpuMCUcEwxj9ZRlP99vDU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODuSCRA9TVsSAnZWagAAy98P/juBPM4vMgx6O6hvT7h/\nmpTbfV7vwgu+1gjvkmqJTyxm1Ky72fajMlrPHhqZOfwtyZ7RiQMMtROd7i51\nP1QGTVLelE4+0fTfC/iQlOivZJwSU3IJr+hiBp81cBKhdjvZIQ8MzcpH7peO\ninTF+FxiFq938p5lFKMeQK0E4mxEkIkd4uSSX0n9dm7V4+3acWMpXN/KsnHW\nu8xAbsBkkr2iL1boEtUkUkxBCIfHkMMQH+BSag/Mz2sd4LS2uCH76d5Ib91b\nb31zVgxt5qwVDxbyYRKbVlI3iJQri7SXSeXmPFUJjNixooIIWJMLKuUekIGT\nU76NANCpe2BJ33R2eCEaj/sMOkF0QakPueQi7gGe4yfaDg+CeQeSkdM6Rfjc\njFrR1Y8RfRshnRfdloqfqW3Fe49Zfo1tlfOFl24q5n3mgUzVvCqDSb6etorf\n6mxlSMfkdocXkkHjrySXfoVKNkGDq+tA6GRK+p5JFRhdNlHyKOzTE/l2Lcdv\nOE+W8/abvPaR1qD3nbWAV3tFHg+tq12O6R3Ms3VHEb5zdwuwAC6J2MeyIxbM\novIfxMgEJy0MwWd7fmbykEVTzoH14D8VN1G0YCrs8imTEpvm1u9rbgBBccj2\nwF7R5l+Hamk57UN32tysKYUVZ4Ro7/rHgn21YCmECEcajnZBOdvNpoHMzS5c\n7OYe\r\n=qJoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.981ad970a.0","@material/theme":"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/line-ripple_11.0.0-canary.981ad970a.0_1614298001645_0.4319682849722637","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eec5dbe8257a68e723c2da3bea50a1ec96640d86","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":34,"integrity":"sha512-WKhZuHAhyIRkJ9P1GBt80CiHEgjmp3Iu/Hwe47j33NCKLyDOuqUlk6oqyFdcdiwfiiwNSZ8p9B/aMPkzpSUGjw==","signatures":[{"sig":"MEYCIQCouTctl5aveyPTp0p/xLwC66FcOTMhcd1zDRYka4Wk9gIhAINxRaeA4iIvtQYiz6ZhUZ7uNw4AN/AdhwSnEpm7oo4I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUAWCRA9TVsSAnZWagAAYwkP/iLDjnTPyEC++LjZWXg/\n1ae+m6g9rwtZ+TBTjj+iaW3iEdEmO2JiWsR8na2MK+GKVf1aq468mU1C/g0v\n8LQ2uPlm7UGGwwPMUXKysCt+XBwgS+FMV9x+k5jEFNEaV+bdDGqCJ4KwoZzp\nyjb6zugMZxJQWtOZ96n2ka+QLY6vEryXxmYCcTLrbMVi2BLpSWBRHK44/C0r\nlff+iAGDfhv6Io9TchdHnRmqNHtfPmLCEvU7Ko1Aq+PnpPj5jolA4VA/B6pf\nGglzaA7q8Bi0TruUj4UvThUjtruYO4kB43NuQETEeAwLU2qZtBUP3lKk0cVu\nQ3anJQwMedXBbcucRmbHnMhyf0n8zbCPTkcJ+DKtK1DBbwMmuFkKCMNgN63M\nfxFIOtPTQFD8QXTRjiQ/OIRfU4XcP95gfi67zS5wqqldCqsbGhRMZ5KtHQU6\n8Mp/J2UGh7ec2NlLYtirYLP5Tk/x9xPT9jpgvkGTcPXOlw/+qcoD+N9VSvK7\nHNDqdv76kM0ETvvibQk+fj/Rv3xxP/AWBtnwvew/FE67pbfGeF8gA9T9/+82\nxfDz1CbzgA+vcVWJL5GIeW9TcfvSyI6VDpqBy4jY7/GlYRhs3MvLnPUfNcCc\nb92YOmsg35YYTNcPW3yIOe2MN0dUNHCBUQ0UkV0M+g/OHFP/8uyCCjsgmVYw\nSkbE\r\n=E2wf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/theme":"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/line-ripple_11.0.0-canary.f9c9e39d6.0_1614364693976_0.7007802590775889","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/line-ripple","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa935c54365a101c29837427b4f7e126ffc5c23d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.c97d7d881.0.tgz","fileCount":34,"integrity":"sha512-flPSrqToXckeTWUa5f3o30HiskB6wBBAM3ZBXtifYJmiGLKXzaeHAeX9CPX9XjT/FPITJ53HsOu6hk5tqNukrQ==","signatures":[{"sig":"MEUCIQCZpMz8mzESpkZvV77llgF04sGa+rO5F5FipoHDmRM3TgIgH1qm11gquWBLLkbuVnTO/botgO4hYslrdIhxRM5V/eQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVQSCRA9TVsSAnZWagAAFiIQAJfu2AYmNbn5Qe6yBnK9\neWxHD/XjqlqwZ92mOupZhOzd/Oeu0XxWuJdzGYXhlgINV15DwRIWlu+XzVoP\nkl/h07B/i3Yc2hp2dmAAiSVC/suoHghpApT4jVkn0+hZIFRYR6LAa900nON9\nDGxxW1GHfy1fEU439MqmOJpayeyK0SwanDxLiJOwQog6jALknaJwpVJ78U0z\nHFmap7PpyYAnSS2wu7aGtrPVBKs8uKGggbnUfSCvDbhLN4FpCWCjtPh5o0k1\n+hPwR4WtllR3fihG5aBOILkC+ED2cVRWH87Pk4BNJzqtun/IOeztpDTjzncD\n9AmKrqR2hoF89yhS1xYNNCui2ZO8JnaeUmoCqADHxyUpjV8PcV2SPGYHWn+O\nSuxVx+89rero+FHmV1Xu1xGXV5inhtqeVQDc+fNwEdORQyViZqN5XLLPN5om\nv7G2j1NpjYnRU4f7bFJegbx8einmClD8Yjgxddew5Sxxyv+qz2wHB3EbKqvV\n8oarr1Bx3M21qfNUUuYKi2V7R6FsHP5/JDjlkyJCeVbXfYr8bQEVYh4QoQt0\nHc0KlO5k9nrN332e0uNfjn/xaxVfG/dGkMMnvlL76mqy2WBEogsXQsZnJtAa\nh+pc0YsuO5r3M2GOdR7fKaN3AdC9gq7MxJxoU0MexfSSDU7Vcy1/ql2hVkvu\ntcst\r\n=9lMq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c97d7d881.0","@material/theme":"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/line-ripple_11.0.0-canary.c97d7d881.0_1614631953892_0.5662916659485897","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/line-ripple","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c5c4f8a021865e7803f3c824cba8c05e6c211e18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.bf670dad7.0.tgz","fileCount":34,"integrity":"sha512-GaxnTSVC6AMfl/8TpSz79WDu699RVvuE84YGwz7rWtr6UiPRol/VIlkT4vC8asDcVj0/ygdNmq+BL66/s6Xq1A==","signatures":[{"sig":"MEUCIQD4qxNw1VKsJx1nVbotN/jtEuEGzP1UytOTeCRifp/IsAIgZyh+JTb687r8F6M7g3pkcs/eStDcVUz/lYHKt5jnfNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPtZBCRA9TVsSAnZWagAAAdwP/jD0IMez0xZIth09VpOS\n6Cn9/kJrMPnRNSWihcpDvrJEewWzzYEr26NJD0eEoijoI9I2eXKiya39/DBj\nqLjCtvwS2KaDdwylsb9Uf86V8qdF4dv6Ir7DJiLIlay4gy9mouFjxsVV1S1K\nAUoNuaI+Rsey5si5OtfoH3SFOChVwyBAV61O/XlYj9n5F7zK/ip4ht2WsK06\nZQyWpgAjXzZltqvlAgskEw+YbZOWauUyQyeO98ZPSm7xwoELvJKWBkXWsHnn\nPo821hvoItj8KPaziEf2QqtptOwkcYZnIMMWLeBFdi9hPLZ8TajgXPBSmXD/\nUjC4GGFCFbx1azZ2M4eX0bhfZcY2yDjfP5l91AWRIC+q/NdLoDDUZzrgr7d+\nycpzCZ/oRkafUpO3sSHRt9nmFHP4wu/qNRVbR7klVT1ObMHNt3VKIC5mPROp\nwAbJS6qfOaabP1CRAcl8R3AkGL+GDVeND3O2BOXc9prT9Jy6zd6nmIGcdP9u\nfkORR2uCyQHYbe8ISgss6N7Tmp9LM9z0wb0u4hwSHofvr0Sjk2wuSlAMPzf0\nqXrQ/imgWg7ukK//hL7ysRecx9Ku35SYPI9yHCc+8vr7yUh/z0dduS7f/OWB\nhHWyrthSNcvUKYUbIVbHUN3iGLU6SUK67Ab2IKMj5PU5feg8EhC75EKYPlwz\neb2t\r\n=Tz8o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.bf670dad7.0","@material/theme":"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/line-ripple_11.0.0-canary.bf670dad7.0_1614730817231_0.15404297717018567","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/line-ripple","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5a414400561ac7ff5813a0b38b4ae034cfdf917c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.c7d98fcde.0.tgz","fileCount":34,"integrity":"sha512-UvFnGezHjKriaIzgAA9w84kt5qPIdMUuduHDbs4+KMwnDhEqYNK6kS7oyzO3Om8hQyAm721RAOW7mJDj4E3BgQ==","signatures":[{"sig":"MEYCIQCORJSg79D7jOuAci5vbsDyuV5DVOUlFuafOnhGcuYHWAIhAMlEJOkZj6CLE4KXWGtH2ZXd6l9lupt5lhK/tYt7l8Vr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/ILCRA9TVsSAnZWagAAjvUP/iMQAlz5Ju/5mZcJibkm\nVminZfdKXaFCaDJBtOvMx1gmScoGeV5UHpKhpcU1O55+8crFsQWy2KhxeR1B\nRI3qVXsQjaeLvl0FAV7bLzArbs+3Shtct968XZCS+64kypHm7AkEKUw5GeiJ\nRZNZx+FVsfCJSxXtd+ea+Ps57brvw+hru7pWbhIt1NVcc2x6eT/tyP213Dgm\nM/z8kNp7eUUDmW2yN6LrYHCIhb6WBff0Ek8utvUiMNRTMGgDcsZCOi4vjKgy\nDbBpBagubquI6cHfO+OesPHGDbjOHv0Zjs/2VlnvfqqAJdTW6NxcDviVEBgm\nBVEpg8jL+2xYHDNonqG50lJ5am9zaa795S6KZRcpR+fELckq8E3U5cq36GMF\nMht56DWEtb/yMZS195cwGmOinXWglaL/inMi5bxqZ3jpX8F8xcogqrsqDHMf\n4kFOgM+wzhXg8/TmS9KtzrGPf6I4OoIUShHPcU7eVN/vn3DHz3tDXGUMW5Iq\nwsCc4+uspabB/kRS7a9/9sAlHM9ErjdhdT3nZpjmBuXNBp8BKqq0zzGOLdF6\nxHMCmHaRFWiCCxMmX2Xs80hr08AS8Y1Rc/6FW5Kj07pG/67Sk6d2UO16E1x7\nopvZWFJNToLt/eO/gbfuhmUgSKdEuRrA61BNPdVHkHSC1MSACIxElbxhu/Sn\niZGM\r\n=HxQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/base":"11.0.0-canary.c7d98fcde.0","@material/theme":"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/line-ripple_11.0.0-canary.c7d98fcde.0_1614803467016_0.9068924234984475","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ea2315bd2aa123adc8a8ae1c74dabeeada8b3224","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":34,"integrity":"sha512-P8oiI6ni7MVITpVY8C6/RV7HBiA3Z35Xk1mGJPlqjP+6dE6QAFk9Rwb6Yd0DzQDoM79a8ZQfOiiih54JBzNH7w==","signatures":[{"sig":"MEQCID9pGa5RsTJxOFI4n/mm3+TR1U+kGs3Od9CNOWmEPbVHAiAqxiqHcXPFpbNxILf2hSN6gL5JXSEhf8ku8IopJO+W4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":125257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBp1CRA9TVsSAnZWagAA9e0P/A4WoRhlgVQIy4Yon7WI\nbRDNTfu0lgsaFHWTFqlKFQIQjMmbqgyX1T5ugH4I9U3Ad53sLwzJfMTL0mER\nA66W77iK/9IhCuH/+Ab1UQgudXxsSkwVZil/H0OR0w+tcIlJeEH0tb8scqJg\nyQyuRwdEcWVps57HZdivo/GEQI7dqvG9XnoDfRMmr5GfLnwbX5GVvfSOs+pk\ncKy3EeVA8ckam+qcdKu1kJxc/5CeLxlgRFTlq9EiTgL1m633GbMbvWLpRSsp\niSWmJjB3BxxndN3lx2zkvQwS34waHnLrR28chMZikCd4L6tRkcc6iqtTEUOR\neU+ZfoyU5s7osOPNxxRldOfSURHVWOXVadnV21i3xMiFEQ5KS/4sV/nEdmsK\n3Chd6L1o+Pm49bdpwGI4hkzstRvSXh9+yNz57FA72C6yj4BTQDP5kN036JQc\ngzZhRbAa91kt/DqdG4LqL/YJRwHqaqsFVdgcBs8HAaNeBDVSQT7TXHmh4Y3d\ncQ346Og1Ml+/oigiTY6LoWtwXanryCbWLJeyVXZxKclDrn/IpL0+iK+6WM81\niACnBXpNpr0dij2F3E5EtByKIrQ/dXoenpYDmpNUDARnKGHaXoVmcccuSs8G\nAT6iSKgQAp+APvSjc0GYo3f5yAMJaZtNsFPxCans+0v3mdBW6G4OQSssxiF/\nWirH\r\n=Sps7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/theme":"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/line-ripple_11.0.0-canary.4fef8bc1e.0_1614813812918_0.7049211845773811","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/line-ripple","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c7913d5ad86b1acac7ba3b538cfe22e7c2c75652","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.afae3a3ec.0.tgz","fileCount":34,"integrity":"sha512-wkioV/R9iNLfVlRrnqGl7LutpTwHzNzaQ1SqPNvTMCfjIZ2tDIyDWKuxTjLopTkszSZcEaLH0avtMHcHHamjcg==","signatures":[{"sig":"MEYCIQDXq7mk5zhYwsLKwRXI1XIM4OM8YBTRnW8F2u3q0ScOwgIhAPpzBCT9Xdc2i2iygRw7OMpIv6BTa/Al7+dFuXA5AM34","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB62CRA9TVsSAnZWagAA0QwP/ipqSeEJ23gLdtjyKviV\nWhtKmpXYysyQ+pJMb3j+4k9mWIsdGKfxyah5sJYMnsz1vVyL7dlu727Ba6W9\nZfOnjv2E967TLf5dG9toC8fKt+dXNMN/hF8u4CHbQ9T1PflQeEQ1NLJwDMvG\nNh4NVCLRL75js4sLhQauiidFvB0GtlivzWsKgkaA6LRsEY2wEi8gxYvBoGl+\n+sKr19rnmystPMFdd8Ibi+5Z+DHjn2NtGeaQ/I2//2FLE5AiXK34BLCtDD1V\noXiePJ3CWVLrwab2zgrSD7J6HTgjSBwg+qyqTGPyeK9TNgA520UNPeXtyyz0\nsUuPbHyvt0PoLj115v/rpGYc2xOuCji9/rkl2WdDkF+z9QcE25WTO4IiigH6\ntSNqbZFSxidaSmOYddLtc9bC7d72HsT1VKxV+Xss+X9k8ur7Jc0+NZk5M3mI\nRJAU/QoCM7LcZBIKnwEmCmn5GGYhOe5/nuPeAqCDvWt3kqsT0P9Qys4aqK7y\ns0TOBPXGo2O44B37G83p52LtCITO+rUT89+gSkIYTn1M79pnMWWICXRfFEHL\nYZyRlYc0fUceP2ZeCyTHUCaxtRcS7nh5VymZZVVvQy3zRvH5i6vX3otbiebr\n6GNz9x8LU8vVcsyDlzgNJE2aSvg2MJPiixSXMCieVsdsaLLYbEGYODGutrjA\n3DS7\r\n=JnzI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/theme":"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/line-ripple_11.0.0-canary.afae3a3ec.0_1614814901881_0.20268345465092796","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bb70ff6c72c1a30e54b6efce3f5d404794ffc2b0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0a0b10f22.0.tgz","fileCount":34,"integrity":"sha512-3D+ZYThCXxVsWQEDL7Kq0l8mYXT/wU0YixyD/IWC0aP1G9fLBbaPQ9CzCR9PIoH5bZ3GH8O5Cs9vJG4oYaxBNA==","signatures":[{"sig":"MEUCIF8e4mVmTCLysX48GdVTqhTEwQs37znKBNsOblDMPAdBAiEAyxvHYKuAvUP5+0VdJk06JLv66OEJfZn2QixGBe3mSS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCMICRA9TVsSAnZWagAAO0cP/R8UHLpycmjaKt102bwX\nMP3QGz8UZV8HHwXn8BI/ZJarrdDe7w5CwE8ujvcWeNOvXs0EUGbu9QvNCVFP\nvH/5AjgFOmaPVRCvvzd6qdPNPztkhK0o+a7Xl3ecxWgkcvk7w6LqQFUVjmzV\n3p1GRLtG1l/s4ddC5uS/I9DTkFE42XHS1PpegCksTwEhQpe8WGleNtaooaxb\nG8X3Voi681lablL7ZJRBNfCplYD4HWvY3UsW32QlGLBQ4lfa+vFjqRajlMOT\nlBSjebSluSX3zp4po2wAoPtI7JgmOA4IRTnPgx0rkzCJGgV7GPI+4bDEwBj+\nfR0zJyl3XSg/Te7S8kz2OrpDkNky6t2kfd/Vdr6+QBvffFvUrPBaxw4GHMNR\nuwJvN6rCX17EZ3bsJmx3Yow2/rLIGAZz+ETV+Zn1FcB97idddj7iGBHckoBz\nKRFqEl8SmABDT6FU8h4dZN0YX8DyxmM1bYozFdwQ9WK/Web4Y0GmHeFCyql3\nCfCvze7fXnsTy3DhlEcepbe9QB/RoHXSU43eB72wkKXXc9vaz7jEvE5I2yTG\nGlhHCBc5Cjiu4Al5ZLbBjIOeJSO8nL2x3Sf37jyj5UhHrHjFEjOIUF+9poSW\nQO3O7IYViaJDxI1O0f6zQclfPKm91XrhaDTU78IsklS84dg2JFTTSLPWPOCF\n0aWM\r\n=pRyw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/theme":"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/line-ripple_11.0.0-canary.0a0b10f22.0_1614816007967_0.14498545914572625","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c55600b7502c17e7f17b15e379e7fff13939606e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.6f678a91a.0.tgz","fileCount":34,"integrity":"sha512-arOvKIBON5wsYd3iS6ph2N5bwF2kgHveJFtqfHI37D8YwYavthvQmN0ZmNajVNZp0PWC2MLyN1qldQDE6NSO+w==","signatures":[{"sig":"MEUCIAeagzIRkFbixvkX52kuxRhWAbDRTCg6UYhXKiuSxzT1AiEAoGNzENAVSa2u+4Gt6AVmPPRMTIkfSYuESNnfS6dL2Mg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSldCRA9TVsSAnZWagAAWxUP/3tlUnJ1t6Mg7+sblQMw\nGyUsxvGKPvxisociJJo8qD+6rf9kUhofpgCZvji41qEZB+fvtSh8GOLB5pvJ\nK709J7NH3cG6UjjYG4DvwPxnDhPS0QM57Fq7ZAcYK2I4Ow9iOWBxtBUjuuU0\nuKwE9I8T8TZQDip4j5T1bHROhHU2mYLLu/0d2ycFPhGOWhRtyX7UdKUWV7NG\nxWS0H/Su2xKvjZEYT9Aw03OPbfSKIcR6yWd6XR5uGJuXJ4DYFBPPT6aSsVX+\niWvrRR13kMYKhxH30+NlnYDe0tvPU0j9P0Imf0gaSDodvFZ7tvmSo0tVxE1a\ngaBMNj187RwQnW51cS13J47/AxHvyZKfKlfG+UvfPqTCVm9VP98I41HDNf84\nUmKDF7ioUBEjRaIIV0CC+4BdUluBBrccbWAB0cN94L8fYIRINRyX7SHhx7oT\n4Qm17kVz0R9vCwKoaXwPIZSnlq0AT6OgNnXDNYalMv0eUQ9sO081/exOX3z3\nDCnTA6S8ilacHlDzU608cQgsojpfHC2vV+z0vn+eEhjueiZC40zu3QicK2RL\nOpOT5siVFvT9w0Quu8KA4sN1eaViWcf7DuakjnN7pF8dzoUgjPbAf+2kn5ta\nzISWghPD699RY4qRlHP1jF0By3fDxmHcGF8GcJHx4lOj8uxCSmBAN6cYgF6z\n8JGj\r\n=Ovw0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/theme":"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/line-ripple_11.0.0-canary.6f678a91a.0_1614883164979_0.7757260448819037","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3a63d620b90d572992814939bffcb1bd1560fbc0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f5f1b613c.0.tgz","fileCount":34,"integrity":"sha512-/S4mO3QyGmawb3dnf0SIHbuVeBO+9K302K+QKpetSYX5OqnTSDvbCRZms+7yObuaFYwcZqiR3Mg5m6OzOB7AIQ==","signatures":[{"sig":"MEYCIQDFLOTGi6hYuYIP71c77ZuQbMCsitelkS8nou08tEvOvQIhALrkE87bksyPJzSDQYvJN0lYM09htWyyrVMRBRjnE62R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUeqCRA9TVsSAnZWagAA/hcP/jn+rAlZeOgFhmfjeiJJ\nCWIqIqNUSj7SrXFLmskG4nFMlVYNCLBDjwDBS+x/AZJ4uirmx9tv6X85jOla\nc5LI462AXjWzCH/RzSXHjhGOJ2Y4vrQozZcN9cxKwd8V5+ayj+l2y8sjp+rU\nI3Z69wCZ9/tIRYFuozgTWeqyL/orIma+NVMN87p4bhQBBQyYJGy47TJxwLLa\nIc15/tiNBkUa59/bPRAVwNUOieuPlFevncjUP3kpOi+yoTwFXsPIEhBOkqA+\nsT5LMesJeLJ1fqeyguw7vlo4X5VscOWnxOEGxJcrLuxUufivjMeueBi8jFPx\n+9S3Sw4/Ub1m+pdJ2fJYPSHOTWSrQOHUsmmB7zpZGsLX0qDpMFEOk9rzYhhp\n4C8t1uZQJEiT8LTHdyHUTQ4Zk32zm+McRrsBo43qBvwEccaAQ8PeQA+rJYT2\n/tYTSkXKU3jCSn2nWxMrqn1VC5uJRGsTidS/IKzTuG8bCwYiBV/H8G6jUeHB\nWsY2tjtA050+0QcUkC6PauG3hzLlmJfhqlKolHuabkla8xIZRn5nUbQB030r\nC/xt1o5jCJEvvlygV8IX+MAnSaFj3ya7UF6x04tGOEfhnINgp+GVeVF28F0M\nwo1zn+brXhn6jGJ3ScqPcgRAhE0ZMxIklNjgrp1oAMLvtiNfcprnVkwAqtbu\nnEAl\r\n=pVho\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/theme":"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/line-ripple_11.0.0-canary.f5f1b613c.0_1614890921709_0.9170756579731272","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/line-ripple","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1763c803789b7e0e7b1388764c48a3b7f9176a55","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.606e767ef.0.tgz","fileCount":34,"integrity":"sha512-nqUQpexYCjh+ycTHieyrVuetEld1vA8GygyaACsf62a/HN0j5RagsFulcM6YB2DXg7xQSqbQNdfy6t+u0YCIXA==","signatures":[{"sig":"MEYCIQDdY2I/vDZ324d2IPnlCZtha94reHE3CiVM1B0nGjkOUwIhAMj2EwSQoxZ+JUZ+678K4rSY48+GJ6vAZ2Nv3+g75MTc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVTMCRA9TVsSAnZWagAAQF8P/iVAliKq3Uo9NbjPiG0D\ncFCvF0MROiET+kPb6kQQRWtpMGyToWIUpK05/YNz/JaL5lRG57ZBLTjNrOGa\n7vyvXkYiW3eRwmjgxnFgZdKLddFcnYGdp8hq63Hwt1tB8RE3A1MBiaGWH4mC\nVe16XxUixJUmFEaReWMWJIZFmhWHVUEkvaiVtUFr8EoVUZr8ZkV99x7jeDmR\netzjvBG56UbiXovJVcx9jt4oKr/6Ksj8y7M8OiHqZA3sI8B5IyTQz90fkfXv\nKFFQpM7JwJ47QcksYrhXHBM5GS5QfSAD8pr/8K9OaK2zTksiRRUHFVSM1Pw+\n59FxFe6xZa8EVF5M1fMtpsfDR4HFjGMJJBlpTJdDoo7RBrPqVfzE6fPzo7UU\nW7zsFEscLEODrW+mIGWkE94QKKY0IHUBzTsLpnmt07FJH/yGg5L+3hvR/Ju1\nHA9UXSKhVaTZsGYj2yPBr58GBgZ6D+hIs9qVSy5BQfnBA2c0mStT4O7YroXG\nFIX3fQu30+JeXw+msFK4NA76qq55pxd26o1wi/ZENFMsQrIwZ3DY4cQRlD5O\njH6aUG/S/L0OpHJHV831t1JYzWhl6lB50OW6+SGX7XOBlgvEIAnvZwBBx0zd\nGGoce5drvGV64wzfuc6cj/feQxZLmvqZSdQht3lhlAPh9/EC1hQLo9K3AVEJ\njHfg\r\n=43wf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.606e767ef.0","@material/theme":"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/line-ripple_11.0.0-canary.606e767ef.0_1614894283737_0.1529179263063114","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d885583d862d9c5a179cdebde7f058329b2506f8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":34,"integrity":"sha512-M7Y7Q9AwkYvarxIh8+4CvPpv5C25YZf2sZsbsbowlSzkOuCWIv8DLjma9Ngfk8xfwlEQxva1X8tNmJDssx44lg==","signatures":[{"sig":"MEQCIF4slYzlrThiiabRnLzM161BktXIIXyWtDXcYwywl8ahAiBsXwq0wPizaDWManpXsV+FTKXnWRp4Q4yFMHPvxEWqGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwdxCRA9TVsSAnZWagAACd0QAJvKew1IAgZYhW1vi1OW\njnIVaaWDKG3v1NrH7wMHJ5qlABd5DQFWP8e7fNo9MTLIY3aEXlmCCGQicSPs\n+I0JJso3kKJmcpHdh+8o9f2pMhx4U5N4B3qK/EEWCdvEa4U6kRkX/6t+9JDV\nPwO/w9piizHERuUzUcsRZ6oLuzQnGE2BxD44MdPcJEGvlbRXn0h2YJgtSNpL\ntZJ6Bx0D5Oivd48zS8ocMXRvS3j08kG81gWZP+typp3QkvDlPWFE6ojKl51J\ne4/rJME555ZVxbOsXvsuM/p4Ad5bXucfBlaovL7Sn6FP0Uo7RXlP7dBjZ8f9\nbpg1l8BmOpgWWo/pAxlOUvHVw/nu8jSRQXi+iKeyUWGkSTBECzALsYWZ83cA\naaS0oXfjMp1loUjUxgjwuCBRwy8GKdYG7mB2PF/hjb0q7dc7isTbSRraIW3c\nXd+9vKwZzk6jlTjGHND7QK7tk28Eo/8oTJQc+7VTW0PHe7xBhgcrMcsFyUnE\nEnj/pTnS82XC8T3xt0Gmp1TAWlpvzXOlh6LMKNzMrt27jL9bV/6hLB5hUJSR\nmNEeWx2YrIb5jTkvR+54zhinv9HmyWTQzpNSsvf5ROddVJkKCJv+ZoQ+R3tz\ne6CRl1FKONqXiG5SMk3Ew9dyHuafEO1nIbqpePeGX03EGuev7AHKXKel0IGD\nsAdb\r\n=kMbY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/theme":"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/line-ripple_11.0.0-canary.f77a4dd1a.0_1615005552767_0.5217674777619739","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/line-ripple","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4daef5806b8e7920223c872e6a891c1419dbfc65","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":34,"integrity":"sha512-I6xNKalLZPKDmF69Msk8cpg83OjRHs7/p1YX8Aj4V2+n3ZVpx6jlht0FFX7bayHobSyNhj4sFXkrJIdKSF7Beg==","signatures":[{"sig":"MEUCIAiEdoAg/B4eHKlQ40TLNsQ8gX8UEbbDT7DtdCCR5snLAiEA/lsX/N5MLWGS/NcN+iZj3DNe8X2ktgxZ7NIeILS4zvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqiTCRA9TVsSAnZWagAAh60P/1z4x02y0zBqOQc0ZZmC\nAXClVHlcY6TWQIVUUdi+3I8WqWY2D3zB6okVu9BaqWRLSPyDneVMoYqzszdJ\nssinquz7dJn4BDSt9OPUwW4Fidt5QmyVkFqrQm+Jidz5pWYtZm0jovAP8po+\nnmvmfbPcDBeCyIHICtyioJO31aLUcDVNCK4otakmWXn2mGUqZwtxApz7heBg\nkFaMZglxep1Q64Env4NqaOGGaeOLYYp1jInA4tCvJxWX8x5LeCi8U3baagYK\nshE3S3VurCPzCeQ5w3N9ofFomaenEw8ORLahch40brcOxo+ozQjq5IDGPzdO\n4GJlYuqv7i6CI/iwqwnM3VE+nbSUU57Dm+fWG6SGDol82E4LlZvdk/yYY3HH\nx53eHEALbMdsFIU/2mh1OGthRwoA7hbzWQpmq5+29ryigaxaWJgU7d2Y/FLG\nNTVKfFZ7TQeO6z/YRkTjIoeZXugJj8iFPunVJLmtokk2FBTMfVVFX2ymZzcV\nvgmx8m510CEeE/TxQZXBRnmuqRlwb2v0QavPNWl5E0oiO7EWeX+EHLiMepDx\n4lgjeAulIzNIMIkMcVGqEmRsSCg+2wql0blWTV40iNGwADu2+lka8Z+Lse/f\n3WByOZTR7tpi5amPw/8ti6DSDkWb9lzmP+Jtl7THfH9POywePbFU2uHmSvsM\nsQ6z\r\n=Qv3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/theme":"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/line-ripple_11.0.0-canary.2d6ba2c23.0_1615243411154_0.06551667541004624","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/line-ripple","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9bb0cf80629c859aeb6e3f84b309d37e12504f0d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.7522dcaca.0.tgz","fileCount":34,"integrity":"sha512-ocrnzfs06TPtnVQ6OzNWgf1MNaf1zYOnEdfyj8gKHY6KpUxr7iIZ1Jpy8cm/CafLCouiosq5ocLnWrtMgf3dzw==","signatures":[{"sig":"MEQCIANxC5xDhAOaS282Fc6j+XcYowhG79zU58BuzZCZ76cIAiBvNi8qK/00SY4tdcPKGpIu/vNNSP8+v5pFmPQgbWNPxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsDPCRA9TVsSAnZWagAAkygP/RyW64iBsywnlglUTKcD\nx2LlMwtJk9fAizcDlnsM6hw9u7YLON4sdwm/fJ5Da4N01Hdmww9l9Z2/drkH\nYut2bFd7I26j0Rdwd0yXKU9zg58ENFW1eTskHPI7fVRjtLoeaqgdl5dOm9VI\nSq6eJq+/fTuxvU5ghnr1pZKyS+S6MfbVwyG19525NeRMSfaJsDy3DAtB8yCE\n12ZUDjUtxaIgeLCSRL+79/ZS9V7C7HyZwRoIIJv9oxNdvQdaq7SjWBjxQWMh\n8SnxZzjjwDpRm4g5/2xzyEOZRhkEZb/NjiMOflwsCoEIUynuk4+TAn9JQdOG\nIiD5BkNMXI9kFllUG1VOpaP/mQycbkS6aGozjcyHiGIuULL99y+JlkMtydQP\nRgr4STHk+eL6DTJUm/Ix3xW//PuAMqKWDnZUcWGq3CyD1dYPuRgW0EzO4/qF\nHuVi7KQfH/Gkgx3EKgKvk8QyaSsYaXDo2kqKYppuWn1b+dgykqBMLXFO9nvM\naGlyNBe4wQSxkIUUoX0k0cdT/Qfq9PTAiP1rAud0PwdPrWOy3UJFIMoQZ+ml\n9NU/NRgu6gIMpPrruRFoutTIuJyin3D//MTzih192tlviL7UVa7rUix1/1na\n2CMvs9atqiDmkmLwxa9a96itiqfJHG8nGqeex8wrzUyuPIvOYotBJIAtFQHW\nr4AZ\r\n=hi1d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/theme":"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/line-ripple_11.0.0-canary.7522dcaca.0_1615249615009_0.30799830215878354","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/line-ripple","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f0f200de60155ef80840c077b1d487e152723c38","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.5c0ab7401.0.tgz","fileCount":34,"integrity":"sha512-Xn7D/P12RDOqYJZHcaABvUIsSQU9yDaCQrGhCadHfjC13rlEgVDiXV9tN4puaspS4vs9EkUK1DhNrvMCGbYfww==","signatures":[{"sig":"MEYCIQDAPPibeEMNyKDWUc62c7q01xlqL1Kizfb3CCBpcz4NzwIhAJFUeXsonPLetLVptWibKS+ibzzSfhFwOiO2UyAMoirS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/v+CRA9TVsSAnZWagAAraMP/1zgfBDSbBGaqAHOmGMv\nMvyLkAYj4CKgibHbk6v++SxbDA3FF2zPAGVQNEPVUbZPmVUNGUViFkMSzm0h\npydUCIwoPJ8X9pgdTGSSCvN5vuLOlRUcWiQZFWpAMvJcDDeZLoQoS2yjWipw\nbIHPtF5fPfEqQ0eKTUAZEByOrh9ti6BorKqw9Ob0jYby9sleApQBhTgyMB+3\nfyeMKt5JscCjHA64IQpGhBmRPk4r857lnvg/xda/OCsR2A/PGYQY18CI0ARE\nF1Zq78Yd3OFCjsPCCUJu7k9cdXPNlIIfUR73NecYYW/a12F5xU2vracW16nm\nO+kDBQyqTy5yEXp0282KWwjUt2V9cZOo4uX96is78dW92b2Pq1Yi0hAmiHpr\nbBGdm1CTWqajLqPvYH4UXrgn/MSWAkwaBGN38GaQ5uGs8b7rNO/zBETjUWQP\n11bZha2vLPGUXv9+Jx6vtoKD/kM+Uy+giu2nVUx7Eskp38SxoYJDab8GSWM8\nuTSXIRTAhP8G7BE52P/CVk/QLjUo56MRyN/3OA/Y+aZjL6O3xOZXZjZ2TtTi\nYKK90f53xzLbiQ2he6ouqjUG9k6aSXP8sSl8CG0pniYtvfR5XpJ/BTTK0e/K\nW2lmyZ3WTh0BJl08ngSFfg5U4v56XOJju6gIUbSBnvEHRvwEK5gBNLP40KQm\n4Bah\r\n=7tWe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/theme":"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/line-ripple_11.0.0-canary.5c0ab7401.0_1615330301500_0.7445987454726188","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/line-ripple","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8369dce1a6b60557def1b1a9f3ba9d522c155df3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.59010b6dc.0.tgz","fileCount":34,"integrity":"sha512-lFQ+VyiRoWoYUoOfTUHO4B13xvYfL16AGLp+WhObqJLZ5jtCk+qXLr+z8ViDvuJMiZLyoUR0LUJJjyVIUmJK1A==","signatures":[{"sig":"MEUCIAGW8p9UuBr7y5lglkvtwoCTlfFd5coEvOY3ldUiP/FgAiEA+GiOBg6keuiZ0YbUiCVjXrn6NJPpw2m8pJRJHbZWLUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPo+CRA9TVsSAnZWagAA3BYQAI9bt7oK/ekANbb47GPs\nTHaGmoRNqLmXQx3eL356lu/64OykgLV03Laa/r8rNzl9D0jaXy780cQTF4yZ\nRZ6acjqq8oxt/rH/t//SvEyWQkaFzuJzIGRZzwdvSeQ4r0/KD4yK6666gJu6\nV8tYWv4XUJIHu91n1oPJOXR93bVL7XwECM7rjSMs0iQKTRDf3cs9AxgRMYyE\nhzV1dvhzhQqSqXp2d70J1E8Qm16KnNOvciUkERe2BE17L473DunyPAaPGlgG\nfDLnQhSg0RvREvYh8BAavHSG3yok+VnZNd6ptJijSM6FW96MhkYGbLaE19Nm\nWGvoVAHy7s+10YRF8jYClX652CRaVSEv2D7CsK4RBhP0CDDTiA+2UnopaIAB\nnLJ5oeRnMV2pkvph30tQLb4RmF1lOKMn8dCOQk/97xpwIJZXGATCQk+DIrMQ\nJRqhdMRzuVQ/9xVWw3x6kRx4UQOXIsT4VWps2JagaRA2yRQJVrGg/mnT6zk8\nCgf4OLzZrrgJvVPY9bm/HUCgbru8gLnqyUOOi0qyffSa4K2O9ZJ8pq41VKdu\nM+q6vH057a9gOth+5lMZSEv8c2W4J8oJEa++/xsuz5pdiwraXwD/FTU105uq\ncymlGMWMOgcM2xg/ZxnHKinmUUlWtdsr7DUT2FK0p9+YeNsjlngExVl29iEn\nVw91\r\n=aIXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/theme":"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/line-ripple_11.0.0-canary.59010b6dc.0_1615395390126_0.7858866772491777","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/line-ripple","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"813311f564f2056206680a0d650dd5f3b27ba6a8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.9e52f5544.0.tgz","fileCount":34,"integrity":"sha512-Kv1gtppJsya7buzdC9R3cjY/xTEl2LOQg2EnxhT3vs+u8bC13kbjSX/zKVazyn6ELWLHJ4l9bw3EsQLvKjr5kA==","signatures":[{"sig":"MEUCIQCckBE37BUe30x127GIPFkrdojKnApPKsU/UTZtY/35lwIgH+12JwchEg5sJF843YQt7poYMJDxNVV0yerjSGrMbFg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVUkCRA9TVsSAnZWagAA+AgP/3nBDXoS0vtP4TXnQRsb\nY4Voz0lcwQjjhAHOTI27lTGhGfaLkl8UCkXVPDvQ4rSFlq6yrQObAg7bDC4A\n0Qu56YU7lAryD59HY+iiOeyQm7ZKONduK4SVPj14tzjXW6JVYbAvBobeQhQE\nrw2oAI/tgClV4zaunnU8R0acuUreOhsQtVQ8r/Qri4o3gLg6rKDdc+MVynFC\n/oT77MQq86R4SJYfFg51zE9/9w7rfnzdTDMLqHKLP1EL66SefWRXKqO+hMk1\njz5edINxFsDppgKprRSGQRz8QJydkxlCoUtlnxGLL5mVcl76arb0LgvZh9Qc\nbedU/zy/L965ptb0OunzujYh7vnAq6rT6J/ztAOO/H2/J1tSaRmLn7mg+lvt\nQFb/Z35g0CbYEJD/bPwkgmD8BdNUtGuLzUelYdZ6P4O7rf47QhuzmyE0VV3S\nSgoCBelhuIqduDLOjDQywc/udE5lEwrmnXodJEaQSk46ZBq7P7o2wJoZ67jd\nPTKGMcf8z7zDsNEsVZLEYyEY+5gwc3Ns6edNiIckUyBnq4QvZ8cUXp26dX32\nKA5ZT6SyZgpXSzpAKxdNPzGdmfydo4VMLaKT6zG7y0rMP4ubPYVhtIizmsBV\naBITq2JIEvScm27GE+ihEalA8+t/RJoUpHZLOHwr5tCSx+m7TRWofIMHyGGB\n7M/E\r\n=378T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/theme":"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/line-ripple_11.0.0-canary.9e52f5544.0_1615418660178_0.8810212993005919","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/line-ripple","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ad1cb66323ecbf9227ca362fc8ab2c4ced099520","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.a678806f5.0.tgz","fileCount":34,"integrity":"sha512-et0yqXODuykdeLzKFfevAbL7gksoeWWguX+/MyL5Ps3RFwdUFVfB5iUOeauFzFEciUTOeXBx0wdQit4g+2gBMg==","signatures":[{"sig":"MEUCIQCTXDdvrJyPmXYOIbRFExyf+tHHf//1M5tpG1NoYoIjowIgQoTHR6qn6SGq1vGSrR0xyThbACM+yE5oiME3RkbnvB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXcaCRA9TVsSAnZWagAA0loQAJbaJEGAksR5VuqaFA1L\ni4zvSQ9LmJUvhzc2yl6OV+pznhR2+oxSuCm06Q9aWzvImAj6xP7qghVyPrMe\nw71g4BGr2q/hS/vD5htytCLtOLGo5Wd0kEzLPXwT6rei/cG4FAyEfqeYk+rg\nlVzITTbXX3s0EMC2csh3eYLdFz8IaA3HcglM27Awcr5LQVzIdVcjKR0P8LZj\n/hp9SkASvqslp+I708Cuzgu/vR71wXxs8kW0XexUCpy9QQIprtO0XHOzh7jh\nLhE4dZb4yiZ23s8o3x0b3c40fdDSIYOqr7Z24Y4NPZYlewhWro9SFYtMBeKW\nORBVxMvpvo/fV0Nd7FjGnKDJO8oRusoPYrAJ6U9RueWLU6HjDHt4VIIfd2MB\nc0Ltfbxyxjfg3C5F8j0oe1w9hiqQs4IWMC+SzVmjnhoZ4fwFKm36PVfRBctO\n2iVgmfscLhnbPXIlMl9kf5HeOhM8oOAXI/LJLVNwlQ+i4K6N6ktyO7+7hAsN\n8rozak70q2tVtvdtv2dXnOdO1PyRVFbpoaQTfzxfp/tKlERPV/DQGHzuiIIg\nWSgBOpknzVjWt7ZiwlR1yEzOS8AbNwJSUWz22CBNK+SIIStz3Ygvi0BpLos1\nrS1B/XgfUW5e8ZZ1JUp6hCE4WfopUVuLzZ7+RQ0Auhh0awTdR+YmlX8k45hj\njU4U\r\n=JNKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a678806f5.0","@material/theme":"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/line-ripple_11.0.0-canary.a678806f5.0_1615427354245_0.33102445781958734","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2bfc8bf8e20ecbe85ca8a78ae856a0299825d31b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.b2d22df5b.0.tgz","fileCount":34,"integrity":"sha512-jq3khp0QCvEg01VQEHH3QJzq4LelebMSbRLDxcx8FMRsAlozu/9H3Z/tTmlhccGRncqN8a1dQXmDlmVzBEA7hQ==","signatures":[{"sig":"MEUCICNCilbM9in+pbcyluaIXXsjtE2PTfjTCk0M/Wltr613AiEAiEMXjoZamzh+qhx3fYAmPfTiDBVpIuxr3Euv4AWkvg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk0JCRA9TVsSAnZWagAAmHcP/iF7w2MJhX2D86RXwG3w\nwLuopreA0WMXu/1s1KKCPxuQra7BnZK28tj0dJOuTi54t7ucSD1EjwWGdx8j\n6RUS+RnFqPQrXZlM++5Dap6oAANXA0aNcXL4/2aw7LoynD8G/ppwWsfAWFKB\nMPK01vwH1UyzRHldOYJ1tyue0xeoO+Zf4ev6Sz0hPftzeylRKMYO+XenAyI5\nj3yY6ENTbnrPoQJtVqqsNbNbRb6WNwxKY3QJzZr8ThE7xAR16vFaqwdw5KJc\nSZWyeVXPEbBB4O6icOPPvMdYzBckvMBwPaj9VjKXN8baLZMhpY4oryte3RTF\nqTF4S4BSY681sOHm6BXXNRmEW/5Q/+sCcm6ms9uul20QlBrqR/RUTQEgElMW\nxve/Q+w61nJ5zRuCPbLYc8Jzwv458M3C/RlisE/5AfcLW3gXTIgJEjC8Mkgl\nUPxMnu5WnmZTbF4VRDW4XvmHztyVv0nvpn3PqkZ1GmmVpPrpEV6WbEUCaJHz\ntdEgPbwMQBCo0VOezr1fVPHijCSWouv//ws+va70sV3QlNpIpGl06wmdmzGP\n4mbnwJsyao18BuZCTjnJcaesX6RNn8bmoL6EAUcd9PEouB74hGa54BUP9ZJZ\nqqlJjC0deBXaueCEXh0cOwbyHCSrbnVL5OdKqBe3Z3gkHgr3/Tsb4MTIrT51\nxF7T\r\n=nYgC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/theme":"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/line-ripple_11.0.0-canary.b2d22df5b.0_1615482120518_0.07788967913802858","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/line-ripple","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"60b60c979e2ecbeb523bc8eead86b91c6248d4fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.81911b707.0.tgz","fileCount":34,"integrity":"sha512-N/dtVH1zFzIXpL09xystxb3F9w1tN3DBh+H9c9vQWjdHHb4gEN9vX07LXOMDD8cO2+ZIdLHqUXx554GnUVdayg==","signatures":[{"sig":"MEQCIDjupAn8uacm9XfcW9d9nfOcFiSD90kevNOpwjdrNKxbAiAhJIBgNaeHrirstP/Bl6gtRzw3Rnp/spgItx/kIRhxew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSl/kCRA9TVsSAnZWagAAOFMQAIgdFshha8XdGMPKnbZs\nTzOtefrzJUa57KKyuyfASdb7y5xJv4hblSMUSH3ljFZEj7u8mrWQOvZNaOUe\nKahtdeSlR44G1kZWwOL0/Jim8VptHbHdAXgn+OHzvVPXjtoRxgtiSwoNPV6r\nN5g09uqpWfSGKuGNV44L5Fb0gerPTtZ07PB3s6gPAMCNJ0YamJleN47iPTDf\nmFGU5wDDnMRep0A8QJzutfbZVj1oP7TmvO0vaxHmWhT/s4Hv/tYGufQfqE+Z\n9dYYYAhI+jWao18yQYUfnaxkkUdQNyi2RnEE7hJyBsCHKudcI1qkrD0TCJxe\n75tEsbLWG7n6E0FDqeAY9I/uW4z71p1ZY3Vm3DlgoxXgZX3y6R8HdlyuPjnF\nD/pSfZtbT7L6Hd4oABDpw1CR15Z3FCDeJYz7455YkSwT30jlGl8kMvh3VPnI\nHby1Zvs7u0XN1yrpM/3Wp/faX41iKuuEITG/9eb3Zywhe+mZiZzj0sKQ47OU\nlV61cazjcOJQTmPal5DGivnVK45R8fP+I06YxUZUlPzJalDE9+bQZWZQ+5Yl\nDKQKSPqgb4fHgtKsp4Y/xek5iZQfHIWZphJVl++pk1mJDlPoMimdD/XNAA4c\nLSFBVpMHrVykol2jrMyLKYgg8leygtV8816sqqfGL/c2Esc2fRol4V1NqzzP\nWGXD\r\n=ztI2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.81911b707.0","@material/theme":"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/line-ripple_11.0.0-canary.81911b707.0_1615486947990_0.26632398688252246","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/line-ripple","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"388c6ea63a6d6fe3135f60883c27279f89cc9925","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.9eeb35c38.0.tgz","fileCount":34,"integrity":"sha512-pVPAEhh8EEe7TwgMvU//iyVWtWXAoBTwd1AjzN/q3tKVflKRT6u2EV934Q9C7g9x+c+++W3XpzOWrRJVC7g8cw==","signatures":[{"sig":"MEYCIQCyyhb4EFYXg0d+Yx9N7RXkNtavXXShibiZiUVTr8St6wIhAMMVD3WZkFGDfGggtGvuFxmADzIVpxCJofwhPain6S7P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnEnCRA9TVsSAnZWagAA1LgQAJ0SlP9qbfSQX8e5nEwm\nsk6MSQECpKER1XBn4iuxV9BvMBjpRZLbyHv1uZUFBMNaUJ4Hzz5qWMzbPFvg\nZi+LoRd9RxMCrbf7jPzC5M9IR/y+xFS/aSTCt9uXbfE5bsGL3FDxbMOP/cs3\nW3Gy7TUizyuDv1WaljxpGMZ8k/W9hgn5+K85Z0CjGe3qvOl+C/HQk6eEFXKK\n5sId4PDK89u5zQ3JIBeTxyTxapE2rk7NsHHtcF7gZ77ULMTU72+jxRKr/LeR\nz/WSgpd10MepNU0BkBqL7Xmn3v9pAyHqpTKH1AZJja7Z4lfR2UB1NQvED7T3\ngtlSx8wPBLxVpZWVayK1dwdF/yeFViMn85MucS/CfBQygs31IQ286k9lszMw\niWDE5n08C4xyfHabi7GGf0PRLHEQ6CjJi2eKuj+AUkwJEAxpqIcKkIAsVrpy\nB1b25jb5rVblisuXdebOO+NAbU03tbBWqLkHkIfUVu71fD86pgqD34floq7W\nOovcgQHtQw78zFud8LsRZP7UdT2JCMElYrGynODNmCaAUwlWuhF31RtLZ0cj\nOtiV7Hx5GslhFOQ9NDwQdxMJUU5ixl4b/385WWuK/wv0BKyP9EtxhG9DYjGj\nhAN3TQEEl+xBbDMs2vV+9Ko21lRjGeITpsQscK9MbnLSFk+RpN2VvhHQoCeV\n6DR5\r\n=o86h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/theme":"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/line-ripple_11.0.0-canary.9eeb35c38.0_1615491366829_0.21423908189329754","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"533267f90c29f96ff89d29f23d2d87bb2fcdfd98","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.12be3e95a.0.tgz","fileCount":34,"integrity":"sha512-RuPtb3b3Y3WbcQEphHEzl3lnoyo++LbL+/h6iHlCHyjELBx2yA+co/raAgEMDitgv8wYC5dtt/fMH7cWIRfbSA==","signatures":[{"sig":"MEQCIHXTLVSZarffJWvuF9QO969Mwy4PsOCo9y+Gvkse4z3BAiBxeMP1uOV+8AT9sYkibE6VPoQEyVXOqMsc4BqGR7on6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnbuCRA9TVsSAnZWagAAPzUP/3wp9OshfxHHddkR1N/P\n3bxZx1CLdZvLD0Io3HpA2SN+34uZCvNRCtyZDIhpCX8nnkaBbyUWH2+Ldbpk\nMWy0dJvL6E9Hq/qKghEQabhzFqyprcVBrKKZBdo4pxPHKPJNbEC+L88GBl4Y\nKHpI502fFcqMGBq6i7fUi+sTIXV9ukaCoY2fXTim6ShHCSylEJb4LMRQJHdz\nom4bOmWt1rjI2z0ZynhSCCZhHpp+1Nnzm14GtUD3bjus6eQiJbVJw9pIAqIw\nZd8ik9mX9MhEywtS4pJ/b9VgzzpN4bOf0cP2peO1lEMquCeGwYQqpU7yxi6t\nGsdA8EBiOhbU3gxH/qWPmsI67x3cwXmp0hl9liNgOX5vUxb3VceJcBXplCUH\nXiB0H8IEtvmJAQ1PM7LIn4szgYM9kAJzQGggPynQOtd4cOMV8EpzKEDZZEuD\no5km8r+vo1UQj9Bbt9x7d4muDdjIQJCIuY5SnuocBYX2lbxuF8BndD4N6TjF\nJ6fhNDd1xVAjFvQCsJ/yg7bZMAd4T9vJp11E1lxqwZqnqiOOHwqCMPjixwdM\nYxXSoEdTQjtos0GJblqdkdzx5GQ7OkbeiMiEHIrjPCqUygsEmsTAeXqjUXt8\nrHgEU0xR1jpBd6vRr9wurAB/GZbUg/Js008l1oyb8rjXKV7UsPAR039X1Jgm\nVqpa\r\n=+tvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/theme":"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/line-ripple_11.0.0-canary.12be3e95a.0_1615492845586_0.31658784466316225","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"de219db1665a8b7e6950082e162b0232fb7a7d67","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.e683bdf4a.0.tgz","fileCount":34,"integrity":"sha512-dXPgxzxYy+UT7jColi1TPW8KXsIsIZlypR2A2ntyLOaVUGWRDxDL04y07nL3mgG1AfUa/ZiTibNL5iKbYFnc8g==","signatures":[{"sig":"MEQCIEFiGyCLXHUyaC7LnjJxd6MKXXazRihRKmqTFxIXpwXQAiBa8kjcdj64wVpBfad1NkhH3AL7jRCyhyuVghNe7zQZLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnikCRA9TVsSAnZWagAA6JAP/3IprTHqO8pe+CqzMYNx\nsAsPzz8YOT6re1QxzQA911i1RJX5HEB4OFNP981jQCAoTwZE/vOCtRsC+32l\nX4Ei6omrOX2HyGNfrVCBurCeJFKgL2aoD2meKmMoz5PnFaX+C6reKwZVLCq/\n0GIIhJ4/4tzzGPVlOrt3MtrogWqPqnGcUsKyv4XrxRGhPk2Fp0y/fvyXwDeh\nypB1XnLidYEt+0UUStSSujttnpOdloBiRvI7oZT/uWDeBd8arjHbJGD31lC/\nYxc5gHQP7t8Lq2OD34qxyH784ib01WYMha/nSMVQywcVNvOl6gSABtIq0aAR\nuJtXUE0aoPs4mRg8FAJNG7sb+zx/b36gSZ8Jjz54WMOsi5F0lyEBynVRu587\nIecTK/0epaJgSKr8TMOBO5u/xQm8bsmdLf53MyptiG16U7HSGpn5U5wCzYoU\n1Fcnf7iC6N2FoPPs6n4NezTULCqRui4kDmvSEy5LEoXS9sco6AAcGyMQ21Bc\ng8vXHqNDJBifItaHy1zvusTM98ANUwFnh1TRAN/fI1DNffjpagX3vyoWxOMf\nnKQiM4GgcMWQz2iM7Hh/j7SegiWhx9E+G1eXtzfj6TdpWfM8RSqqtCerE4P9\n6np6eCAxwhLKb7d39X4v5LBRAuJ91Ks5B8z6f3OI/ZcLPaZSAGGVRi8M2ncN\n3uhC\r\n=mkg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/theme":"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/line-ripple_11.0.0-canary.e683bdf4a.0_1615493283629_0.6943476241048592","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/line-ripple","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b71e2a3228382cf17b6bf65701920511420dbd9c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.a07b6d486.0.tgz","fileCount":34,"integrity":"sha512-0Yui9/9UlN/vwJDZadTlXzxzCfA3QXJdEdIkXt6XMJfh+7Mds55TSknme0YOA8f4mxKiB+ygTguXbt8z242AOg==","signatures":[{"sig":"MEUCIDQRzN1LS7O479XxsLhES7C/pyLBqcPJ3se+7ejJKqWGAiEAk9VvEvQ4gcKQWxVUyDlhBPRG92spmhUi9/YJh1CwloA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn5WCRA9TVsSAnZWagAAIigP/R3NrR5kw6P1FF56e8oC\nUKX2gJlmErnZylTTDncpSKB9YYRGG+rE1UqFv79hBTrUDuQMSUBb98n8KL81\nGbOLWYM/mL/EfINjpJxRlbTauhdTpFB4NYyKoKTANYixEiptaEHw0yiByy9x\n4aKbfv+obTM6eYA+i1WX+QSQ4hfpcDwA8KLAmfv6LH/p4Ep9/9+A/IUdTamI\nPSllRqqTRmh4Q9/9Fxg1eUtrT+6eUt1aDmeoEpq42ukfskPpN7Om843auaFJ\nigbgUEfY1Os2rLC7ZelRaHk5qJZKx5RKIjUFs82IEvPPt81+HYyhfU+nzst+\n0yvl2FSvHQzfgDmxQUV7IYthiTxjoOywMMDx28khvLjm2im8pWa5a7WlzmrP\nPxACCt8m19if+RVLP2J9iojyLM36rHj3PSPoay4B0cXIfd5pw2Pe/d/zIpIO\nBYCgb6MDQ3DnIRWI4+4jv3kaHHNp8IIMhmTushU81+d+pws58TtcQnK1Fma8\nYvmpX2S11cBGEdr6CwK9mFlFl1i8dPUaR0aIAyY4Vh4cOQ+TWyAjnJCLv6LR\n6L4CAo/EkpREk8KrWFWDJceXzZiTRqWcPmv+O/KHW6J2m5o8E7ikdsDxQGtt\neLUfMPkzWBNt+axUSFP8ES3sDkvvVwoHwpgU7JuDZfgebSMzFKCUfCo1hNYK\nc+Q8\r\n=Bqrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/theme":"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/line-ripple_11.0.0-canary.a07b6d486.0_1615494741774_0.36314134420217425","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/line-ripple","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9b63a892675ee339a4aebc43019c30f3744c5d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.1e0653477.0.tgz","fileCount":34,"integrity":"sha512-ry1e2ApZ7bf4b1E9PNSJMkyhBmmLhpOHU7BRKhvNhXzbGQ4GyQTTXHbjlnUyRbXViyFn0zhYiv52ePrW4MbfsA==","signatures":[{"sig":"MEUCIQCw5XNxbHmCNDiG+qdjNQ4dLB9HSJLkd9BFy8rzNjCA2QIgeKrdtXILa+42SntrH+QaNAQZ5HkUSNX/gIqwtneMXE0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoALCRA9TVsSAnZWagAAXwEP/0CIjrvELUniDJ0i4l2c\n12xzHzhoAa9aFwrH7I3O/1tyXXHqazNW+FNEPf6cC6yg4gscKToXHRY3X/T5\nLvzldaPChxecGyYQfxFIvU3pPxkC7m32om2Us3kb/zWaVo7AoZurQcMOIDK1\nzTcWZ1pTwNmE2D6Ymx3+SgmH3Lovq1hk/Lq3Xy7bM+XEXzi+maksk6SCsLbs\nwdvs2b5o3ngLnAhPoXHOpqmwyBO7HvnRTtW4fInjIpVMuWZ117GoyJKtFj3s\n12CKQvXT8JUS0nuRMdTWP4t+1tx3qlt1BtOTEaKuGNysSlYnb6RxMtqiFq/p\nO0VYk2vmBtIY8NZIoM8TKxfYVPWPfOVM19GzXMQH48ZSx31T0mbrHMUeU6iw\ny18gSUJUJRQrvgIL34I+2XLi7IT2N077jq5cOz3WWuRpoS9VCmR/i57PDSQg\ndGmQR68cu0QfTDJUlXl5XRFhz/+Q2yd3N5+/YoNI1Dv7+TSP4Hd5Lmud5+Xw\nY5XredLta1Y/T2oxFo8bfPWCBTB38VM/6RPhN2tIyDSOc3Pwl0zE/77d4z5r\n6TRqJd+vU4Ubtp8oAUgj/r4LSYNIYnFn+JeQt4H3++mRoj94wEWM2o+tEAp1\nVX1cLe9Kr9P3/y8IEQCtIeKh9I+YApfqvSIGnS71OBHmEtfO2L5qARKPlagp\nf3NO\r\n=fvCy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.1e0653477.0","@material/theme":"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/line-ripple_11.0.0-canary.1e0653477.0_1615495179403_0.838597332259361","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/line-ripple","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3f45e9954b11646458fa14ee0a80169cca262ebb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.148e8cfcc.0.tgz","fileCount":34,"integrity":"sha512-PffOZZ4wL588O1XuqIGCHjWtEsoFmtQARdpmEEAku/MqIUmBwiJjl0akq9pEc7hmbdID9NO4Dn4n0dmjrEiwDQ==","signatures":[{"sig":"MEUCIAJR9LPxA6ib4l4upDV9D+8Nq0Rn2i/s4GuBM8U8kHBWAiEAwsIqXf3Lgvn+RRa1eQ8MsTJ2fvP5/yXE10ZBDmoYGCw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp0WCRA9TVsSAnZWagAAQ9EP/00ye/WH94DvQvBnBAQD\n336tnqIFS0JTW06jChqKC28DmhMS+nQdTfGKl88myWsx0NpCbmq6+XnyG5wP\n7AklpSg2K0h1jZPWOkId7s5Oj85GEgt6PTZl2o/db1izU/Xs7lLxFjFtVV19\n5mJNCIF68wo9tTmnc59Ss+LDvJT1lPY6UT8HomROeRfYFzfq3fsrthzLO6H/\nsSYzhtNMZes0UnRJIbBW1WlIdH1k8t2GTC+K2FZlDuTsiOR3Tm6VVUZuAR0C\nVyH8mAIdKfCrAyZLuqXs8r2NvhW0UGk32yPBgiA+BMB9F2m/Mm9PegNmRy/V\npXlZBCfbsuwNkULU+GO2XuBBzKd81ofnOMuqfvkrGiUjfu/FWnuNUT4U1Wb6\nCiCzPT078A0hn+yXhqd9WGbMXbiKkSH8WA7P87YIhQJ7Y/wqTIGmOHVr+p0D\nioROQPAEUT5Bt/3OY1eOVyOSp2iA7LrV4r80jYN3F11q3MIYEgZCdC+CC3OE\nvefE7/sQXQvU00v/osmNJudM/6o3gqld8uZRXQ/wf/noMTZwYf1XIhpjwqln\ndtsIZiXtgHkZ/NXhmPUY0sF+2i1SUIumZnLNuZTlXk8CGORrS2MJcfxFDDEX\nkqV8Oijd62fmYH8K9nq7satTMRfAWMZ9jTvXYMkJoPiRhZ3enM2BvtAiZ+fT\nvwL5\r\n=CbNz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/theme":"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/line-ripple_11.0.0-canary.148e8cfcc.0_1615502613609_0.9389109013705346","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/line-ripple","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"711b9908922d9fd70d26c71d1d723dfe3bf5f265","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.73a227194.0.tgz","fileCount":34,"integrity":"sha512-5RZmOo7YLGCBaOqUNCc6Jtbqb/WmaMtHZ1AibkNeCSb+0C1Xv7bJULiOjDAslttM644Gv0pLo0mbt06SqUcY9w==","signatures":[{"sig":"MEUCIDvfKM4hqGKdulABML3cdTkhY4xgozPxieqmfzKtPEFaAiEAyiRD6wI3K3wmlneaFeS+DxwFO1U3n+hmOb3Ekw/q/h4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrRvCRA9TVsSAnZWagAAdk0P+QG6QutLhG2P2uKywSzj\nf8eG40mGDfwlqaOvFBMvrl0UJ/7pWdu+c/zzFR9Fx8D+PaJ3tJUTFlIjETLu\nRNH2kBFcFN+hVYdvUq1WybGkJoTB9vwAU1kGueB0XHeRCZwTG20DGEkWa+A+\nmhIg0Hmp1XyJAwNGjsQzfv3izuB4gDDy9NJYiGjGKoslXkAankJGpiDLcxXH\nlO71VGmAiczEXbTbFqztwsGdMeQdf4pyw3anqu7QwwnTkFMUDavQc0jxlgxZ\nW1ptJmdhfJ4J4bVohkmnjCmedPAiIAKYfZYVWZY8bBkr3o3Fv1GQqUxAR0Yi\n7tNOVd1NfzXZaIik/XMyh0v9XojPh6gwzI8TDaemExtCNGIIIosbsRV89DqP\nYyzGrv5OMUDwRcw8xiJhSM+Vr/zPs8fMySkvZdOaschwHGdHi+k1TcrKhsgm\nItU1l0ZJIFktTjqaUMCQeDleeBqPCt8x72HgGcXvxfyCj7kjMdZB3OjGWn2r\nrBHZDB2VvitC9NgfNaCmuuFAF+ml7c9NOcvpPRJewPG8+DEpZinhW44D9Bh4\nc43xgEF9/Uj4F+1l4bEqcmTA8GjW7iqpoVDgBq3ljFDHRexgAhuef55K+QNI\nQCCDGohk1aHvNTTbFotNcoG2mbJl3qHlsjmViV6A6ZBlVMWr03pliWELQQb2\na25j\r\n=jdhE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.73a227194.0","@material/theme":"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/line-ripple_11.0.0-canary.73a227194.0_1615508591472_0.5449887049368003","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b2d40fd3f835cc018cb7986f7a68cc1c35361d6c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f8579b7ea.0.tgz","fileCount":34,"integrity":"sha512-UQwds+HSqRamSmGN44LLv2F11dnF34A1yAeVPm6EZ0UR4U+/wJcksz8AWahga0KIE5LJ9cRfv1XMbynWcC/8YA==","signatures":[{"sig":"MEYCIQDYMeApIpMkfZ6ikCIjNe4Uy5y5Onx9hhJ1O4MZBtqUHQIhANFYsBR45Fc1CxS/uFZsI54eOKsDj/b3xRKF1TzjMwVs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB0fCRA9TVsSAnZWagAAYlAQAIkBilcInNP57qLbtqGG\nasvWDLLxdxyaYRMMEXKSJ+/pJv2HNZlTuN4qZiGX279y7KYLdd7itNJlKSp2\naowbbxHfYP29aEEOL3ETDzB4V5xYLlfqOgqnxEqzV7vZLZx4pMEk6vz5SeQR\n56uSWKUB0sANKcmpJoj5D+RaPEHbwMSxmHLAbu4RDmvNWMeMVTdN/I4tzDDM\nm7mEes9gYTKqAqiqzWI52SVQFVLpyJ/EIxUaSd2S/FCAqC9X2mUn5S3a416P\nEb2WOi+ZV6ckuQPBaiCFdRCIg/5kEs2+21tCh/eAj/OaP6Sl/u5OhBMRk4Ff\nulFRwVkjtJ2q6Hn8ornckdwbTjEsgkUjyWE937JVu/CoMHmifKPBHTugvVIR\nDOfgIOyubrBa9C6Fee1Cxd8gZQI7iS3yTbaTzjT07Yyc8NgsKhGRz82+8EqL\nIKirv2oXzAZWa6Hfh1UuzgkP/uRJD5M9GnlxnEwosX+SLbICpHR83Ayg2JmZ\n25PRhA39WznaOMkL3bBxYX6G71s0kzxW7fdigX98KdgPNdMPvS0UVQ4DwOsx\nbJvXq+RZajWmINol4NCdAdf8UpgDYr8Z1BnoX2qDjaSlHgbrXvHwDuL8lrp6\npOObpBt3DkgnI3s5uRLOdcSqFVAg5O+hhwjdJ4RSefj6UsXp1F1f4zXE0JHs\nn5T0\r\n=cwxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/theme":"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/line-ripple_11.0.0-canary.f8579b7ea.0_1615600925509_0.9214787567760947","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c67fba2dd05f5dbcbbc7d1e39fed7f59b5dd0a2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d2a39d300.0.tgz","fileCount":34,"integrity":"sha512-/Q28XZTP+C3unHPzeoiwLjMmhCif08Foh0x3cHK6Esupsa4ung5eWSZM0dyQMMDy5Dg5lDa+tv1ChQLPgsd0qQ==","signatures":[{"sig":"MEYCIQCJUk/5eDi7ptDcoEFpLCrhyougwhEVTAKgjs88MuKCUAIhAOYWarrSlb8oLBKZW5Zp5TKmt8161ao+IYzVdHzeSXf0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/z9CRA9TVsSAnZWagAAitEP/A0Wm/Sljkn04vY1G1Jd\nADD/b6jRIHgUhvadowEQYB2cd63fhA1X674OsKVPJtOzPENp1xqGPNI9aMLC\nrdhIYZ9YjaO3NnsuM+eCyFMhj5p7ckV5Lkqa9ofTwbUOFfetPSL/uFlW7aSm\nzPjuCFA3TGM/+yNsU6qlDp8hiTg+Ey6PhWDqkF36NlaHske7PXYbNIHFFmS0\nGRKG67T98ZejodvIhoQQMI/R1ziVDaOMLKu4dGmFDUPHjYE5K6DpHX+DVufW\nx1zTHyLfna8GAKpyGHBwVZH1rAznumtm2z8gDKkKH9w2nmPBgs1uWKwk6FE1\n2w66oYushUv+70p9D7bV+H8/YbNvxQGKvJFXFbIRwChclog1gJ8gnvXOXt7Q\nI3MtU0OpVZqkY33HDqlTDZWHxFuC7R87pKp2mjHhMubAMqbfsekUnT6OvQTs\nA1XKKCPR5DdBVOL7JcGGzY8pkVaOLkUSRYZBM6aaXLs7+DnVoTkaoacPr4HC\n9dscSScufWEFgMKfL279y/CtcLeNBYRfUmWExqI0BaoRfB1y5Q92BPdNX64N\nVk8DI7lnUhoXl38OZX3XSnJbdYQRPfC7/HqlKf6tFkpocm/2yufeml8b2x7A\nPs54QKI/9i5lXyvn4BYcRFjSVC1w1V/1C3xE0LsGDDpnxymTT9Tleu5bhoFx\nJshw\r\n=V878\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/theme":"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/line-ripple_11.0.0-canary.d2a39d300.0_1615854845405_0.6440444528836013","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5856ef0bf22c47cf2606c427a8ab999886061047","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.7cf67823e.0.tgz","fileCount":34,"integrity":"sha512-ZNlyLj5rSn/3ugfburJq9Ut9iYmvPWOmZ7E7Ux6rCmWG4SVE2v+5aKpst5JYD4nHt3IgU9dKAXvvIfCR98qiHQ==","signatures":[{"sig":"MEQCIAcPGWYordU7uBvlQGHGlZx7jY6ngYp9kpW0vxZTTXJBAiAeJCZK83sMnUOzHmk6uUDBhtP2c5vlytovE3MXZ8LpoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPaqCRA9TVsSAnZWagAA2vYP/RvWhlqqy9eTpnUOgNg/\nHUhBCb6MCbWYVtnvqcFtGBVkDsZIv7ynwgrm0tXDShbfm9sVU8KbnulG51iI\n4cKKMc/a9v5xEyr9Wiy9nREZ55A7ZljWZhP35uXV/oo+09vYNj4zcoUKgLUs\nh3yL9/c7F26i2Na4mB+OoXvX2hz63adUo6+pIHvEStpBJxwIPw0hvot1gwH6\nqoTw2zwRmuDUp209JWuEvMMRzL1EeCVgog4pIh4+t2kLeUt4Hf2Tu9+WcuzN\nHbS/9onGxAqTZMATp1424WnIYjXYjhYbQcdDJtbscvDpAWXDstfEba6dc8dS\nWOJWV9qoNUAkGkXWSoMmu0Rom6ghVT8rIDOdcIndrUclgAu3+jPl5s3pFDhI\nWID4JfuuNqLupt3g/LGFoYYptPp2KQ7DQIx0xhlZgY148pxKdP18q0waFRxC\nqq+gmPOm5tEHqxMuqlj/z3PbJAJTa45uyMJqpJyakA9Q0Z2RJpcc5gDbLWKe\nR3tQN2C3CkMaWb7cQft5MSi/W0M/lEa+2DY+krGqDS2jFoA1G1FTTyDZI4Oh\nD5LfKmUrby7frTSao6pE0OeYjodt/DwHABC1WiWLThS/36GEqFMAWj4GONXc\nBZmsVEjQ87xTCSpWRGQboZENXLV3P1YfOiTQDB/46F5sTA/Nww1ubvoNtMCc\niaot\r\n=lm/g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/theme":"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/line-ripple_11.0.0-canary.7cf67823e.0_1615918761774_0.5093200065238133","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/line-ripple","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"75fd8bff885e5e58c4281cc0e2b54c70de6be2aa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.67d780c79.0.tgz","fileCount":34,"integrity":"sha512-eiwPpzWvYEEqwN0jypNLZPccX/+xmkNDXzdaJ9nTxywQJecaBDjyejw+TFzNMVPJise5jD6RMCALb2jvSgdtpw==","signatures":[{"sig":"MEQCIHnzJr3JXZUrAtcoNl0r200pUkj0fEmSbKjrkAdDBEhFAiBpLVrKZoWw4D1YVN/IvX3lQI4+r/86LuRKgt2u1mm7NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQs2CRA9TVsSAnZWagAAV2oP/jHmsLjXhPhjgxl6XWKc\nTbKBqpNaJz1IsMX++190I7eV5R7nUKo/Wh8lEXOj+DHVXhRQ6RxJfFMAw5e+\njmOWaS7NGBDa6tel24ydPj+JAS8e7zV2fc9Uk4zAw2WSH/psJ1KWUCmcDFvt\nJvf2gYEh60RTvXT6qA5Bkw6VZqYfy7oJdg6xV/MDpg5digEvIWnZ9DmTv75y\nzTUNcYGWX+gblM3z1WmIheqOgdY1zTMX9ELvUbb5d4qrudQKOBmVXYtt64U8\ncL82F1vYaj3Pt08GL8niJkxXvxDddyS5+NVNVoHY4GIb2CaHv7wh33KQxPxo\n8/da+jq116+6/VF5XZbJUoG1KJDqD91uHj6qcAYrTiHfIBXE2rSrjriDaCnu\n9JYcYXpF+M8CjUsrbkMsSIP7iOJrFvcEDkqR1ZSFw6UdZs8krItFZRBZv946\nhPjbv5eknZqXUp9QYr4q4r+d3xd3ZazYgJqvVCsL5Ywnc8v6H9y/mchRArJ3\n7ED/NfD12zW7qwn/BJtlzxGuh9J8MCRwAySUVbleAMuIUqVK4Ez1z1MXAe56\naC6DSk1PEfPCDf59woAi8ynBM0EoxPUL/+oIBz36rj5PNs3GJEJGYhF1UHjX\nbLRlVjmxkZlG23/taRI4bWcVOR52blJZRUEJCl6qBjsEopmTbOsRby51qM7l\nV++G\r\n=G0sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.67d780c79.0","@material/theme":"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/line-ripple_11.0.0-canary.67d780c79.0_1615924022105_0.9746869799082909","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ca4c558531d17cd2121c310c50a0eb2d8bffd8cc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0f358ddae.0.tgz","fileCount":34,"integrity":"sha512-nqUPcKVGQeyIxo6LH8ZwONjyOtgsGN2nHENNCqtbuyRUMMzWVfYn3FLHVjMZiDEqqgHaPUzRkRgBQwRUIvABCw==","signatures":[{"sig":"MEUCIQDJ0N/WBINyLbbSlusbC22+1Rb2hXVMNN+CTqV8Ph3p/QIgc+BOcVj9c3FUqtu+0sD5qDKXLADiMAeVYMXRI0NBkpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS0SCRA9TVsSAnZWagAAeLkQAJLmWZs2rYX/mFXLWm2i\nrRCOq2lblV8t+XEYu3J/b72uI57Tfs5i1n2Ddo9u4xC8UKcJQu6NU/iSyvSx\nyzPpk2KDO/j/NTr3s+YBTrVDJfpPso8OwP6twma8FZ7VysgsjJbt96KelKve\nsaYtHRGwMb8KRamMXFemiEG1VzfdwuTuqBcLFRumFKCEysn/JMRUiqu1X111\nKJSCKUlyuJTqCgUGoZ913wfjM4p9X1zyJjB0ur9P0AIuYrDjJC3YWpzQpAjv\n48z+8SoWNOh4/IbykDMzd4hjyioJx2u6wTKzuFU/YDhxJ+DCuMPm5E3YVRKJ\nf8tVJosL3GM5OAI2NMMAA3UGn9h9vRBqiZ10ubvJbnFYa/uZZ1JcQWENCOrl\n60emkocAi/29SJI+JHThkR9mmz+n2JghQyU+sEaN79V3+dheB9Ux9wEYxU/u\n/X+ZheNRVR7ePGkRzS+wgDz58hXcZQu5KggE7Nrcu7rbNogrUBc3y+YTgbY5\n6JSsWEvWniVBS4QO1RUZ5TV3l6FxISMzX8Pm4yG/bzgNcfSdOdni4/nDeSq3\nQ7s4U4loxlOasbNgU4rhHdTmKUidRz0AwvdhYrlTVcryK1J1RGJSaKzHlChw\nse7KDwnTJNRsqpe0+VpnaExYWpSl1ko2hfYm5Qy2P5yQA6dgxjXbHw997uDt\n+jEx\r\n=ptWl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/theme":"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/line-ripple_11.0.0-canary.0f358ddae.0_1615932689640_0.18382711710100508","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/line-ripple","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6599c5d3ed52f23603f00934cb108f83abc84459","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.67eb0df80.0.tgz","fileCount":34,"integrity":"sha512-V57MklpdvwqnE3+qkqAgMiEj3bIDLIdKTnLeN1H7R7GKdNRbwXMctP63rEWQCop1SrDt299QJKzkoeYdEVn8dg==","signatures":[{"sig":"MEUCIQDp89kmIFIv7Y0LOjXlJGpUn0SHxgzLCg/oEStI9zOs5AIgaeRBnsLeVyU0AhKJkydQ1AoGAlnPhS9krr0aQLb9tsA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTN2CRA9TVsSAnZWagAAZm0P/0TvuwwnwrUfsdDVK7zA\nPHmTc0ISbJ+te4j4yE+v//Efk+lSBUqVMO2JE1EAUYMaD2bq3DLGxqCClf6D\nJB1xnyDFEgM4NCXleBGonY+PAHXysost9sjfPWfCsIBZZbYF8SeiwE2LdWNk\nrQSmag48L4nQ/87dnEIRwp3VLgomeXtOQkQ09HngUCCcN6s6xn79uPpmnxve\n/nxm/2CMuHfEuQvNHxi8LUnZ+w/DIMev/OuEB1rKUkE3erVrfJOQLg88fpt+\nt0bLxoI5wInyd4gXsCNbbhOBBUsRS58ZAHvzk6Y+jOHM7YySzw6Ok+BxX2gV\nZVWAXbuDqCL2uVKwFsv259l3jFjqCa0Dnoib4p5lF+S4NjHtKY0Ah/syZuI8\naVvmnJV0HZGD9fSs3Bpb+nRe9NknvwkiTgt2RaIyxI0FmPAI/cxCbEc4AcwK\neFg5n20LT4XLZCfIgeq8r1A+rI8Uel4rY/KBTbQBqvq7ONnMijqGtRthZOfe\nu9aJTWwUtLLlrrJCWshvfhK78ZT34G+JSAhuxRnLw2lsxMEgL0K3pcbjLIk6\nrg5IyKD/qJ8YzrbHMCJXLwIZ8kN9NIncLdXgFCjpfrbAmd+P4HSo0Yyby3gr\naWSPovgfn/HS6awZ8+yWZ/AAqsX/3wLY3wa/6jAmfmrUT2NNXevG52iOVCF5\nhWAW\r\n=PiO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/theme":"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/line-ripple_11.0.0-canary.67eb0df80.0_1615934326067_0.6861510965001982","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6390fe3d88fcb8989c64c58c6805d68f7496342f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.941ca3b3c.0.tgz","fileCount":34,"integrity":"sha512-9GrTi4YM50IdkOXKo1TPhJijQ/jHbXkqYn1wVcwShPQ5GB+Ry4Im0MFEFfubrypHpvT1WjQyNkBMCZ7pw8xwXA==","signatures":[{"sig":"MEUCIQDu0xlB+9HL22oAywmgsAWw8fmWBVuXvSWhNllb74yDcAIgRkUkMNm2/SYP2JKmHddp1uW+/djdmVus0J23XMm1jrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPkCRA9TVsSAnZWagAAZfYP/RA26ITVV/U+Z7jz2Qql\nH0oI/lfuH6sjUQDUv96Zv3bR1RClVdZWZNyTYEu+M+j6D2TIXcxIGvdzGLcZ\nwTOBW/bECNnH93HqyPPr4gcc6340h+uW8AH4Xjb+XAGWMysEzHvtTJ93O+k1\nOXcC44d0qutNYRqp9bLJkX6DDZ5I7PZwUCDMhrrLUwcgNFxHiNj6qgitS9EG\nX+yYCp7aJxyi6i/d1OjA05vp2tsAlsb5bpSoS4guyNnVuNZEyhDDiuLEBpcj\nb9020xR/1JAC4NUyKz/KTO6JIh5CO8ATmzZQ+DmQOMCMhqP2zW7sqk5q1pbh\nc/3HMtegY9z8m4RDfJtWE8D+2CEPcvCbJRdJDSVu+XB+4u1nO3U8pgaUtAPu\nelKpZBA3DXlKx6QIsvySbavnBzLTeMm1hSFiFn/+MW3zOi6/7ZZPG5fAmYIo\nfvMACHG6Njde1O5VeCOay4WSxj/Gnp0QtGiPQhg+5dUUvXOIv7b8Xj48X2ti\nbF7931gSDvQSKzPfke6XBydgLqmEU9xZO/VeixZwwbxwykg6uQCqLzItc2ID\n0nMJr/no21br49c09jTvLqfSUqwZYeze6tKrHn1FfFUQIdWUApZ2N9/Q6PX8\nFL+s3mk5K4Y3PtoaOC/0uMy43sBL2mIicC4S9CA0iVwOTMT7tmm8C/Dg0ehh\nam2E\r\n=kGTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/theme":"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/line-ripple_11.0.0-canary.941ca3b3c.0_1615934435463_0.6238745173217182","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/line-ripple","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"70774ddd9dfc382e83c4be361efa9d7b0352f586","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.3344d12ad.0.tgz","fileCount":34,"integrity":"sha512-5nHXYlUuc5PwqcE0BmERC0s1/fDXaGvSxBfm/t8fBKwuGeOJXau+qPHnHDTcsxvm+BBW1PEdiH3Jx7NlKaL98g==","signatures":[{"sig":"MEYCIQCK6nb8nhCFoWf+kXDIfqTZpFMA4xBnOSyt5xXe2+WugwIhAOOnJoPfP74qpHshZAwpIXp0j9vY3CHVld7oD8HvVFeD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdNdCRA9TVsSAnZWagAArkUP/2txvd3C3PWL/0e3/Ouq\nns0iyb7stPE52xbE2Oknh3mDdkwgRg+fjGJg2TbUcxSV2BV9Dj+ZkGiH8cK5\ns8viggOu4cZB8D7V9q183O4UnGd0j+s1NdWn7h4HWcYO8BoDTkh5cBrAEW8u\nqHVME/kSc6ZxLeVFfVgriT80kIMPTOkCvQPOaM6HVvyxdOl94KguaZiWZGXz\nmut5fUscm9nNAbhlLEs/dDGGZFUNlrTE1iepUIc0yEwgCmotGIIVGilw1idx\niG/5Lbg1FCRKF3JEMWcdh7DK2SVNO2HJwzWI7nDgU5gurV3dI7M6XvoTpKC0\nPzZ2Do1hzZ/pkUCsYhBafyrkTkag+RMWkNg3GAcncDjcW0ky/sQd+8RgdDzS\n7ilimG5ooMj7xlZpLtTP8fP5i2fMx3p3K2ij2oJERF0IL78vBcrBCOU670L/\nvFbLFThkpzFwzQgSZ1NqEaUR8aUyA2psY2Fci/0YP2Glt5snedBOhOJiR3Xm\nN2E3tXb75a9DblhZHf1q7/1uJB4XwdUbbl/w2SqgSEBLC6Lcq1D0gVF+x3du\nYEfxoGWomvas+7EyFOehbwlh/kAepNzwkhAyRkxzVsU2CrjrcXPJg5PtbEiF\nRqLeCGTW6XpGbeJK9Rz+JvMKHjyuh5fKsYhl3X92pq9Jwuq8dcVqQlDxNB3O\nE43d\r\n=Ozss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/theme":"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/line-ripple_11.0.0-canary.3344d12ad.0_1615975261170_0.05140753919019314","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/line-ripple","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c74c875efc8709d6b217feebc695b25bee3322b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.6072ed604.0.tgz","fileCount":34,"integrity":"sha512-i644P3FBRodpQ14zYzBV7gFYkGNftpN/XPuFll4pJ7SQ/enwSOCvzV/TYHaPf7pdNtCbPthe1o/cknoFYUHwZA==","signatures":[{"sig":"MEUCIQCwGurF8CYF831LJ+jiEjMIx4chnZEGbYCvXuMqJRmbDwIgBjrG4ikl2JZUN00JoPjoR0ypTXJ0dK/9/5Hrpz4HIVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUomkCRA9TVsSAnZWagAA4D0P/0+TdAeThKIX8hJnGza2\nDJhXy+dzmQmQBNwR38Zil7UPESgK2A4BNy8iQcrPuZG0daEZ4oIMW8+6cYCL\njd9UiORJH6/Td5UO8QDR0E05Pb2JcbjB5XmwI5/63cWQYRon7KjSuS5bI8dB\nz6VO+qrrxjMUCWawHPutd9RUyNj1nnTk4gx3g8RCYJ+u/EtzWtMsxbsvLQOM\nYg2itayiX1Yfs6iR7N8eC/OeATeo8RD9uxn8ewPIK+WB/YpYn7ygCILMnedS\naaklACwixqFXqWJYjFGLEBdpTJcwpAmqX97t7dJGeM7J3flla4CVA+h4BZJd\nzsTybKtvi0MEK9OoYB9mslcMLVtINgevh+B4D6OeMpIskrSswxYm28QD/zsK\nfxF43LVXoZWYplig2l+XUTIKPFPpnWMqbAPoEY24E1kbV0ifCD951yT7WufR\n2DUlKFTPWQZeWRg8CTRnuTyxvIT5xG80JxaHTd/8TIPAJmEdw9hqg7e9EZWs\nCkNWx1MVXT/OaxWg0Ecr7ych+JSZU5o0QNMDvxPNQJMoiT5gFFILoCLGUX73\nW3Y0DXzE3pwgOMo7irIWVRGvweoztLmS/1AFdPY7a3fcRkV/GMRrE/zcq2OC\nAG6rQKju2QQOhmAmlsJJw8l9sWMxaKrwoes1Q4FhIJiP2wfRw7HWbP9S6JOk\n9W3e\r\n=sTIQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6072ed604.0","@material/theme":"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/line-ripple_11.0.0-canary.6072ed604.0_1616021923606_0.4725360520905144","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"680aa3569de8a3c4b9040bd694841253a7632bb4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d3a6862af.0.tgz","fileCount":34,"integrity":"sha512-dswN4TrSTOYHJLiUDoM7zdfUpLkweHeOtdMKwG+78mOi1tOOz2Wl0/HTdsGj17/t4zAH2w4DyZqZtdZqUogc+A==","signatures":[{"sig":"MEUCIEi0oh72NffXbPAGVweymuuu8ALPU99PHYY0KB6Dix76AiEAhZkP3GJAmVvGygHICzxSnHu0XgcpyeGb0VjCpncS+GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU315CRA9TVsSAnZWagAAsvgP/RJFJJLVl7DLjvAVWLBx\nUbIF5f/zC8bGJUPHdrEBH3fai+Ep3E5l75Iqk1FotaXOEVSgz7gKEjfke9h5\n6jRJitDmUiIaO657Wodp+OkAbG9LCYlbrATEAO08pBYYPlAOA8L2bwS46iLW\nrebYG7AFJ/esOS7PCHHhzwL8psudTFZlDL+e8EXdbQeSQPD1CApNqULOnp4i\n3snJjFSjKQSRGhnSO3NOrZ0LG5krUa1vj/Hgt+tXmiBIB8hQnf7waa8GbkFE\nC/oGT5pbuJ1W+Ndxpna6DQYmwq+inGsWUKJQ4Bhrbsx4rQP2+0AuqLFRS2FM\nlYZfRoc1lOMTrEh+EvHT1TYuKpF92iQI9UNG5/eI1tpueZhB/w2VpgQ/u2CO\nOoVO8ZqLOqm8TYG0QjO11s+VdtUFGI2GLN5UcE3OmocVRYa10ak7PWfwrAaL\nGDjBJ8STAlvt0Sy6Qatu1+ys698T1QiGA8+MWSIbWXcBVZa4xnQf27ny+1MW\nSS49EZde7y7vORoakPxeWWl9fe69nRZIyq+PqKnHxYrvzOUhoiEWlbziSgfi\nr01tXwPDIVW98rQif7gjhJ+OsRZgbR5X3+D7H6a5hyTeoBRWmwx3f2IqGQU2\n6jZR4nsdwbns/KTyfP2jjfv5WQQjA9u25FstW2aIffstiYKJy3BvgEG0536C\nYSMs\r\n=tvR2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/theme":"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/line-ripple_11.0.0-canary.d3a6862af.0_1616084344980_0.6738907621258396","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/line-ripple","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98263e6da3fa5c5cdb0783db97b876f20314ee75","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.40dd242d5.0.tgz","fileCount":34,"integrity":"sha512-VD90TlDVI1v97Gmx//8tcdK2wrwLPGZqVaFfiLtlSAFtpfHrO3CQQOgI+8qsjqVuJqu/eEYeZDJW9L+qAi7f2g==","signatures":[{"sig":"MEYCIQCgWQ1H8OBVkhdr/6qgzrmx0Dab8AEKq8Ji958Y7W4hMQIhAIeekNjIGhVi9y1HwnFAUCNMfZaWgrknt5ZqcL2Xs2ny","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8MpCRA9TVsSAnZWagAAf64P/A+4IbnrnmZBN8A95Tas\npbRs/swaVzQLRz3kJnvWF5dFvSFHc5jnXruo0bLiNNxDMu7/9go0ZYuB+rjA\nHeZCk9HUGmTGWgot2fzGyQNtKYqSs2dhqyZACRKmoqVkzrXJpmk0J0fZiqiA\ncESp7N8/DNDTHyO48NJf5w6rFtcImOxje2rCBeWLsESHp6Juk6zvR/l17WvK\n2gDBFFvJWSzVxDWO/W8vlz2fv2tIMeYzNzhTqkdjO817T2aNG2/Op2eWyLZ4\njoQF67btmgWrLYWWpf0OuOHHC06SHdKpc3OrKdbnkU8o/2mpOV8gNGbC/C0a\nbixwJ2KK0rprJtvRFwGGIre6P2lIzkhibfHft3LK9XcblpMIzIJFT7rkxG1i\nbMeTN1q5Unx0+0Q5f8AHEnAHt4Y65KmrPk5KxsNEPbkzXUeC0RoEEdksqkpB\nUIFIEJ/R0+rgm1eExGa2abIQtXEVzw4dhieyVtejrY+L8axoYH/y0rwNLbJ8\ncutmPNuyTpI2iBfmSNxlMaYwJl8701PE7HH1Yq1rn39Vpz3aEZhwHVii5bAK\ni4uzOl4zXHBwjdkZwwDfGtp2mLTTl3H//h0NnwPvGzdAfUxlTzbhvNkHVZJf\njkX/M4wgK15cMi1DO2sct/RjT23al6tecgENUC29maSlkj1uSUVF0cRVmgdb\nefUV\r\n=ogSd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/theme":"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/line-ripple_11.0.0-canary.40dd242d5.0_1616102184665_0.4030614414672422","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/line-ripple","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dd0ded7f425a759ca5d1d3ca70342fe1b4b35734","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.ec8f8465f.0.tgz","fileCount":34,"integrity":"sha512-vsX0uLGmxvU3JPd6v7x7TZrDAcWVABgs3bv1G5w4GperAH0rj97FquqUO/kBZEqHwJYYDMxzrd0l53JFQ4dj7g==","signatures":[{"sig":"MEYCIQDJWKRHpb3bayANBrwTUUNnDwcM/mG/7Cqd/zYZviFRXwIhAMH6ZL/IMU71fHf7NPpqom6r9Ktdu/w9+gVCe1jV/Rwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8l6CRA9TVsSAnZWagAApCIP/0xpq3R2C3ALFrCf35Xb\nBS6nQ4TtYb2rjP9pUV/WearQca1/TwFXcZJnR4X6wvaXcPWf1Oy4Ydd8IkXx\n2dmLtu9zTNp4igdQHzHDhBN1aKXdysOR0ETuhI/KUX8IgRwSmUup2UdlpRiA\nFqzyohz1Sflg6hyiASlfJ+7phYH6ayP2e3Kq7huoamsuxuweq/ZWtqHUwja9\nW58+Zf5p87KoX+KjnomWfKeWToIy/jaE6Kko1frwTXUvCJHyyUQvGVrGh4D4\ntsDK0Po00l4TW2AOwzCB3VB/9Z8Ufu7kJ8ApIRwXIEShxYqdATiwI2E1WEF7\nRLPmrXTZjuChTn/DQEZFMLQ7IPIVe8C7i8BU8XRVfRVgoAtyAmKUabv0S1cd\n3sxc7kJBTUdqt1uTj5+EhjW6p9uc0cAS7ccHEpeKHqD1EtbUrHxweZPUPi5M\nb376UqcD2GNJVgcUJ5QkQQIQ3KNrSlqjLouZGf/pTxu+IP+0ZcHeqNPbqI/r\nSgOFjmExdo7eksp6gyu/Sxx2boOldRs1DVros5gNjMwzRv7mkBt2lbmqJd86\n2iTLY8jBkjOZpLHwM8PyoWQirboVeouKHUjP7EbLYGInNpVtWfBjIKE1z3B4\nwhx+8DZ1LBYb4S9BtVo+Iawc/a3UAqJpn/I46n2FxMnxzzoxbVyPzYdnVMF1\nS8tf\r\n=z2Aw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/theme":"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/line-ripple_11.0.0-canary.ec8f8465f.0_1616103801441_0.7208781892896317","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/line-ripple","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78726b4f38654f98cf5809525f92ef8578a84b4d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.da38969ec.0.tgz","fileCount":34,"integrity":"sha512-6suA3B/Mdkp9l9Zdzzb4/sO6MyWPEYPPQpHcz8UoWF/nuN3eEr12vVGRNWs20W4s1WLvVxIhYNs5DtMxPwzlCg==","signatures":[{"sig":"MEYCIQDNUEaMAxFZPFpVQu7PtC+yeBAWXzoUezOTiXbvK2/oYAIhAPsoUW8Jei+22CnEJNxrSaZEq62iour9iDBKSo/h6VRf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9FeCRA9TVsSAnZWagAAF1AP/0dxN6BK1es9pR3B1ut8\n1sD8QfZuOmWbmVsRuj1guH23wEgk777LjSw4WvnteYZqcgfmVQFILGO2JAok\nEgkg/Bs2RbegQFaezG2DFJDmLBd5z6b1t7NYmMnzLIpDDLM9kjJMEWF9v6Cr\n6d3PxIbyX0s/unEF1fBgAErPfGltMjI/ObKaJgjqS0R4V0yApjfx4/aBS370\nlsa90GA1bGq+1upE0c+HDICFaJQz0ReQPXDhaYswMzez3Sj/ZoMgyUEVaM7D\nokuQ5iEdroZ6RgqrN7BdIg1hHZlIZvGLDxZU4Hn2jhuhS20DUADgYKbNSIJC\njWPJcIzgUFK2360AIaJ/p5wd4GF/HFi/eZe4lidhRPOrhDaULXK5C0Uy7dTi\nwb6jG9+q6KJCHVN8JqZkUJ+WUkDHQvVDu0H2PNvbOz/XVD694f7Er68CZaqf\noRhTZfLK6MTJ7Irelc2r63rbnYHbwk4qNfhCuw9Fn96OkOgf1qZbvk+6QMla\nydaCqk1rcHeDauHVPiorYv596JG3m4g/V4z0+Q3VjlgtNjhpZhHSUGTYg08s\nSR6JLk9+ewzhRl4L7MUu/orGHqOfy5iPre49wZcr843KqQVe+UGZRzESpG1P\n0U5ZGs4lTHINj6vA+KclTWBU7r6C6w3G3749WxoeQd6GlurcGss0bP0REUR5\n+Y8S\r\n=dFV1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.da38969ec.0","@material/theme":"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/line-ripple_11.0.0-canary.da38969ec.0_1616105822330_0.9204209018104839","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4d97773d34f6cbef43ee13e5782d7aa2b0960b1a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f5246264d.0.tgz","fileCount":34,"integrity":"sha512-b61d1EJ49j0Op0d1qxkZDZVvxVwClYQdXtMI+aoVb5tVM+FmEURSlkCKlUHPmqYCAlc5E2tQm5l6AmZpTPkb6Q==","signatures":[{"sig":"MEUCIQDCQrgAlWqVSOHDT4Vvnt9LR3Ui4k97X5JTqh6kxj88xAIgNthUXLA1ATK4tU9tavt6WnCYXMwLJo7DvsyJUdYqn+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/ItCRA9TVsSAnZWagAAV30P/iw7M015LYux8QxttUZU\nifukU53YWpCkQD2Vq2Ng4VtY1p+ePdxf4hUZLr5oPUlqTRw5F+4Lq8u81utI\nOpHS7FhRhPHrxhPyizwgxxOwzBa0oox//NBCXQXFnWWexzvREXDimwzdWojT\ny5OaGy73jSvb/DQ6yrkN7uuAcw3T6MFe8h8F9czvakRMl3bM0HVdXgbPN6EL\nnOXUQZsHbZ4eKopaV3ptKrHuUFkVwOY8fJ4IvkXN1CnaPyR5nRIntnqfFl2v\nHwobtiEnhcr+ZaEx4rMY+y9qcslvYtZtlx/3IFSiJDBeFPWF4KQNhxZjz3/t\nlxUN7XXLA+aE066SwNGI/l9OSQxt81JjzAaTv3NzQWg9HpWj/WWEho9Tdfhj\nRW1GmAXg2GgGseuyiUR6OVijrvlpN1X3HOBoEmR3PTyr3YT1vkOEje1Z9cmp\ncNfrHMMU3xfhL3OQXbdz25dAxnM0UBtqStIul/n1Idh0RZcok5JUE3NFeFll\nmPG8nZezneh0NaPB+NCCiEHQ6QdC0OKLcCqX8k4zb6WN3WsXtm1YULezaWB/\nflWlSJefLi3j0BahIYD/0h/oMJcalfiR6riTmB13jzS1cotU2F9FrseQgc5Y\ngelX1OE480nMlcQwACGNxZi1fnz80Tc45zFnHGgs7votzlLm4IC3ceW5eFnu\n/NkB\r\n=r/+l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5246264d.0","@material/theme":"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/line-ripple_11.0.0-canary.f5246264d.0_1616114221448_0.6776518855692009","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/line-ripple","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"36b709478002ab1f233c094044ab25801340ca49","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.03d34bbad.0.tgz","fileCount":34,"integrity":"sha512-mOuK/86XcpxkYyvzwyttLKJePQ20H1Yog/LJnt1VkD2S//YVwUeqa7g8yl0bHCtQSxokUNuxzZKMIzqgpNMOOw==","signatures":[{"sig":"MEUCIQD+Rx8DCBBmak33FGwe9A8o25pOXktKrj9HAEd3f3z39AIgY46txjLG1ETfdOgb2DG9dBU+4CtkxEtF5qloEP1tvkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/VICRA9TVsSAnZWagAAq7MP/RKAVCXnbm91fsg6jjny\ntg2RsmsstfqhiRxZGbdlnfv1elMbbYAUcluJLazKfE2nJRwUI+SJYO3yVdGp\nyQp4MQhGf8qK4JNsr0PB2hbPpfTQSdEsQQZ34tmBakoNJPFFxxIgcla58mv8\n+XiOJ8mp9xKe4SlKkYxNbyOcqd5jjEiT7pQRp494tPe1T0HuXj8I9yfXz/WA\nLWQnzX53pErt8rz8IFHxTXXuhIba//2ht5urqtRnwjiDJAiP8sF+ESw6Y1K1\nrNwzl5xm3HG5kfiaOdGVxF1p3R2bP92d9MXi6csazSgfa0fUDj2BDvS0+Jc2\nV9jJODTYROK4vtRteO886tQtEpkFYA9PF0p3NWsoaFeHJvi3zL+JfTOmd4Y5\nuqgWrlZNoDmNKPhieF4BuQLJdZ76EllYyXWblsFhhxXMGe6JO/Fml1gPycTl\nMK+n0s6MWl+yJMnQa1xjspFH4w14OPR6N45qWDBQo6e2TKSJXy6d04SQ6pO1\n3bq6MZy1hkO5b6CFYNgK3h2l45WJkwDrFb8jxRPHFujcvTy5Bvy2sIUHrT2z\n+eMw/wRgkI3uLav4Z6qsba/0HX+74FNnQFoqvnlGbOBh2yFqF1IS/bAA0M+C\npvdsmAx90XR49SCguXL5CLsBt/Y5We8vXmaCP3m3vXs2A3T51XC51yU7yek2\nTJzc\r\n=TkjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/theme":"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/line-ripple_11.0.0-canary.03d34bbad.0_1616115015609_0.3110408108703955","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/line-ripple","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c5a3b4f54ac06408d2b1596b20f1c18ab57f827","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.cbc57c600.0.tgz","fileCount":34,"integrity":"sha512-3xGxdF3W2gKr5NyIO+V211DuMgATfYut7zMMqScB7nmjhesfA+kQMgnKrfKuUavFqEFLq892td6QX3CViMBZHQ==","signatures":[{"sig":"MEQCIC+kzgQwYKghG4IPakKqJzyLi5Xq+x5vFcfDuaw8HOUGAiBQ/qv91viFXwFPnv/dtjdbx+YQNsKNRN9U0P7EaRNzPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/dSCRA9TVsSAnZWagAAtJIP+wdowzWT4iYNXPLhyCHq\nP6M3XCU7H/SKbK/hZTBj39zzcLgds4lSKjpR9YxDinRzpGMTo3OupdpnzKCJ\n0qGukx+erblwx8UGk5hO3qOsjK2MisFeUXE09ScKuj+8turl+Hr4/IWQDUDQ\nQbEGh+R+vcAHNZylJMNsIeTCjlRqioSQwaygqDMEuKFqXHiO/lEfmOP8Hm9H\nvDCBwPHS/bK4EKJ/XRw5lIyBh5D9zNbBnpG7JOAjYB2u3KUQDBCtAchG8RCR\n594ZjDZ6qSbi/k8Ux2NKh2cX90TAcSBqhI0MjzrKV5jljtuOcMJKk9z+zmAj\nFaHv+r87sztDc/0LQQrPMinvr/IaLHIZPZsnf14ADMm/E/m3Rackldzea4l4\nOro/8oAEoxZVWW5HXzUmaojGVAnmWs9CJcz9XEW7+QNDfKCjhgwkdnZx8keH\nzcqaQZcwI4d7w1MEim24RWvOe6K4Ft6B23SNi8hL97CqdtO9qpFBWRAIynkq\nUCgaj/tx7B0PjzYp7IAoUL7KFi+KGwI1n4dniCeHVKw9sa7j7pCc7ylgCZ1k\nFrKNN4QjY9Un3/iFiEX/POMPJABRNrD5ZCTOfR0hRSLLqG/yYzSTaT6vzszD\ngfftZl7htm3j/aZJQFmIwsHmAFLH8rDJ7RvtGvZAwb7fItuy7uHpUhjVcqL2\nJpL9\r\n=Usyt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/theme":"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/line-ripple_11.0.0-canary.cbc57c600.0_1616115537970_0.9968055359572356","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/line-ripple","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2057f0e102b1b57d1e849ba3b0475546c9ef6271","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":34,"integrity":"sha512-9ee5iCXfVYNRPaDJNPmA5n3Ry9aDuzKDgtrU5XMiErJipW2cvMJOb16C6L3oCgVq7mJNRfDR2dPS9B6fSea/lA==","signatures":[{"sig":"MEYCIQDAZDVsiaBpP3UWc7KyOjGvBUKUT6mFX3NnORBAf7fPSgIhAIbzkiJIXfnG/5IHqwE8bJFHpmWi7DXbIO7vJ7SWXykO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/o2CRA9TVsSAnZWagAAGlsP/R0wAIS1Ix28Taasabvn\ns00MIRYZ52qNZVlebaQokaosslGyq/IRTbi2JiKwmK0HBeH0+F+ow5tIOqde\nI/LnsJeJt0XtVU3/8u3GBAgWuyUOguK75M7X6/dv9gGOsrZ6atcn5yvlZR2w\n41rxuEFIRFwM/Je9ECz1qRliqgojsFyiFZmFgL0XZBh8macdBAvMqgBb9EIK\nu/xGQaEDK738fojmSd2m1e7EyIO5jRyQNV2k9sJ+2EKVrw6HQk2k8M4hFr7I\nUeG9S97JBxn3AtP8MWswfLLc84DULn7UX0fqYUxDD/6W8GpbmEXZyyHapeS6\nWUpfgBohvfrR5VLxBj3u2YTrSsZsIlSEvvON6uiPw1lJeTwkC4ZmPSitt9ds\npwqpyfwCMq250ehSBdnmj9oN5/OHBpOR5xgJ/GIiozhE1g6qUhoVwb0a+p6G\nH5XxY3+GKgPOzNQSC3YURlw5p/BS9ABVASDllT/sQku/zNqi9ZzqrzYQNxdY\nU4WKACdQ7LswnsqMTYzDrMGQkJCvX/a4M85sErOZ0ONqjwsgB7wXheY9XnC/\nX4tSQ6pAbycfbvcYoM/sd4QFnWJ5ejqU1GlPZjFJWnlB/CCoq43mXuX5dgms\n+pTwOAJUsGffaleTPJ4veMehAfEwQ1OeDG4eDCaOdulTLvCaYIR6fYj7p9JK\nkaDm\r\n=QiwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/theme":"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/line-ripple_11.0.0-canary.d6c5bcf37.0_1616116277482_0.4020647866321285","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/line-ripple","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c0e89803a71557ccdd90bcc1b0cb3143d0d0efb2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.fefc668d7.0.tgz","fileCount":34,"integrity":"sha512-3lcR/z5oZnf3peiVgOQwOwLoJlHKsc/nfbS1otY5eYeLm74VbNwjnZDiyZVeWzIIsycJeYpE//fSEwpa6G8a5A==","signatures":[{"sig":"MEYCIQCsh+hNtHsMEVSaFAIoDSlEjXc1eTgeE7nhvoo53SwmmgIhAKYFWY5Ju4G+3uEvscOZJ9u10a6XHdtntmjDQ+ru04c2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/9OCRA9TVsSAnZWagAAgUgP/jvgffV2iFsMETpVHZU8\n9sPcsQFjlDG19qqwb/NP+cIZYsT5UwpvvCCCJNhGRTCoIq9U8/DzSQasHNXE\nuL6eRkXK+K4rFo3Fm20/p+s0FPDGkIAkC9/RozCDHUgRVsS7yOTDnBgzl5sY\nOiE2EI8jVnYnSuCTNgL55EtPuVpc7J+nxP0tQ5Q0H84lh2EZnY32mSsc4gaa\nLZC903XBG+zjro7OvSSozOrBwtofebM9/vXshnnEa4ZWJKFl0HdE0Xc1IbiA\nDWGpXiuDi2yZuHSJnFj35lRwytipByP77GShjeJD7HXTe8EqeDnBYKxHcbPR\n4oiPTZtUT/k4eZY3pfmEJFE5Qot/c2xL/RkZP62mkCXSSbdHPN70v2fi6Rmq\nH2eeSsNtmJTRmxMfS1YPw9USITh7VHiWS4JhfUhelNowoY2YJuAo/qZ8eZNQ\nh2Qsx79ioZ2AQDaC4x/Vz9ynuAsf92EFCh6v6SemslhEDoOHMoAFnQtTmmhv\npUDmJ1wnTU9Ts68HSQMsMSsa5kfvD//cG5e2RJ2h8YkqaOL4pD6oPXP3H+KI\nkdnDZRA3PD0tiHomySNj4Fw55B7bYppthr5pQLFVmL80gWiBKVNCSsZyawnr\nNl6CdOKXI34doVHPkRH3jyEawwFMT78heOClCZUNNcKLxz5wjKlm1r9rCBBY\nESGQ\r\n=j+e2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/theme":"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/line-ripple_11.0.0-canary.fefc668d7.0_1616117582388_0.5220161804470702","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/line-ripple","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c795520c994a83a7b474ca2f52af5a391f88b8c7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.faa7d3226.0.tgz","fileCount":34,"integrity":"sha512-EL3kSppJTeOKwfaYVTbH6IabqSuUF226uQyFvppzz7VAOMJjsCekG3P5ZPoRUvvOsWRZM2JqcqIXEljjJxmeMA==","signatures":[{"sig":"MEUCIQCChIMA62H62lchjug/LTJCkgIVZ9Re7vlMUF/wWOJGFQIga67rtrpbPSq3X+ytD7v1Xl1rfv6OONljuoEbMV7d8MQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOKtCRA9TVsSAnZWagAAlQUP/1pdWuJEMsouDVZpy5yG\nve8CXD40dI7hcuZztij6f8PKGRN1rLVpgDelSbcWwt/1DWIK/nAOKCb94uRS\ndZ7kAhLNQ2LwlYKJUVzlX8YSeOhL9mwm3NyLmh0euBI/tSxn4p2/4Yr0TjIa\nctzClG6COlm7FEsg0gCD4cJXOCFvi6GLNyCnyq11xAJaz2ilw5XLUvr796gE\nuoMKm8PefryeX4lfDn+qvSMGHUW1LMjt/iF4gKwootBiXkEP47NZuRmCUdHY\noJQaCuzSWvVNp8wTKEoaMva2f/HdcbC72aLzw2HJP4M5xBcrMvxO7RnoLCyX\njcKNm2Yd6y1AhLpg3W7VwdBZ2+LwaIJGB6H+QlfZNoBRFwM9/egsUtBGYYli\n60SPgsgoo8R7OHyVyV6ZJ5GP3er4x/K0UPpA/6hsFWZZXI3nH+kq1fBFQnAb\nmqTTeo1nwdaDGPkofbSB7qS/Ilzhit2we0Qzs4RUf421Lay60WcL+jzOVF12\nDKOYWDOZKOWcSfCcMG966nDB0QfqepqSC2MvmA9drSai7r8+0dxt1AUk8Lw3\nyuxyBISv9GPDIZVY5sC0pUYvFAAhL5RvShF2Ao3PToHeenHW2cxYHtwiMI9X\nOUGbGu/9z8NTQRAcq+n2viEuawOyxh+1K0nf4e2kLJ4u0x5S7qO5xrOC7Ysi\nxtWQ\r\n=9/LO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/theme":"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/line-ripple_11.0.0-canary.faa7d3226.0_1616175789277_0.12025134137744486","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/line-ripple","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9e795f578999b4cb645a6ef60ffb30e6db56c726","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.c60449bc8.0.tgz","fileCount":34,"integrity":"sha512-UTS+iY2ZazwczzBKCOqUL1M15vk7DgPBnNOHh4qnMGOsOSJVyTZZ+NzhRhTimsfCHGeuKH53stSZGISQH8FjfQ==","signatures":[{"sig":"MEQCICjKANWKRsf9Vhk1yiItjSGQD8FWgupmBR3ZWFY384CqAiAHEDF6cLk8lTBmAwXqaL5asPHOwvcP0jvbgq+Pyxb+Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOeiCRA9TVsSAnZWagAAhy8QAKH0gnHH8g41xVFZw3XI\nUpd9tNzGBYZB2AvO3qsExKmX/v/Nxh5p8tbHxX9uDqoK2eTYoPcZe0K6VWFW\nzXMTIXwQsZO785isC/GCYY/+i4DIJgYKmD/vGVbNe2tQCDF6efKy86hfPwKt\nw73IIeENHengMNyRoOvj/F97c8W3C4LQ/5t6kajl4fmy1u3/WUjHYVZy6vew\nMFItemmBMb1UyxecnAtZEvAAWe5DNu1OdIfUxnSWLjMyUNbWT38oWFvf3Zqu\nYUaN22MX2jWRBMcEcxefWg9cpPB+Q2Delm6QTy1iJPsiZULY/KePNx3x0KZv\n+q8rDuZWQeMjabkL3i3aNCh5jXJ4sIMW6wO8fOkqnel70dMHHy0TFYeL1vVG\nMt791gXzE8K1xWOWNa4u1WlBqklw7HytmjHsoeB6tLrw1TuwDNWHQwHJA7jw\nLeTBDraBhpNH01sQjXAyHi+sN6I92/1uDxTTaxPwpYQnuNKyUPBS7avA0suu\nr/9g32R/380gggeE8F3utRy1+rLKvnnWxagZgwgJcDY9UG+Ovz6zhL3vt4ET\nK5JJvRd3pQUSzEi5KW2idGAryZrha9G1HI5ZVr1NsVKBMUTabHV/9r6+VpK9\n+bs1f3VxDhKHAl0gtTHZhA/QKEvZD3qdi8TWaJzx7g6bosuxd5OSKIomhf6n\n3zQC\r\n=O8zQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/theme":"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/line-ripple_11.0.0-canary.c60449bc8.0_1616177057753_0.016012053995192455","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c689ac33e577fcf0662b75ad3a0d4203d13e2520","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.5f0fc444a.0.tgz","fileCount":34,"integrity":"sha512-k8Zn9SddCRmeJcwF4JFItZL+U4U9iZxBoLGK6W3pvYet7BCJzFc/jJ/UQeQ49snUpdpajUyXC/0FGThxrMQ6IQ==","signatures":[{"sig":"MEUCIEeWr6AI1ihiBLiQasW5Wmu9UR4LcL0PSF4ccXeiXFB8AiEA7GxKOhfyn9KaTxSXsOIH8jLpr7Aa2CQY3i72OgwCjFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO9HCRA9TVsSAnZWagAAWYYP/2gwEdzF1EY4dPO7KciW\nXSZAt36XXD3SR3gSMRY1PjG1uf+axXf1twY/YWrxC/ADTWrWXQjT3h2bMfzl\nm7UcMMwcAIGh0w5oCLkO+9wgHUVHL3slvH2cGlQ0HHhcQzT/LE6dzbX+z4PZ\nad8NNR0Boc+Y9MUATWfDJZtiTJGANKn5mPyZFIpr1j7vdMxkwm8kTtN9EVj1\nZLVJx2D2kp7BDYnSDzP1zvRkHgEG6wyJ4NlsUeLfja+gO2+kKd606IXqRLtA\nbkki4d5+fijhnF+lpZER45IEnld748cx9x1JIuHcF7IN+kiDmR69L4M14VLT\nAhpfeoV4cORhLm/9p6ol1xmZQzqYU/WXYwma5pGTl40GRz++Av+2mKuAArJ4\n9SECFyMVXdnQk4rXHn0fpTHy/z+BvbV+k3WqPlW1fLptU6jC7ewwrvd30fex\n97gLflBN/QZKbv2oq9+mW46MIKwrZUltSYc61iOuO+5NXekU0wnl3VZ8vNr5\nr6CphSIH+ABgoJX26X2VIKxQsBAZASXBuRdO14Uq5wlDGegP51U1jDR4TYzA\nJKHmvnyVqQldu8N+s3O+U3pQkeCJX40hu4jkSPUXHv4J2Z8US+G8ygpug0wz\ntT4+qR3trjNBT9osNw7sA5LVKGxXhgv0c6ta4et202oRgCKCa1Nd3cvxfiaO\nnkxE\r\n=HdSW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/theme":"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/line-ripple_11.0.0-canary.5f0fc444a.0_1616179014800_0.5658633890214235","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"380149e41142aa709fb76fd952d4fde58cf02096","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.4567a750d.0.tgz","fileCount":34,"integrity":"sha512-uARjFvVi3Hv93ENokp015MoPWJQlNtGuLXa2SE3qRDbh/Bphps70gxODviILbqaNVjYuexmLPtV/vWM4CZ6Ixg==","signatures":[{"sig":"MEUCIESkVCe7XlKZuTau2544MGSlyLP9mJTlLHyLALgIJhogAiEA5mGL8rt6Izo5HSMxP2A5kkVNhsW4QsEzIS4b/KnY2Dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVi4CRA9TVsSAnZWagAAckkQAIKm6gn+sXw7JTF0RUIE\nKY0FodG8z+PjETfJ4Nmnubm7rRLptkfkqfU57Lm2cJrWsMnInT0GuouYdu67\nZIGZRxqRnu8zX++AQeIKeaHN/fFGPuVCduJf8u2Y+Eq3dzf1J5ueuoc4Xqoi\nraMeV11jcQBtp+4r5QCpmDsqwLtcEU0Zbj1NnICHxl3edCjk/IUPFHhxQ/t0\nh30FDLvNtoB5ZKE7o+7/8hT914e1dfpBk2fwChIuo36Z1AbDTuNGC/xvzFLc\ne71RNomAJM4k1yTLYy/Znea3JJ4546ZHaAvDRDzVTQ8J7nNYYBYGzxzsJfpU\nSJdFfszM7R8cKgpMlqmSvf3k60uaJJIDHfFYkTJTxJppccRsbRhaGXDaNbJM\n6ntqV0y1LxeWBNDT2JydnazxIAuzC5Itt7Fxhm1mrBYIuybbz1BReZ2CYNdp\ng+ejIZbs9l72W7x36aQzW/uK3baE0EZByN0v49Aj1yRx9cNS+o02OpiJimKg\nS3sBYCQb98Mo8CCpEiaIcgwrk5Doo2JqQXEOcLW1+yOe2+8fedhEFEObDePz\nV7QKoEIK/ZbqohpN2niUtbp3/CIKkQvgE8WFLGUJg/nN4zOH4O45m+MNbqU2\neKiy3LkzONXk7FvYOX+7icevsFWdB/+s5qGT+lKYnJhhMy+5h1vITpMriYRF\nWRk6\r\n=903y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4567a750d.0","@material/theme":"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/line-ripple_11.0.0-canary.4567a750d.0_1616206008275_0.7363246067721119","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d18a8545489ff6b0d49d8b1b88992c251aee7b56","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0cde52f5a.0.tgz","fileCount":34,"integrity":"sha512-KNN1RF8gk07PiqfCciqMeGjwFLKAs9B0YtmX4fyyrlP2AWI7o4uY18VF/97ojOlOKt535Ktf32xhAw38ylHnVA==","signatures":[{"sig":"MEQCIEEoCNkUvQppVN38ofk9SnqIJ8JXsGq2sz/hlA7DQ5CGAiAaC8Hfeaw32Ddaog1IA19PZGJT6c8NGyo5dw8Vix1M/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWS/7CRA9TVsSAnZWagAAKTAP/072EWT5SCp3FV3GAQfs\ns3OQw99M8uVaj56/VA9v3+gYG9+GGuv+b68d8YA+25AfrUGX9QXK2hNyeMUR\nUxZF+gZS+xmbuze8MTZXVip7EFbIbm/Nvxn26pY1S5A7hIkdQvSNB7vKxdHz\noaHRRk1j37C0d9pHUSmxIVAeJWzfPUoDwL2IIDwOTgMLUvA9yiZu71SRluc2\nD+N2hcZ6vGlSHwIfZGXZ3Y2CT3MS22nQPEHbMGLfW6W8KuYxl6YHjztu8DOf\nQB3G6IwwKYncLnz4HPDJOTywlTIxFdGaEC/VwZhq8Ln3HG4ajj9IarwsmyRT\nNrRbwIkho966Q/lzag3RevJVIGvrB0k6xDrvx41CZaJqS61mobRkLgcaFs6J\nSZc1jhSQEcwUpo++wmAqp7Z4Xm+m/4cuPYQGQAwRN1MpDRwX58N7qlQ0sIVz\nyJjP14Ql+AjSO9Hx5bv6u9ZYveHPTNLhHhEQshC7h1xkh1Bhs2T/INGr8Put\nbFDIjpEzwQukqXbPzm3bNy9n5qTRWi42vagklLuLk0kbVqgs6YBoVXg0VdSF\nreK/m2HAa44fQgRozSsKfm8RpqP703uaWE56rIPVv7n3plIa+J6oml+YhJMH\n0/gDWI1jRy5sfbaCTX6epDlbHI8QzR5aJQ+76VOCsliG1FIS2xyrHkPxQVXV\nmHI9\r\n=vuXm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/theme":"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/line-ripple_11.0.0-canary.0cde52f5a.0_1616457722747_0.37815472264712024","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/line-ripple","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c8b489e297623d3f51de1e3afb1bc5f9a4c2e6ac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.48f4b67fb.0.tgz","fileCount":34,"integrity":"sha512-b1AF89tBarjYHwx9pk6coofJf9Ldex+zeiOFCpxYIkySwp331CIr1sQYxJPdGMcdZqTzOVIQisg/p8S2ODwilQ==","signatures":[{"sig":"MEUCIDVZYdHpD92LPVj3eNdYnMKUYgwIBrFJ+7GJTyYyzbiiAiEA+YfIhKnhU65s6gd8hnzmk/OirpIR2XeCrIBhynG/330=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkciCRA9TVsSAnZWagAA78AP/1h2/3J7QFUQIFbqqU+S\nABiRBqn/sMLCdjldnfs6KQc1hzcEyKm0g+mbpFQRw8nP/pFcdtGQG3u/UfRI\nH1ckMJKkkb5vRjQUGozmfJu/ysWO5GAfSYvu9F1S/OT5TcGDvclaqW1fN6DS\nGgM1IQqyQ6Vguuz+bjQPMguM0V/Lw/3+XD0sMtaNqQIYztrX7pIswBs+rVRu\n8VflMUq+ZP4eOljm5SMmy2yjiCkEiD+pGIx0OQgMx3a2im/LUQJVX9HbrwjZ\nTq7tR/apJPsgjKRy8PjHCShMXKz3VDaXXhL5CZrDQvJZ6ixmbL5LPwwYooMM\neFYhxvpqwgU5YOfeTn6hFqU/P4XGcO642lFCBFwOFyCDEqa1ZR1nQAXWLkJg\nQrJBk71xyDsb+sLeDRNfSfmzBn0VrMC87eSyC+JqXofgACdBFVjcF8CdWEfT\nN4dV2uMK7/ytz93qZc4XyT0WCsy0019MpYn8ZZ5a72QpyibjDt3/WJY/qvMj\nITUrCXwVh7YHi03bmZUW0aWyhUIHpeiyLp5/+oHb5OWk+yv/2SXrCNl/+ype\nKe+pGrc6whHn/L6FHsxH5Lo1xTKkFMk9ZcTFhfSmEiE25qJYkeobP2TqTALH\nbUY7yKpc174B0tIl8d67ZvZDkZZ5HGMm0tjdusfKQpjyVKppAfWxoRkhZYs2\nQ5S4\r\n=XhwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/theme":"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/line-ripple_11.0.0-canary.48f4b67fb.0_1616529186367_0.25708952435892374","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d33f1fbe7aab84010c746ac7c4025e2e70c278e4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0b8cff734.0.tgz","fileCount":34,"integrity":"sha512-AcKS+4h8/Ps7lGSpk4d15I5zmtc6mhpZwOjmBT+gdKqGPWgGvkj80srcdYd6TlO0Enyrer97SpONHqKqK+9UHw==","signatures":[{"sig":"MEUCIBKAROfzX/khBVltmUy4+6ODpK+aeSJxwoE8nzkbpa+/AiEA8CxfNKZBQa1Dow//hQ0cBgnX5zXmdLklOCCSci4NAMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkmnCRA9TVsSAnZWagAAqokP/i/8xs1Ir8fnf3uhLkXy\nnvOgiImQ3ad7BJU2uUsW4A3BSM7w8wSHvZ+krqEO+sdUGRa++dlMS1lqvFQf\nSjvsPPpBfqE08211dVXVOmAC7tAb7TEXtzDrDrNdKo49hKVeaxzra8zaOfax\nl+K+sgwGRVUwfRXx6I2/Sgg5OxgDhO/VQHfVt+nwPXTKvVluTfqhXAQRz6Iv\ngoKWA8jee+T3B+8f5jMsN657/jS+zCk+OUK9QoE/Ek93YGN/MXcWpgsmqf/v\nUSnul+aINuIOp+45FqYv7VmgJdJocJNz6tQnTb7c6F0P7jzKvgBeLWU1FG4g\nuX/vUz9Kuciikp0Znnyn/zYXAV7k9vLkzdZI1liBKVn3NV46cz4YcZswTaM7\nn9CIVxCjVhcneED/ccZV8qlh5jVaQe6xmB5UKppTgrwfzIiAC9htz05JSNXt\nQSD9JBiyTIqF53rLkTI0bXzbFKYfVyAVcAp3umTdrvFzDhhrfEVZo1R1aI6V\nZbjObUiwMv5Ah/kPm9B2MgeD0gEejKGKJ1BQughDS69DeDlODtTBmaszoNcV\nEyn0s2ia0wPFH7KuCiGz35zU4bHoY1Qs5uP5d15FLTJ7rYnxJ/xh7Z6Et4oL\nXJi3q1w4TfI51SV/CbxzdSfa/sczfFtDzhtjKa/yjwudWT9z9Vd8KIxiM/Kd\nzzHu\r\n=e3tH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/theme":"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/line-ripple_11.0.0-canary.0b8cff734.0_1616529831278_0.8338946642031839","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/line-ripple","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b08fb40a38a53185458c7f93857e5e82c3d36540","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.8943b991f.0.tgz","fileCount":34,"integrity":"sha512-DZIA6izbLQEQlrPm+4ZDXQAVDHoe5JIdybDsJcd2UbnuDv39hy1QJk/8tB+Lp5FDpT7C7vYEk75NEHtV0hs29g==","signatures":[{"sig":"MEYCIQDPd7X/jPh/YliiIcMuTVnyQ83XTCKuFdy3LPEmzpyPGgIhAJ5I4R2TXwh57t1R/6e2T2BM+vlnL0Eln5MDR36leD4U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk9/CRA9TVsSAnZWagAAFrQP/2eR89rmt65Ams5uW+OY\nt0gy+3+oQDvl0uVnZsHRlxq6V9WbyAag7sCm5Sg1L4+N4g/82RMjMc2IHudj\nMcXMLNkBhlXuQVjsfZsUuRbhNAM/Utgr1R7SkF8asxpALMcEQMUzz7za5TS1\nkRy8DRCZffXf8BFJ46ZMf/8ZjkHBr8JxgScwB6Bp38qSw0uyow/VfJ9Kn2gF\nCF5F1Th2eCi/ZSq9VTuSp/rgkvurEv+b1Ghjfpsmgfv74WPmOcWByzc531Rf\nvN3gpVySnC3o2sFb0uEbHqBEl4wJjbsAMqf/wEsQHoSQpCSXDEjbTRkhbZFP\nSgfAB3JsSYbyTfdP4O5ESKIs+PN0QYqCzB0dcoh5jl2u4WGthVkZgJv5BYQi\nhUeG2rI1ZO5jzmCRcEBh6k75NHq67oqJzYJNWPOwswNFrcOe2xgbvW8HM6pz\n7saRqZBwEIWu2I5A0NffV85UcFNKzwXQIZNZyg9I8DusEviCdvCpWZXXvT4+\n0Ot2G5w94m6g+eu+TPFSIxe6eA0AXZAIGwL9PBJfFrxSmB6hbihp8WkaEMzn\nqNHne23izz8Bw2cgtaSPPNaO4Ttiqdf/0/OLcrs6c1rmG6P7zbpqQMXC8Uq2\nYHVvXxy7Z3Ot2UckmNdDOnVbMz5AmvHFwMZYp5i4ZULbtXcciDYHMEkMBTJd\nLED0\r\n=AkeA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.8943b991f.0","@material/theme":"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/line-ripple_11.0.0-canary.8943b991f.0_1616531326403_0.4162171898120004","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"10b0826989f865d414e7f05031b93847288ee766","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.3955d8d3d.0.tgz","fileCount":34,"integrity":"sha512-VZqacw8Hlg7gka2iWDD6PL8g9RS/fUvW8dLWa3mKl+H0UhveJwCJ1YGEOkCYQ9/sxfbXuGpakErqQFAkaZEBrw==","signatures":[{"sig":"MEUCIQCxQteIDGnoUo6G1/pW/FNKFlOTJO+iG/xXqrUTTcig1QIgLTUyqhNtHMwHuOJLuC+aA1k0+JvYIQ6vqLXLQaoUt1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW4/RCRA9TVsSAnZWagAAUOYQAIrAg74TCs/x1rWm23Sk\n2r82lQbdtdFbQ7m4RmhVIKzO4KmlQBhUo/QjKz8Xm0GtYDHorjexIcWB7eBH\n6Y/q/7P/V6e/XrjmSj/Qq8PnVJO4SE1Je+2Icg8YreAKivGLTYTr5E1Ya9Z2\nPosW4arkHm0UVBw/BAR6Ep9qpmzh+MV+tDMKJF9mO9dXBA5Y7pqDTjgBG3JX\nD1VpoW37oXl+pH0L4ioNd+bLUceKLNyDEK5JrKsIHe7o/etoKBza4hd4qN19\nLubZ6B0nm8I/SlDeGzswAKxT8Gfb1106C23PFtdC0XEWM1WfAvkNeCWxcdD6\nfWXAZep2l5PdHxHwHLUQSoGTuIHzz+PBVp5wMRzBlbFrsgsuIcN/OwUWnUCE\nrN6jXx6OICP5foSrw2pP+vpvss6a/0vZ4U/PbpGhToah0I/igXy69TfKqRnW\nfRIHA7dyf/UXSaJwZD+YuoMQ1/HHKNe1SwIavka5wnTkAxPQMDLq4NIOg0ML\nqeuAN9ZdE3GvXjjXu8XEKMVezs3izAh1vxPqORCLZz2UgF0gaTKzKjhR6+Mx\ntZ8fNNowjrRtwFwpQk964TP7g12rGltvMlUW69p0DQeSfF3bYbQZaXdHYQpe\nY0S96cdzdvMw2HoAjvXk+NHaRYndUoHpfhgLHZAj//B7bIEwd2695OM9lQK7\nGz/2\r\n=5vTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/theme":"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/line-ripple_11.0.0-canary.3955d8d3d.0_1616613329189_0.2603238682553082","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d9b2e1186603a2c2a8ca616ff978f5175df18642","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.23ea2d85e.0.tgz","fileCount":34,"integrity":"sha512-WWE+Uewo0/RVsM++0LPH2+rMSeTvc2wcP1gWdoJzUGFpVC8lrL5D9/3cA2BUmwdAkJ7EHK6WyMPk5SA8nroZMg==","signatures":[{"sig":"MEYCIQCt0hT91+EH4mNZ96yb6DarbDK8jsyqkl2cVkYe6FDF4QIhAIVBnoHgyt43CeoXSJT68Zs6SHV0+D9G48eNkwyaRPbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMj7CRA9TVsSAnZWagAAofoP/jgbFDB+IUuGMWL9nDBn\nSwlKQhnSpagjAqYh6UNQ4n3VgcwZWGtAauY9NmDheazZEWNwk8VcDRau1sjy\n/FI2M/VJFYtCkzNmHxLBI0GOC1vKY/5O94AA9XuUMHWzl6LVZQT+ZIazQs8M\n+hEVrkIsAhKFC3yVc4WtoH8/9xpE6fpdLkrtl/CIxRf3WwDtacq3MdmRyZiZ\nqSmKDDI7YIj+k/uqz7PKsMa2uBONID4bgfdmSojO2+uLensGLmygiL4VhC+H\n5Ab4kPcIW1IEI5gBesX76h4ZtJHDIp0nspVXTXZSC9aFDuWKc/DaP6r3XF3/\nGGY2J6YvTiWAN2ZMAHg9FNSRzw81Lxf60ge1+ZgkA6S3JHKkUCls+XqsAgzS\n97ubC2tMl1S793FnO2pj+3hXKu7iCbiunUpJj7u+U+JohpDZeqOb4YGoZal/\nd+ysT6FZHczkGzCGIHfbBv5IwVTl9s3CAViH9o3T1lWF4Qm3MPxfsRaT/jS0\n+OwVFL31ntXJgQMOxQBrTk3lP1548y+qPRNHM8rJpzyLfST84e5/sAeMBYt1\ndVZbAk+Bi1jDPB5OcoBJEA5u4AFJHM+EiCJLqkjNkBr+hyybjYEiNdnqGsYF\nJf8UZKE7sLqJ8eTVhr87dqh0mCLCg9Hehkvs3JLQaE+fH0VcKMreUmhx0hdN\n7Q6x\r\n=Wsez\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/theme":"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/line-ripple_11.0.0-canary.23ea2d85e.0_1616693499214_0.10348733812067912","host":"s3://npm-registry-packages"}},"11.0.0-canary.e3ec22f45.0":{"name":"@material/line-ripple","version":"11.0.0-canary.e3ec22f45.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@11.0.0-canary.e3ec22f45.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0b5ec6da910d372c1dade72950381ba5a3987d56","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.e3ec22f45.0.tgz","fileCount":34,"integrity":"sha512-9ejnikSuHEFg8v+ySTR9O2pKLDvO184PzxKZIPpv1OQwnHwujnjJ0dfdviDPlJX0bAecjp4w/dWmU30uDBLFiA==","signatures":[{"sig":"MEUCIQCfZ7gOsqgMqk83CRpRcOEm6wIK7Y4oM4S0YekLZq9/2AIgWNOPGgGUoicMfNVTgXEgshurYIO60nFo8M0DSFtm2Ig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXM5xCRA9TVsSAnZWagAAQdMP/AswvDN9dbZgjjuAzph+\nJLKnMOf0JTYG8Hr8KlMYGmCoeXNcCcy3kpUrJ4ewW9BUTtkTy965ABl7iCU9\noTkJI9ZHh5osa2NqH2J+BaPrnXFIRXI/K9MBlH9VM0RAa3Z3WHqxvccKCUC3\n1my3/hL7i4GmTv9wBwOyWiPa7IXJCIeXKGJiCenh2ugCde+dEUnI1OyHCIoP\nUGfcGctex0p8Sve49te5jdsA/zDDcbWtXqJO/fzis0dTyA0EbZAWl7VUmVGm\niCpGnJzGnQ8iS8H8ZPeWk1LuqotGakFlYtGqfzNTIp4kJxIqg8booRa4MbxT\nqBgO9G/Zadfm+h9hoeHnwQlMKdB816uHmcPi+8G8LJnI+bvLSSzoZuX+XdAr\nZUbhjjHS7jiqM3IYtO0HaAlU8c5XBjcd/Eop4vk8bY29Bm+ZVzA6+X0DkQMw\nnw0V+9kDkV5b7ndQw+lvEsah2Oltu6Ll7vvzU61Wu/fx9eOa+SuiAZjAZkmP\njUhrBrWNWfFseVEcTztipXJ+HeQG28LZoieEGsZbUqz+4osoiKQdm2nZNVF9\ntY+v5+zznOtPufgzLch2965G5EjmiMAPkvTU2eIAVvn1A+ioQUhCy3/i/jTD\nax3Hfe6P5ZA4sWdrCi7los50DiDIl+0qZfKEvd3k1aQFJG1FE+S+bEzkiLMk\nalCT\r\n=jVFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"2827fdf50a2ab264554f8f307d61fddbab82c5cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e3ec22f45.0","@material/theme":"11.0.0-canary.e3ec22f45.0","@material/animation":"11.0.0-canary.e3ec22f45.0","@material/feature-targeting":"11.0.0-canary.e3ec22f45.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_11.0.0-canary.e3ec22f45.0_1616694896515_0.0004957168563308745","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/line-ripple","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d495ffc38242998041840a6ee52111315ec47502","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.4ceb42220.0.tgz","fileCount":34,"integrity":"sha512-Fy2DjFH3Cn4L/fX+tEo/tmgeytRdZaZ0HhfhVDEo2tEp86N9y5aJk4VT0o0Ji518kVkryoU4OWoP4LLSlqe3mg==","signatures":[{"sig":"MEUCIQCK49WXQtW3LHqtdtybuLDRezYyW/yJQqm9VyH5QMRHMgIgE2iLA8LkHP4E/pkTpRpvH2em/1+Uxuvs6FcMfGAJSyc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZOzCRA9TVsSAnZWagAANecP/0oYD9bxUNsT3FDeix/3\n+Xf6F3zWBuR1OBgjEKBlWZPS4dRzbM/ZxcdrMxjUdUqIDjT0X25qsyiK2BJK\nGrYUwmuk389xl8q5NJ6knzG/SsUA54eqGzy7pT2+hu7QAcB2U3M9DY+tm8iW\nvTtmRszXLmHi1QjpitBOf9A/A1j367+XvtDZ0C0YOy4mhozQ31BQk3CM1QaM\nWv1oceQGPat6v4nLC6WvFA21XF8YIoPtCOWjpnMIQZjc2tQo1b+n+utH+lGB\n4OH7qr1C3ruT/PkPAS5Km2nnkd4mWSFDyPS+kuJ0J28xPSoEvTQ6Z8rLN2Ig\nwAAKSSY0C4Zi1DTnJvaPzVWb+HuiIcWddbcjneP0eYt5U8eSMvRhaqw6ZHpb\nY6Lo+QYYRZRoXBh1FDjBGyqzKbydvFJLfz1RDr+SD9dy6FhHMpb7cm+YBxRc\n7orhAgYCSz3IIVrcsypZuozIM2j9a0f1pjcaYi2m72IAipdzRIFqfRKI8rhf\nNwwZV/5zPD3THlNaz4Vy9HuAIPPBwA5q589Cf9oGi059Kt0/E+DQJTSHJNan\nbpf8hgS2+1qSXnWNuYAyuWo1AFR6n1BjZezK9Nx5X9hnQoMta/OuRRab6YwF\n93dVI6l+pCqjFzodlo45Bww89nUp0OHQ90qBbds+AxS3lpJVONvvE1ywJLt1\nhnD1\r\n=B41E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/theme":"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/line-ripple_11.0.0-canary.4ceb42220.0_1616745394459_0.6442809569743386","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/line-ripple","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7aff88ca5675e694ed63691454bdfcb70b18c74b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.dc9c84023.0.tgz","fileCount":34,"integrity":"sha512-M5qOAjeO6c9srR9eCWZIJ74oVr5iwEKq7WeFxxIkpONW0VACNAyjG+fQGAu17O2zzpkGW4w6CxqUQHKrGCoAXg==","signatures":[{"sig":"MEYCIQCuqtkVG7HOOpP+7jEkENywVoUWwJOGBUCKJoSeGcBzRAIhAJRhVL7BfpN0ih8J+S+gwJ5Fpi0fP5+6M8O+/x6sv67g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2RGCRA9TVsSAnZWagAAC7AP/2Pl5TEROVcvEvW13WLz\n+CGg61NHRzG5qwgNaW6Y03AlBnernErR/tZ8EGivun5cq9hxkWxVqbkq8aDy\nvU2l5xYMw+cVI57AriH0KemKveyQS8QDZ/eAXPCxOGHOLMgErMgV6R5c/cM6\nWyviq/yxsTSQFAaAWSZvMqgLjwfPLHf3pO+R084wEUN2/4b3AmG6pnmCJADG\n6AuTyRHmSnP0CptTcWR32AqZ1gO9wq8FTQy8L7dfjeDgdyIMqeAQWbvvE9ZB\ncGPzaH9BPwoyflMX5Gpb+SB4Z7c/AXGhBAnA+LZg0P27oPYKcI+3eXwWYLLT\nvazV5U3r3zsRbsSYAUAYB+qd7pBl/YmKyvpZoDEyNnHK4EM1opWpeTv6wgq0\nYgMdWmZlHnKbWMqy21nph8jqXyLVwxunUjYoUPWUKAMd4mGAg2KhyodG8D3N\n4Bnz4MIEZnhyv+WCWTmJTIdBwYPym+1lz0GJvIr8yalWXmojc6wFYR89s8vZ\nFG116lAAvmXRzKo/eXL2WijeivjmX0A3KITjUBxkHEJ7v74LdXVSy8jzqO1b\nuMzysp6S6drRGa7g95pcZSe6bsun3S2mTERT0ruNsXrfOZ4dDyEXW9ilt/qy\n2V77Hol3yMy+luIK0sRYv/OeXzL0XCkHJD5XoVBXNpD6i+oSEY1Yjgbfa6jz\nuk/5\r\n=YdD2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/theme":"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/line-ripple_11.0.0-canary.dc9c84023.0_1617126469945_0.5663569021925965","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/line-ripple","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c566f024918836253f0d563de7ff4d2c34f2c8e8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.56fc26962.0.tgz","fileCount":34,"integrity":"sha512-V7aXxL5CUDyXZZz3AR6dQGK1FzOVD+rA5FupN/iRGKlOoHGe2rbhTZne7L6KWp73ahOxabEjxjs6G9ecWyv5IQ==","signatures":[{"sig":"MEQCID6xjmmTzJAcwEdgdiOAWCpRayD23HFmSHYbYhuSsdKbAiB6tCYW5r/yOF7SdM5JUJq1449pLY0JkimI6dzFL4WCLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8A6CRA9TVsSAnZWagAAPKUQAIeXu5aJZqHYkcu0kbXh\n88mGGOHuLzCg6PA3nGWKMJEj9QmNE9hEpGlMUV0XGjNB9kwMHtTAu6rJR8/4\nk/ngDKaOBJimnJolXROuxFkP5Mx8bZo7CxSzl+fY0TEkxQ+0w0yGMc53gnIi\nwYI1BfWt57LhML2YvxIt3P5oDo1kHwCDWxfj/L4xNm2Odco6R0kEpvw2DIAC\n797mpWEvjf9fvuwz7jGjgPmyNTjGxWNtdhL8oAZ1BtKJeP5m1cHkDTHdAAmH\ny8wCJ7jGnOu9BypTk0q9JrEXV61xkTy0f1un4P7BuH/Bkngey+y5HGSz/NQr\ntwEeB8EeXKK+IZ22woaRHNarZGp0FSWoe0UEo9TVaELIMDG4PSYqNJHOeIJg\nZTKihT4O2Q+nLcVjEZJgXRsr+Hw2CUrADV8a1Qx8OmH+YR3aa55d7IIX4uan\nj8UH11MQTGY8UH4YC0H0Eiv71cWkJZy1PCt5+GSQjBcSjSKdxLUsjsUk9b3o\ni7HmUsA5dVKqi7TLnZDVjU657bybeLmv908901paFZrXHz3ceOD3aT5WI5h3\neTEHRKi5DGxmTGMYWqmXWb6T21ZODtbEMzz48b5Ugiw6TlD0bdxJlRRQcQqW\nu+H4aSNxdNpmOevEU+yWVUOsm1h3zhmrTXF49cwLlTpBY/95MFWQVuKSOWEN\nQDuU\r\n=G8IR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.56fc26962.0","@material/theme":"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/line-ripple_11.0.0-canary.56fc26962.0_1617150009733_0.26516889403705135","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/line-ripple","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b414223d3e4046550c2d4eaf3b9b0d4299b1c1fc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.bc318250e.0.tgz","fileCount":34,"integrity":"sha512-zhWlYn9xiFjj/71pgujUVfQzFRmwFHKygJTC3SDvkskwU8gORhMyzSehJ7lIjQ2mYomDyc2WAzqD+04qpWVkGA==","signatures":[{"sig":"MEUCIBRgh2XAweYmgSt+pbiT7UpJgU/Bi7NDisIV6x7jvU24AiEA5PCFXKuT1aXJe3/d3l0crn4VMI7+b27CpWohrgMCNkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9FKCRA9TVsSAnZWagAADl0P/2mi6DE7kN0I4TkJq/Ty\nWqh3fSSU9x46ODP/RF9Ng+hnPg76fbwKAIVl/PCQCjSlkWwleMF9zfZ+9I9Q\nt1TkBJPcnBGesm16KWa1qVzKJTW8FHLCVkpM0X+7R6jZcc3tbCC3XrK8kYXz\n5gh7rZknwfUQIftHWDecvUe2CEHG5zeCC7He/Pm2lN3z5Yg+e/yKnglUcCFD\n16ApFtyFSiIRP3VmX0/xuWgvYOMR/d9APDfzr7+doOI1IZjiqlYXk/+T/RYz\nouYDjombT6SymoV6KBxTLpXwWohksHLMJaB+4NbsKn33k4wwRM3uVCRUcei7\nAvGL36CQCzenW2bS1/kVgWlMBns0boW+Q3uff67J2lmFncyhR9kjvxpQ81K2\nT2/1fOUdAFpxoEGIK+/SZRUVM6TD7qUkEM9v7JD0AprDpbfbXBZauuna2QYf\n0G3EYmLQkeH/Y4jitQB3PaBdpKSzX/eUDIp52hHuDD4H+eQ4SrVaZJi5lqxs\nOPjnJMZkw+uN24oI4yxvi7WcfqGr/Ws+vh6ppQr7laqskm6H2OSu9wFcuisM\nJaDcGd9DLo8fSSVjNZdF+j3dW7o3CM23Rr+w+jakhAh8u5tu5CnFmck2fzRY\nq8LgK+hSdauaW5rzWaofgQGRPAaIwDxMAl5yVbCIsMn19Y3FFtywu6C41v1G\nde9m\r\n=7TEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.bc318250e.0","@material/theme":"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/line-ripple_11.0.0-canary.bc318250e.0_1617154378366_0.498926532534371","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/line-ripple","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b7dc8a21150269749a8080d5c72271d47c03aeb8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.edaee19aa.0.tgz","fileCount":34,"integrity":"sha512-Qd46vGLxHNyrU8UFXx2MiP3EEXluqhAZoXy69ntHOs2jvE9uxPUL9oBPZKoHMJCbvmJZA9C9EnjRPR7fyTPCaQ==","signatures":[{"sig":"MEYCIQDCwbUnbEeRI1muzZ2z8FXoHd0sTVU/lDGQ+eNGx+BhmQIhAIYlVKn2iI/ZHAG9e7w36/Mr5eQfoYnbi0l+PE41CHmX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9oxCRA9TVsSAnZWagAAVfwQAJ456b4Abp6v00CToA33\n6QVjNI4EyMSEjS8o0uvrUs+5KRLFzj68DXWkQQ7dWyJS53BF7yR5+2s9wmiu\nKPJ5BQG1346JdqG/QYVpGExR0TSAz9oF1KnMDTEMSrC/9vXlKJDKaCT99Pkj\nyGrUjEC9JDBG4oMbYK7rhuawr+Ed5wVkaFd1JSXH20exEb7IDzFYQIFZelYW\nStm7/5KZFvR5X4gZh46Ph/lCA6lDOpWvINg7njG0MkejByyObIxQaaU8yXUy\ndxsT/nNqL3vO8XrzxlmDUTZ74ojn8lI/3qZltzBeHeGRYJEh3xKXSJUjbJrX\ncjYZkvYTC5OwS5sJnZMuoTet5oP/DSoJh6eYJq88pKd4o5ttWe+xAXjReHXc\n3hPTrpSqKX2jroBRQwrnxxjJcFmsmH2skxMqnSyL6TksFxUD5FjQ1lAvcy1s\nuwIWQvayI9QmOkUjMb4lAjaFuMU8UDpDUg2FgnScDgwA4wNzcy63yxXSPOem\nSXnz6FV0QpmShBIA4YTcQyRMlHGtkWu2JqzNLIi92T7H5UuuIgAGjCpXX9wr\nLqR2YZaGbhjFV/GmTLa71s8+snD/2G9O3V/rqbryYTjK4YGAS6lHPvHzS7ez\n4qFDiw105/CjfDSAuJD3VKuFzvoxW52vnYimAhYM1Q5Hweq4b0ru7TPIz02Z\nUxqo\r\n=s8VU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/theme":"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/line-ripple_11.0.0-canary.edaee19aa.0_1617156657056_0.1374980834312638","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/line-ripple","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2f62fd750c4ebf0adc67c9bf6048a5913da0df15","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.24609b822.0.tgz","fileCount":34,"integrity":"sha512-5vOy4pUr1YE+bbxuTchgG47kX/a5MFgOqZ0aRVUsg8yLITPnBlOyNWrNJosj/GMefqQGoI8kRVtrpLBoGdTeyA==","signatures":[{"sig":"MEYCIQCUcKx9OD4Ra16CnA0etzHv32ZgL768r1E/Ktb0RJzqpgIhAMlH5Z46r0NivSlljnZc7uBtef7uuYc7kdDe6Kt3x5u4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOH7CRA9TVsSAnZWagAAQHoP/3+MDKqIf+tlwtryCTIP\nrrVhaQKpGp7eJvEdYqvU3wAhvCiJOzu8tTlYmMq/RdaoKnkUcziUWk5/X2X6\neW1oXXOW12mlQJfBjbhr8T/sqRcfAZOhowKlM3uuYQASdaSTkGp+Ld/oqbPu\ni/sZvYEbHvnyrmMhh34ok3kwV/YY+MPDDnUX50L4DbtklaMnEfUp7cJi5alA\nHcgd3eGo9hPJQAHzZ2ihUslSoa3bwt52aOtRhAbr/AWvIcTyh/IwZS/fSGtn\nIC4YjAYfMxbNOXxturpoErroSoTTUQ8t5/htfpNzd1KXvjux6QVgBD1R5N12\nnz7aNKKTQWxWDLlnCrCdPn0tTho2zmq+z3wdfgbjo6B/gnQ2+75VYBFl8Xun\nuROdcaRodP2Sb7i4LhMHBUkk89248UgpHWDAwSCxN0ypSNDVS9xfNHsEHNAz\nl3NO942wr0B6AWHMaMGoJuPgdbgMSBmHiTBUSZV4r3ssRIVB/VVDp7jKZgll\n4QiihhEFPVggVXNcXwBb+K/s3/+Nrd/RioKxxrq4+MeJvKx8P4lKWwHi3Ug6\nOpIYUdKauXgRMNktCh357N8PkyK1UysiMSMLZxL2OPOaRVKnyP63gOd9qVcn\ntls+4fEGvCfl3x95gAjD35sAhhBabGQVcgz+I4cd1GSPzbK2QYGAimpHBAZI\nhmAz\r\n=oNLy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.24609b822.0","@material/theme":"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/line-ripple_11.0.0-canary.24609b822.0_1617224187202_0.732204487598227","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/line-ripple","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"93e74a9171e96ddcc80e04be41ae7aa73d4c44e0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":34,"integrity":"sha512-7GPa+AlxBWXT1MXuZVXJlFHcILWM7/OV+NzJhilafia7Whg+ozCWQ87qY+5xSFXj05r5J7WbWJMWWStcIACf+g==","signatures":[{"sig":"MEUCIQC+3C5Zq02PmT+F/A4CuofTI0SRfoVXUJR9t5G3HCRLjwIgTx6ZFRM7eM/UirOEM57csAG11o9y88gRjWtGgWEOMqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeDzCRA9TVsSAnZWagAAUHIQAJhOHMUVzc2Vzv9Y6ODV\nydWj6APHDiFIq9x37Mxpkq/zzJl6N1Lln/IVhS4mSOY2McV39AE3fuHMFNow\nbpRweqqdKVv22FRolKjtn3IhxFahPXY62BmyKgrK4ibYo+rk7ST/sD4e0B4p\n2ihVEv5nruZ0TwAjXqr64/DtyiJnWdqQ97IpntBSRE31TBRkLZ1Cv0LcXgF5\n/vbpozLJcknGbXsqE78wnqosrjx/9b4US63hxsiKKCG8esltNY1bSEWuDkA/\nHyLD7/K0uHTp/Iq22u6Ze3HGJbGw26jWsXhLD7lVWhh1II15pFicOO9dh6ii\n5gVKMexhLH8KhS4Eqmephzn+ZL2052COcQBDpdlxpu9SNdhKgIZmlnggXp4y\nZ+67ww1mbwzZyY1P64QKvkUrSc7dHCo0PARTiPKoub7Fn2ovOIfmTHuYYvGQ\nmDoeSIp0O98lB0fQf7P2NmRo3EAIGhrGnvO767Z5Nn19SrqxeO9BOmkQzvnE\nLM1K8CI3gwWOEHESXHZg8chp8Z6iP/PIW4ofkORd2DjIAhgOwdjlZYqHGkSU\nQjqrn+sQ7qRT1JuvzV/TuxzPXvNeiYoLTbA7Pbh8mSZli2xYWD4iy6bpWNmO\nZMPp5sOvMUvpwy1+q+IDAv8sLCzfOXqVeeEYu/H88sayqr4NWaPzBU4tfoPU\nr7a2\r\n=0D90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/theme":"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/line-ripple_11.0.0-canary.b6cddc2b7.0_1617289458786_0.9121307382739396","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"519db96ea9c43fbdbdc22f8a45a7417247777e5d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.94937c78c.0.tgz","fileCount":34,"integrity":"sha512-ONcM8ei898f9awjCZ0y7bMS+/sWUyUzoaOE7d4CeseWVZ39ZsXn2I995fmmYXEdL2ELS3FoP+8rzMvPWaMMBWw==","signatures":[{"sig":"MEUCIDjK95MsuoK+ESdhUUan1RqYcilBTleDfNtSonL3n1TzAiEA4n1voRbnZWwmqFemNKuxJY23i+UVXgV7G1qh6I3MH3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjRWCRA9TVsSAnZWagAANVwQAJrnpH9MCkoIeUaJwpXn\niQSba860ZvlJ7waJqp9sm41byg/vQx82mce96HnMwaHCO4n+zTnfzMXi679I\nk1mg9PWPWwIXVcJM87C/cTJFicCHjmrdhcumX7qWhH4DqFCmqxwAW599A87u\nb/UrButVubZBq5HJQfZR/Tggh7uNbcwEmUdLE9n/+69PjAoUqESJP6tIOSPo\ntLfLcLY6fTXYTIVdTizAFkvTnCWn/WgEh2uijyvnU+Pk6yCibXnNuYZN9ldG\n4AmqxRPsKHyfxQKv64FxbyM6Y1elwp6NgGbt66hZybtyuO2eVY8kND25NXO2\nEqserOI7e6zGL1NZrBEbfPez2ghyVrqi+Ugd52JDGPq/5N7QLBrbClu+mQVk\nGkVolpWUCvRNilZ9tcAjmp+a9qSqyNmSuxyIKWxI0uhMumSJf10DbinTDa1b\ngQaDuj7TJZXLXuecbXfhX7xzmO6r5NWlXdS8pBPsE5Zfvxp6lBNjAKp9n7RI\nNBZliN7bQHcFWElMji57zUuJsBynTrM/jVUZhYNuZ7PFTjHY835q3vrMQ+ve\nQG+zBMRPuvH5mFvPyO9i6F7j3VHduV8dx+z0mMWE47VmfTVqg0qMHfxLEUW0\nHH3vXPplAO05eYsCQcY61k5FVBzGsaCGckNDgp2f/doMT8B/vdmj6YFyJJaC\nMTie\r\n=SRBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.94937c78c.0","@material/theme":"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/line-ripple_11.0.0-canary.94937c78c.0_1617310805942_0.936609453641996","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/line-ripple","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"899cd9d8667d98d1836b61f0b78bf23c2e26a015","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.e7202cb57.0.tgz","fileCount":34,"integrity":"sha512-kEjg7j0Sxi8yUVwdralzd7vhw94fx8JLsmGGYOCb65j3w/PMyG9sEGY2PU3xnzz7BwvetvmgMemjCNucoVOLzw==","signatures":[{"sig":"MEUCIFIelD+33dV2RPS5jzrHHZ6SGhiE/ovKj+hmSZuY9kSxAiEA1Mr+onK1Wlb/tOSD1dcP5oxqLepbpSPlMoUWThQzUZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk1MCRA9TVsSAnZWagAAkYIP/AmvAGfOLVor+lTV82M3\nKEg8jkSwgXhNkgD0iMLpNlKj+S/McR2lTsDjBrUpha9bYpGGOEG45ncpNeZN\n/lz4F87DO+gbcoezobQyKXTWLV/miASAMdNcmF2VYlfqbczQagXC4axou4ei\nLlqFPntSazgLvHuTMLhaYKMvyiVpXcGQFMjrGIyA7MjPgujVkeosAcLoWyp8\n9z7+gO8DNO1XHPJ21CBG4y2Ilgu3N/puJ49ZQnUzmE71qCXbEVbn1tNAcaQB\nX1QxqD1oZU4QbLf4/egw/lvfhY+GNhjtO5ctYXEJq+1+JIPC+MltleOU/7mH\n07+JheyLejQI6xY2mNapzSwbAChPKZ4FYVflVCqhX5xcIfpdMNGFh+MhDKIf\ng5v4EiwoOUIVj2atMBowuM4HvwjECk6cCcduxrFRvNBjCz+1z0Q9vSAGGqtE\nxe/D+mhzritOYcOExyU5KXPnEBPFRKe4pJTm1HtcQvSxRLT+60JiYTTZI/pn\nbq8tM3eU3KSso9DB3WLQ0qE4IPwwTDHTEvJIkFjf+8qFtNXRYeA8kH+/A8Jh\nc1P7K1/XJww0A+ePyT+mXRUWe7nbqgpBpuwV5G7tCyOnko/vNpHPaOuXjOU9\nbu6Lyjn6ukeyIHYtojKgruY34iYUD2I6UPo4RVPJgOOA3QEzoNfyTqbYM1U+\nwJ1N\r\n=X3UB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/theme":"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/line-ripple_11.0.0-canary.e7202cb57.0_1617317195705_0.0007258444166444722","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/line-ripple","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"57a22d874898b1af005bbd426acb0f6a23863389","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.1f636b205.0.tgz","fileCount":34,"integrity":"sha512-XWkG/Z83MXGVwHd2wQ8wp8432vv0mVj1FtpYvEAuoNTceKexhiI5XrmKsYuWjGQE5TdqaFpZQ+WCyw0RjbUvSw==","signatures":[{"sig":"MEUCIBhG8z4+4VQz1a5LEj2cCmiDiNWI1GIdujYSW6EhvH3WAiEAvtmmCWyxONBZReD+GZF8+0kvUr3oHu4lxQrtiEDIbmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5lWCRA9TVsSAnZWagAAWH8P+wY3hbcUGxc6xWVpPAG5\n/0NADlUeN0E9f5fk/Z+axfpQs96RKv8mPQyVDX1jt56JhjIBPa25rxXMMLyP\n0+t5KLDSAALJzCnDow7jjctm4/UTu8emARAZWDnoCzKqhy3juKPVUWzUdIe3\nlcp/Mnk4B4NZO6e/k+l1m0mvPtkDWjOUZGzVFRQ2EIREfqT8i8VbHq0dHX81\nwL7mhJ+hJmXxVqm4taJQUWYk/ZCxT5uT9I8Yhk6sRxMZZC+PBchBVY9y3Mul\necSONcw1j3ukazwSVsd9LRbVQLuXrjFNRcdB270kI9Ay1b8mfQqnk04p3TAN\nj0XjHS4hKAQ/NkRYQEJIKLnSF/ZouUSft+xC0/eV2fW5ufll/qrgz33MDeKQ\nQ0sSZUENwerjuaoQ6As9DSuCh0oZb9ehuyJKPKj9EfE3Ac334FvmR1uNFisQ\nLdFK9YKEbO3IoZRNT3zKhCSLv1C5qmMOUqu+gMLzxjuNmbjTpNsCINLmIZ94\nRgk1RBrA95ULhRJVJ2396FpFUvtC3kTuQ0Sm8G2yTmPuVq9zy3o+KcHubWN/\nDbR9mE5IebU3gzu/NkTwTkbRl3S5W0PCxfCi8YoDyauI5ex9rCPx/jDkuNfo\nRPzUckj31sWwJHgZWB5IyBlTs8924pIgBa2/O8uCEO6g3/mP+ji8BqMBzvyE\nMYGN\r\n=guvc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.1f636b205.0","@material/theme":"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/line-ripple_11.0.0-canary.1f636b205.0_1617402197721_0.18278070869678076","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/line-ripple","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"67afbe4fe66665d6122d760e2937446785056fc8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.94f50b260.0.tgz","fileCount":34,"integrity":"sha512-qkh5aaWlf0b2B3tFqfq3udfFtXnWs6xe92N19bR78qMUoSarEAZlnxiVPNKAQE0T+0A1eRlCdgILYUL5x7dFOA==","signatures":[{"sig":"MEQCIHNYpVEwMV4C77c3z22yYb2Ml6da8EyTFlP1C2008087AiBLG6Y91wsXk6C+oOLNLsvATG8I2LciSQp6/iahudGfdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaybzCRA9TVsSAnZWagAANkYQAIQQnN5gePAobk0V7Tc0\n9Ius3DZnisSmdptYdswvIczyVGlUNgkZHtTZi9I/ByXMz5/aGvwfg6BgEZhf\nF1bXA2MC0bWJCKUuYLTr4nfJdBSBzeo7zf7uClR8oK0mYNXuUg55nkH53DE3\nWfuCtWmJpwMiV41cjmDCwWRkOz7Y6ejaFysPDwsLvA3LkwWWnDpJq/1Mg9Nt\nWb8jVVjpulHUiAFZFGyFtsTrdatmTfiEkKK0BV6NBP2b6l7baIEytw4owKTy\nlBte+VStNpoCxp3quVQWSVvxadPyp9XVCSV+odwXAUxtXpy2bBj8FLULLWZH\ngn61+AW2EjJ038BsaZxPz9y5pz3xl33azdQIU9SpOFDQla3YNwH/4mnltfdu\nyb5rReYXsIMnwEt2RJArwaV+dWGxeiRvwWj/Dl7doYhth5o60OH5oEFHPYDz\n5Y58LK3Zk+xyWdVDatOxrVCFzeSzuqiIWjqq9nzLf8bprpVCDW2sxS2gq0vC\nEwxz4pGsmPOp1JnxkMhiMBkenV6+DJsglxFseWOzxZQIcT0gUrQFW9ZMjgBv\n+If8Lli/87bGB04MW4S5tpvTKV9sxskE74bcvxzSQGE2STIjlJHZchZeRrnp\n9QdoAGmGnKwshMzRM3LKTZNn+3u8DiPpCrQD7CzKlG6Z52Jnx7EENBdxG6mA\ntYLp\r\n=SkNR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.94f50b260.0","@material/theme":"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/line-ripple_11.0.0-canary.94f50b260.0_1617635058775_0.14228399511516177","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/line-ripple","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8e030f067531d2dc4d8808cc3c17d76e6c215617","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.a4009b80a.0.tgz","fileCount":34,"integrity":"sha512-W9mHdUKWgH/1AFB/aIu8ZNWBAKq6No7RayEa0KFQltvyaj7GWZbcr3gbxf1gF/R6TQuIe2/fi5+5KNjB3Pul4g==","signatures":[{"sig":"MEYCIQClgZtbSN6n0GagaSuIRE2dqCw9qEC1md9VQ1oevuSc3wIhANJxcZUABg82W7b2FhjBrGfdsD+kdDEdm5QEkhMXmodn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4hUCRA9TVsSAnZWagAAPOoP/3TYsDSCFljwbM9jXLIg\nY5brbxStw9ZN6GSB/BbdjNhW8Vj88BYK3D5+d/vrb1JYx3UyzUJ9hPrKd9/J\n8cHbmCDcfF1yZRD4o85MBHsehQhS+g5Omt9ggHqav/jwRwvI2MolPImHVqkL\nsLcRr5y1A/ryO+zwl4ZEHBHFPDjTdG9TbRkm6rBEp2kpKN2PV0tpVEN7Ywwl\nuWxHGDoTLTeL60q/vxAv9BNN6Gi17crlf+DoMxzKvuVNU0sfWQsSAQl6SJfb\nwunkhIRe1+jpIgzh4qQTr9Z1nEEEaYzMwid76o9x7l9W63iWkqVrRlaI0eqU\nHMd2NZZbocBMp8u5V3qqAjXAWxVllM4HJjY/KkvgsmVx6z+RzUCXZngK/b2p\n0vZz2P+XYvoW1/U147bpZcyTWO1gRvktruTeTQ/xUE5hQlbZ+Pbp5o8LFg59\nRmrRRdbtacht8RKm0rMbcLsHfyykoHeg2psAocBCPjdx5HOUlt/RFQcxevKH\n0kW+ThLPiNnx0K7GO8T1rgIKkzQgLv0zxwVAE1nt9vhaqaaK5DXylSxn579v\nFA6RB7N+aOlxACsJm41pb4+62RmbhoFU68m2Ft/3xi1fvVPNW5qEODCUPEkq\nx0NqyUPu2S5PVHDTrZwQMI0Y7SGib4LPaos2VC6kxJ06K8boYFWpovZedmj3\nbsNi\r\n=Wpa0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/theme":"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/line-ripple_11.0.0-canary.a4009b80a.0_1617659988160_0.45111456067522937","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/line-ripple","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"154a8ecafac5ec18a130a19788329a195fb41b70","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.15604bd0d.0.tgz","fileCount":34,"integrity":"sha512-dzcRb+8zOeizzQfQFsdmcccLjLvYV23RndDvQ2s8RQlVO3dKsfnIs4U2TYTEdySuhwm0End66KJJyBUz6vUL7w==","signatures":[{"sig":"MEQCIB98GXceV+Ju1ODkTxs+/YxzVeAKNpoyC7owUoN3gbC2AiBs0e+DI3Ii7aZFiETUszIsFGWJBvbqP+g3qN8tQ3ryGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5IbCRA9TVsSAnZWagAA5k0P/3KLPsEim2MeU6B1btTM\ngKRCax5a8cY9Hw+qoyMzx4MuRw2fHK8I6UOlYAw58bFI4HnT5LTrS5mBbQlO\nxJ/jkUKxa6zEYbMd0PrUGTwLjnzDZKeVM4OBjftmuOz/yhDspxG2a18RM2c2\nNCpeQjyzMNrMDtjW0odTnTZNkAzg4gwZnfIsd306zjFQvvjgLYh52jXw6y7N\n79PbwGrpMmb35ECbg6kvUTXVplVnIYNTe7yt/u0d9MMIQHT91gDqoJ5Ta9YP\n24n2UFCMNyrwjZNwi2Z2fIWjPCU21f9OnQh+3C0dle9Skat6xkvcUQ3cWnXi\nnfE8z3FhzEqcDzUYOe0kFH030dgl+rBeYgnCPfA3uxciz4ziNjYE5Jx+vFnN\ndEqYN57BWj34xNizzEopgivcFHOrSc9IWeOFDT3UXpDNL8+1gRSqOxoYF1Do\nFGwkz7mWfPKp3TCzVR+b3xRRMtm1SGBAh+viGg+m4JnFOST8dR0qpvUTqUbf\nWSDPyWL5DgpM6wzyYtExboTCDeKsS3d1QMIbQOn/lp956P+Vw4YJQQlGdm9W\nCUuldTvsqua1HEwVwKhZdjJHUDSco6+yh5lLoMYom8FVqcj764hmlV1Dah+n\ntVMVrNrgZSrWfdnxhaQg6iVS8fxtjbzUaoYh1HAk6CkVLLKq+P3o/oO2bSSZ\n/ojp\r\n=VqZn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/theme":"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/line-ripple_11.0.0-canary.15604bd0d.0_1617662491338_0.4605049180473666","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/line-ripple","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6eea49e847260a0a3c8ed52b3a8c3359f25c404c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.76da7876c.0.tgz","fileCount":34,"integrity":"sha512-XO86NUM0aHf79ekS8gr7NFFISmTFgif4ORjPdLGhxP0QaNP/7pmZbfSSPZVv7z8mtYeF8V5XkARrRJ6MrO79ZQ==","signatures":[{"sig":"MEQCIHSDAvkLiYz5wHOr5gZaQBn1mp3nk7XnvPyZOs3ie/aLAiBWQA7s2c/XETP/GGuAYF7KYxzIiAkmcxXw0JxNMsROXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ5YCRA9TVsSAnZWagAA/rwP/i5Y22UWoJJHSJEhyZve\nh9Yy/wfknXgdVnkGZkOpOpC7j2aKQLtv4EqTnbxeR0dpOLdt+jrW2bWtYVCO\noFPcL4+aJTTPpLbQYSnzJrCNxweZZo/7xXD9hn/A4ZD7R4GuruVhl6lYkQIp\nCj1DwP4BqeEDQXSvYcmz+dtW+bLaQwtUtl4Vnsqnwq8YDcneoqJwmds3BkRd\nMfwXArVYee8JhJK7NAmgldUDVfRFBhL4W/NPpT++nOWb7urs3WSZc7208zKJ\nVl7ZjWOz2mHhs9b5WoIu2Y6BBTjgcD9JnA0bvHvgEnLd0k7AJeBOSx4JvZ7a\nmXGyWa8E6qquJbPXSvxqZ4nN24IsVrqnXHeDyo4wuyET7JKa/l+xGR9WXGMH\n7Zy0RpM1WkW9m21C1z2e200zUBgm1KzjfpNVVo6YjQS5kGM9cO4zGQ+DKkuE\ndJ3r4CXpQue4mp5j7q06uOIOt6JyWalmRNngudLeKalF1rhbv5i7RoMI1TAR\njlNBcjnk89mxDGqtylcZVCc+X+QLJfMDHauXzrcBWGHGXpkl1V049miQ0axr\nRhIspofToxaSKyDctddeVs9B1sj0m53DFMoS1Kk6kMpLtkTW0eWknH9McjDc\neEvVnbewbBf3cDiymI4sChpK2nJm2KF8LHWY1JV+03qz5ueof1NO4ldhxAjz\nRryR\r\n=FQ1L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.76da7876c.0","@material/theme":"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/line-ripple_11.0.0-canary.76da7876c.0_1617759831565_0.12203456429411741","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/line-ripple","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0ff8302b901b079c28bbe60fa50c8974e611c5f7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":34,"integrity":"sha512-c6ELZiwiw1Q6o65BkfnkEhwaP6JSVcM3vrQXzcbawHP9jrrDavXl318V03L4a/YWbim6X0fX3sdiYEfcUYTSsA==","signatures":[{"sig":"MEYCIQDuPiKNQhxv8rtWgtRm5CYFtb5Q3gUsK95WnMhN3+QENgIhAPhBqXK9GXqGD4QZ3tXsMqdH/ScbLspT7zOcHdzxICsD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf+cCRA9TVsSAnZWagAAHDsP/i6GzBaUUB9jVUu1Eqgg\nvowG9L7gA76kjSrkRLqdzo9fv8MHKXIjZp27877pI0d0V4K0HyKdqesEP/JQ\nTQtST+U0qZrLnrwatyVBswCsKlcmCC6fHZkzmEzvdLwBYM10dmLQtraZTqSW\nbC1TJ2EQxDQGiaxuUov0N7MxsksKS/3zI3BTEsY2nOO8cUvrICVtcYLYSqj6\nBLfehYSz+5sAulUbZQDob4oK9P0xh0WzAye+74tmT96QXCrtW9j7gI2/gQEs\nytrvcgYlzfU/DoY/cqAjicCwp1HNaLzsrfRPwlNm22VF6QtzefnkVWo9TU5X\nmqOLUhkq/UY+jKp3vxl/BTkJiLywLEwHMD2B5SyB6isx//f6fFzV3vPOCT80\nxB+CsbUwglV175PaFJAjQkQJ6JwZX6D5oZ3fRpFDQqtdLJbdGD1QQVkBfOTM\nsKGQ6gvXX5l++2sLvYb+k67HY1A+et1eDUKZmFoPL+8ec8/hYSAmaQ/N2Pab\nYbgCPxL+ekkfEANa94JTMVizVyQ9A72yT8hrINCY3k/17FkQtBc3jsl40tz9\nvsFu+4/T0uW+1RMo1bAairOsiYJdloa12iKJbbFP1+u2mX6z08AX/0TKRH3v\nVfrC8Lv55Pt7ONkoAMeC9ZydsQ1N10ZRwTWgx09g2BL7P4YrO9J+E1gZT6aG\nltD7\r\n=qQHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"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/line-ripple_11.0.0-canary.6bcb6cbd2.0_1617821595502_0.17654847436304877","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/line-ripple","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1271eb3ef2a7e9c1b1c05a92092575e8fd43d259","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.c91e8d141.0.tgz","fileCount":34,"integrity":"sha512-jVcB0xGkCXDdBNf3sgTUKVF3Pg5PCrMV7HLZKUpPq5lz9O8XrVtcvZSsl0/WWAq7TY3PXxzcy/PEkzV1EzohVg==","signatures":[{"sig":"MEUCIFbC9LGPFk8sSTJAvj/yj3hW70Tgv6BHLUHDu1SGCqN/AiEA2no9rAyrF93BYNUzXHYNxCScXqmxAm7mW0UGi4xN0A8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgCHCRA9TVsSAnZWagAAqhgP/3tWwCP5SRcpubi3nOtx\nkvILMUquhhUrussM4YoR3fgS+ppV6GrH4R3zcw5WKk6f4+Ko1TKMN9YoHyHq\nbqpUy1MCSyy5FiwLx9UI5+lC433V8torfJf4UZDavTjCOwg6+Qy5Ik68MxkJ\ny78x4m1bMIVVr1MqwI5SFaFpoFEBkdiWJp4S3Gg6zvsfrrCJfnMDCUcZ4KaC\noqeMCIjuoAog8LqmaPnGUXZ2BzrN09JSqF3T/aZCTmZLpyoYj2raaVz7kgVZ\nmBeLfNtAme/YHM1KmxiFJvpmXLicFUIrB4EyfkvoYbUcrhr1H92j63r4K7AP\nbKLT0C6ZTOf/CW+XYnHjUGHayf39o5mzIx57bGXYkpy5kRV6OLUWlfp2QAE/\npIaFpaf0dxTZIjUAUwDCS6IwHRw0Mx4rNVvadPu1Hwqk4iiDKuU6D4ZD6vkr\n5uylApOlZhwlC6W8QTtV6SyfArGPIjgxmJaO62bx333xceu8RE99PsgxJ2vi\nHMgFxnPhIN3DrsFJIatJ9CMcOAMiInTXqijG3ArPGzVhdMC9a+U7aKfz5oV8\nb68YQSP25yEgKjBZEIH8HPScDzYQSvQvf+5vEz3SGbbdmiVUCo/S9R7rTZzU\nWu75lXdxwuqp5h4xyaqKbpNR73qMsHusSuV/85N8pT1CNLvN/BOX3ymdRjxK\nLwx/\r\n=MZBP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/theme":"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/line-ripple_11.0.0-canary.c91e8d141.0_1617821831102_0.34842513368102446","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"837d67268130764ba94a64b8886e39f91036526f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f77c50860.0.tgz","fileCount":34,"integrity":"sha512-S4Tm0k4oEBP6VADve7iaYt3hPvymBYPecPKV7Eocw6AZBxUDIFWqQ92gZDWQkSFldGx9Bxh8nZKMftMnnFdwag==","signatures":[{"sig":"MEQCIHr9wFqDs9+cut4DjfYNWeupy2pLxkJ6zopF9UnvGr3yAiAfnTZMumEHcQNVlAW2N1+C4hfMG7gEs/ofJK56QYxpGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyKtCRA9TVsSAnZWagAAIFIQAIazr5aSRH9DVX+AsxE0\nSen22fqz1s7g93wqjTZAkcg0GtbAfNCereruCyP+0WAgYHy9303T5eGiCCB/\neIfYMatkJz7YoP52olZPdczLpu07Oqrm0IQF1NTXXN72Pb5gmjxcAOuK+Y6I\nYhuPiFEBWi6KD1gPyTUYDIjjupScl9FQDzB9B0yJP9ekE5iKu74JuhxsPacL\n0hKZa9IQi1fLmcZk2yhI+7zvO7zhVEm4qXST9rc8CHkTu+Jks+Blp6XEXLoq\n7vPh7I0cikWtxSZ392fIum48Kke9p5JY1Ss3PxL6sYERiL+YEoNNYWI9+YDV\n0b9Em484kl5x/JBeEnmoeg54+reSDxMAkn2/wQgWx0v4zpVYt3xNoTa0WLA5\n7Bry51IUvfkD8h7sKgbu+0HtQTfU0BomtEGX4z16P3OODe50aGaSXqWBf+pO\nt9SR024WlumngFP3jgDZHAhKVzE9Ekp8nJyB/XAmLeN3AtpW4I69onFjkbWZ\n1nkrQ8sqz83wpvLPNfFTqhSNDTY1mQD28cujVcVp582gDzljHK+HiBx0qhdy\nDb23f9tt7oLDKOtXGp7ZvSVlv87TergR8z0nAIcbJe8vYoknUeU5JMZ5qN+2\n1HZehBp0p8I9aAoXiqlDp03BFMXIU7yuV4M0fg2nCjepAAx0Qo29o2BYBFGZ\nw2QZ\r\n=tEVF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f77c50860.0","@material/theme":"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/line-ripple_11.0.0-canary.f77c50860.0_1617896108487_0.25530443019558","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/line-ripple","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be15fc2225898212db1bb772925e58452cd91300","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.367d88bdb.0.tgz","fileCount":34,"integrity":"sha512-kQt/vp3pBIgnCbWMjsHPeNIcc0f0ZwzdjynJIZ4TErY/6t4Dj1rF38zjGn4LR1xZ0c8Xb3OEgWvChJvocyX3NA==","signatures":[{"sig":"MEYCIQDJC/3pU506aFTBcaAvFI/bmWyQaB+DiKn4gr9ZpeIJQQIhAOyyX5T4VYtBbbm2660MM14DegUn43+z8CF/uI3T5tlQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzFlCRA9TVsSAnZWagAAh/AP/A1WdbJKx53RHtffQSL4\nmqtFjrKCiGUL32gHGf8pdM6BysWJ1svcjyMVbpGtE8/69czk2ZRWItqhNqs/\n0UxyeKQPcwJLx+oI4oGi/Kr0RJyXVJL1y9pW1MDiAHQnhU4uuqVCqO7Sb6d9\nPHAsJAdUMwEXTKxpnCzgDThl3w0pBkJLhBmVsLYDQo4s5xh9ue0ZjRjA577T\npw8Yi0qqoyAGPjHtXOuwMMG6C3+6PAvB1pT7DROpWhbKJKkG4U6pgoXtcEXY\n6n1kEFiTEpy/OxtcNFq3J0xEGdu9sR+eiqM0Ez4WvtAGo0esZnrBCNVIpr/0\n5Ylq9l0pwr0PlK1EdfwksHuD+nnJT5KpzYNQzs6ad5ZJQ+QVNw+p3F6KYd66\n8knNtJfQY98JkL5pa3/OoWDk3R3XC67x0on6FrYkkH+7IbnOSzTM0IWdu9z4\n5KLTTarlpncOqz9q0k33T/XP4W/3rSZbDoOr2OqcVj5ZSYP/9ArRs+wculpV\n/8enIYmHFpxbo00DFRuA9SooX2CCTM954T/PD6ePy92e0d6MMlV3jHh5OC6U\nee7lptZDiAvVhrnKQcWCVXIkpD6HG8fojlrwhzuRT78Ipsr8oknoGzxLmzua\nI2I/1+jb36HR9LglzEYaL8heWAJyjaEGh21ZNqtb9arecH4/Kl7vHo6F4w2M\niiS+\r\n=Is7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/theme":"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/line-ripple_11.0.0-canary.367d88bdb.0_1617899877024_0.1719598758631189","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/line-ripple","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ec50846b15a748847883bd30c6d49a24bfaed7e4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.0ec437d3b.0.tgz","fileCount":34,"integrity":"sha512-6Bt/IMe3l4IehLWikRw1BMJ4g3lywi6NqGnrqgOLa7LxlW4VdCweW1Ot77/kaywCKCywsIq6v+GuqJ3FiecJiw==","signatures":[{"sig":"MEUCICoF6CNAgQY5NEekwmrlLJWHnF8oBwl8kM6GBnT5Dj9UAiEAl2FmVXxyzC8cWHLl6v79/vFvR9uoihnrY8d8HPqKcn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1rXCRA9TVsSAnZWagAA5vYP/2srzuV1TRcBbR+gQ83M\nwgiS+dd8LLWlh5UU81FnNxizdAW28KXys+scjFQw2S2tbcvkthSGvcCJ3j38\nTJLicHNlGrAxti4nFHsVNWPlWt+LPZ7Q+qp25iSEg/vzQPZvc3U26jVghvw2\n0yEgJqL/bv0FnMnXlgPObJL5iAYKLSfjs/xvi7ZYq8IWwS0whUFGfr8lqzGY\ncgueUohQHiQUzsdL23r34MJbzA6kHj+w+ptTfAVngKpzeffzebY/7T97kFAW\n530p+4PhDK0KPgKGG+SWGlhedlgvKlGiXSduIvsiFJC5ZZhP89h61bZGBTQm\nbGUKs8icacCv1JZ/iQrWP+b0zU/6oywWrJVxocAAEG9sQU0OudLgtu/Xizfn\nHSBNXjDBBG7cvAL6AMzon20HEsvlkcV/k2gYgX9A3WbS83U2KyOE9AvDV1yx\n3Z+u4dYSIQyzZ3gYMKgPvX3P7EAYTitIQCTmI8sb+KEbG+8cvYzgc2WF5tpC\nnjUR/nwF4+L8DCGw0EbM/9a9rUtS6TYn77n63g3aU0hMuJErj20twPPd1ygM\nnxcPNMd7kEiuAv5Qmhy8dhOfjjQDRVWLrU65xel9vMtuNAyYfepM6nHxFoxk\nILm54vVOlcjCqkFaJkLDQTJeiGm7LJcrvaXEYJUI/jvAvZGdHXf7OveITz0I\nBcz/\r\n=JGIp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/theme":"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/line-ripple_11.0.0-canary.0ec437d3b.0_1617910486823_0.6815895427388137","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/line-ripple","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d936a522ae5900d3185cc6b55239b414d0cc3c93","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.b2fa996a1.0.tgz","fileCount":34,"integrity":"sha512-pa/PjoNz2Gwz+zbm3ULoBeDj+qcRd/NOSMRLtiApmZZxYaoRtPHSbgXDETyW2qimBfNj+xl2J6GBn/IqcWo3cQ==","signatures":[{"sig":"MEQCIAs/mT+xNmF4uLlRDT+geR6bDWx8w9EhBq2sLiA4W3asAiAn+cnky6IL0x8IqwrbDZHAJmNDJifqFqprz+aYvCddQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG5fCRA9TVsSAnZWagAAjG8P/2jCSDG3bIgNfsce0XU7\nYNFUXzUnWA9DjCQDO0CsoV02GSibtMyGEfDT1TQVrJ8zYCHUrJUSeG3lahXf\nmiwm7z87kp4P4O1/UqykHsEamoyDM9koVskW/Rh0rtIHAFmatjuV0y2T9BGT\nA7kqcGVQi7VWTF2Jfn6siNg+WlaDmxt1sTxPIFtkhgpkF+MugW5qHFxur3i7\n3bYplTaTXIC7wvNGYgMHYS16oTtT6SZlqAvej0oQfRMUdW751TlHHnwJSNX9\nPy9ZN9POvl/5Nfdx0ZZi0zeoMxkAn1lCloc33PaSRhsH5bQ3hG+Ljguhh/94\nYihCKMOvjJ2loscH3lidIp8QbBoRWc0sNO+8aI6+4c0DDB8X3EfUHCbUMrRw\niNpNz8SMvPHHN56I9KaoZ5eSuQOk5IDZ9B14oaqmzjyhCyWwPIcYcCcsLEwo\nPw90Zg0u/bhw/SLlUYChS6qI8i79o/cchf2gu3gLHefeyIsBerWGeyMh6qhy\nLUjPbLaMqRpiZOd/YJj/UZ65F1keOcjDK4nSmdiagXAmqMuN/X1wgw6cfBdQ\ntg/o4I3+YLs04DdOFN4urXfiCcC+NmH5lTLJ8ajeL4j4cFL5KT/uEOAd6OvA\nD04fu15G3P6SZyfUxnHZ4QERSKQhlM0EO9qmzYcgl+lAxEodgYemReqqjMj1\nhHFX\r\n=b4go\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/theme":"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/line-ripple_11.0.0-canary.b2fa996a1.0_1617981023069_0.586767412880506","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/line-ripple","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2aa227d479b365a009df162860020de97cb721bf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.24255c408.0.tgz","fileCount":34,"integrity":"sha512-FujNElqEIMZ//u+CM0oYtw8s4Zwv6A/Vx7O5gdnk1n8OT6QLC7UfPgc8+HURlI7HmDdgLRNdPazcOHzmEV+rbg==","signatures":[{"sig":"MEQCIGlKnOE8lpEXVF2ryVAu307gDg0YI7y6lf0BceBjRWwCAiADkz8dtVr5wGC7je77ejGIFrubFk9GV5FPUFqcKSvEmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLT7CRA9TVsSAnZWagAA+icP/0sV7lR0We0vYDQrDbDo\nRM3Md0HMukaym7He0t4K05a/wXWtFCQ6imqvkAnOYQnELU1LgU2J+PKnD+3v\n0pTjyzOwnICdZqxwyxUcaqFeOi443saw6mPZVDDw+ZOZUzGj6j7uaoMnePCI\n6iFH0ZFjo3+EC0TuwqypQBrm4MnBQGapUXUsWFA7fVUbsnmI7vgQJvPmBVTE\nCGYc5KqjUzG8XkadgF9vjBhtzLQFtpma2Gh+52z4u4EsxnAk4qkLp5QmW2MF\n3r7Y8D9OtHR1XCuWgNs5+cCXv3fdt8/JFP8g3bz5Ey6BAH7FJnNITxIlOhg2\nbLH9sO40RIlWD5AiIXilvwRPXarjEUKlJ5M1jKw1IWK8EEFLeTa5oEscf40w\nRYMjc4gx3FRJ+/K/8PjZSmcHVD/7PA0WIxFKobNnHtJSXcLAUuUn05egCdar\nogg4OvnmbOv/qGf4XaaPJ7iOO+c1hil3kbhlhwBpIz22XQbufo6O8Aby8dC0\nkL12qO7qb850EfIIb4KPtsk9sHJh2fHQpxHnXE2NCbnSvr/NnJTrAxvvqTzS\nALRu+dA4eIbzqkY0QWBaH0KTW4lMzmCpS1kVJdMC/1RmLxBti6ZsnKv6lv/y\n6aBzUg4/AF40aOpp8r55tlmK5bp8brQrh/XIrUejCwUquYKfCf/xMNi3Iuq+\nFzvn\r\n=yJGv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.24255c408.0","@material/theme":"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/line-ripple_11.0.0-canary.24255c408.0_1617999098934_0.4518013695630205","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/line-ripple","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c75f87cc0c0238b08f93dcd057b32cfe09f263b3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":34,"integrity":"sha512-deHYKiBPX3IjLZ/57S0NBo75yWp6WtZEhkt6rth00soKPt36mZkR7zD1wCD90nf/F+u7C5fm1EVYbvDhtqUbaw==","signatures":[{"sig":"MEUCIQC8xPOxkIv8izQCzynBqKnCygYxDGNzHIBNVjMhIHfdVgIgCJVKDJDDJmjAF88EdAaZ9g9shvTHvpab+7Dgk6ah8fA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNrLCRA9TVsSAnZWagAAdQYQAIGNGVihAPcR7qCs7L9A\nx9iLaNP/TdREkMQQM6H/A0TEZipwRk6baI0zqcY1pYBFcfVxIdWKIY9dTx+y\nMSelArAuuO0V5FAS8k2FoYvvCK4c/M+5ndyWKBHqTOe71tamZjDP0sMpDxSO\nAeullKePJGePgMeuq+EoMiejSURRDML0zzUBaSwsc5wK4eEmauT0DhwzA8Jn\n/o7NLbHe2aN4S6zLYygaPB1D87trZ36c0LrMWZC6CftUqevuX0dnmxFJvwtX\nlcVsr7zXz1YGkPnV328ExbvBSzami61MfRKpm4V7B0rLPbjgHlGtfB2jsmiT\nqZM+5OTB71qBKDhBuRb8lxCad87YT9Vkhp1HO+0uPJa0vFaozB5CSkETwWBD\n8uTdSyhHam+PDhW5HAj30Z3PKmUEdTIwRAyQsnTXiU/m8n6xjp6XqMM3vnj3\n8Ow4X6+2+78+nmkvKwiDWipLqQn17Wo3vT7MlvQDegwqT+7YNBXAdhhZsFmv\n/AX/Dd2dms24nT2GHGGI6fUkNCV4ppnX4VBpSaCMhn/vc9DgNZrA7vKaOVIN\nTBqQ/FeVvtUEcA7bNMqygFxBDu+EzDn/o4KLAPT5KeKhLY/6emu5mI+l2oHL\nnWgNRwXMaFscn7QVD7AQmI9Cm9vN14ByUayK1Lymdc5/jAD5WYJ08Y4PKhCz\n+q+2\r\n=PnLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/theme":"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/line-ripple_11.0.0-canary.7d6a4bb72.0_1618008778670_0.8171229861049389","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/line-ripple","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"117702fa6055febd2399175c95d71d21e94d8efb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.352b295c1.0.tgz","fileCount":34,"integrity":"sha512-egcZ9DfmCgJ+tmO2rslP4GnmNEeiP9Ep7mskcW/r52xUcUoc15jM/JAXAeP39lNo0DeCWnMn2QxTZgMVdHWRGg==","signatures":[{"sig":"MEUCIQCa3JO1grCJ0aAhVRr6uBgLQ4xDWwefX8nBw1t5KZcNEwIgQJU8S64Q4N5Sip5FhXRWCiXpvdq9JZYOeRe7HMChgbw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI4iCRA9TVsSAnZWagAA17gP/Ra9Mv5CnJLB+MAf6arI\nhSj4hZ2nChQsmj2W0AeMAuPLUOO+GKIVOPHch4aGuF4W4Gnz7b2sfzInvkN1\nswbV82aaDEb/DylF6jWX54kWGExrUoFN9oNHY4U3jxsIH/cnMI40UXam1Jpk\nTu7eBVmXdAmhNqFmMOMpRPokU9SZaGC+Wo6TVep6h6rlUBFJfe1WLIxJiveL\ndSzIml4nb6oGEMQnIduVxP4NLVPhsRDP75NHwa0qcJRkV9SAiVvn+qd5zDds\nWfWHUovgpmZnvNqUEkvwo62ZQ/YGGx2fWgX2Nf1wxu5evSxwLRC6sbh5YDmy\nPn+Fwpt/L88r+uRuDXIQgf3cr3rYGOXWnQooQpl6HXkzUrU/4PFetY2AVcZx\n5eNi/Y+VPvk+0A/XrfyYwSjmu9SVHXkmAdWWDZbzRFefM4aPFYr2iDoOcsts\nbP6tISY0NsPhq5zChlhW63Dwj+LJRpFWpxZcYa9/y8Lm3yKCWFSbecQLCta4\nZAHYv/q9ZiaqkBUKwMEadEysQArSr+v1T88DFkHJ3UegizK+qDYaZeIXxz0h\nlpGX3Jd3W7T3wedt8XbD1hQJOnp7wovzFCxo69+0VHGM9hkB495ltebEy6o+\nfKVlvYGfA43uTdye35paGX2OHm5KosUkPfYMq50D+oELlBxn6+gQSGFVe+ys\n8gKw\r\n=AGAz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/theme":"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/line-ripple_11.0.0-canary.352b295c1.0_1618251297909_0.25010689800339314","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/line-ripple","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"911b13ed2fd95465fb2ea89b93fef9b2ce9d1f7a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.ab99b8064.0.tgz","fileCount":34,"integrity":"sha512-z0ZtWK7J/le1sSbZW+7yKVzaNak0SDMQkIJtWMDI4KwIKhCm5ZJdHeuw97lIsCgSGoGXDpzo11ZzdUDC2bMbBQ==","signatures":[{"sig":"MEQCIC+nkZibOCEfk01ndP3kCWrOkEVIbCH0mACy+sJ33Kk4AiBO4w0jjXOsSoIYR6PsSCamQEBpgZFTeFV3zLwkmd4L2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3qCRA9TVsSAnZWagAA4uYP/33f5DfclLgDmc6qnkcZ\ncd9HC7Y3X90TnU/ETq21gCmm+pjCpnB0Ut8eQa5gukMtg4/wMzajrqhfsu/M\nwb1brQuAgRYwy/Q8j9qwi62gXgr7ovqPgqRjDtxgudT+bMOYflUc2zfT+uXA\ndPoCu6DUUHAyKR6c2KN0Cbfv5PgLWb0tfGPhgbE476Lcc2DRZxPmQBXN+ymU\nMqoHIzYQrfFZu+/r/t3Us5TGnTH0Bs/tdcy/82viZwoSMjDapj4zBnP33i3D\n5gAw4NsYN9ej2N2D9tjk1sB80AYZ3UN4NU60BoR5pvhDhX8fAY3lGLQqbF59\njoaZ97KMcRl83TkhY/K2r5U7XZr5AIuOe2evgArxEdZW0ohNdkajqo78NmCa\nV6FKY/gIYnfUfRj1Xi6y06iVsNzhbceB5VAKuu5BM9HLRDjpDtOqyCVTDdox\nVd4BCRA5BB1xAcUBPdge4D0xbuK0r3uJTPAee5ZUfk0/SSuKYjyg9V1WPkEn\nzizyBrg5C1BVgFa4wYBLUS1VfbxcNHww1+U3u9JxmlQiISFgMcgTHBnGUzfc\n/TLkc8yKtDdzKYtXEYiRqqxCMo6632FMMOmfBhB8/DVMauI1RSMLYvEpcGKn\nlgpHrPOnlt/wBzHwwATMx+rcMvK6kh2ioq+aoeXK7DoKy0/fXosw0asRcC89\n6UZ9\r\n=czVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/theme":"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/line-ripple_11.0.0-canary.ab99b8064.0_1618324969556_0.5145183170474825","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/line-ripple","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2aa01d51e35f108b37f7cdc4ca364b484eda3cba","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.8f0a11e32.0.tgz","fileCount":34,"integrity":"sha512-hh9yEi9ZvIWvdNlAF0PckpKIk9GrQpWWWBCgbFOhf5Ca8/D+ZFXRhbkLO1h39GBrbicbVjnfbI52fxSGbZh9Kg==","signatures":[{"sig":"MEUCIFp7966yRjHjyU8iIbXRxSwk+IjE4Od4r5SK8nVF+GrsAiEAgtg5JFWhLQQm4u26xnla1FA/RG03OjXjcav9IcB+m0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0pTCRA9TVsSAnZWagAAVhsP/14fTW4z4Q1G4DNomkhw\nqFfFhFcUiaYRnMEhYAtpZ5wcOV5olOYyKy/mxHLxz63+hhIZ5/BRzmHrY9xt\naqQRb4jzjF+BtkVCo1Kjrfgtr+K+OkqZCooj9KllmyY6Q84mavZ/t6Hq1eAD\ngls991nYrTgOxWWmTXm06PmwF0DOYrvuh4c88ZfECR8aTCfTfT9ku1tQ1Nye\nr1s0X9NnF0jNpmtPr1ouclrFsN1xj+toZXR+0Jm4UmC4mLYzC2+pjtfkOi4f\nR+4PqxclGNCV52UKswkiDdp67OVfUYWaWo3jlcud/Py1FZGq/OgW5PSjcQj2\nwqx9RvGePuF6cYwGhzfLx5bqtAM9aEGcO+SZ/xrRHWWUUdpMxjPeOkDgUa0n\n9RlM0AUUosI/+NsJJDaHtJdDO5HjBndcxIfE8x83tQaFaOlgmWGEuD4OwuB+\nM8jt7An1ewlSEBC+v7nVrlZNYx/K8XfEdHK7Pz8Uak3x+Nzo8Bbvbi7KsgjD\nVAztf1NA7BgTub+YU7agysV4lb3iNwqQa7B7cOTBFRPlCudo4DtRRc5oPuKL\nmnNaNgGKiXeSmo2Ubz1S0vO+NVm/F0tnfKjhqCNd0488gsA9tyRxSfyfn7U+\nR/fdcJoXL2iaHj4fdtHiMpcygjQ293FH4o9pJrVpIduvfGNzw8bzfh5JxZfZ\nERau\r\n=/TBq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/theme":"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/line-ripple_11.0.0-canary.8f0a11e32.0_1618430547166_0.3290577982309262","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/line-ripple","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6e827c19ceadec5b376bbcbb6b68de770f52e6c4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":34,"integrity":"sha512-/I4b4BugPmLxUf7tO0A+T0AIfiRHchDtYI7CK1m5UbJZ/sXzG4xkUrVUxc/ZIWZQYIQa6CpmNlgMhDVBci2n6w==","signatures":[{"sig":"MEUCIHdekZDz29vUW46kd6czppuJo3mxRAuI42NYxtX8a/TfAiEAzHz8DLNf+x0cfgCVHTkxRk+PvSlcaFZbJDTQiPAGprI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeH/yCRA9TVsSAnZWagAAXpgP/iX7YTusZadajgHnWSjC\nzx/oVD+xnCXqKWa9des4wpE7ui2cyuKaF1EG9MC6uc+sEdGangZMA21EJMje\nUUNVTFWkLHjUgy/TGSTMuQVkHQIuetQkNEkBDEVrXjHd7/akJD4DyY38olo9\ndcPLWnThFeghOJaeDlRdqTKbQqsG5ebLLl+xXV5aZ69l3agGKYcIP69swuuS\niSdoIdv0JZIWLZTXrf5FH2zvBL65B0ZjqC1qcnEVRa6LBXMf9rLkzZMJZ9Zz\nwPW/l2vMWx6Jcx5j4GrBMxT8LQjGEFl0bT7DoH8ivOZ10jqCqyoQBxcR2C2h\nTfmEgrKxYmgr03V5/U+CqRILo2lmutd30dRzpbVHp6+I8+Ovfhnz99lhcSTX\nNM7+Z48NGpTqci7YtVIGGqPPEtevSYBruCW4u0ADrz3bT872zhYHJN2iK+Ek\nY5Iu52HWdYM4a7sagRGNINfDCLGUXR9472EYCv5NGVrncQz8mL6cMooX9l2d\n7OGgCMlFDXAUvJqW/Ie/jazFhSeenT8QIfPKini9Uk8NvyjgCvulHeT+Zo5A\nrNHhwrw92837x9LMtXsYNmT8eXnqOKW40CiZXBwx+oslSaHtHgnWrva0OPCa\nwyTnKO7iM+Q57RCDCbVkp2CDpeS99nFCrRm0kXtaHOByOPgjfHpbxas8txEQ\nm84e\r\n=h2zL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/theme":"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/line-ripple_11.0.0-canary.f5c6db8fc.0_1618509809570_0.94979328860469","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/line-ripple","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6bf77b40401c167fbf1004c5f24bf0243006aab0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.3793a3143.0.tgz","fileCount":34,"integrity":"sha512-n/d+lPizj1iauzWFcY4Lmgop20as8pstz61saW6JXN4xoxXTq+5IvWzIr6kaBhMgBQR4hqSLN06OdVroVPyfCA==","signatures":[{"sig":"MEUCIQCaGJSj+9eP1nXrOZsEG0tFx5YRgkN9L6BnGtGjJL+t8QIgOhJlbkYcb+LXeMXBm1tJAH+TtlMuU0W3dYxkucfnJQs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIZOCRA9TVsSAnZWagAAUboP/3wXQu6OiWYz+kzXg9wa\nzuk2JBpEQ69eWcela6cu95uTYwDnF6t3AWilPH4A3CxxnF+OsmQJk/MJzeYD\nb97jXBm3MJa2J2Jx9HpXS/jS6ynrY2CI2CHsGo9UT2kTSkFQ1O04JhFT5luO\nwoqcJZ8D+R2917AJ7W/nkm6bywSZuOy9i/naYxk9WJjmZkwt/djHXT4Qn2zC\ndoQUJZFW6Bz6IzbxL5TolnnSP6NcCZ4GP/Qy3oXp/o9YnKno4ex8DzXf9609\niBjshQuIAws68EFUEGcDTRwHENhwTWQoLYLySBz5LA8r+deYFllD+EkIy+vf\nBsk5A/f61Q0xWhls3iddJLAVEzKT6PJB6tR+GroWnaEj/Z9P+c33RQabuGUp\nAXIgFUL1D8QNCl8HT1foFHImZsOkZwahSry7faZpIWq47dE57ajy7pP5+vgB\nOyrvFWUQ2eqyg345rjkKQQN5x1u5kP6pS2XLdpkq9VNYf7HIPjNYUxH3q/DZ\nYc2BJwMohcrCyhIKrSRHJuG56T4XfgcdNhcP5koAF6JFFtLfOBA2V8qsjVzB\n+fgrDbA0lsiajZmoka3hLS3j4y6MFX+MnpqBJcYrtCh3fXO+k8QZWKPlN+ED\n1BRNa1VP2eOUIA3o/WjCq4fVuMc5wwErSuojewv8k2zuUIQ6ZxCUZ0bUSLuc\n3qp7\r\n=0vg4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.3793a3143.0","@material/theme":"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/line-ripple_11.0.0-canary.3793a3143.0_1618511437806_0.6003145673793624","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/line-ripple","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"146179f7c3e15dea14c0fed228c524451eb453c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0-canary.bc104bae7.0.tgz","fileCount":34,"integrity":"sha512-JWXvOdElPl8n3F/heKHaGuySb1iO51i3O+jsDM/IjW5k3tGyQzXcLHW4V1TpxoasAbWkx7m5oSP7JlT7JmmXHA==","signatures":[{"sig":"MEUCIF6SeAyvDYviAq1jDpkkHKCXEK+p3gBdbV+HHMRhnyImAiEAy7qtkGXUE7jEbUjWq0kf/iTQM/wdA0scvIJBHubOdNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJfeCRA9TVsSAnZWagAABdsQAIB2J+UxjkSbJ1RzPCsS\nJ5rlzLxcFtvhRRcGbe1AZy5eT38YGFzKQXXG5XHWv4RfJ05VwUKszS5QBzyP\ncgquH0byZ5Bs15E5D7sfp3whu87wMYKmSZeS5R1Tqjpbn7LYJpPr6RyT0nyD\nDW6JwqUOKe8FC4Xyg9JnjZQXChd0gogT5sOKhK77uCdwbQytLsRc+DpPLxO9\no+3RHfUUaNA8gCKfZbc6DvOcvdyXWwYij5I51c52rfOMzdsPcN5sU4hMd9CU\nFGjes7NDvjedEKSLZm2leEcRSX0dUK/v18mbU4C6OzL7LDbNfZejJ5tS9eYz\nEUWtluSWowtSQWLBi6Z0BVIlKx83KAdZtOOqYGwXt5vHDBYqRi9LDy98dEIq\n3YNq93wgdns+bxl8ar0aesg9gFj46CtT/N4Y9nBEHaGa3OuAqtZupI2/vp8K\nPCKUgBlCM/K+dCDb0nI2EX/zfw5SBh+oWKJLZCu7/y2T/Nz8PpF2N9i77ATw\nSNIaq38Bo8kYyYY5SYdlZNmYPpbfWPfA7hTKTY/VU4vRrOvtU3GBPyfCtE/m\ncEUQYlUoSFfLjVMwfYXgga8PMBTQ5lUbKF4i8Z8bhZVTCeDCmrzzBp0eptkY\nruyn3fYUCqXCKsDRFcIEUw9ynZcFme6muimAr0znMh0niXwl60Zb0Jh8/IFm\n97wp\r\n=fgqL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/theme":"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/line-ripple_11.0.0-canary.bc104bae7.0_1618515934236_0.32137891151762243","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/line-ripple","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf0717fffa3e2ab15129025d7b84f93dc2d5a284","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.3f342c3f4.0.tgz","fileCount":34,"integrity":"sha512-gMQFY4fJzlQzut7N0+RmDsL6MPeC3kb5QNWd8scgoNHZYoR/hThGtusE9uknueJgBnYCG8DzhbEW0PkCiCNjHg==","signatures":[{"sig":"MEUCIQDEsLNizv1dwZHcbGN0qs3PwC8XpnCOOrIYc9f3UVxvJgIgOVP2g6iJf/7GAuQucHvAMQNp3uVas79aqmwIMhXDRto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMP1CRA9TVsSAnZWagAAzvIP/1K0JB+HxZiiInB/+10U\n480zDt8Q3IAjAcjno36uS6bh9bPKB1lXTH+j2nar8HV3jjN1lJqDDThV7kCY\nmSFD+Wdtz2O/awaihq4JPnZ3rm4Fj2mxmIJtou6JG/eWaFFu3G3V2fbK+waB\nEbzY8uJNc/nANERTdgeHsKKMcbvp4naErkK5ky7Ap44oV0zk54xrtwq1FBHw\ncNCgaEeVjYDSuTgNm2P6dWNPNCZb0a4hwiaQe70KhkS8dI2i9jwV59nY0Sh4\nUknWB5lRHa+AcIxeV08RdDHJoiTnViMNbKZ1jQRwvPY5KtP9qCCr3lBybXGO\n94MwzZOP31kj1Ob0hpGIdizlmtO2hfE6Kzb5iIFTJiB/BLENwA0G609u3ju7\nOY7W3tVIKkndaOjPrudZr+PNRybq9VBvj66FqTWZfGCBi3oiobn5xewIKJbl\nHkdO5ZlwPfRD7lTkgrZ6Y7EHK1G9rhlk5aSfk/4v9HscGwTXhUMbLjybWZdt\nJ8aGi1HR6Ecq2/yqYBBVBVF0ocRmtvFIaXMwcincT4OyKE/njAiJHnwGKiGb\nJVcq9UaSHMv6ZDt1y/MtXO1dQ0BK5UWqtBgfM5u3EaEw2VjobTYcFdItpJ2+\nLXSXQwmdnkNaqYTaqz0Ay2zQHscO1DZVKQNaO4KBGlQ9fItwwVmsKFKLgTh7\nSE1T\r\n=yoYP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/theme":"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/line-ripple_12.0.0-canary.3f342c3f4.0_1618527221117_0.6354342390082042","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/line-ripple","version":"11.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b13557e620ad6c6a64221d675d18df7390a32e2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-11.0.0.tgz","fileCount":33,"integrity":"sha512-ws0p28hfG5P7RuCJZhHBDhPd/pYusszwRWMa1xkATxCjdCDc9hC9RIsUb6eIG9/iwpYnLNRvIoR5iF+01rVhow==","signatures":[{"sig":"MEQCIEy3g9xryms4auh8KT/RmqBmPq/+mfmIVnDb5BBPMwDGAiBZ8Oi3xvc3NUew4mJkcptH4enUn0oZ+s3nklkLBZKJtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMToCRA9TVsSAnZWagAAb5UP/30NaGWxjzrWS4kiyvJg\n1oTFUqEc1FeftVbWUL27h/ks5btSUG7pXtGZ2YquHudEBq39M395YRphpMC6\nNmMY2JnXXKS5RUvEY9Wz/76vSMXITBlQZr6j7VLdgwBQO9oDpPUidXB+fumE\nLEXGes6b2/xmojoVNUT3hMn7MY+or8RbQONwKzROwqaZScimVEXcVbAmPC+o\nDdeHljKm4eIbBY4AKTJ2JH4J8e9TV3pbfaJZDAn5EYMRTQwD8K2zz+aLUWkO\nLB9kc5roz25YXNX1RUjMWrPgZfRKRAVz46UBhbkPW9DOT8MVii/ZK/Zdlvdz\ny9RQIY5/DnG/agKjEOUvGIMa2eNGZ4JW0bzp2K1oTbru41nCtyC3KXhi7/EU\nN7OZpMCGgfh9yC7ag2I+4PYs77DwFBjnsONANeikmvRTHH8WiviIuZFKf4tF\nwKPwaierdwWAt03N1u46Gkc5KGC2Yvqr7F2NQGFALeiI5Y8TDIZqq04ck1IZ\nZALzs8aw8Dsq9CKr5RyWoa6+4v8Za+w7+muA4PNdq8eU1a/NvSvz6aAeGgsF\n1SnLMUERTODylFkV/QJ+37ZQsuIfgaPAFUsHOlpwRTZtO3grrb/6TuhP0g/l\n+VPd6N2F++XSqVJrPSyWBGkN04kR4bSG3RgIP1Vq1OoailAT6DXxXX5eHFiR\nCRmO\r\n=JKKL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^11.0.0","@material/theme":"^11.0.0","@material/animation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_11.0.0_1618527463851_0.6104537924323741","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/line-ripple","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"78220c7cbd4e643c26293420dffb036b033a5e5e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.2ebfc5374.0.tgz","fileCount":34,"integrity":"sha512-SyuskfrGG8uM/I7Ue0cFhnjp6TATdgrYUhftzYKQno7+Z4ZA1vHICNCD8nOBiBZKup+DM9PR9JvFmyrHEpzbCQ==","signatures":[{"sig":"MEQCIC5zcvwjBXhW7+fC4QmpO7j9qh5BdPfgeDQ+rMCta0tSAiAsAI61hYYRRgK88hcMw37EuWtV7XopeQPmiXai3YRlKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefclCRA9TVsSAnZWagAAcBgP/imBxGRQcXu5HVCD9bty\nNlSM5jBbuBpCxpWHMrhpqGYonaU6ijefaFLQA+gk74R3X9PF7QjP/3hlAuET\n6j2FosMg1nuJUAxfa+1HuRNFrkSJBHQNROzrCpppO2PVwoL54Mu22KXWcysn\nuL8Jbg1wdY/hel+YzLgRgzvdE+BihROvv6WSsDTjN02AV7RhXGPh2cqSBmxs\nK0n/Y5A0B99Dj+KIU7i4LSLdQ7QLjNTUSM/h47oHOLxvzLK2eU/bHbI/ezHf\nm7d22R8OrOnLfiNZmDeJjhMilwa4aKA0W70t24Z+kYl77MdFqpZJ9d1a7uwm\nNx1SZBzxwNiZxtAbms+u54Pj4//bxuEgXjlcPUZJbMpAY0DEvIWAEt2J/bnZ\nVbgqpqEAFPEZ6EL7hhk9w+eFZqKFkLpyqp/QsIzbCbY32WioW9aNSkbkKVpH\nsoElpvnhqdPFylfK4ahD0Fpup45ptu+iyyMu9/FzpsI95wN9h+q3mIY5UY4a\nhEz2Lv51tEno7uRDpuDAIk7XrNwJXCx7ZPiwd0qMRSRPPKRT9zcaN/cjHnsk\nJl1wpLLEkJgUHH9fZsmqjqOV8Tamn5D+mXjGeqqlwyb7dgs64Ts9VOxlNH6t\nth+7szftQHirA41fa5o7Eyv39AxGfXBT4zWJBpcwRfU5ySb7+WWPybhJDudJ\nznR2\r\n=nGZZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/theme":"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/line-ripple_12.0.0-canary.2ebfc5374.0_1618605861330_0.486284251296355","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2e55f65e261ee1db25065f26fc111a866f920f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5631828e1.0.tgz","fileCount":34,"integrity":"sha512-gRlVIoqrOk8yJ/7plaTJ1+vWIijSdGgvpr5sQ/LOjbSrp6DU0Lc26Qxsee5lxuQR3wcvbtPiZMc78/LTuFRjew==","signatures":[{"sig":"MEQCIFYuT/1oBZajP++UnEFDx/46ydcRA9OM5y43HREznvzSAiAVirnzJ9L4ceP/rJ0dMOaHYKjxeDqF+ZXF/8t/FqSeuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepJJCRA9TVsSAnZWagAA6GIP/2C2gnjsG4tE5xJpRGdK\nN9KTWi6V5fKdZD5MedpNi7qnkr/32kZhpZ/uUrcNK81DYjb7PZXubG30janc\nREcvN9KmoD17qfQiX+kqmzDLcWZvsEpTOQ8oks57BDbFkfH6tOKzSWQbx4uQ\n03WkfLwFe+7b6n8rzueckPmVKNgUWWf9nrxTbd6576vSPEe2V/7QknFI53qK\nlI+5M81m34H+BVCu4aARZTQqXEM0YFYK0pnmxoKH9spOa1N4JIZQu/b1yaJa\n8u+3ddKdWS/zOlwwpYY2rnMMOCLk3CTg1AN9olUhVCpJZo7h9X4mPlz5fcPs\nj3xAmajhe+AvCHKDYo8D3ZEEU7wygN0BzMh2OTYC87CPzBCZFzZ2q8XJKHDV\nZtk5Qqr7+6qP8qgi3qvbyWFf4c6pt3LxQCeEfxOQYfe+1szi+BBMDLLX9qsx\nWE/52LODVFE+4MThzYQ3ZOSS3L5Z6CIq+eHYWCkWCUWGhwNScbH/S8YdCeYh\nSwk8jvqS41MuSQHVvQJWXcH5+IPobx1zFA1l/yxOJt6oqB8PdlXylYu9JQ0e\nnyd1q9VgtyaE0/56pGlEd9oQLyL3PGHysaq/G7uOjY4M5yZa46d42mz5+Cwn\n5DGd/aZz/0W/keCRAAFmXoyH1xr5+loH1YGeeCIDv4LDlEPFeCFTrjYFKGhh\n/lPJ\r\n=3Nr0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/theme":"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/line-ripple_12.0.0-canary.5631828e1.0_1618645577373_0.3020337213605728","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9bf122a7b0b3a88e88c20bf9a8e0490c85b3db5e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.bd685395b.0.tgz","fileCount":34,"integrity":"sha512-HpugP8RksquzYvK/nGFLhyFrjMf+J/sBxYgt9T4AUvcoawM8a2aH4Jk4+C/I2JQUCKvJyWge0SQvXBiE9SJEOg==","signatures":[{"sig":"MEQCIBkiJ+AQhKWtbCsQPaXns+cf1c2It7NdAvYec2lSTKt8AiAkynR5F+zjBlCJ3A5lVR0LADIikyPZqJmWXJO3AhvlPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc6uCRA9TVsSAnZWagAAQNUQAIY4g66E0CDZiGoQbod+\nus1kRNctw3j/Vihgqau1rVvZK1wGpqLmMdOgGTu3Pq/5Hgs+lpT1hzcaPLuv\nttQrZz/LRU+k52vXPO4bddpy41ibBzUgwp+IwOvKt6AluXfWwJTwC1q72HuI\nprzMNPm51xWbnUt9pC7wuBGxQQUDLOETHa1/5NpDMREcQ7PSm2jplHLraW/D\nnydbNDAFR5CGnIxN5x0ixGBMuLpLz9txo5pSe1aiJ9HPyElEaEvMWhxuDwJc\nF4hwLzfxEclNObQbAvoGVVTwG2gNnXplvM7KiSojUvy4qAc5fWdotgDLFb0R\nA4vka9fAsds+hujmaRZSkiSi96gK5RDQz1Si5X/yW5ytY3qqiay85eAx58kl\nsgapiLC77HfjLKx2eCadlkIz32jkrDiK664oPrYZO0rTgXoclaLZOuEXjCcZ\nKb6BdcfrLmZmhsnBd6jSOwx0Vp19JKJl688DOTZdF3sTL3RsbOKusXLou3OS\nrjioxipJDJjGUvYZENH8IWKyPBC4srMkCpnjVIPeYKOc2XeiAuyVHAgU4czf\nxIilwS1csgiOI6E7cCW/x+2Z5L3l8h6tbu7qzIntPpe6UnHrFvIm9TJU/X2m\nd3f/bhvxJcP5Yf9PwzwtjrJv+TNSJlusGIkstetlz3q8vJlJoJRH+WjRFZfW\n22+K\r\n=M1Jx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.bd685395b.0","@material/theme":"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/line-ripple_12.0.0-canary.bd685395b.0_1618857645911_0.16923669667380214","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7eb2da93c1c77a51a11cf7af697ca177694b0b94","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b52196498.0.tgz","fileCount":34,"integrity":"sha512-mcrwrQX5m6GlffDSRcm1Rwy+NHXiXzi97LhC1RKklTOlO0Rdi1nOQSomjHR/qculldfqRTe40HuTmHPU122kvw==","signatures":[{"sig":"MEQCIGludDMy1X+6C2Laa/+BTYAsuXkrM3GhSmWR8BJEApxTAiAomO3Pivg639sKavkKdzwZFJqEu/k7KIg/9FrcYGWQaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeCfCRA9TVsSAnZWagAA5hgP/iCH9zV1Ez2RhTSwF3pc\nHBXwBdOhrg4ETO5vvi1TNSE0EFF7QA2b9gafA5t0GLCiWvuzAqBbpk0HTQMN\nXE7UKnxcB+c1ugXNQRNJoHYY87fToiB6Ug993GMH+2VOV3L9zMFF6x+pS2Al\nIU7EZhmgSpaeLeWe+wQBkQ+Euw9kZeJs/3x/UJUa8F89gEpkHfS1Mu3JnGbf\nG8VxzGBSZ9eBzPioes/6dO7WnjouQR28Wg0t992JL3Skm+YGf/fUbp2jVGyn\nRiBxkuCle786dFODweQmmAAgevJosZu/NXR6JKBiZQM/l3QFtiV172m+9Kce\ncQDKmudkbxKRdh2FMmQAKFzXkHY+cvKWVUSgSppazbtDkxAUcvP+//mLRLww\nXMDlR907rodWIIaaWAcX0adBYNb8Xo6xy4dIM2msm2ZpurpHVir17xr0YWnh\n8p0hYRhZXpz16qcCXedz0Cf8hHwstpAd7oKSyc9EXCkLrAbH0pzOn8zatsk5\nH15fNlgcivhbEsZCZlZ954s422X4U9QQhmYE4re60AxebpsaXL4vcy6Gkegb\nQ6NdF5vhpW4dlKKe3hLiXMCGU4FisVL17zBBe2P1C8eyhHXMdkj1KlPBFgPR\nyTtCzDLM2ls+p7x9PfpzUEFRKZJZ9n7qKUbqS+NgCLptCYr0g2okr6loLet5\n5nob\r\n=Qppd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b52196498.0","@material/theme":"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/line-ripple_12.0.0-canary.b52196498.0_1618862238825_0.8910054670957483","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"27747fd033a90d7ca4041b49151a89c8513e40c8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8ba3e298c.0.tgz","fileCount":34,"integrity":"sha512-b/dgVkm65jMArHZ9i2ihMl15SPLu4thIGUbmt+uGCB7xhq1tCdfj4gqmUi1a8abCbwArihFECPp/WiwVWxWf+g==","signatures":[{"sig":"MEYCIQDg1a3FAC7p3Xa5YMFNQJ2YCNkuGGXtN1541xQhTLL0vwIhAIGAtaiSLozbub7OJLy+2wItrpQCzsWNYclsQvvaVTBM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDG9CRA9TVsSAnZWagAAoCEP/R/YX/9HJhZtBHdiG0s3\ndHK1IVK03XXB7tIl/itPm+y9OXMIo3emYxN8gLjhFjnxrzjGENB2qwhRLjhi\nAI3kvy0bntArODur5KrjhA9IrmgsvI1nzBC/X0JkgNlD8cIN/hM5LeUA/6Hh\nR4E3fOkejMv9li9yOhwYvCml93h5PMNeC/IZ5G91dFWvClZj3wBggi4VxFRW\nat9rMzvGlkZy+LQ3fg6UaHhIFRTMGB9IKwcidFcfZM1O7MpHmDHl7RNpegvN\nHG3WoZozVZU2LaXpqrCMN93Fq6r7UzDUTC0TEppXwLOP8wpI00UL8c8qbv90\nU7hI5kv/h8oox/WYbdVTSQxdjwwX0oVKIU60WIPdDx1B1XHILEVAGs7L170k\nzWosVAT5RmxpC327heKclAyr8IRqQ8c6BOlvxIjPfcHw7U+Hppa0KPrhs61D\n90uLElqZAfjsUx3M94hMLR7eVVzSHlRVNXKiTwK2INtgFuMzRI52CKL97RsL\nGSVmitDWjVo2pitKy7CxXnZVAv7h9ZJUDHYMjEOrs2hDWvzrkOh5ENVcfHn1\nCF/BhfgXFG6/J27/XbYyCZwHO2b34kpM7Xx6M54SleETlnxlavmyhBntfdh6\nHw+duEjBEBUjgs/0fDXXx4VcVhBQgmMccdhtVRNq7QsPx4H/gA3vFhtr3I5I\ng32P\r\n=2Fef\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/theme":"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/line-ripple_12.0.0-canary.8ba3e298c.0_1619014076696_0.5777946359585358","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e4930bf9166ee2c6d23412943fe88d762dc22a90","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c629eab71.0.tgz","fileCount":34,"integrity":"sha512-KwDgBucl1lDAGG6GjvShkIhpnwj2rCk181Bv6xEHKH4Em2qdYSFQKhWrpbG8EXwQzVzBAQjaa75Ov5rxjIxasQ==","signatures":[{"sig":"MEYCIQDiYjWIkPbiyBgavedZW7+dIMmFaxlK21o/3w41G+mCeQIhANlhe5uSSGQaTmz81+UJA7YZMr0Ro7vQ8NSAYqnRueGX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggINxCRA9TVsSAnZWagAAI+QP/jI/p4+7BOar/aYbP61l\nd4jSmR6YSzS6xe4vLxv0S2Y2wojlOHUE307DnTL8+uHDtpPwX0W5YuWZkXk9\nR3vJ36UDm8hMJyTPAQJkD7a6HZUbD7ce6D8eiXYsL5zFBuAtVrkv+2Lp13t2\na0LdPZwL5AaxmmciFCIdTt0nQZHVdRdhUgq5+gKL7FZk5jhNw9rM1RUZyXTV\nnXsRfk/NpQr1dQMwFgkRAtL5/zcfSt3sXSOqYCMjpNzQl67GW0sums6q2a8p\nieRJqGVCkWDaPyuxvwv29qWY9E9PkSj1+6df6GiU2fPc4Bf7H3XXo0uTXe/x\nPhm1ZwwVShN/RcFUPmTOOEnCjGoYY7mxfV8T9PgIbuVWrwEugcTQ4xLipvP/\n1FK/Vrcqko/u4x+vqEIlkvWoz4wHL7bql6cGnU20ZJR2xKZjTiYmLr1MOpIz\navq9yWBRNqtvcrczTkhDJon69VFuO35JhVx0+Z26kgv9gkiXbZPuaOn8GUPI\n/DXSQI3gLzLJWXBwdUdKk5q+ZO6Q0ETZ70ZyAbhw+qSdnsi9gjDSMxrC3jFZ\nikAacEF28EPC1NZMZ+kHLIyrKsXQs0KPGHw6yk/6PC9bQSLfbpQPIxfe3SsU\n4XF2lD15iBEt1czGh0QRGYdV4qupK+kmnRkKHNx13JoBx/pO7M+9SVOjS1TJ\nkfER\r\n=o5Tc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c629eab71.0","@material/theme":"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/line-ripple_12.0.0-canary.c629eab71.0_1619034992996_0.3107263844091861","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7f2696dfc1966629da6c16a595ee2603270e5df5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8ace3b810.0.tgz","fileCount":34,"integrity":"sha512-kV84L93I7LfMDzDfKqsN4f6pt9CasJygHJuDIjPrBMTsB6B6SylJX77dw6wibK0GmoDaEL0LLcmvqIivkZEPZg==","signatures":[{"sig":"MEYCIQDLR+naajWE6T4oR35NJnZybX7KYi1JA72foGPmZ1zyqgIhAKJ2oVA/MtIqib1g//n7dIzHk1fTrlBoPbBNohix9K7R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIz9CRA9TVsSAnZWagAAOP4P+QG7HvlS86t8whGXXqE4\n6hoN0F/m3X1SkDs51vvoQkj/teyZcX0h5ArUizD93+9TLWVDG9XFvrTIKnUf\nVJdyW4QV9pav7J65BJXgNn03mFhxukMn+HggYxQDrAxe3vlq8ioo/5nqlVmx\n9kEtDAfF0fSFcJueM0iQTPZwBcfxRO2GMYh3Ll87Cx1fbXMt+f/AnmYLx0AA\nazP5qV99T5DdXmVxAUKSlIZ2JF0UR+Zt05C7t1K2GjiGW6gj4rY33gV4iZoF\nYZfayvM913EL4+uYHhwEO2QDFlzYAwrVkddK5FfxWrfwy1YD1cFRuil4dXEL\n1msWLfvx7p753Xl1tM69Y+OCi8scEkQtzq+t0+9PBG0YSkd7vUwNzeGPpjjP\nTFqDoaPCwlaKJOqoz4S8rhZKebWF2b/OVvx8AVVmJTfAsd1w5COnEOigwriK\ntIksa6Ljf6nxW8zviEpE5spnsNzyVv+zvhRUVlzeVEwp5TfMTgAxn0AcnAyK\n3CBcgHX7e7cIB6BKjRSeAuVr8hyjCCVFYhw9OEr5L4+IjEOiUayDNom4Ojz7\nPBDYBmlwfAFa0iIRVPtJEDNUAAeFPSN97Egjm+1D1mLadzjDTiYzW9Y4lLQ6\naUGulrgxbgr7rNoXIATOWBYxm0A1CesodBKYijMsG4wqdI7yz0yo3IN574ot\nCOoW\r\n=PZTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/theme":"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/line-ripple_12.0.0-canary.8ace3b810.0_1619037436886_0.2622021290832939","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fffb02fe3e34de6c1b925d233e7343b398317375","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.70beaf42d.0.tgz","fileCount":34,"integrity":"sha512-L6OV5EksMzwpPIfdH5jAmwOAPIoe/RfvD6CiG4CyFBlUa0TSrqn1KE2dy4c/3nnNQu6X66GAtu764qVXJ3Rwkg==","signatures":[{"sig":"MEUCIECsthue6wXWnlouy7Os2OPFtTA7wzHbGXTLDXYAddYIAiEAysTo012ctah3LBt8iHoegiIegMw64J92il0M5hwbPb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI+3CRA9TVsSAnZWagAAYVAQAJ0Z6qkxGNKcAbEyGOmL\np66vayNdKBy+yDNqauSWG6q+aKgjoOQkVyKGrt599DNWouAWNzxKnYUVK11p\nML1xR7h+T9xFQtk9SRhCFwPe3JmT0tvSqoqnrOVUq5ts+QtsKfU2B9smsEq+\n9z4L19Pzb3J++YqfrQIr0lF3QoZhwrf0GhR+tAebeZLJaqScKk3HZErJjOF1\nnlrbm10swJ2legtCtNJm2xRJ4Y3LEBrhV9jPQBFTHqa2OnTO24q/3Yborohu\n9TQvF160UvPvG9itbCDKQwg3BoSKIUxX8cybuECWxnkdM3zySt0pcKFovyax\n7/cRyTUTQRev0EgawIe0G+ZgYB9lSVKxcTaxSxMhjngb82oMwX1+argzVWCI\nRWLeMEMxUfywg4btnNCv2+Sh9xkUxl2GeODF34YOFMHUUqImOjM3UQysKbL8\nRdgKH509l482xuJir/3ElEgajpSgBUyt/6SCXaDhEgwkL5+uMQFuD4vrmWJB\nFL94vYHg4Ft2FYZ4obDkdV3CkicgL0PkIPRl3sJwWXIoJMFtbrhpTR05ZgZZ\niDdRugyfjtH5xuD9vRRrg3Y4ky2StEwi1y8EEwADQipeWKHx57vO6JZQZR0m\nmSTuerRdzop8JU4fkhe4RTi5ZJcU3cgGtvBWxQJcbgKV9R6TnGaeh1/HMjDB\nRd7f\r\n=AgR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/theme":"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/line-ripple_12.0.0-canary.70beaf42d.0_1619038134825_0.5862795601431083","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/line-ripple","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03ebf4b6a04823def02ad728a7e9bdb334ec8e5d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.cad489689.0.tgz","fileCount":34,"integrity":"sha512-dtOFzkSztGp4U9LVNV/TWq6SrKEH56YF5OjeVssA5II42rCTWbI3ILJVrLFULLlY0p7NOfLZjZsnDQZHDEVFrw==","signatures":[{"sig":"MEUCIQC0H7WbOanMY2a0PTVBb5JRaQYL5XmWPvzLsUg4N/bCRwIgYBiRv4+0+Bl3uch5KKfD4mizCWJV7HPcIBpuOgGMh9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggajzCRA9TVsSAnZWagAAL5QP/2VwgQHvADu1LvHku1f3\nMmhhmUTfR6CieUUf1UIX5Z5IY/IEkKN6onj2WYj/dcWXb/ENcSiWKRJOvddf\n+nxb6EyPTgRfhxGupt99pfcn9paZgJKdvxD7ZG6VN1aqp44HcDJ3b43gADH/\nfSWUwQ9uvFl0y4ike62jnBDZ8SPg719xA1oSoCDV3VdD8B9U2WMcRSvIbzsm\n5lCw7dcxjjkn0Ia9dBqu3jlXYAuF9aysPIvyt8bwQbbm3qAaY93PTIaTDdwc\nOtQELu3bRQOCnLsnW1947bjMNF9FAxAnOX8YMHDpt76AiDdYs96H5P1lw9ry\nT02oSQx/McdH0KksCKKov8XFSK4keqK9KXMNO0EM3e1/ODeSvMFlAjEaMWJX\nkc0Ybp0nuMpIW58asCeiYWbvAdf5IAgSAQUABaL1ojB/QLAs5RuCVs/VQANM\nqm/ENIxflb7mpmyxKoS/ftP7RDBosTPK3c6BXgf+eQ9YUa4e8LGNuFmFC6wG\nr/lDJzy1GLMvAO64AaoHHXTiCfVMdfmlP+YOUgvN/xIIJl8N8ZepV/3+qetC\n/5n/XAs1bmeNH1jp8HC7Eb5a/9rE++fBDhy2H31/k19UN+Vp1Q4CbfdOebrc\nbJ2HWqxEUWlHoB6rkdiufKwrO7+MW4tUciNbOnhojiHul/jUXJ2g6p2wA6h0\nxKQm\r\n=2aRN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cad489689.0","@material/theme":"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/line-ripple_12.0.0-canary.cad489689.0_1619110130968_0.395579287589505","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01730ead6856833f7497c422747fe181b224f61e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d928692b5.0.tgz","fileCount":34,"integrity":"sha512-2C+MFI8+XQoFTHtDtEBy8QxP8nozoHz1LOHpansn22Hd96WdHIjm8a9oQLeyltMnthexs7/r9PKNhdsfE43ATg==","signatures":[{"sig":"MEYCIQDP3cc/AolMdm8AZA2GsHVJRAliwIkdDBgV+6/PIIQvgQIhAJ4KDGkUlTrSsur6VTgWO+H0/Jq+EhIi6tt6QJnFwQs6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwT+CRA9TVsSAnZWagAAMjIP/3MOZRrH15YpfW3fiqRS\nl7HReECyGj7fn3fm3aVwbPygRtEUA+ivXOKGn7NLyBa7MplHEzSKWite8VQ8\nfCm7wzmBoz0PffNvAI8qIuw3mHljfPVnwJY2p2C+XKoxnZnfZt3x5PPdOa6h\nV2+hdgQ2lRdoxaMvUbPksE3pCoMPY4xDw4mZonPW2ee48cOE+T7THw3mruVD\npGrAcwJKIQ7TIKa9L2w95iXBfZh7WIQqigGGaDS0Kof+U/YQ3rOAsusYLRlJ\nlpMlGmjj8xBS0Nphi1yEV3NMi71/64OyVdcslcMLVu5v3/PRR2HDuX1x74+N\nPyyyQTeq+iNfI+5fapUXGYDNIoxN3RFrQc+Z9c8TJr/OR0BcqMo6+Goa4sVM\njFmWzavBdxJCQWxnT3J3rnsEq12sXteF3Q50rndyJ28oS8ID//VhSBJwJ8Nc\nm3wQbnXqPq9VD6GOoIk88SfVYhc8A0Ayy574h4Enr6vWubIonh9hRdojCXEs\naotmMmUrKuqty/z1Jfj1nOS5pd2jURkJCrWiJZA2CRwGUWE7jVgMcYlZ6D4G\nAvzvcBPbwQTMHT+xXJeQKpC2tmPFGFJtwxeWRQK4o8TJuU9qTfeYO1qwSGze\nTvyPfpMBqXf+hx5BiCarF83tZ1LsPQtn5idH2eJd3Y8jX9k4XLLMlQe6SGGL\nIYDA\r\n=Rhx0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d928692b5.0","@material/theme":"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/line-ripple_12.0.0-canary.d928692b5.0_1619199230106_0.9227780328882567","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8b8903725822452479e3bd328ea9cdf281dd869f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8f68de8f3.0.tgz","fileCount":34,"integrity":"sha512-kdihvHLkwv0PjpOycevbb233bu3MOvrdWagFUiL5LpbYlbNiaIaffaAS047zEFXhauOpQe+fbN2VmH5AXYkPiA==","signatures":[{"sig":"MEYCIQDi2T/6QU4GGecCGu9D43Ep0qR08W2C6uhtBLy0ICxeIQIhAJ089iCusuDwofc9zUkcRCU1tZDMGtOdH267NTrenGCz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw4SCRA9TVsSAnZWagAAcDwQAJ0GzIxvAiWIoGSUvwHY\nvnsT67gs4JJsSFT0yJzQ2+cYDfpVMzQDFfl9Sa4PzvrkpDuZgjgGicVozR/e\noxC3WxA02rWKDI8pvlausXz831Oc3TFvaiPDuaBEOxvZkOuol0t92ClJ4fQL\nbTo2G7Ixb62E8nx97H3JzBpWRpDz3TAJceAGiG7xIdxyON85g+o1iV/x2EA7\nCcX7mrNm8WnGI4xVZvRDAw+Wy1pff+xHKQZjDWvFTmmOgjV+/u8B9YB73+3R\nnfmveb0VIS42hm4yXxoAd4r+wEbYXJyFrv+ayt0A7h6OdwhEEMcwuVWSUAOG\nWAHB6tZIFhSoQuF0GmGXZ1jxYruuhtekCsaq3h6olf2DPiclJFyElwj9NHPe\nnucUy8tq3Nvehg+KOmgdbIwRazLeJPySB65B0HRAemQdM1+ZyAt7ef1Rm34z\nW9SuW+SQ2JLSVu6EF2dd/qAYcIP89lYHsFRGiFj2TGEteI/jHl9EwQm+WMvv\nPJ4RYADhzZVg4v1Y7F3r7ilQa2vFi3BAJiaqGVuwSd7NoiIg9g5vL/Vf5Prl\nR1CEC6NjHcfdRe3FlhJTa//Lgm3ciVrZxD9QODAJTiW7DYjb7kYQcsUWkpNw\np2vImDd5xWf+66FF0ORmrT4yEZOfgPB8xku5NUQITKeussP97VbN+x6R2H/8\nwNCf\r\n=pZIP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/theme":"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/line-ripple_12.0.0-canary.8f68de8f3.0_1619201553727_0.3165438392964959","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/line-ripple","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ebe4c84011ccfb3684d9ad9c68138c07c6dbc9b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.05753cf77.0.tgz","fileCount":34,"integrity":"sha512-LAt/GZU4mVv2qKnLoJHKxvNo2QGdIiBAqjrbUGVuNv3THBLfJxbAL9OZW/ktWjKbT+Crnd5n84OQ6vn9o8o5JQ==","signatures":[{"sig":"MEUCIQDYMFjRF/X/EcpPjI+GNkzLsZb1uooPYMa0DjgeMbHcwgIgLasYIz6ltY/uST/rUK4JwLJLRoj01570aJsSFx48AP8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1trCRA9TVsSAnZWagAAFekP+QC+g/JVHlKVuoPZu/U0\nil0qSCUwhOiIymIiUDlqQd4TWbuFtBJhXzXW3qXI5xRS2bFuZX6HtAhDaWhZ\nQJjMECzww/3iWddhTnlFoWJBfQ5nZyMJrVyC1OZyDD5AR2rbYO9xWwm3LmQa\nINf1dtaTnUnt6DfO7OMygiUqJOlCljmP1Rpdf5MPTUzYilTjO9dedr/kFX+p\ndx6Mnqyz29/ZbpmCFGhoKlJ53+lBBn+Ty50aq46/q+m/SXqBj1YF8lv+ITG5\nvOf0FKXHf+un+5MvpnKMAlb/vZ/06U0YMNxv8lX0U/KRCv/vzvqI4RoCSI9Y\nQJrCvpkwEzorqLWhgCqTKJwd0Ur5VXrHud56tcVOvrQdJUcoRQDqJYUYeJoY\ng2LuE1MTn9e8N7lZJWZUHCvVSt/+yEBT+vKRpja9sS+WWzjZREZFABaQhn64\nEcbUCJ0E/qphY1VznQeokr8nccSEnc93LCLaFvPsUck3WWy4AjtvWPuI9hzx\nlWt4RYH1qg7H+2OuhtxdDgJdKReJophuqNblO+ciX95wDFTrNWc6HRqZjFyP\nh+No+bQBlpc8d3BJvxmNCGqsDyG5Y62m4raHd1y3fM6uKOl912eWNyQhfH+R\nkYZgUdPiLZdqFx5zm2Z25F1oor/jdQ9pVtCc8BKoqiPEILwCVMPraddoQH7G\nXOC1\r\n=PGGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.05753cf77.0","@material/theme":"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/line-ripple_12.0.0-canary.05753cf77.0_1619221354895_0.22968991547762685","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c87257b646a676bfb717f567be0bdccc293c137b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ef43e6d96.0.tgz","fileCount":34,"integrity":"sha512-SfFpfj7DTPGgdeN5O/5GZL+iYWsfjQJVlEP/zRWPHn2ViLaVkWHsZF8aVkhrI+Fv3KmaTRS1wwtPRdmtO5SfRA==","signatures":[{"sig":"MEQCIGoXo4tACtrAFov613nTCD5wPsMOgPBRzQp6MbQs642sAiBUKnUpN9RfdUH+v0KrNSjnSSPueQsWrVXy86RuIVKhiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1zmCRA9TVsSAnZWagAAbKQP/itKR4XL5qAV5EicRHrD\nENv+isHv0Su1qnB6aCOiqhVmsTl6ppeTkW5ejYWGbaDkQ3coV/BVukS86nTj\nBEDRUzZDDO9VTfnrHAWQlYlr3ffSZrJ8P6SZAxAQnqueUMnlFG52Q2JdrhmC\nDqLm7mttEKrxW1HcBaYnhL08KOAExfjrajRb3DWnJXVAAZjShIA+ASVOlPVt\nwHkdK84gMGX2KswPdqqCtySNVMrgc8Hq+2gEQA157xJ8Y1bbOaeKD5IQccgi\n++JhcjP0WmAhCZP8dgyCiXBtUyJQvcmdyRfTFMo/n4dDRIYjAbYkIK6+a92Z\n+P66n0DsUd3pK4uaS8Qfy7lmp/cu1mn244/GwPmmEruUliSZVnUT4yECtk63\n0FAcsdQn9kGU5VZsniUWgIxUyq0jeEL3nwrkw2JP04LnVvobJ2Xe1Y/+FVC1\nC5iW431upUFh3RcXwQam5IXGX6dPd9B7YpmwKcvTB+R2t8ztHDrbgNEXcio9\nLqFOH2Lgbe8i9kTbFJGSfkiInFsbNUpH2aN/EX7kPwyxXmRCrivg9JSLQSbq\n5yFh1xsUf3nrmIKNAPWU/prlSTCopLWXm98DgWyUV3JLhwTacbpIvWGVXaS2\np2wnAb0PPpEayyjVD8absyvAoAMeX7MmDy5hOerxAz2WUrFKqvOqUSPPaCSV\nYuhV\r\n=aqpj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/theme":"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/line-ripple_12.0.0-canary.ef43e6d96.0_1619221733739_0.836784365319654","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/line-ripple","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"290d568b22669c3dcb94cebe08420cfccceab98c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.197f64fa2.0.tgz","fileCount":34,"integrity":"sha512-05pS9APqEeAP6BCgPZx+tAaSsyG0nMMTJfXcZKVtGTc/GGR2bQK1vhFikcQqDHthxH+5rgYYXzyMMtpilvQIRQ==","signatures":[{"sig":"MEQCIBmihAINLN7oUMM6NO+Hu5oOvSNZaoyJdZ12byf19qwpAiAL2gySZiFwnA6O/WiX0t0BkPr+6XzFBdJqzfraCX2e6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvOwCRA9TVsSAnZWagAASj8P/2gjVd7JsMB7DAUTIkAe\nlszJ9gMXCZ2o9aRgFjmMa6wFF+Wp++7hBuLX1FsH7XgHBzT9fTOrneOPP9I2\ny5/kd3ZtDO7hEjIC2dlZvDO1Y6FgYQXtUEZ0gEjJDPTyNS3cxFW/4RbBrOzI\n8fwYeruYFwCmdKWIoSwHhMRxGb5LDYOT4GY4d3fgUB1vwKjPwdmzz84c3gZC\nLHI/wmVC3r6ZMsb+7oSR++tBbsTK2d9pVkEI2aN36Hi6cUZkAZOU8it9YKJT\nFiAKtreVZ7P+Go6+p/xSyR74KSSagf/05DvgTgTlS9cmIzsUuRLIcU4jRP5R\nlG4//LZXYhNJAWWMIlj0p6MVmSg3CprkJMMLV4rnNKP82rl771Eqtka/+84P\nF9woUtWXktZyQy2T+cmVlDrn+pegkME/pbs53NPL79QvPYBbe7XONCp55m9E\ndhvKTM7NKb+iUQpfXM0rWzqfUCCEnZ0qh6N5PjmeJBjNrLjtfNZa0apy4H21\nzxaX8BeWC6Sy8GasARwH0UpcQjq/idsA83hQI9moPIeRQd2C8ZfKwfJ7DZFI\nI/gyZmfHJA44f3k69COrPzMceP2b49V7nz+Px5yy6Yb9Oqbm4G+lyWLHmvlG\nGAKpk1/daD2At/IoaV7KI3nCzIeZwS2K9EIfYPb10QatnhGBLjfXywJWDIzs\n6lRY\r\n=xJ30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/theme":"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/line-ripple_12.0.0-canary.197f64fa2.0_1619456943707_0.49192955998891263","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/line-ripple","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c82dfc754c350ac483fe83863c41b3ed8fa184e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":34,"integrity":"sha512-fvTzOYvOnKH49ahgZGB9/KxFHrLe6CosltpULeMOxG3dS5ZBTIOff1e9dvcQnQPu4RVNcTfn3hwoQS46yNxXyA==","signatures":[{"sig":"MEUCIQDSPG4xoUEjxHwVURzNyi3azAcE/rFXNn7cLUmYMssijAIgLgEsJvo+irB1H3czq+EAoZKmIKAnHDp6RIG6ckazDqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2aVCRA9TVsSAnZWagAA2T8P/2lAdsi53D7gKc0A6x+5\n220mAE8g5bt4QqQM5szgcLNrG95wFhc4k6JZ8hyvHgBYbZDfSuahK/eZS+rT\nELq+57N/7qBJIDo8gIBUjATZMRhafGNOj7dzbda4ro0v7bD469+vJr3+cxiW\nN4rJ+xuuwjcdeAawEkGSRuapjC0sXECok8HkgXm9pZqxvDDOiWiG8/XRMjsq\n30ipxX3+fJMLXJ9I8X2XCvctTfl6Tn+IDGbRnx+E9VoTPaULX4ZT0OyiiSuZ\na/iboS758C2SIzX9JQbAiTTBHuPqOYrGqU0WgnI7370h4tnnAzdlAKe07ZU+\ngEOIIdB4hOyciQpWhvcStPxeTwYaR792mpBaApfsFE5+2ivfVTiPcDvOkh4p\nwqDbx+T7aRhMxk/N86hDlA4HCB+r3ngcQmA8yursnn/HlkUeZTWZ7IewTOmZ\njYbq8VqzqGA4s5CYDwVSVngxSPiU2qiodc3yT1pzjT1OTZDnDKkl+hIN0ajd\nQxkAXY5h1rKAdnhfmuJc1rNao0U9o9MIv21HEq7w7KRAla2cGN2ygOLjiY+T\nQDm0r/af5OxNaSpH9wFOMl+InrTzUlpxGAF6gWtmrMNYaSAURVLf/WSNbq4S\nvOLJEgRTzhKA0bCJepNvu4Vj7S2PjYS6KfGLmGLeP+4r0C5zHyw6u34h49Zi\nYm/D\r\n=DDU7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/theme":"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/line-ripple_12.0.0-canary.55ad2d7d8.0_1619486356982_0.00024124295155747433","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6e414508ea42622e2ef7cb38ba6c0cccc038d534","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ec4ac5234.0.tgz","fileCount":34,"integrity":"sha512-7KPck7HUCpaRk8V9dSk65rqBeG5dxycS1/sYwZJoJiQBk+wX2pfAhfEfYjr4uPuEA8C4trj7G767gdOcQUjfdA==","signatures":[{"sig":"MEQCIGTi2zL2ge9llieZLfk8Uz7H5JwjFrzIFAsR/0xhSxyoAiB96vMXThNaWK6gzTUcmDIYbdXwlyEr+qYYNAaP0CHKGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8QLCRA9TVsSAnZWagAAJ24P/0hpJUjL81tDbLpKMDaL\nfvKLV1kYH2sTK1dV2bXIyamgj+W8AHajwN/SrMsjvbpcQOfZseuHiyR2jpoQ\nWv7FTfMIMTGVrKGBIeWdWFXoShCsDIQ2X4dJl1Jv73sinZS0ECBcgmto4t2z\nigJk8KStZgBkIQXqY7vxDJE0JUmjmtTXyFkD4dd5S8+9VkC7gbP/5Noda9rp\nr8AbJGeIz+SN2MzKx9pb15cvmOeBRvXFHI8Mf+00VBXdNP6wXUe+vXBKzYUx\n/sNwt0t0XINXoXOArPbkjbswW6k81+6xSqYnN4fMw2nyi9whSfIOlZAvsv5W\n2e/QmpUU2UbOdSpbwvYEh8UGgwdXnLhAk4vTz4euGvSQBqH4sCULva37PNbd\nr6rZWhnhM7oM5dCsfTdKDdn/U6WcjP2e5FAxP1SStc9jxQ7M8+HY2cRniAU2\nAI9rOq34RqSkKLyRecvroTj5ysPHFGlhGRtrp3bFwWYNJ1v9T01zdyR/JvWq\n2qsEilGpUJx0lAkfGQPl0G/ty25zBZRNyrWJ0RIvNfBV1r+2knEwzh1pwTLU\nXd/4gW19RAcoTPQeNIT7Hnzyv0ebLnrwKXgNQ8DCPj46yhOEtRk0Feh7bjD9\nR1NySu7/M7OL2kMVazNRVgqcM5GCfQXZyyZO+uJ6oaKmEHbiZAjOD/cQUjsX\njuXW\r\n=xXQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/theme":"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/line-ripple_12.0.0-canary.ec4ac5234.0_1619510283303_0.6815620436289707","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f013211c3fe484522b86ef372534d0368bc58a7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b0579acdb.0.tgz","fileCount":34,"integrity":"sha512-qE5HyYuri6xbXyy7ApoRquzFWgp3Cwzyen82I9v38RlSEYW9nnpyQeb07BvOuuPyvLgFclwRs7BzOIkQBgLFFQ==","signatures":[{"sig":"MEUCIHQKuns/2IjxXaE/IUrzDk12/DZmoQh67DtJTxzbo2oBAiEAnWu+vXSYK6OBJRQLLHS05bRKdyQ3ygFEJGlwHKukrPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8zeCRA9TVsSAnZWagAAJMQP/3aimadAwTShXAVG4r7j\nueXE3zmisJtr95LwpruVdRBOLIag/jkiVbAE+zf+bliCfV8xA/BJekPOx04w\ngxJjl+P4f0VGDjPcXqsDdzWpIoDCvmQf9zhvy1FqavS4tNwNuObs5RkbPc3/\n6gbSgZKZF7c3rpkvm/CpiD9wB6BJNpoe7F37OYjthLTgA//IWXLJreNTuBmw\nkxFjsfrBYjHYYzzgrgTKAUiDFOTV8sQUl9LXmf13DBuff6QDi6pTu2Mg1FBs\napSNDD+8ScB65WfKAuCAY047nvj8nh4ijOiMOtpY+iDrqOGPEvKCuWfFfKJe\ndvChyv1gADBObfnbtddtFtMCeJJ+JoHXrzx4HKMR/AiduFVVy54o1lyEQheO\nXX1pBOOkYTBvy7vzzPEkEKyNv02ClbzFFehWLVGYAcSIjwOUBGDJdmD9JrcD\n+6WY7E/SsubgmlYH8ky2ozewZ4M9XPUu7RnMoWT7iou1T6aAc6DwAMsbLglI\nVW8ySg345oV1zNcYTVRwgUHKbe0iYic12uHGhETWDO78h8Daz1pt19tFT9bc\nX/BUfiYcXCwS19cVqMqf3Mb/WpBmfbtPudhFuKkc8ce8z3ynWkU0FVGaF2wI\nq3W/S9AzW3lkOnONg6U6r8kEpsWWutA5x2HFLSLejIL0xPBy8lYNclbEXcLL\nOdSJ\r\n=QyHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/theme":"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/line-ripple_12.0.0-canary.b0579acdb.0_1619512541948_0.8792073245649126","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/line-ripple","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"16c1289e0cb795ee2163b1ec9d9ea2ffbdc622ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":34,"integrity":"sha512-9H1WRlC/7KovwAXI/du8MgSk6mCYebOEvMSYBv/hy+D85nPDgBydoc0+kQ7Xd6S1RUe7+0YgiB69TZMpLGuu7Q==","signatures":[{"sig":"MEYCIQDwHFLXDNGMgLcGs3m9bQAVk5bimmMUC24QRYPhZ6infwIhANsGc7Mp5UyJEpUO3TiCg3czv4Ls3u/gMAHbGcskzuCE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHqmCRA9TVsSAnZWagAAy9oQAIy6daZ7YFQ9doPL0pIt\nXTM09B/gI4U9tU4g9RgTPQ4g5ACe556Qeo1ojujGJfv+FCCL6Cu8pSEXiTJA\nCPMLsxQ2CM5haD+0WE7lNCvi0R0I9coDKl6S0yZ4rLQvtAYRRzS2+iLsPe3J\n+DXSUNHWSrzLTaVDuh8G9BP9UFU4JRwkvWYAwwubdy6rf9mgJ+flwp9DqJ44\nV6RzGEV3loBo9xmNJKR25ecYcazRADjBvdS/JVEEVoTCkJHT113qQRNw/fpO\nwtjC7dE9ob2MgJftVi0hOPc/Q4zwFftFH0iQeON9o05fZnLql2F3EagZAqia\nUeor2ERleerpv9DOC6taeEUeiE0ADdQ4/GteOovccUzumOWJhrfKJKvG9GJM\nv8qu5Fbpy9c/tVlVFjqcWsLF9jygZIjv65LgsYW3G0611GfuqUWoEBd7W87x\nrFdUsVuabKAgtTW9JuSj1RyR6dpc3CSG42MkUKSttyAS8jNQw6Y1q2Nz6BGI\nt/gUUOPkCfvMxe85oymBdS5zaw75vWmNzi1gCpdSTYE8WZLGmV3tMXypfOgg\n0mCE4LW/sS9zpI6XytRA1zLNVO+EgqezDTJo0r82zaskhGqRN4QKHxPmedGz\nQy3Ey2WV2ucIv92icT52gRqB9Yp7NfZdPa4U6NdiRgV0fOL6pTw3o9jXesM3\nPXPC\r\n=QKJP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/theme":"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/line-ripple_12.0.0-canary.81e2d4ff3.0_1619557029946_0.5652052752121897","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1634ba7d203b7a41d1bbef953aab1213b24b51f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c8edee52c.0.tgz","fileCount":34,"integrity":"sha512-YSwyeEXTyueYD1FZfY3nLxDhSc1lvl1oXU2LeJE8DUKrRGruCtJQAPUkVMULJc6l9BmJK+K+NmnxJD1g+z/aPg==","signatures":[{"sig":"MEYCIQCiZKHgkdOFDeqXrmRF8VfDbe0U13kKYG1mrG79+pO5pQIhAPxKBS8WF6cJHA2zqi9V4Y2G/RTxzX/QjXvOYq7abdPk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIX2CRA9TVsSAnZWagAAlFsP/jMRQXvvfkdJBcwHpU/w\nYOP7wSfEcwd0hhwHL+nK1GlMTkSLBgYcQ3LMwNwsapdNGYOYHi7Waii/tKLn\n81xsPpeUXceFnjtz8DTHGXhqGsD39rQc98e63umQBDSsRJOfnrXxWgKWT35f\nVIkZp9DnoKLSBZf59AGp37Abyw619LwusN6yRsw5/6Vfj83QG4VR4paLFZ4z\nufdr1r/jyjFyyzjQ+iqL8lC/6PP+IhngaV7fhkIN3yUTJeIO2YGr2O9Q7pp4\nDmzhCXKmnRcKoCZrJEyBrrGzZwhekcJaTVaENADh7mKL+dSgbg8jw40IW+oX\nafFnyCgl5qdX5E1AN+NrKbrnD9cZNmBBNcD5NwwFerVdhCxQv+oDKifdyn0J\nTjvQ3TjLHfIRCTiPN252wUQOLbVdncDdRZU1pawfW9NjTsU9T75cPWoklmVh\n/qpSRzmrKZESze99tXEQ1eUiBtp8EwbiKiOWqpENGBzLs/0/yaDLQJVo0Vfl\nNJG6+P2UZo8VCuYsgTqoUqc8+YM7bhd9ZfbQBk9G2d4lqky741nSlZOWw1Zt\nqQSXYwoaEDyRur02ytHHvu77d9GMUh3jrwpRExRJ4MNmZyVOWkJfwffW4j64\nkozAJMwU/aPoR70U5uO50T/fdWTIDlY/0MXTKuZ7Bvbqgk07OcZELUsbYCTf\n0FwI\r\n=8KM4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/theme":"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/line-ripple_12.0.0-canary.c8edee52c.0_1619559926206_0.19430694660408898","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1a96f9b274d02a14442f4e8aa8a9376b72962fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f5b6110d6.0.tgz","fileCount":34,"integrity":"sha512-Sy2xSrSsV9wIilDWAU1lCHo3W71winFclX5J+NL8hrxbObHRaxdNh/FXkdvkW11HkOzgsfn7iKP44+xWaqHgkQ==","signatures":[{"sig":"MEUCIQDbiivJTt3L3rlN7PkF94E5A/tbXKRnBRoCG1ygxJoAiAIgK4Hz/5XuoWf2JmgcWWJbgxKCLZoXd8c3JSLe2uxKWi8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIr/CRA9TVsSAnZWagAAh5EQAJaQdIJ9ze+pdjUNhy9C\n1B6HAITS9L2MciVjJwIcEfndXphy7zoppWBj0QKzaDlNaSq394oEkHKQi26J\njvpJS1wVrWudH+q/BKgv55WtLphR8+UShROnz4AnLlaihAwwiN29zETqXTKx\nr3Hco97xXn4aBNbTFdf9RCCAo4hGYVE4VBksMUVVQrP0AzgsLx52f6rZg6Qe\n206TOU4fwg7Dn6PPTq+Ng9O/iOTNHKwbXpAv0jtjn2aB8G2ySYAWnziZL5lE\n39QJOCaSHZhk/+rpQXnLAqS2D4XWSleCdHe/FSRS31KyPq0CcVaEEaezfTTy\ntpt72rMXKmMfckSq1mQfjUjUekRR4O6BqqsHUG/NBGRWPCOMbleZOmX38I1q\nNgPt9X4ReLeVzW5xny4FOy/wPyy0+lFVm4iRVYUTFhELsM8+28BbMieAFyiM\n79+uldHzwiJr+2rIBcwrazktRsLicCrClnDbN7Jiy10XqtK4e89o3EXPTeYD\nPgGGdOIg5ow6h8KioB9SPtnNowspBTL9wjzaD3PzdU7yMV06AYD+ElTrfA/j\n335ClEK9UvPRXTwU6PDd1kz1OgcC5yUkOtCuY4MjhtinNAx4cHE61gBEMI5x\nTTlDDLyEjf3pFa62GwwOGJ65mhyZX6hzwFUDqoErFXYaMj4hth99EUzedPDD\nBpjh\r\n=f9VV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/theme":"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/line-ripple_12.0.0-canary.f5b6110d6.0_1619561215083_0.7929759543613422","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/line-ripple","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c918dc7f57654b7bb4e9d77feda53bc681120cd3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.cee9b9e22.0.tgz","fileCount":34,"integrity":"sha512-MeqteY17LU7hnG7PBHg++xqsLi3yaXNh/gaBVi35jdHRzS6jv+KAt1UbP6q7BWz8+dBYPM3nFxYh09GjCT95yg==","signatures":[{"sig":"MEQCIEzGATERrkkTmOsgTXNM6S5YQTd9PxMJoZE5lZxHBPXrAiBo/v45vwDptCu3DjyeINoOdqvXc3OuWZSs4C77cTPg2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKhfCRA9TVsSAnZWagAASu8P/0MTo7ctetesY/GkkukU\nbFiFJtTnvGxBtuwZuYc61UVLvRHGP1BGgeObRtEGwnF6uUsBzoRHr4TPfsR3\nEZ07FU/6RLMjIJZAKJFi0mgHRJCZzioolz68hZUS0az2KdQY2aF1sLYG0YgE\nKClXepvaL1WwSIXUiH7Sk2KDz1/JMrOPFAZvL2Jn74JQoisXJol7oIsn54FY\n056zJVidMplMyGWWq8LqDRyQS0GoWhfcUwhdj91c72W2xEOyK2AMJK/mgV6s\nq5RvIvbX3c/XzKUVeqlf0OcK1gDRUXJ1bpPKrq1O/XUfW1GTQnVNs7sdClKR\nK1bwWwsvgz/ZnyVflqgszEcQozGKlg+QxqRGpOlwbKKHhbMOOv35zCOenzgu\ncTmU8e8y6pp7LqV6cir37Mb7YpFfZB92CqznhkmRh0kL8B+HqTPw26qCR2Eh\n+S56X7qoGiNpLP3X+4g0+gzt84ecTo5hgE/1SlUAut5jr02xwXuyk2matlX/\nBK2RUqXPvzHYdn2rUqU02GJUk0oYozLcjddJQTekLk+MEL4L+2LA1yBN6eVB\nM+AKEjrRrG+c+u6tzkIQsm7U7sfLVn0gmMCv6ps7kWErsFmq1k4aq3E8JXrh\nYHa+a8Ab/Fd1JFBjE/ZwPrH+dw5DbG82a0adwOLuR24WuoWGGS266ec1IleX\n+nxU\r\n=0PsY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/theme":"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/line-ripple_12.0.0-canary.cee9b9e22.0_1619568734639_0.5118068401377245","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/line-ripple","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"66298e2ffb74336cacbe2f558e136e0a18909da6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.96e83fca7.0.tgz","fileCount":34,"integrity":"sha512-zewN1GmC35Tbpv2Pa+AboU39L2tpq0RDicEcoxLP6UkLgadL7H+yD6IPAGhg1aWefyVhZOWJeFsE0gLpUkCzqA==","signatures":[{"sig":"MEUCIQDeHTCkUYrNu3TeKwtpXYo8ihwx/+lWu9f6jRQVXUeoQgIgHA23i5vmFT/FmFCseayAgkqUZhkYDpfak08T3CWm81c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiMy6CRA9TVsSAnZWagAAL0MQAJ20ZzkvdZcSOdvuqndj\nHZgbx3Vt8HGWPHylmLDiUfg2uanYcwLmtl6+pkPDFfsVPplXj/4ecoZBm7bw\ngcWcz9OBi9mSJdxkkbgs6cZrW3cxOvxZtDlgximZGEKvhvrlwpT8fTA4ny9P\n4BKibvgC+sCANHN7PYM6VpZSsvXSTrBpGOKwcSy2+QR2BaBY5F4pD0Zr93YA\nJVZcle+Kwgxh/z0lLyZNZ1P6U/WHMXvlDXjqJlX8ROoSBES1zZjlpzjrkD8Z\nai+Ba4cH31LAfVdd0b+eTYH0rj+UBgH2FmXk8R6nNk953JSjXJI6f79YjbV4\nCxtQ3gjnBaLX63j4YKc3aCB/RqkeEbSWX7Av830vBesnITQRPX2qTpUCek+9\nrfZilkW+VOkEGZnAo/r2TuU8FobhPQo+VXMj8qmHSYOzHCJRJV+Jxz+MA3Gd\nOFLksnF8Q8eLcqVIl4te9c2N9oc3cu1mKWP7nVtQNu14SFBtSLer7d4vuHGh\nSl7oHt0O2gIPUrvhM8Dq6y4xx8disd6FZ4zND86l1FBh59esF4JIhJ3DXY2V\npL1rH6aRNlIOQrSF6UOi8ZGSkZUnkuDd5V4ouQQ9Umkmdq34G/580lqDNWrk\n+TLZpIN/WIAj/l9tu6bvZLUfbOwnbtijaMBaBF948Pc4f9+vZ9q6ZLIap9aQ\nQV1Y\r\n=wLNU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/theme":"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/line-ripple_12.0.0-canary.96e83fca7.0_1619578041349_0.36197099377287345","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"303285e9ed7640272f51d8d027703c86359ed5b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4c497bd19.0.tgz","fileCount":34,"integrity":"sha512-L13jGWUFneGS3jDsQpvA2r6KnIT0xyH/lZ55/TgxLMfEzU3b3RNq1lRobp/4bwTIew/TNyNH8bDyHd5LrSFe4A==","signatures":[{"sig":"MEQCIBdmSeA/8faOsc5QDRNmUT8nrHLK8B8UVPhbu5+4QyEdAiBYcTrhqwrVkje9sp6jHD0FD0qYnZgDsAQZzHeFImBqwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaD9CRA9TVsSAnZWagAANn4P/2dqZw04xh5v84yhWIY5\n2DFGHkmdoIUFN0aBYk1ezJuh/9kRZd1MLihSPdeySpf+4PBz0dcYjW0kOGf7\nu+Bv3+2k2RLG6veppfSdyvufFz0FEGqmeRGzPGqMMledYR/ostxkJXiqmovc\npLqBb1xXbcYH4anBBzi1xtftGuhOb2ZN/yicOZFyBrFNTdirZpOP0sUq4b5G\nWGnJOaGI5hmkLYjEpR2XtJchmj+R0b+sLY4M3SLd530yp8/0CKpvzXfWPcQK\nV5t0818UG1mzqsouKSkPzTsV/pppCuU+JulDYd0aQFzp6iREHbojiucGIqpd\nGmtKrYhTb+/VaqcFy1RWIx8vSjYN8W2OPm8qkXmIzN8IPDu3gmml3xXgm/py\n/DPoqT70PhDn1/AWSg5WBNWNRkeBROkvRUPhL7DvC3/Kdiv8HV1Vp7nRBIwV\n+lXfaE0nWCpBs9d9AAZmj37EFuYK3VKM3OfYV3qSbarthaEYOATgBMoul9KS\nO0qjE65GoMpat4Cx0F3igEkLnEdabQDfVFFWm6pDeUB4qs4GcicB/Z00Iuun\nC6aGHpevea1ihF9JmMfTg9mZPavjB1b/6J+IjWpfyWomH9on42gpqPvB9nW3\nkZZrdAeHVY3y1bGyenojKijfgK6n6xLRqLP4vdBFLJ3LLkOcrxwtaMIADzFj\nnMMz\r\n=WtDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/theme":"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/line-ripple_12.0.0-canary.4c497bd19.0_1619632380920_0.7639557007076778","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/line-ripple","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e38d9469f4f8a433d075827b9e68d52121c37423","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.105b15b96.0.tgz","fileCount":34,"integrity":"sha512-bvGoUI852pIlnZLqKQj/A1K58A1zZYCtAd9APRoRFCucfO9Mvt6WOO7j8eLB3eNmJLwB6+POnx65ewoKVfoz3Q==","signatures":[{"sig":"MEUCIE9xc5PbomMF5cB6hCtrSlw8LgbApDh3yY9b6/KrmzqjAiEAm5gV9r7J+DCbQ4nW1MY2TRCRj6yrrQnqFOpKWr+XUCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132142,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidcqCRA9TVsSAnZWagAAi6UQAIegg5ywuxhTLNiNlSwc\nbAGhycXh7VC9SXUQyy+PDdelGs9i56AliNBTQ6l5WpX/2yGgSivu0iAw3n23\nZn0aXmvEaTHIL10eYDVM9z5CQoSHfj1opbZfHks/n+zX+zK5ZdqI27e5Y4CG\nJ0A9AxSV1jFUOhBm1zR9h5GWqReoX59fuJCm5ltQAGUtgO4PjwIYkpAAzDjL\nC77ulCKJylxsmLPURlQ1mxvWWEvfDjksWrwZrWI7DPtxL22LBmnHmfV8hv8D\nl3IirfQVIK60DAvRJi325btg6ZXHyiFr0ruq2A3NVOWrv8jC4CG3ec1Mcxub\n4oz+5KZSS67+H30M519JStkwr1jGCSx2lkf9w3KfgIEKY7leJql9jyZ27fYv\nu6go4hx6/9bQpGUHw97HoOpjjKEWhK1AAJpk14Qyxi4G4sysAUU5whKO+iLA\nqSW0LAuvshbcCJqeJW32gP2SSul9p6Q0BL+jVN4qVqAev00JN8j5XxcluGsg\nkK5zJmZ1dCFb721S/kX4nkG5mEvLoc6tRPvvXlzASTb4qrsEQYRVQwkP5mVe\nJyWkJtPvdYTkGkSXWHbso5lOQ1LYDPm5bytlDhQXZQTOBvqjnrokjhWMuPxA\nZzM/djSwGw4o2dHw+Sx404cjj9F/eKwXu3lyf/aPPfMexl5BHtp05LOpvK/E\n76W2\r\n=BYNs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.105b15b96.0","@material/theme":"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/line-ripple_12.0.0-canary.105b15b96.0_1619646250484_0.26812131151328145","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/line-ripple","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"36128b2d636bc269c1f08dd51e3e11522e3deacd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.6e20259e3.0.tgz","fileCount":34,"integrity":"sha512-kWkbmJdgNJ3mTFlc3/85fyu9Yz58vGgyJvDXtDVKBJGDGf/qaH4zVJFjgcpli3Q2rMUTVMWAKVfvvB7xA9UdCw==","signatures":[{"sig":"MEQCIA18fJgPqXax9OIPAqg9xw6c09mJgSfQDspKceMUHO3OAiB+fHUgzxt42+mrHEf4DAU43M1cWUONjTZoNDcbgNzk0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidg8CRA9TVsSAnZWagAAg0MQAISbsTrTOvwgQZ/2Qdye\nC9xktFcDgpJkzUtLlSN+VsV7RLgrVA1996vArUXk84sWASkMZIAwgCKR9SRN\nkXxxUtPLfFV5AX2X4Y1BTHUWbDBN9JQSAZLLbH/bQF7A9y6QLhrifiTLgBBA\nugDMPJjoPPWEpXJSVRedXaF16IqYjYWsHYKRFF+mK98FEzzRmBmp+yyap7Pa\nuwDFxkOgsQJPpCBtBUD4aF1keIA0e+ZpzaIfNYWPn2GyxkW3raB7nbaukp6j\n1tJa6fB59SemGNCrTIezp2FlY99CSo9yj6+HI0dqeI6Fxw1AnXwwL8Wkfik8\natNn6kBYqd+Tb8fPYoIP6US3qrTzuoSQmfvRiJGO++J9dA2gI/QypLAbSGUd\nrJ4O2i5p/7KzZQ7MNaFW4mHWWt52VJQ8MnJKdhtYqxxL6slGC7652qfL7vkh\nr6mepegYgS9A0ynGFJ2jqfODdK46sUA5Kk0PaXQOiZy8QJZePWE6pu2+8O9A\npQUV4nsDhcTV0VZNzIa5tYFOOu6wEQy87yCpc4tx7HBo0ah7eB/eJhy8L2QJ\nn+JdJqYfVLPxa8fbPwwxnnDlthtW2GLvHyZ7hdAnpFKFYPU0z+fPgity9JQ6\nRUBz331t/cSQsHrL7ZlrExPUBoL904UERpYSQmiFSuJoOTQuCFjO3BW3kp4N\nLYxu\r\n=XCrt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/theme":"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/line-ripple_12.0.0-canary.6e20259e3.0_1619646523662_0.619671789231228","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/line-ripple","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"868b3b2fdfa8d53126c881224babc80e0b2c77e1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.0f79a5d74.0.tgz","fileCount":34,"integrity":"sha512-ANGvPrHs263J79BPE2nDL8bAqqKpd6+hOQ6UcHI3A685Bf9+YKuUVOZrRfHNRgksg2fYQ8v6pJXMPRZ2ZPbXhg==","signatures":[{"sig":"MEUCIQC6O9kD0V1OuCKQUGfpahqmf2AtAR7UPS+wZPFsj/EaAQIgVePOrjiXLoJNyi6IzIR55gexo+hoF6YF49y4uzxO1zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieTWCRA9TVsSAnZWagAAQQwP/R4/supfXuKrN48Mi26Z\nc8jccbtkXEKwLypQJKlRVfvlcOsAwgBESbg/rWufhF2SnNe0AYErwpslOo7o\nEw7LIErc5NLU18p66jRyr3F2+aayqaEYh0N3rxaCe2gMsOEiai2Aemjr6YMX\nEZ1yBgZdPky/SVe6bpozPkaEbVEacE+Na8TQt1wev4QYql6/PBE8x3Xge87N\nuP2cTMMm9xlORmaIca/pDnwYhrPhn0wRr8PIh73iL2FfHkJBetMu0OI9nUE3\nQq85E5caZajUGbDGdP4r5ZR0nU8iU3OQWO1RgEeEHcc6aqCcq0oRyM8s2+TQ\nYIa+FAyPvIlmJF0FwtxxOkuiA51OOIKrPE48e7Tm1N0gwsHYh3MqiWpNHs2v\n4uWnTXeZ79rNG3gq3ROME6yykzFOkCRwZ4lkNEOb9bxVR38Tx1d18aRjWQs6\nZE2mzn33tm7e3C6YEINz6n4X/O24uqsD1NDW0fb0j+AYI5R9RAWjjregfcp6\n7fwJk7Zzy0SwK25ojWKTXPGsmBSiSF1EcycfdbYasbGdkA+W6JADHgjJm9nZ\nYjQnDY13WWfGTaOsjFE3gA3yP15Sppn8PbKE7eCI0QWtCK/SMbJglfDCAog4\na6oalCTAZiAxd0pspqc4lhIp9dBZKVN7mNDj2q7QPhpc3urXNWocWt2U2WHL\nOEcC\r\n=feVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/theme":"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/line-ripple_12.0.0-canary.0f79a5d74.0_1619649749947_0.8432867735569116","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/line-ripple","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"153f5854f278df434e86bb37a97624d1ff4094e4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.84f3db9ed.0.tgz","fileCount":34,"integrity":"sha512-brWHQSQuO77r5ieluzmDMhJx+dOOmRzvx6N6EnCa32fyyfMxAR5wRfjB35tzFUykYJFZKmzQgysYCxfgkZqNOg==","signatures":[{"sig":"MEUCIQDCrbhTwFTle29Qqp1fBB+oH5xJ0XKcF5Nj3GADPx4gDgIgdOkXa0PQo8x+9VA2qx/pD1lHGLqu/V3NknrkBgpOEBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgir/sCRA9TVsSAnZWagAAf+oP/3KlnnU9rU9LvAq2uIOG\nAwFWa4M3nSOBg0M/rsiPaejzM6su90iv2nTc9i4I8SLprl5LzSB0Nb1GmkYY\nhXqGfuQP4pVegG6Uw0j1oCqfEAehVIK7GbkU+pHb0+mB8ml9NgIMtEBIEdUD\nRLq6G+4+WJo6mx8h4aTgiig1ArQHJojr5XVE29dYB5/bqfZ4TXAqkGxeMZSk\ntgVXKWbBZ9d68HsTNqhfigKLsh2KyAElobztjKg0wNdLFzXPGULR9v0YqB1W\nZW9BgUL1X/FphQm5UnsQ6HweLPKJH2Lq3jCp+FIaovnY3/nms0VsGFuF4OtX\n1bQ+hHCOC/pUIr7EaNGohTf9COMzshw9rojlui5n2H5fjgEggaal6MhvgxO7\nnSbsD62l/cLq3M4Iu5fWCuBigAfxg2A0mGYrxBuFTGlgz0rpqCtmyEJt5DeV\nqXkDn3NRU4Zj48zsjbaDenWaYb3cs3m9YWpIlOZQ5AlnHgXgq0zQkfmMHkuW\npb/IM1eoJj1NAz5pzHdctB31jDk2F+hc+jIZtwzPacFOafW7XL07uIm2D5vX\niVD5sxiJPSkv5JF633dEXU25ax3qCi1X8uF3NlEGacEtquMDrBH3YWztPV/d\n5xBuhG7rTWmeRtU5ovol/SsIYuTjR85iFVT7/ay3Jmfz0dyDhQgk0whD9Ogr\nag5X\r\n=+7tW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/theme":"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/line-ripple_12.0.0-canary.84f3db9ed.0_1619705836134_0.8665306625343463","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"836dd14c078868192b01d0d94fe2bd2c74011929","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8fc29273c.0.tgz","fileCount":34,"integrity":"sha512-5nqHL3xxfq6NO+QSKIUWEKJL5gAOVE9kUd/u9Rxc5dAkii+yJ40MfscV1IQ150RX54aSk7GE42Fq/pkd+28G2Q==","signatures":[{"sig":"MEUCIQCkGwk3GQHKQsUy1VkHUdELCl2900y32Ay9RR0kwADzSgIgItwzg6jeUj0YzTCzgCSu/B7Est0rdJzDykPvka/POYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyOvCRA9TVsSAnZWagAA0kYP/RP/9NEGYmoeT7MQGudX\nDRUuqMv7+symCRD5mS/8UWCa4jwOgWHozRRozoIQmrkoA81YFwzMfzreAJ/p\n2WSNg59PtgRE9oeSPGEeUT2w3J0Mj1AUQu8gTF3oda3nJPxaJe2g4+5vpuDZ\n8l6ZdyXvrL4Z2rTUEuEjSatApyGMYLAp9vFkAxfvCs8U4LJ6P+s4S1Ci1mTy\nTNyYpoJlQXxDB0g3pIXzC8lNZzy1fCXWBysOOulbEoR3Klzhy0NQa702ow5k\nda2IyMwHn88Y0FQQVxk901o7QnXzjO6ZDaTOFe23tTFOW0GU/0oSaIRHAV75\nvoQT4oGcVJaoYjQaHOk64lQsRz0IKmLuv1Ust4CrKj5KMnM60d6XIpsrJWZT\nfRDC++quZtvLic7WlCoEDBQb03SK/WUXSIpKknHEuCowT4QMqkN9htLOrVSV\nTWUyh3qlFjRVOP6s1Tsseu2Lhs+5c9DWNlccmwD7stu/D1Wz92xiIcXNvVAR\nf9FYWBNEKV4+L3ArkWTVQdU/AkaexCaaYQxbgACKIN6I/yiI67dKqe2zcGI0\nkgTnHTnzBP3XlEli7za2q3dF1nwpyTXGlI00yjLOtC8Hv27mJAf3VXNMiAFm\nbWyqGiyhyzjKUFkE1LLkyMbAhHIQtYa4iR8qVoWcjmMMJftWGi6PtiY6KBBV\nJ5Wa\r\n=5qqb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/theme":"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/line-ripple_12.0.0-canary.8fc29273c.0_1619731374819_0.09209599657102352","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0924914d1586bead5c009de9a05d468b92a53f8b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c50d20bab.0.tgz","fileCount":34,"integrity":"sha512-Plz5RZ+wMG/nClUhU8oEKU52g1x7RbgrguXSg/lgrLrBKzwp15S1hO8Gh5a/tCV87hy+H3KNue4uo/cqEgNq8w==","signatures":[{"sig":"MEYCIQDfnqV7oRSzDgyhSisr2xAyRHoLxRtPTGwffVhikyMj8gIhANjKBfAU/ryHeCRZT+syiG9jqQkaCA/6+WpR4VTchjrA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizrCCRA9TVsSAnZWagAAtZwP/3nOAl74PQgZdN1gL+7p\nklu1ZrJ/tdxrqymV+tXxU119SSpmOu7OlV0paZ+tP4tj87l6sXzdq0vIA2Xn\n+OXgBYEXCCVgOBSZzY/NbG1Umn9gnYz2mzOZ+kPlG9P4Dux2KRTGxBPqDc6X\nVm/UteSUDkTF/dUM5TTvG0SAFsUBltBkF4HlwDhNEBksCyHpwOuh7WdgzFhz\nt8v21lsiDo9sF9jJeM3oUWmXoCmNXsxmNxgQ6h2hodt5s5YtopfND/ZFtdhU\nlhuIEk7htOQPlgWOkzUaLSvMSj/LLZ/P5Yv0ppM6nqznCf5rxQvNUSlAg1VV\nMnkaIQIFP7/M97JcCqr/bjlwzH1KG8iKJop93tXN+LQJ4QHHAhRJRM6pmSrL\nblUzrCMfeO+AJtptvkTV4/bxF0vgBke5bGEu5AhiMO2krDRuzP+lueUtU9rT\n4PDViujKIDkVBR5BCUwBnnCOgB35lbh3XjNszp/W+aE2a3thg2G0xEgfTylw\nhpoIOTilEGwdchWQvVX0yXA+IGSPkHYquixEPpGjTyd92Gsz8LkemvCUbRvL\naKlv7jlcbf1hCAt8M3D87dTJInw5Mj52lCOy6MjT86sXHolqRYOHtXLiy3Fm\ntix0BDsj0dqANit0meKzKHvrcIfIssjHkJTOY70GKh3Tjv28PEWKuarDP+zL\n4A+i\r\n=Ww9j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/theme":"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/line-ripple_12.0.0-canary.c50d20bab.0_1619737282048_0.5381652294010162","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/line-ripple","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2f25d69965aa78d906cedda1936ab2343c519dbf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.474836ad0.0.tgz","fileCount":34,"integrity":"sha512-z7Ql3VXnMT17a4JNG7FYkCeCow35EHXVbDcjhaRSoHonsuA7rWJU08lzEKoLnJ/7WPSxdKg/c8cwTea0cprjKA==","signatures":[{"sig":"MEQCIFJZZlBLV2OWuimZrWKhmGtZGkGRbMMuMA4sCL/ZLYNRAiAISetqrznK4pvkoDm1H+xC9fbinp81TvjblVsiVMKHJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjMzoCRA9TVsSAnZWagAA1fYP/Rv0jdAkyGntWCOFzNmB\n2R6k7/Ngiw704N/2ZiBTcOYaOnI1mFOYbOxefP/yZ4vhxV0/6JH4p0rtHHvR\n+5Fk0a2L8P7K4jf2ct6jg8PhT/slXJOj5x05DW5OVJSGyAKg4ssx4YYZT/Eg\nsrsrniOGvImbN7B9/bnPrnDjEd8fERwjmGNeMFE4kn4YGxgNUSURNgdvGuSF\nzubF3NjBb8JuzOhOsZMAjkLxVyIH5su7ftp8mOXd5nUZ3l3z8f/dB0WkI/t9\nYjesTG0rJlnmfnqNt2JAJjKyC7u45rPrxC+YlreV8ibDJ8iXjqmea/hpKokG\nLNSxmleIcpqIgwx5uOlnwLynYtFcnhJsWYHGymN0ZZbh1aa7fIpb5kps6SAW\nWdS+c6oJzJAQ12gK2AM7SDmqsuxcSrfozD12qlXF125wQvkM78m+jMp+CdN+\nW7LGhJPCXmfhOHN8gS2ULOFGT1TQe+PNHDSP2e2h8r6rnYP5X72sy0VrWav2\nnGhHAa3Dwant+Dx+R6/nBwPtQB7FUlkJ0yo4TCT/CjoyUhShx01ay2yFTci8\nYk/bNTPKCGIpefUIm/pP0MeKagZ48/375BigcoY/93cSjoxN5ngdTNBaDeXY\nZeTO1jER+xs9Xs53Z0uAiS9UnuDjdSsJEHV+2rQZ6Iehl2uaaJkL17R/TH18\ntwY2\r\n=RHNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.474836ad0.0","@material/theme":"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/line-ripple_12.0.0-canary.474836ad0.0_1619840231621_0.6252929151875537","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b5f9bc630a7f5d7e120e97904c0beeb7fb72a97","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f5ad92287.0.tgz","fileCount":34,"integrity":"sha512-o0dcvIUag6cikrh4GdjspxLMlUFwXg4fwqvgoq+jlFKk0KCvtLcyy7QZ6QgRjnR/KnfpKRvVgMC5DmOXchvIDg==","signatures":[{"sig":"MEQCIG3BEBKxRVCOz2q2/ccFsqWpceR3l9ShuCnYE6UQoQd3AiBuVZ46fq2QD5yQB6uIsY3/LnspnS1KzmDa+Ssivtsd1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD87CRA9TVsSAnZWagAA+rQP/io9/WM1VPmDRFNC+qaM\nZpZdsenk5OpX3BrDeYFITHR1I5qWeiUIgDJpYpsDKDL5ZvpB98iLWzhrbwV8\nYjeBflUtYUVQPafBI27/6CPL8zIlTaE1sJ0DlFry6FC17k0iy1VL/nkSPV+6\n6OqH9AUH2CqZGKeabSC9gfXFm8yiydEJE5NAxBXTLE/9RQTH16JFku7uT7yi\nsyUGx06X9m/K8E/KU4RnjWeeLOdE8G0sb7V/tM0vFvpNbd5NpjhlS5V/dIP4\nBkNzQ7vi/3b/77tw3b+3gJb1dyS7cY4vS7uLbnnr9N8TDakenC+TCtDe4Igc\ndpWYDs3ln3hSFv39mHRTrZJSE16xQOlphRHeGsamQx8EESOR/renWTDqy/1o\nURWwOFRud48+N+ZI+5HFdVG5kVD/ZkLSoo7Lw/zt0NmGAlmL4pAqjyEmyhD7\nqy7zAiqFr742P+DL+Y80D/CpPaV4BNAiF47GSbFp2U8dZ2XvK5tEgBiwSHD4\nnvJG47LM0e8YGWEDUDO3oqxfIPhSFzgQHw8kDE8lfPl25n9iGYXc5LzMPHAv\nJwhEeZG8Uuxnmbs/a3tKg6fnz8p5qZfliI3M7evg9ZOV47bGT1VonXB28Egf\n1gLvhG///qucPvpFBebywCWKfpoeWcwRPITdkn8lMBFItaQjpeg54ZncGrqX\nuAbS\r\n=ifAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/theme":"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/line-ripple_12.0.0-canary.f5ad92287.0_1620066106748_0.19756283296578014","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/line-ripple","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ed2f93462158f25511c2f71c6cd61f614041bfc2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.af453daf8.0.tgz","fileCount":34,"integrity":"sha512-sDeNHdeMMty93aaPcYyM0/aXNBtzOJpG677CeoPF0jC+zaPEzKF25LsE08fxVucxiTDS0VV89bEj2OeDIyz7wg==","signatures":[{"sig":"MEYCIQClrAEk7vjvWn+PTm2FtlpJJNrxI4Zsi1JjgQB898D7AAIhANlT6dz0HogL7ehEp5sb88WRGJD8YadMNIujHzrdqmsw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEaHCRA9TVsSAnZWagAAmMMP/ikeLDXeM5r/8swy0lbB\n/qNx+2Xy1qDDTTgAUKAalMeJF+5p+Eo/f+k6ibObWdHkKNa19Ect6Ce9mwt5\nLpdYpYsLg6+12Hf4k60YodWi2SCtElbTGGw3OV8JK5ujE3+mO3bauAEpAUwV\n6gSOBsbaQVZLbl9zzPj1oFQFIX2MaFKlEpMdE6n4XlgRHHFQMcyEGWdS4+dt\nnjQd+I2EZlJERIYEDIp57rnvnYLNX49ftaI5K4MOokK9nVXeefVFsnKFX+3Z\nRNaZB3Mu9dqDY+xWwQ0tTP9Ri1bVeXtrTVbb9UlIJ/r2DcCsBD7FBMKj8hpy\nq7xZrpBP9cO7B6zlvfYDZxf/kNlJvg9uq/2hqjIhtQDZgLeW1V+z8kDwz3B7\nuaEPlls2Bgt/x56RmcsHaGV0N1TQ1YojrfCrPTAFtdTzKO2BO5J+Q1IY68Bd\ncQQyU/Fagu7B6Be5mtY4hivNizmMVHU4eWzDSpk/cIsJ278I63gmY5As9D7C\nujlUzcNzZ6ALppdsNv44VOMO4Ahv7xk8bGvq0ZaW0hsDywlQlCK/9VGKmAbz\n/O5tNmkHDiHN6scNeXHAY3awn5VioCeAhuDPJGCwqHJii3GZpZFtbT7iVOQF\nhLosVB/x9aGxWHty/0fTfjh5i4Hj87xyOxykDJnKj4m7HipVYg+vdNe1L1S9\n8EPL\r\n=+tCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.af453daf8.0","@material/theme":"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/line-ripple_12.0.0-canary.af453daf8.0_1620067974628_0.7891789155248321","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/line-ripple","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9fe039afa9f8f7b9ffb4aad14760204413821e5f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.1f1918c24.0.tgz","fileCount":34,"integrity":"sha512-m9QXJ8eOUc0QzEPjGBljO2337lROpjLoOW3xsUAKYhwz98FyL/PtJdSN1/IhzEQLqVhk1LcgYsTwvAITgL2vXQ==","signatures":[{"sig":"MEUCIQCE/Q1sgU2Z+AdYqTzZHdtDGWvBuF6YNBiIRPbhfCNJ0wIgIK4yc1J1YB1uFEtKwgdG2SByArfbt5uQluXju3gR5zA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE1YCRA9TVsSAnZWagAAZUMP/RyW3WdlaBUY9O3jKpfD\nUMOMQXdERfYPXW8Ch0BQaPsZYXlYi0XMNhe8lLc4qAnz1p5BQckvcw+deoD4\nKgsu/1IiZ2sZGzRmwdMNnmAigqQ4pXR+kRruROkDzKudYjCk5pEb3GQLCGOc\nz9oSw94Q+W9Z3CTWvCK+S1vRpYw6cGjwDW1AsAY/mmTAfnp6omWM1s6TX0Xj\nA7eiFaDz+EHi9UznJ0lu9L21tLeiNIipkKw3b2dwdA5J8I9Vox+I9OudCai+\n8obuWgoAX2CwUuBPci66sk2CVtJhxGBgHOi81AKd4Z1Nc66mpKER73j8kg64\nISCYGjfAJir8b7hHGuCF8x3lgWy3kBAEEPBHv+omTL3mX0Ax+0eTwnRb1MkN\n3m5AhnJ/I3etP+phNLKQ3VmQtWk1ruEzMAvWy9WuuypaawcYKKRWbZCPQ9Ew\nD9AD1pBF+KA+2pBZW/6IK+IshTibUsRSqBz4gcMhWFi/DVxkqCUPF/bmPkta\nUZeBqqIInrsgA6wyea3O1Ikq/pXJ+4RLqgQ7bCUQ/zCoO5wRUxv/P5CAAOOs\ni/wq+rbxRZeryYLLJgJofWk0wavQPigtDby8M2E0HiYcL+Cv6G3H3jChH6LL\nIlQUJfX3l2p0AG42rSE6f2RyQv81iKcOHAgZWRbOZ3LfyJn8iQSp3lLAiQZ3\nDDpC\r\n=PSvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/theme":"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/line-ripple_12.0.0-canary.1f1918c24.0_1620069719845_0.3746809906028743","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/line-ripple","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe378110fa7cd498bcbee0db733a3d74557173a2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.33148231f.0.tgz","fileCount":34,"integrity":"sha512-H3iyyZsebrqEjcsGzR4AG92rQBeMS4EWmkSosZ33QayrQQDcG1dpVJbl008IhQkZlte96/CYqT7DbpeOGOX5dw==","signatures":[{"sig":"MEUCIQD/VE+l7TYSmm6/wbSqpmwkDDpt9SsOzNDJ0s2TSpJ/zwIgb3hRVovQYxDR5nflPj/YrZeau8UK4OIwKVIPQaTiLG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFEpCRA9TVsSAnZWagAAbzUP/3qir4MElto0tTvhkecj\nDMpixZliG7oyYU+13T4Q0Wri8HcoGMtmk9e6EhFyIEmOekGxAcN3Ikrq9rCr\nfQjAksNWOX4FOpzpMboE2BFtxf4j33dhr3r+To6tbPdkMK9SnPIEcmJM2uqV\n4goXsAUslAqut+BKc37VG4RtqfGHdcYpEt+QFJQWhFiXcRUveFoLwWRhwvYb\nsnhoEHUfc9XT3ItX3bv5C2UiFwWtWNkHx0g4n2kgzUjkZbCnGC1iXFi7c9Pa\n45Sqrr4GlkAA6ayFRLZ3eS5+E0KXKIB9i9JawezYELYuujZyNo2KVFk34FFR\n/m6anIFyOV4LJXLoQE+x69mQtZ+7UpNLBTxKcF7ucl83qc/2PcCkSPZVp51G\nUznNTJ3SaLfPhrF9kEEx3fQhtmbbP/xTpe+UY7Ol8kaBA9V1KfsrL5wJN3ym\nxg2nYIGuqxrcnMFL7xl0AGmGUqpps7vELgOMOPHOZFxfsvZFTFKhtZ8PfsCO\nG0yWMNDsgxv4nAdQ8gKY0G3oclU/gc7Z0Nc/k3yaFrKhCDgBQ+XNdZbdqhAP\nCX8eKBCp6m281AdWuWglfBVbKCKwXYfnlhVQ6hCqhJ+ebFn5vEqkLgfmCCTQ\ntidCDgjfZDyLaHA4NBlOd+yetA2txCPBRHlegiPogSCy09AWNRt/Rlm9qbZS\nW9dk\r\n=Urcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33148231f.0","@material/theme":"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/line-ripple_12.0.0-canary.33148231f.0_1620070697412_0.7757833942052561","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/line-ripple","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b27447ad17703108d070ad52a7c73836aae53217","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.06b76fa74.0.tgz","fileCount":34,"integrity":"sha512-zB0ZuNmDddlHnoiI3SaZYBaEBQLrWFumapacQPzf4QOppMeXk+xT+mqmw2LYfg0amALHZ7SMX9HjoslgFrhKnQ==","signatures":[{"sig":"MEUCIQDbJmdsMK3xkG+90GjV3D6BTR3fYD6EqtpS2WHLIJBt0QIgUAb7O2ie110mPypQe3O6UYz0wK/yLuBZzavW5SdJFsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFLWCRA9TVsSAnZWagAAo+MP/0+0zn8A+Rv9+V2CspQW\n6LToq3RGaGxxCwcCdq9/2QtuPGjYSHXSTGe4DcJDDTK0hawMeLqZfQxujTGW\nmygCoikqQKpTNhYmsozNLnLinERQ3NTU9I/Ly7mJlCvLVno21cz7ROCxW47F\nZAo0oqpQkr6/lYB+HgRRROsLY918BRg5kEiftu+cudmARfbO10kY95TofJoo\nhJtIS1gPqxIJWwxBMMhg4FUuXJBdT4xmXh7dAxgrNa6oKprBtixiLPNBnnRF\n79SNtG0vSgFP/cvO9DrdUUX2y1MD7SFHNgh0GEkHovDXlysFAwsYoEYSssdr\n8LVjApHFK9iwzURccfSOI2sUAtXlu2GxYvi+y4dXWTViT5YTmQq/zuLTFfb8\nvaITtlMzV8DLOoCgKJttMUNwDrdhVsjU1WkdvJMEH0/MM6/8XsUKh8lTnB7G\n+IbT5lj4eTBS7vQTArRdb2s0GdbspFsryou8/+dOfkcwojZckYZYtVxRDYck\nNfPepewUuJCh2qIEJfV13owfHrSo8yu/rssnItBOepHJd/E7P6rSJBNXd8cG\n6WWoZ0ShB8FlNDmW0704Hh50N6tS1/uWLXdkPP48KS/Es0eCUNSISTaxnkAk\nlGXk25T4J7IWjO7ctX2RFGqybAsCwKfEkswEIRBmZJQOM7/Eoy4TMGdvY74D\nhAvl\r\n=FmUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/theme":"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/line-ripple_12.0.0-canary.06b76fa74.0_1620071125848_0.5551003623208988","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/line-ripple","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28828cf762e46670dc6420863e2c18fc94cf799a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.7c5000473.0.tgz","fileCount":34,"integrity":"sha512-ys0P/929LXV/CoQSm6Y5dwRlz5ZUOM4PTWOf2r+YJmi/33tnhUGIvGidz2GdZVeYkXPGVdIbelrgvMiCDMwjJw==","signatures":[{"sig":"MEUCIQDBeZVPHGgwpNBrO+V4Npc3BNJGKsReJfY16u15CySZIgIgIozGH9z31pCipcn9e9fdBR5yaFQRHtGAGpnbEpI1xq0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHwDCRA9TVsSAnZWagAAJ0sP/3Gg7LoBwW9Tw7+qDfQj\nFzDXB2u/twvEuC3VOYRYYHATu9CsYUJL2EVerXwiDxVbn9DIC0byYl4Hi3ae\nYSxSHWTNA1zPGKK0sGtBxme6sv2oUn1aaDB3Q7KPt/F+qXkhvmVn0cayyFUc\nfWsHZykA/feLuR/nOogBUWOwlZetYwKIDPBpWAZq4loghSF68bnovg4NyUZN\nOBQQ8ppAzP4kdVm1gBoilxEvT5kAr52xwf3AZkbCpBaBMobvnRDD6OFQ2kMM\nWKioPvL2QQ7ZRYOIOxGJpp5iVWS/HrdixtA2FqZ6L7puEbQvYJn8TKeh9r1j\nvs6z+CN3SiHC0ZWaXoECuyWLXW9btxcfl2nxSfU2Zzyf20cVOz+YvLacrgLW\ny6E5xPUvY1LxhEWa72x8OfuhBmAhQ2/j+tbQmXftJE9Yk2iJ/1ZD1kZrGuV2\n1gHLTJEABAthP4Tx+CZ48aoRuGFvP2B0rwBsZyzFWB7Sq2EPmr+ottmRvEsM\nI5iiLxIWcsmi0sN/kHqFJtdzy7VpV/MZIZmVmJiCduK0BB9ywF+bg661fD//\n3VzOEaVfy6++YVpxt5YcU+Lj947uv92qMzJ5JIry9Ijq6gEmeV5wz0CBM4WG\nV28fISSOo/T0QOZoFkbYtJ/pJwlON5War+ncs6SVpMIXfdHGMFKBr9We6Kwr\n+9/E\r\n=wg6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7c5000473.0","@material/theme":"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/line-ripple_12.0.0-canary.7c5000473.0_1620081666642_0.7996131849499442","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dc513dd994efd095c7c5b0473ea1421311fd3a7c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.de997644b.0.tgz","fileCount":34,"integrity":"sha512-jyfmWm9E2mMcdWuJsY7EH9bxjnF+Pd7k4YPCJnXBb/5UYJiXuRvEos/gzA8g4MaLNXXp772KPV129GmF74PE0A==","signatures":[{"sig":"MEUCIQCE/ajgfzoGs12QqBSgbv2E4iQCoUjQGXDQBeqC+H/aSgIgf3rTx7uDJ89QHKeAArShOfhYQX/hmDgPZDsDSRxvzvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYQOCRA9TVsSAnZWagAA7SgP+wUMDMc+v0uAZ15uo7NL\nVJkvZMsws+aRYc//ZGzOn8pOqKdArq9c9rnrQqKX+/XmhFx8R9LjKdZYcaX7\nRqa0CZ/hMp3VzMxsUQXKv4CeBDSkTcsSx7aaGH7I0HRMBZEz+1NN6UfjAsOZ\nOr5qWfYxpD6OyZwMUNXzSGtaIxuFffUCqdHSxinWhnqTWEIOB285/1uz/ZIL\nQJbMK57n5JmneFW1PeIkCdD+MHdvrXc9IHnkPKT+1PhdhUljT5lp18QkdtuR\nSQr5pJmNKRGSkzUW7u4gbiRBr7d7/AQC4+OGSC/xrO/GOzU2vQMwflA8p+UV\nmysv/WLdG/dvwJ9zPe9HOGxJTVbLmp5eVbTDeKC3diVurgQFVjAfCO2yVcKh\n9R7cgzqksfW1TMdSN6s+8oKPIxkOMdBdktTUrQVV0SbK3bOqKbR3vNKGxJG5\nlKqqte8L8nq76vqjv2W3wM+0BXiDRNn2sGqQBj8JdpMhEkbG7wLGsmqtV0nv\n1+0wld9kSEgnHKY1OedE9HJ0CsTy2E7H301gHXJhLZiqd9KI0tJIN3BS9RQl\nwrgnnyVNYNFYDmSv3y5tcZi2TOSJOBIv5nqoS+/4lEjvDjtngm3gv2v1VfOF\nm9Sc6rtO3txnvCZCWBjQl+PseFUb0CLIUIEjvdNdfBrQ4lPbNZ9/R6ZTce2M\nFPTr\r\n=XCJO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.de997644b.0","@material/theme":"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/line-ripple_12.0.0-canary.de997644b.0_1620149261605_0.020818864401396464","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f9491b66205edb3dce92bfcd65c0c009ae5cb0f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":34,"integrity":"sha512-ui4PVnKoQ914esw1uSp0o7HUnhu0Hcb6aRn/zYO1GTVz4JSswWisqPdxzk/RAPa2u/v1eY7sEsZAiMqLQlxk2Q==","signatures":[{"sig":"MEQCIF+pjU/NaEqL8aqlorjQPGLOk2cVRZj8AUN/qxBXqa1rAiARMTTXCyfsh5GSgi34VNvPesEib0Tm1//lkVL6aPYiAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYpTCRA9TVsSAnZWagAAClcP/RFL/1tg0cfzfM5oahhf\nxyUaYOkY/ybdKdjKf6OT2/6nG7xf+wamXYA4ERQ5alLdXdU0cPO2Zl0SZGrm\nzel68UgpTdfvkW//etDVXI7WKP6vmSLwYYKhquQSUgK2gZno6yizlpi0UGFV\nRcwfYlwerkL85o+K9Zjk8yu3VFFEWx85cYsaBJQoKSKzVNL9QPnN+nqcIl+1\nisc+J2Qf6zgQaF7FSAtbxjry27gHyySvevBxy6xzg5PrlNsow6AXFEr1cbG+\nEsCNzPaiijdnwaE2sIuO+sos2nR14RxwLXVVCwemkVY5tNmN9+obfrHLwhHi\nWFV7vBftK2OWsEzoetpBrBDIaKmUBXxu38jyhDHuay8muHlxjIA/niymvBBI\nHJq8GoFVToSTc9oOTISAXj8VUuFtLNYTSuO0IabSzXoWOgTmoFwfzjTnZRhy\ndHFiQlARaFAW22CUpnjXLUMMwc3ANRqtRaF7HF10n43ArJXE9tcCAWG0irlY\nvit6l0NfZN3JBxjw5stn+u6XGj4/jx3wd3voX8yICih7EvbGj7h27tjhDsld\niGigVrXBeS+VHRoxuXKo7dqoYGqe8OUMSelsjqg3qvy/OXNasaANY17EPG3R\n+Kmz7XHn46Ynfn3AZoRWTrXP18BDwrCgCTSQIKSF7J8F+ZByXNJP5sE7YXGs\nYZEt\r\n=X2Ix\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"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/line-ripple_12.0.0-canary.d4d7f1cc2.0_1620150866408_0.7106449750574793","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/line-ripple","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"475172f3dcda6dd53be529336808a7fd6b941209","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.be999eb08.0.tgz","fileCount":34,"integrity":"sha512-BQi8XBtFIzOHgORw1gDJ9r5X7Qwi95qtXLBCsoCcF2HdopFL0Ch3ZmFMSHqTRL6J3eF0yc4CW23BOWLui/VYJQ==","signatures":[{"sig":"MEUCIQCTcGicZPAX0LmuXh/RQkVK5pASaNrhz84lzfum6EfiQwIgW1DlRCI3s9PCaKax250SjU7bqkNXQqQyozxS+Zlhs5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYuQCRA9TVsSAnZWagAAKQsP/0fKzbJWPxrfTvGGfElE\n6HkRjMfsQwsxgE74QYIHuNsFUZu3xvWf3ot2is0NqF//gdet41Xo5VCyvIAp\n/bOR0EcCE9m2IEzFpA7caIJvNLhY7CCiQj416GeKamKm4Xn/ppSLMrsZkDoa\nozpnYJTO31dgp2sUQwInuT9ZdcCD/sKnUCB1IRivGWkkDLZH/ZAljk9gfJyQ\nwn7IxTfIhiuaFJ2PyJgvk/LSKYCh515Knwt4xupyjtrbW4IGORcHNnxoIONT\nqCTMFXfNgGdgE5eZU48Ex9I/sRUNmCaCOoEWnk79oQwTEnkJ/EdPeS4SrMGH\ncxit9BWvgjHI0t2o+dPvVTz1S7PNsJmAk6UtoNK4PJE/61AnO6y9OhKCtrpG\nn0NLvKTHSLkFi9iqOrd1qch+0Jm8/M8cmSS/NP3fA4G9PXYOM/NEqLSaPSpo\nanGLoVbl986JoPQSBuG0iA6K1OV5F+qV6EvrjHtqKSGKcu3Z0LwjP06NpPtt\nCMAsE68//HdPShERE4btbLkp+T7ON36eVeREC8LLaaA07HSWUAEGeMzztLlQ\npalcbsYLxavj/2ndYJqNfMeFeNElXWoRhzMK7BmYn/AFZperrtXaRYbX66yi\nZnUm7mvM3vwH1UfjW8cQzZSUzNf4eSuqQxPYF99IPGlf4oLvS+Xn95a7lI97\nJTip\r\n=E07J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.be999eb08.0","@material/theme":"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/line-ripple_12.0.0-canary.be999eb08.0_1620151183709_0.12118681727048042","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/line-ripple","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1753ddf406ec2bbfefbf5872598916ac1bd7b555","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.eda1705fc.0.tgz","fileCount":34,"integrity":"sha512-oee5JtmG7TqJWh7q31BWb94P4/jnCEcaXfPUL6HyC8/Va7QU/88Yfof9rtkjlXBQPCUAKy3XOOpMBYfCll5cTg==","signatures":[{"sig":"MEYCIQC8VrC/jqsDiz5JfvxRrYmKAtbwh/UHVoDUXPspBpFTDQIhAOgSgeeUpiMceXDDibKrzQmf7gEvphbpntc7yB5mFSVB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZv8CRA9TVsSAnZWagAA3P8P/2qBjPIWysIHBxBr1QI/\nt/S1GEeaOJlmXV2wqPwk7NbzPwgTc6RnAMm87AZeM3Ai13rmh0/rJUKzeSLm\nZ0mbhjoQriqzRK5nkrY7zLyyu1dfFAjGYMWPuSChOrqJwFIDgLF2Q6LrorG9\nPcNeqG/J1rt1DR38nR+INwCvek9QDf5PVA/QUko5Wf2aMZiu+W93WDWBfIUp\nXgs8Y+J6fS3kmlT1HZpeIBsy9bjxU/EXzQaN/bFatdxzq62omJbjUTLSIa0Z\nfP7WoE63EFzDe0of09RJu+NWqN6yDRptWJoQxAHZ8kvkMEqaE9LUHG/sa21g\ndnqQUkZDdi3rSh3P5yJHbxf3/e5BRbOHsMUz4NsDRYIqRdtCVWTTuqN6q4Qk\nfhwToJVbegCEYfzIHBV7+ELdY+liYWLwYFyW4OhZyTZR/rhFuoa9urlKL7UL\naiSFgvhCYlaj1WiO0ANQE1v6bE2LBTzy4jEMFhwIxfxBIthzbhdw3IUE69j4\n4Yj8wWcsl144EvUB3/geyn8cQuCFff+zXrrinKXx/HVhOGR+A6oYO6VbPA5e\n461QJYIYUUgWsjH7GYNHYKfViwvMrWEkJ8pBl1iVKAiszIgNGlCkZIvByzmh\nGBxUZu8hpEdpDEHMsvaKINO1aPCF4an4TCttEj9z5fwDsqkW12pm6u+dxxaj\nwXJg\r\n=5mtQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/theme":"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/line-ripple_12.0.0-canary.eda1705fc.0_1620155387558_0.8762966708950377","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/line-ripple","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d3a829e7ef81bbc673b92a90ef080c0f68fed653","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.718c90178.0.tgz","fileCount":34,"integrity":"sha512-ow1L4cxV8wNtDH9nf7oPG4srOPyFDLCvPeSzq0PAND6COMYnmoGWou86pl02GveiLlqiI3zOl7F6bdrDeCLR8w==","signatures":[{"sig":"MEUCIAIE1R55ZeQVsZeujz6/489rYeD5N+COAqRKwlChusvlAiEA0RO7/L2FtIGVpM1bEgc2lxkbQhtp9XhBQRDolv4ZBYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaAPCRA9TVsSAnZWagAAtqwQAIUSqS8SX2k1ONPqxHLd\niB+HTh+5S3gGviK4ZNSReQ+0ArxiHketdT1lkUw2MwYpWZQBziXcMsj0qyxz\nKQ6Pj9+PQFykHUcHCm0+2LrE6tY0qP+ZJf2a66A6qFRngkUrjvBgsPW7dbar\nOSgnv7lg1ySmwT9q//FEGxKQg5H8TIHsGLMAvyDE9TNmfXmg1lhdRpX93tcE\nZrd257Qddec+5I6izeWKgV3DcJSzzlO+AHL/GgojhHkzugnAGjWsUylOnox5\ndCgK78OFl8Kmbekj3ylF5Sqwz8bX3xj1F5g9Xq9ssihti2xsNJ84vJJjU0KX\nqAqMLAcJcvINjFzjDIJvan6RpaIpij2fPEiuauG2sX0C8u9yHvAkbQhSgzZx\nS08BBagkTMcKoKOaeuM/q3QomBXNlVtn0Q4tZxnCFhuMPPqDZx/NMucjMG8j\nnYM92Gl/kv/Be2fM/txiCUT7qB0Brbmly4EklqftMHklxcTpv6FUbTrYeG2b\nAFMvJwsBDpvAYzTgaHMd5QUsR36IVHx5U2mVgaYC3SxahOfoV15eStiUG3eN\neMc0Ab3CN3Re2XPsG7DZPenRV5uXpiCzSgI8E1uR+oAn+GiyENaUgawVnW0I\n7Tn8KmHYFB1mNcD0jwMp5QSVHjdvdCFIkRBl+OGCgH1LGRMMK3xaGOUH+LdT\nRBJk\r\n=dG6U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.718c90178.0","@material/theme":"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/line-ripple_12.0.0-canary.718c90178.0_1620156431295_0.8832330304335747","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/line-ripple","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b992356ec8f72414cb14849d08977a92003a445","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.0e3917299.0.tgz","fileCount":34,"integrity":"sha512-vYr0WAmfdspBeHAx5P2+YIKVRKAWiMkynHp2u8rg+xplzYHjUmDiiEVN9xYuyxt0veKTFu4QsxRoazRSdOgIAg==","signatures":[{"sig":"MEYCIQCTZl2ZnUDcm0efCtSlrdI4SYhps7gETM2cIzlxvDT60AIhAKxdIsdQ7hTr37VBMw9rhOEQ4zISWKFMAOQRImwwjh8Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaCyCRA9TVsSAnZWagAAHsUP/0PTq+E7dBL61D8f8nCd\nevVHHWWHUHOAD7Zk6QJRe5apu5ZlB5Mk4LAkyZEys8VhoG50uTCskgI2N9v9\ndGXabH7D0FktmBccVGeQFiIi1RzKCPpG//DsWrBTvXXKl64IKpKRfqwsBruz\ni0pGwW+vv4yl/j0Fyx93a9SOmRd5gkrMn6n02i7K0QoE9ED5HisdGPSkP1/s\niDEweZStT13pAOqvfsxFOrjCCjfcMOSEJAm7WMJf06p2pVZSdHa05mgCuG4p\nStC6iufw7DEIxMFdHvPdj3OMOoaTqqjdZ+LotQzQ+zS7RcwsbH+ZiVZ6CNNv\nUZR5trFQCqmzfnk8LMyCvblY/7qlb5vKnqLS9+VuP9MuJMXK/JofmLG2Fxxa\nsZr8/iZcPX7eqcsN7pDHe+fz/G/uLJIVXKOmid2GJcQ1LVQKmXt9lrC5eP+Z\nWkTWJyJYJF4o4+NZPJGHLDuMlb4MAqNoJOpCK7/DGVttqe1hBVHA5gkNJAvB\nsge0oNjb+7JmdmGe1fBbKhSnHX+V3A1XZB1IVTeq7OTjLU2YNyiMCeCxntLQ\nX5EjSiaAriAXHuBeAeBWNhCA+XVBN4AIpCg+rsZB+ztefbfvRANBIPTCk/P1\ntb7hYuFX788T2shN5toFvgGdnQ5hCFw7aAiQwayCY7Bv6ZOf33dMYfA+kth9\nTBdr\r\n=a8GT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0e3917299.0","@material/theme":"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/line-ripple_12.0.0-canary.0e3917299.0_1620156593841_0.1653732992376462","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/line-ripple","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b9e3e3ce21684894169bfde5bc1106f7b50f5fad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.836b3c7db.0.tgz","fileCount":34,"integrity":"sha512-abP2/ab2QsNJwOQyegtbPGhac+lVoO4mAM+43jyVdz9Y8R7kLiUBjEtEzmHV4x2dQUbVw26U/4bOIOv7qSDAeg==","signatures":[{"sig":"MEUCIF4ogNy8veki0TqUfupB8oboikwNNMYLkqRoeGLjxljsAiEA9ZxwGmbaHeVS3MNB8nWgPUqeOq259G7EU6UcF1Wb6jA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka+MCRA9TVsSAnZWagAA1dkP/16gMNjVm+vfSXOhMuGA\nqMN6V2BhruHfdHQoqrwXrKPIuZGBTU//KDoQDHPQn9IrhJR+AGvodRxxJZtE\nZwaf1l31m/XBFIdvZGYFwFkV1UqrlOAuja1YivF3PlWbuEAT98fMfk00lMpy\nnx3JX8hjN8nWMOHdJ75m6w+IufxB2eA8BtQLqA2/PE7i/Bbjqn1U9PwmB3bE\nibi9s9twyflxTkz0W65zFPCG4zNvaXLXuGwjAPM2zs1DXy96lI4qgwT4xRdr\nSnNGj0arDrZKyZig8nnQxKKDJcOzKyRPoluXWhK8TuHE0zsvFOBiQS+kN3Qi\nEzHMAqg2Je8awcfcbwdEJoRpmoMJzgRURYbypoYQzSdPTsCNY3OD6/chVcsy\n4o1wZJT29A+NA9nkP9QRlDnmWpEms+odjeRNHYT+eifKQ0yGGBX/CPqQ5o/z\n/GF794kFk0pp/LEbKIy72Owxgz1QB70urmurtqIwAhHDF6VCE5RdJeNY1t3E\n9XzKm4v4j0zNYZHNqqPg9FZlkSWa29FRrnN9ysz7eXo7QBmcQ7EwmZufpS+l\nbcRT9+SoMhhT7tEas1xtyaEcatLeJw16kCZMj2OZLm7DFC8rtWwi5MYw6nJG\nWYXy7pE7TTab7GhaDjkqm+xUUUR9Nv4PUCXLOK3vzg6Roub7HEJ/rX9leVN6\nvrjC\r\n=sA6r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/theme":"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/line-ripple_12.0.0-canary.836b3c7db.0_1620160396257_0.9841501662293992","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/line-ripple","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a5e170012fa2252662c978d014f22824a86fe478","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.53d4e6d59.0.tgz","fileCount":34,"integrity":"sha512-QBHu2etVk+rDATgArEO3mmiGhLeUa7cHWduSyJ0+d7b3s3XbmZCXBaqGf1ClcrbAcTNR/9kyY08MSFAVuecRzg==","signatures":[{"sig":"MEUCIE/n8hDhNcnnvseYqfkwSpGRYDMPmeemd6XZE7a8HDwCAiEA7kv4nVFhuAHYK/Go2lyqflxJjdk05MA6gpTTmQcCoWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbM/CRA9TVsSAnZWagAAFksQAJsd0Ffj6C1P6zNMyDE7\nNLHTw2QQXTnY4V1pmCHuE1Lad5Sy3keSxor8wS3Z9ApdAMkgP3mTjH3ypwKN\nJSEf+OtbNCy4bkoghueUYKVEHaPhfEBwBB73ChPhVmZx/LLm+ScaEjovBq6y\n0cgK54TYKdCocD6PVtHf86j4T+40iFagjgy7htPvpTNR+yZI5mo6V0GmPEd5\n9UNk9e20kV/J4Tn10EbYzcNcREWkk0mxffSg9BxDLqKAeLZdBHWzCxtLt1yJ\nHAkcTFXs0RgNx+5mOPfaO/lS02bOBV7xx8Nfsz63+DPUon267dRKzykGZMls\nXeKwZ54d26nZuVZWAD5SnIfR4jS6N70gcXKKasqkc+L8QhqftVaaDJVysR2M\nOPJdRkyiNAi6IyfRz2mNFVMD2capU37RsxRJkQfCAWqvzmIb//u659Q/+ua9\nD7x70S2TPBw0iHo9Z9q3PUuyTix1rsh0kF0A3V1ZwKfWs2nSsYn6X8BiQhv7\njn/mLi58SoebOPea/bA8TgrDCh9j9iOrkWsGoGEMiFbpKucDfRoVTwOlkZre\nlnpyrDu3MrUx9ADAIwH9YTAAtwFmJD+q9UiBijTj5/PSpakrdJ6xzyJvdee2\nuyQZwxSmrxTBKDjzKbJFTAS9J1mCZG89/AmTPr9y3AwsB2bZ8+4iaNLTC5Rd\ne+WZ\r\n=lLsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/theme":"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/line-ripple_12.0.0-canary.53d4e6d59.0_1620161343312_0.5240474689305954","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/line-ripple","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"40ff2fe71a624c96dceb61cb719da8dd2cb4b8e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.18d147e27.0.tgz","fileCount":34,"integrity":"sha512-Y+oy25WSr6M5f3i787VHq9U2pkhovkPvV1oaEWlRRx2zrp9CrxX7Wfl2pZR64C/nOoMjgyGocR4sJJPn+ezUvQ==","signatures":[{"sig":"MEQCIBkV/q1MEHhrLEcxKsWPzNYnUbvsE2cjYXS6ZBP8+ZpyAiApCTM8VBvFdySrRIFFZhw9N6vyIwbAyDscn2A8QHgFnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbU+CRA9TVsSAnZWagAAKNEQAJCCNTUQ5+xsUKFTi9bx\nDWuxTf/9vGJ+6o1cZQhpGbkioitgTzZxIqq3PHYr13NN0YDrgvZivxek11t3\nanOFvD5jGAY/nt/sxNFqwVe2OICsLf8rQAxKsW7gn7e1r1442OaSdHVLLdYw\nsfYnV5fx97TVauBA5Zl2AiXxfq+bdTlRdUNmRNPdNFzbAtzuIyUX9+mnJ5Uu\nfbBSw96hi/Qnye/sGvfA8jJJSs2N/KvIRv8TTXmks7xziV+r7qznD0wJ30n9\n98kKnP99YOIIEo/Y+8ylCKNatfYvCJw9ayVpd8qKp88SbevUu1Wnk3LQZt7t\nqAKawZUGu0bA7f2g3UJTEIpYj5Qd3fOuM/dah2azC9qPwBg2Nl9qFIrXteoq\nXd/H01QUbeRvrkeg+8MysEqi71E30TBtJvwaESZuD9AHLtqNyUf7I2WC4I+A\nn9+G36GKVVlQIocJ6aUK2bN5adxYp6VdR6w9CSgOcgZydJLeb7FvJJByiu4L\nrzerlIHsLyevWipkScN6XlDs6W3nTnyBr43KAfthz5cFuaSvqejj5FL7s7eT\nyHZyJgU59+RumFjQWB9FSwZ58yESYLiM80pWOnknoNcPE5RageHwcKaCXib7\nxMNvXy5zOSFfvo2gpkYw8MXQbBCZkwks2ELENSlnxKJdYKzufTBw0dn8VanX\n6fYV\r\n=W66/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.18d147e27.0","@material/theme":"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/line-ripple_12.0.0-canary.18d147e27.0_1620161854390_0.4009248166634931","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"23526c30a5b2ea827fe8279917db757a9f3ceb09","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b9984794e.0.tgz","fileCount":34,"integrity":"sha512-G0rbf2xFgDY/+sOycO60AbcaXm71cZwyADWiYllZTtiTPDcPNgjXrG8xnBAXAT+hvMsqpaeTxFqY7TrTkhKssA==","signatures":[{"sig":"MEUCIQCFMNOgv4uN5wqaPRW/YAyQ4pvsv14DN3gHabzWgEYejAIgJ7Epx5WHmAH/VI9IUq61qK9SPfu2x8lwZE+Juo7nOpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdKNCRA9TVsSAnZWagAAvCkP+gK9iSQsw8h8u3iUHsDc\nkcOQg/O6ntzEDKqj9iGvIgb5SJ/oegcRX1C0+SgIwQ2slk5zKqXQFwage8KY\nP3mUsttmJDPEqDSmEmy4b35kQDelPPdnFwKolIMMo/nZ3SZp6kQcTEnHqVqM\nMIqYtD36W4WYosNMYB0iICrzPdmC2+9w3OGp0fToYg6mN4WpYRHij73GK2PR\nlCIfgI6++V7+K7/ZRq1l3K1RfealXq/IAnaBQLPItTbPq/bc3mmPZAc2jB/G\ny2PUWqAZNStkLsNJ01z4rxsEA8N0FyIj1c03DZ1xo8aA/A3CpVAJ2X9trKDQ\n9zGYOPlIpMuEERShWmeMACasLY3puJiBw/8FxNfi4H0V1Vr5QNMAxdbg0MIP\nw3YYNnsmFol7w2N2xjiir0vQxNsZx0sW6Xh7+4YM9VviRk5TpmSo85raCoJ8\nCTIQ+XkJv4zvPuPLxUZ9k5vRRFZKyfW9J0kDNnMdKkbTt2O7ta0O7MvskIi0\nn7drW7gpWcSzuEyiIo+HggucBbbTxypk/jGXmErCu5yDdYhzBERyuaKKeLzU\nC2ZrhDJgN63UtgVKO7yakaYikPzex1qS15EYTaFJtGMRb+URCGTowLRIl9c4\nybQW6sgTwgOOTm1glf7bFhxVQCC0TObBX83JOfz3z0AhOistRZja+Tnimrcr\n41Q/\r\n=OAW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b9984794e.0","@material/theme":"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/line-ripple_12.0.0-canary.b9984794e.0_1620169356564_0.6523203290374504","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42d90345f641b04b1bbce9de79fe8a22aac08d3c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":34,"integrity":"sha512-V7vxGYWjEmuISFgewvKlaL2uIG6oB3HHhoY/KFrbLNrHr9CCF7AFwwdzOxgC8UBAvpMwOvYklgFBAXqh6+NiMw==","signatures":[{"sig":"MEUCIBaB/MXKByE40Qqe3na3YwNBue9cPhcrt7x10Wr31QM9AiEA/+Y5e1IiGMw2T1fBoH2OtlWNZ5QmHMHT14K0W8P/92k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132139,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdNZCRA9TVsSAnZWagAA2XAP/igdSRwcbCvMksca02zV\nAibDp2yMkaCWfwgUiy9RHa3v1460GMizxfb2U6PHqc8LqAPE91R8Je8XlZ3j\nk3X9fb+pefCvtzq2T0GnymsjdAgIDxQGcEMNayYrpqHiiak11w8ItERfiY7s\n6XHpLReBYr4kn1xKfxJJ4w21BZhl4CUIfYdJIHb4waePIYPSgUJ/sgPnJGA6\nMpQ800hdSgG8uLLPbWKQ4rCRPWvVsqpREmRqqd1Yj19Znic2WexFFeyhaHzb\n5RRr6sNnHsBZOG1xNrMwkhV2NuBrXqmZdE9/ngSHyKs/ZOVFcfsKGRrc8aNK\nWZv+VaMb5AoqpmdmBOa+6AyWP3F5I4Oj7pfDn7dZe0BzySj5tZe/G+BcA6CT\nCm5Oyoz418MDjZULY3U7rJykoji0CRZ/NCMbFl3wKIE8j4FQhJYhTX4PSWre\nu0CKEKp8eHplgNCFZ4+owr6YLvQPTzkWNNpBrnEa7GjoO4POpuHL9igvcu9+\n2ILcemCtRLWvGKwWneo7F/Jxr0AMeQS7ZTz9OpvfQhX9R0u5KcegAxOwmhu5\nSMAaRbFaK/nC4nmHjwlWOHPDE9XLC/enOSMr947ktweDgbYTBqu2H+MltoMa\n203FlhsbsSJy/DtoemTUXP1NMjrWXQsDwgfB2E6WPT/Tr8g+fVd5VYv0e1Ol\nsFAp\r\n=Edjl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/theme":"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/line-ripple_12.0.0-canary.b76f5fc9d.0_1620169560828_0.6421839301123684","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/line-ripple","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5189ec215ca24c17fbb944e5cfddc3594c5e2af3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.055d4f10a.0.tgz","fileCount":34,"integrity":"sha512-U/cTvnC3c21lJDjxuMyz2xiMg+XBPeAFwssj2MEA9HntNbH95QKzseXHEpImWiBIoB0i55plrGjUpVtiCIve8g==","signatures":[{"sig":"MEYCIQCotOIlc66Ii48McJNvTlGcj3B4AUOBGtC0HOJ0tycxLgIhANX+aen4/cJeNicnXJ+15ZaOLlc7p92f1/HRkPCvdm5O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdbjCRA9TVsSAnZWagAACQEP/3XAgf3pmcMUgwMDxLtV\nHo86M0uxY+PO4FDxHTqq4fktir7jUfAku35MJ8f5b31A74smDqbUYrEsRl4I\nCcLxJV4/rNRonkfww6/QCIGHLIDHt10j+gwzAdhgJ6XHPLWDgbm4agWsfdvy\nAz+fiDgqBQViCbj2Di/87qsZlvopoJLMUluIj1hvJ9eVubOu7gCl7U2kr6S9\nJuUTk0HXgwrkSPopFCYpKpgz5aBeHqpZbyJVhOnOAO08DNwO8jtbeKb9DSFR\nVArw9XYTWOkadVqSIOftKatJYnk0J70Yc53Z3uyY60A7oKCwaGlf0s8qQOqP\nTz+vkoQncnfx+vodUkbt1/J4jMKCWOrWf+jQZ1BuW4bMmBWOAaoT0RIaRxWr\njhn024rpThikLLTY0Y36hz0AFSZOyeAD2MqWzh2GUAz/x/6A82mThuyKtpTU\n/TcYqyNp7V4ihdO3yZYxqbCxmH/N9eacR2Hk/Qomh4ehgwO1tt92TwRT3vY7\nZxUgL1orYvBt23BMKbi82bVVl/grxqvsenBw0z5lFxzA8iLrRoLl8lJSUSY1\nj37IQtlWtBFN2rzlRhkedjoDMJAc+NhWCYdzCmJdGN1pXQI7yfSNvFBXlGP0\nmhalVBLGBAxt7svJnCTUUCRUqC4F91jdNr37VatwsZ+TeqXDPeSCGT2j+yv8\nDdmj\r\n=FPs/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/theme":"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/line-ripple_12.0.0-canary.055d4f10a.0_1620170466559_0.4462645147698596","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42180cd76fc3bdb999ac0ef5be2ed55399aa7808","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5b6a46016.0.tgz","fileCount":34,"integrity":"sha512-04LCy7UTaCs8e4P1PMDSr/50LMEBurxOqDLOl9BNPUaBmzyhyDVPJBX/A+TSM8X0PcGBoIc8An2fXZQYdUANmg==","signatures":[{"sig":"MEUCIGH6a9UV7ZqZZnwOEVvZcvMBZa1a60DpTRr1Qhldz8clAiEA68WgBIH4C70YibO05wpFRZaiJbMAlFxLVFK/QeXQFF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksSyCRA9TVsSAnZWagAABAQQAIahtIImsW1GyQSAKLtL\noDuMvGgRgxe7UCXNwDd1ZVp1Ns1JkAw4NRvtBUlnNlo0CwO6vnK6LL5g/2IR\n5W++UmYCrby2BDcdjGkYE/cSifiKDbIx4bQq/mBGr7P4W/UZM8nXTzNpGbQ4\nagd4CtOvWVjbfES5VDOnfftxPHco3h+yrir5wwkpAvk6rUCc1Pew84Fy66BM\nih6VsvsNFRjxNLvCYj30tzzAi9eyZJb1Vb+5MRmnuBE3MdWEkaJmEhfsshdt\nOSscbNn79aW6G8URLzfKXp4tZwnWaHngc9on0CkbPH8LwiwO7IzLMXqvwMaP\n/vAChbKBg7Vnq4cYhaDiSaYwMvBUx2k4xfcwpUxTrW86fnSjRrVkuq07bKJm\n2JCAl0KOfRwKFXOoOj+o+wjnE/gZGwdr+QiQXm6bab7ZuZulVZ9Q/tr3kmx5\nK3Rp96UB/8uAdxQr8Y0v7AVK7tTALNoLtc1TkPL8SawZmMbLUF4KBHW049W/\nTWlUAw8Ecg190m72888Zhkn5zT3y97DWIs/5gMMsuA3P6O+zBKDLWfAUk/2F\nP4ldsA5wAbGew/6zM+Ss7KpJrp8moUChdfc/Dku8xgviCh+sAhTXgUrUvfj5\n06rKMJ6KLumx9OjG/6ZEwiY9m0uTQtOAO/zbPEtgWuuc45DhfVYomJbJPrN5\nFpFY\r\n=JbDV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/theme":"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/line-ripple_12.0.0-canary.5b6a46016.0_1620231346068_0.4593515916145716","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/line-ripple","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4573f43d4e1f504655ca305b4e2836a28af38ed0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.33c9a737a.0.tgz","fileCount":34,"integrity":"sha512-znVNQKAZNzScxcScRE9ee3bXOPjI7tESl/x0mFW3rLltX0dLAo6e7jc5oc2JSzreQYtJqoAkyUVgeMk9y27u+w==","signatures":[{"sig":"MEUCIQDg3vdMFkyvyiH3uy4HsnNFy/B84mwUjBZs17ognzvOpAIgcviBzCZ9il4DItLjAk2ADwqPFHmsidltlKvBIcGO8DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktVPCRA9TVsSAnZWagAAVrwQAIu9sdML+YejW2byAxYG\ndjz9Pgmd8WMtNg9HPxgt29I1mwjikVT8mo1QdjrofZ9ls1diYegG9kUmIoJE\nN3FJPHFox8xtkg/NHAWCOZwk1/e93JJyRqswrdjF+avaHFC2GPFm9riYxSfc\nIhN9PH2ls60RW3djDkMlq0tXTwYutbZc2hEDNW0ZsKoReMwZ2lg2+J3I2pte\nwAAX4oab8uLySEF0MDYml95EFIZ8/Ttzi/yn3PFfhKHEIkfveiJBhFzvrE9Z\nebu4nOiI+o3FfI9xjTdmqDmv/QaTOFPyuUINIl7WSrqnwMNsHSArehuvozsX\nXaf6AGWOKQMP5bJZdFhvmKf3wJpdOwyiWY4Q3mF4hKuhqCSfEhoT2aFyt8jm\nUdaDrQ+V/f2qPWEDXMJGJkk7rwcRP6tRpbuXW75BKZZ0MX7KFyEe7XBWV3/R\nZ5x7r+ljlKA8oTPXy1u/k894KF0cDwunHkBGPPD8afMedngAzjQwY+XWQp86\nAsx4v+YgBZR714nDkNJ/XfXXMgvpbT9oAnpfM0R0Ti6/498eMiEliY+02g+A\ngQ9TJuzFiVWvIO7Qg9LPs/DG+6/UYBhNX5ZbybAW6QIz58cvK/g7JmnGsIIt\nViff9GZDYasepOi72VIpCpEBguCmhFNUzh/ZBZdXL3sJin6JAgBXVh6oN5Y0\nGLgq\r\n=n2hn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/theme":"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/line-ripple_12.0.0-canary.33c9a737a.0_1620235598798_0.44045722615418703","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/line-ripple","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"19c4a6621ecf4189e79dc5fe4c042b5af998f86b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.9bc0effaf.0.tgz","fileCount":34,"integrity":"sha512-kLUPN6vYFixoJPu4dXJUAHJkmLiO8YYDZYy8EPqVC9s4nwHst0Se1j6nvGkT42b5UCMlF0rsW9I4haB/6bWChQ==","signatures":[{"sig":"MEYCIQCcnZdTui1y+KnBqgon6VJg2eCQ/6Odg5OmvKuHeiB1NAIhAOhwfz/ryWwgrRJ6di1Oq0K+9xCw+nypWvr44More7vs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwcxCRA9TVsSAnZWagAAstUQAIG2GL/NHTcTnVvc37P8\n3eGizp3buOGu2BcJSlXp6ws9BA/vbAHE59Vd4H7IaN8Ol288FhG5ekNHaRJX\nwSJFyTcs3QeHeZdLGQbJrypTkIyx75yRiiTv6f2DIEbZqAQMsXVZfmnn34Wf\njFe+YLLsFRi9P0MyEutompoL3OUfhUE3+m3KKlGqf6e37bSMBLFSjMahOUSk\n9bO/vMeRDND7O2UJLzsEhp096rXXCb8j7FmEHQ+qc3qVPPmziY5RPakkVW19\nM73iLu1OJATYqHiOo1l+CkBfu6a7hFJV5vznc6QVSISnNbJFPq5wv195kS4t\npLMkTWKX2kN/K38cSyFUMYpFD5950fx7rRrl3U7TolR6IW5Z5mDaEinxTrgs\n6VEjAMrYMtwpPgqlVJmwjo1tWqyG/UQpBNSGORo9/iQV+xo/3erYv4jB05Di\n4ybrNyfdrM35Qw8IRTnAwUvXs790YB7qSCwACx+byfoZJ86Lyx0Ok33E3M/y\nMaNQWAx2p6Utmoz5WFr+Rw0Vr/5YjDXvpTCqrJTlzwRL0zP4oqmF1Y7/Oilr\nOU0iV4lmuGrxDujKPi6e4SrgTye9k1pZ4Es+5EOMHL5F9DWztijX+NgXG6Fd\nOdFy81/odC3gMd44QWL0axdo1Vm324nzXl9fKRmI1MJeTRsQ1vzCqgKxHibU\n/2+2\r\n=Bfoc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/theme":"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/line-ripple_12.0.0-canary.9bc0effaf.0_1620248369196_0.4688761294956678","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ae41b6bc75518b6f821d92a2caf72515dfe4143a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":34,"integrity":"sha512-deEKZnDpDBRIcImWtayQRTDke9PPfKGF7DxzzXNKxWAvmVum/qTUynk4ERoinWA0bHEc0bx0GqKXblsKUfYtHg==","signatures":[{"sig":"MEYCIQCIviXIuTBQ6OIH/3Qk8bsuc83o6Ky4iel2QoBmucfd2AIhAL+5e+0V+uz95ULlApmHTS7KRqZ5LcdNbEtyBsmYdY5+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxDICRA9TVsSAnZWagAAOrkP/RTDNVfy6QNV2D3jxgYP\nlzYKUWAOBlFj7fIpB1maKY5Vw2aOFOxIbUmWxLaab35Ol3M/ry4kzfobXvYN\n/yTqydvrOOpBckczLWZNPhWz2KlZwx5XzaxcxJycYLJkG1vf/ecDyILZ8ANX\nzxtstAIE1PMepxZNwnFJE+D6U+eGdNQi19r1GPNh4HrBAeHtSiBZ3UVR0n2N\nkwNAYxzvx1r4JzxGv+AElPcqGDeEhhsvz8Md6EvwCAjEkTMj9v3yvBfp/S2y\nhBf5PRHLJt6knHRBhpnCJeK2oVkQQ17BoDNBKeCRphh5S0YLvQhzl5BgSOOw\n7HlMjfn0qup0uYIDGCjmmbhxHBrxTUjkUtLoWKRRHmOE0sI4kk5kvDelovR2\nLvgKTpq2vFRpwiaj+A0uxW90OcIKZldUQ2q9qn3FWH4pWmSDja5OKRjUXRG0\nCMM7UA7my0y5ARVNyzF1WQvRRUxWpuN9ijLvfP3n+ESK9KqU11k9DcS08Seg\nPzOglX7jIYKZCxnfeH2w/MVuuLtJM5rgjHTAyu9QYCIgwyngHcwI5FDpONm6\ngUHY7d/MNhTmq8eV/9p1mJV0aW3Xq4nYrAmK7C3zfIyHt3tpHNmC6jZMdRqZ\nNU5DSkgscQ3hGOQgiRXUdvfaE1hs/TfiqpwBBvn84nQ/Nfkepk/FrQaX0wZk\n5ciy\r\n=E2KK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/theme":"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/line-ripple_12.0.0-canary.a1e0f2af5.0_1620250824077_0.06325083898838524","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c90b7b3f9286c1a809ad1925a9f400a06fa71ec8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.06930c96b.0.tgz","fileCount":34,"integrity":"sha512-PDSGpWM/kc2x2DAM3vNIJMlKAEY3ZsdZDQDcQAncG8U3dbsbD/apSivZkjPHZwGOy+vYp7kI6dBF5U6fifiqkg==","signatures":[{"sig":"MEYCIQCO0HEdkiMo24BW8G+zcA3NTUMLf9TSBPwXvji0CvzlagIhANdPf45wLECZCGzXnorHsAxZ7BBFmc7gZmIXNrybZawI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyyCCRA9TVsSAnZWagAAFggP/RDorRzrKD34PD3cc+s7\n55jid5UJruDEdpu5d/Yk/CfeEXEX3VW1KP3l/RkIJF1d8X8/PKJIcv6Tb/sm\nVd4O/V9gJqI0Zg5gDGx0Sj9TxujHT3lxJ7XjqgKoOqYjWXZQdjY/yuT249iS\nbsrt62AmToHMfcLZ/a9CPIsB6sBVfvBgjRPOGVnQ2J9kxO0gBvT+6Hry6U2s\n0HMaWSh3SyBdCSq5LZ6/3GyXQEbdz/ry0T+HRscUtVm51CyaD/N0V/XasN/C\ncChByRyF+fAETZom2NSW8PHqzIwR/n+QaD6hBgQLmwiXcv7Dnrav2l1VPW3W\ncosI2ZIy+R+yxtSabkP+1XJOZhx7wQDnt9hTPDIM34ameZ3yLPLtCL8bJEs5\nf2/uLqv256qZiu6t9TRAw9TevMZN0eR2uTEZzBmHzwKCWXpevHjq6YLt2xXP\nk/ZZ5YVTqs+i5i7Qfwp3bg9O1yLJEg9b/Cy9FOCag5ylOs/vvmq2VvSwH4bn\nRtwkjbnRIsvB1aQKH2m+fZAx9uEk2xY8S+klUBURNc53Z/vU2bItiPoOKy8P\nGnXRH/fxWyhH11E66i+FhQ1yMLCyzah7jxAIPfgC32Wwy5RU32s0NGSDEXaw\nmH4bhZ4CaI7tKt9POCZF4dggoRkENucocuXn6H90xIU5QEucM/2hjm2Po0wV\nl1RJ\r\n=yHko\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.06930c96b.0","@material/theme":"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/line-ripple_12.0.0-canary.06930c96b.0_1620257922125_0.6051660853820711","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/line-ripple","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9538800714b437b5f2af7f01aab36405ea0dbb81","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.03f525f9f.0.tgz","fileCount":34,"integrity":"sha512-idwp0y4Sm86acoEQlJGuWSqNhk+PjXbQ9m96/hOTVgVhhYM5WUJcgYIpY0HYJFL/Fx41ShbMBG4AmyqcRvPGdw==","signatures":[{"sig":"MEYCIQC/l8VFOemx431Nt/SMWqQqVX3nF+XzjbyfxSiM06ZMeAIhAPa5rC62GDSerrSMB91i2BW7vBk+3AiDOBzmOVlQiW8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzhmCRA9TVsSAnZWagAAfyoP/AuhMOpVQVGoeyM/RHqK\nixZuZKn1R8fWrMp/eEs6wg2UcpIUIGgFhLHvyi1CkOhfNzs6/0V3m+s0UqTm\nhOCQCwVfddrpUZHUDNtmnNndA/w6j2czv8iqTGy6ex5+6ZZ3ex3KcSD4rMAh\nBzVZyAPYzjpSPolW0+wFHd8jHl0gJIuceMHfUHR4kIBC4LHypiIPukcdL9TF\nGfhBsI50nn1fGKf9Iqzhb83p58JAjdu7aC6s7DH7lopOUWKtz5cll4W7Y53y\nRxIZLG+vmvAO9Wf7gWdEIDzAwhauivjuHZQjmhCYgabRnY+UzOZReldCsR4e\nMY814zJ27XjlcMa2uHaZkyIg9iIFpmrsHz9RRSOLKuMAGDgPtR0WhJwj7MT5\nPEvykTNdKPZVyRgqUYLW2TKlkE/xYb2rLyFIrngMQHpwoqluRehcN8v/VX3K\nBv9/T/lZaRuq7dAoiHLOFrx6r86rM6+YGcbblGgYEUaSwESDkjkOo0Q9x/wF\n94PsCZxZ2K2gvHY0Eb6sHOWfqXI7P5981XH7QD9WyCkCfGsaDFFERKk2ebqS\nhfnW2qCOGPCxggbQT83OC+wj7cXBE5arWBUzuVgxdUZYvpdkLFQQq/O0wd0c\nj2LMhmjPcYtcrCg3obOzFaC60gCXpCDDHJD3N/Xlw6F1li2Cjoc+qntVV8jv\n47dX\r\n=uRgb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/theme":"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/line-ripple_12.0.0-canary.03f525f9f.0_1620260965699_0.3684329167623417","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2a0f2941c7af9f586e8a1baf191769c4492de3a7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e82ba2a26.0.tgz","fileCount":34,"integrity":"sha512-wUsQYg17h7mXBfxgQ9PW5vN5/mdm/X7rO6wJay5dfIh4oYoeTWQ2f8ERHB+nx5OcX2rbIbov2T4ZBNsXfLwj6w==","signatures":[{"sig":"MEUCIDdJsaTfWQCpcXLuNLMvpPx/h8DhdyRBLbSEpRPUDN26AiEA717bVm9I5x4y21pLEiT9p2PZQohLWkCGvVHBmjNqBHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBGECRA9TVsSAnZWagAAnWgQAKDlejJSorhu1VBAwmZ+\nB+REkaujoQH2oXRn+o6h6TaxM06JMNKGogjMFrPLYjWA7C+JTIEvCCnLD1kT\ndrvH1gBvYBm2Egqxs9h4nKQ+brfJiXW+Qb0yZA5tNZo0G1ffXdzDdUMdSM0X\nVDKmCUT4hJcM/ORTO6AaWujVJWZhcnYNYj7svhVmneiY585ejVSrVTbefjhh\nrv+Ln+1MZym2LKN6jrysXNKfcnoyMky9LHs+GP+qVBU8uTJCZuyZCqOuvHF+\nwUMcPCjE09zsys8GEU8XDasqhwvPdyhemXta6xJ3LxZzaathpxae6Sl2oGdZ\nSpqzB5dfQFimOme177EFZ7irF7CdDS53mY9hjue6O7Feg4o+oGddCFgXq88c\nDeF2cVUl/p4uwjNmjzrinldi9mKU8H/IjIrgUJKNeWGvfPJ6YGXYnQgYrYF8\n2lcB/H/vmqvH6GuLuGsUgEtee1uu9LeIxWisaM8I6kuI3RcZCB6OSCsVqQht\nlMssgUnWHeaJSoPIo/Zpkq8TrcirEi/oHunKf3eXcY7GNtO+0sa+lsR3/dB3\nvgli7MJ5niVuFLbt9Zg2ICRHGmr67q5oT1izu2A0MxuxKHJZfIIVWbxc4RWI\np/SfT6x7ppkS9TA9X/VuIv1j8m0EPvGaFxSQrGgniAejl1j/9Kjii2REgKmI\ncW7C\r\n=HbwQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/theme":"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/line-ripple_12.0.0-canary.e82ba2a26.0_1620316548401_0.3425363381512767","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/line-ripple","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c704c0c90ebc9bb90fd855d5f8ad6bd3369d673","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":34,"integrity":"sha512-VZkOt38vOKUBO9+p9Vnu1OvWlkQdoytekv8pG9ue1rNM8FvTdAaUgC0cxnJQYWiz1Jbr5vrVqKoVFgWb5r6flA==","signatures":[{"sig":"MEYCIQDYM5esC3wbpotI0oT4zF0W2yWOFrQzS7fqZyank0OItwIhAOKMPhQHJXuPK6T1Qb4TJc9XlLHklxUfLn2j5rhQJkir","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCdQCRA9TVsSAnZWagAAZy0P+QA3CWp9PEf22wUEjyh9\nSbNPlVpia39Jd7m3BToCjtIJY8IkzYXzEpFkln/iRd5f3ZJwijNGU+GBgjYu\ntHnXkZWs3Lt9n3ArSYD9ah/T6biUVm8j6AIaszkQz22Xifri1HoFjJGGitae\ner8LGH+BtIprNqBitzKgiTM10M3YboJwxEbtv2dOSyz8OfZ8DQ5KzvLqAbp/\nE5s4JwbxhPlxibqrWUGqsIX9qEzNrqI71jh/22b4Dd1E3An6qGEFBEeaA7Hz\nP0rwTQn7Ijehql0ChkUNGwALgP+29XoDbJoooH405hudjyl0axNzwETYT/S1\nRo3+sMYhbMof2YJNqrFBAO9q8cwm7Vq8ZGRay1wJ/nVlVmsbQ7k7iGkPGQpS\nui154pQGj5oOg3h6vxDImIVbffhlfmSO7XGl7J1iEFSdAKgV0WpMeOJR6ljS\nKAJEdbbxsBBNo77rz0Rl+JXV4OknQI+4kzPJQRlm+LuPKKgcNJU4oWWLeV1E\n+9Urh+UOECKaX9OgnJgtkFc8ACVWLRnvWkOlW8rSBAnVg6CL3y8eVILrGED2\ncZosX4upDF96PFVIPmSG/54Afn6mBMI1iiqkTk5ln3VMxzmLXR+gD9br7hLQ\nVzgrEtlSWD9yZQS7neFuMALCbPkAfxyB9JBwEPB8vewNsfc1ZYbqfPpl1x/y\nQG5y\r\n=pi4P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"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/line-ripple_12.0.0-canary.fc7c4e5ce.0_1620322127557_0.14013452233350132","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"91eba7ba3a0f91fa58326aa45aadf89db8fbfded","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.65c04514d.0.tgz","fileCount":34,"integrity":"sha512-DmmnblGu+Id2KYC03onyR8JgasHkgH4rdLEIqPGOTn7Q588l6jR3PpEkHKovwyUvBn6rcZyI+QR9MqAYEwmUOg==","signatures":[{"sig":"MEQCIE7/0CLkATXk3BVFxZPTd1trJ9iYFBXx0kH2vQob6xk7AiBfLAJy4oPHmpH4T/aErjfrwhzLn/mEbRQ8K7qXbbr3cQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDinCRA9TVsSAnZWagAAiMcP/2V4GPK1YCC5ijmrWR0a\nvDnopXYUEFwxVU3HiH/ad0taBy+rZfIYGPzt9Q8Wo6CCD2NlZzCyRfQrc2zj\nTHJQKVL8nMN7DBKAuvuqaeJ/k5U8rDl39Kjqd0WgW6A2WssFhh/cFLML/Me9\n575X6tCnEysMnUqjt/8lS/MLhFm41g3PmpeBmBSpVD0C6a6Kf/O3QLf7Vb5k\ntTrTZgB0frBEh7UA5emd9WnlxTNOja7ixTCsGpAxzFTMJtrTMMuXDJIWgbhU\nJpufNmP3B6ErkoHmnEkhaqWXViNA6Fn6HXv7Lj4NoO1Y3sZ+SLb3zIL3+lcf\noi3ooWOoA8KiVu18eK5dMqD4g9rnWUP+H/QRwQeKXa6LufJyrzS7kjhVu2/Y\nkzzJ6HOdlS4NdiGQePh5Ht9XiUGvXEwwadUN+R2fvpg2e2RNZKyGbolsrNQ1\n6ZOU+q1MQ0WGA3ktuKlQFWKzN6cabSj6855yI+QYji8Xczd3jTcmkoNgExb3\neN/rfbqdqEuffrnIrz9tIRV+oM7TslZhlIMZSJnY9PFGSGBzu8tlnLmLMVXR\nsZ8FEFiGTclkl9LB2IeN7bF0Qyf/bv45qPWi3YEq3ilPfBuynJ1jG43bQY+L\n7lAMaoAm6HbZp9hF6LE4eWRShpf9BvTV20KpL/5vowgx1XAjYEz6UZbHeB7D\nN2Nd\r\n=ZrF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.65c04514d.0","@material/theme":"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/line-ripple_12.0.0-canary.65c04514d.0_1620326566925_0.17016951952724435","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7e5d3e8ad0f9d2c50eb4e9118f6c7eb85e7ffdd3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c97779ca6.0.tgz","fileCount":34,"integrity":"sha512-45ZasBE8iN6JlOOViQJX7ey/TO/ZyvJzpbp415eK9+1D++Xf+V6QpDeUOCmorOxIDycn2K4ab1JowoXf7FaKog==","signatures":[{"sig":"MEYCIQCPIw6DFnMZJ26dPuX8ZrMECz+EsZKjziU8WQRIoUUfagIhANRnYFTHTMHiUTwvJ2kDJOGZaa0F7JXcVxqXglbu3Kpl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGK/CRA9TVsSAnZWagAAelUP/jIc+/ZJq6tILWY/drh4\nyqwl51+zGolo/XHLZMqMIAFvGZdEW3lBpBqHHvx5Dnn7DanfD/q6dfV6eFEp\nHsH3ujkBbFYpZwZjhnqlVafVJI5u2XOCw7aYi/R4hTSdwe6Olgk4cffz9bwI\nJrsADjpzOBhrYJtUOWN2M7DTJEcfudgz+7M6MWRuw2Lo7QIMUNiVd9gxVKCm\nMb7xQElkU1GRKjZgjUVMSWtQSOFjAS7Q9h1BCckDj5/z9jhLSz4r4bhm/EWa\nvpPeVTPKzzsMp0lBQBxlLvZMawM6FiR0siOMTYGdvk7GjctTcQe7uzOiWqjQ\ndkhJbj1Sk4ERXg9O7HJ88xevkpapiciaEg1Blb85NHsdMrH5cJAI2vwMWDIZ\noQ3pxzMx1O0/P4vT2dFNy3rXk7l+KYZFMLcroFjxHIJAd4UNhYGOxWNAS10+\n+ZAKeEN9tyCayk6bEC+wpxIr6Ow+PHip5Z5zbYiZPsBv5kI6dT6Z1SgUVk59\nziFbN77Flnjc7swTOVbEfrPw2CghsBvXjLah644Bn353SZ4mc/6NRVpM+Na/\nfy9xH5u6kAu1qDUmcsN2HMJQwpxZG9pAMQ6u8wprqBz+PlWEMcR7aea7u7MF\n1GYL4DkM8/ZgvFWtUNojQOo5nSdXgrC40R47bEQGn5xjRgoVgTASRkbTLDfX\nXq2/\r\n=w3WZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/theme":"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/line-ripple_12.0.0-canary.c97779ca6.0_1620337343216_0.5683742286848841","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/line-ripple","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f740050ba99e71db9dcb5593ccc0223c7f59cc1b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.869d890d4.0.tgz","fileCount":34,"integrity":"sha512-HvJh0huvSanH7N/r4oA5vyNqUAKqGpNMj2EY7DUcQMc6zlDDKNEWTNGAZZ5/w3Hxdqo7jJQw7SXpLOaDqu5bvA==","signatures":[{"sig":"MEUCIQCRyC+aOuziRm8ne4JNHurkwRK7Vv9+DCfI5RbjZwZxVgIgUh3vfKHk0e5zzg7V4cTxVbSy+jfEo60f76ShmJ8iP3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVoyCRA9TVsSAnZWagAApA0QAILuoBGhVlg8DwrR0H1c\nP/b5x7ZIXiyKEYl3uW7gGssUKfXvyCB6d9br868PybsaJUvC5ou8wz9MWIQ1\nMsx9xdEmUJmnWmXb/3L7DBcCtugUJl0TCaJmBBa6I6yXWSA3lYSZhsYzDXBH\npalUVWdM0gUi8KFwlsc2tVjAXE49ZwVNOFljxBspVSkeCGszEy3CJTRla5g0\nQdEj6y4TUbRtib5u3FuoYe6E+wX7tlybssctBmExzPoZOCgcKPSnQpfmvDld\nyaDFUhSl9912GADh+6Xu8jYNEnFzdE13JfgZpaI5xB4w9eH6HyglD49RXCax\n4aQOer5xJA1dkptaVwGQ1JC5OawXbbloiy+CNxJZF//lMqxM0SIEeq4m3Oah\ni1OjFaxFiN5KlAfmKOaTaX1tyqTcvOAZu8JaNv3vwRPKpmaiEizApnOJUKXz\n+/uZRk/pfycB8CBQwr9StEzBl+e50QHrwod2NP1Xkdl8026lxVKcSpQffYqj\nPr4yncE+5fjedwKhYbgVHTcN80BEJnDUg/qdbf5RIBYGRXGVB2JVE3digsAp\nGPtVpZH+uEv2DddS3bTjPZSkIhLS42FY5+A7PPZJ4Ld/nvzFawp+Vj//zcH/\nSGh9D3OznCKq1NYyfzus+PCP30/SKeNrvnCRIG/2ElRy6Iu/UCQINTC3q/vU\nTxmg\r\n=r3d0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.869d890d4.0","@material/theme":"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/line-ripple_12.0.0-canary.869d890d4.0_1620400689475_0.7159227957704686","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b398b3fea3b436dc4cc43385f257e4e25e26e7c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ec22e1da9.0.tgz","fileCount":34,"integrity":"sha512-NkSQFerXhchZaCEaSGTJjuWL4GnDuACQVluQ6vj+1WrwRWWXtyQVEOcF27/wphChAo1YPBC0uAJ5qXnw/Ery/g==","signatures":[{"sig":"MEYCIQC5JoOCeRj0ixrBjoywvgeL/nG2TJEahT/j7tNC3GGqGgIhANhE8ee9hcokcrOGSujvh+laoW3rBvHboiY1LVAYZQlN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXoHCRA9TVsSAnZWagAA0C0P/janEe3g1dCW3WaZmd/K\nYaztWE7iiRxWtvJKwO9oaHTV45EveQxmZqAV7CAXlYuAVEwS4I2t3f9vo50E\n9+8sL7VYF330K3zgfgul3XrNOebI597RPklGhsUZ2iqHupxlBOE3BES1ydvj\nPHCqTEq7JRUFQDKeU22FSwL3hEBs5vftXf2sOVfRqVBOXErUTfs4SPPFZUwC\nSOHJcznSXJpYnF6VKSB7Fv3gyt3EJmc/yMUQNi7THwy370Vx5u+dG9Bo553d\n/xuGX8Ki0GbR76p286LcPKAyUocb8eicit/liNdLA2SK9ApeMhh4eTSTe07y\nEwOvufw0OCq/P5CE1tsEUTfywOheZOExTfruAmS47lA5jSBPaqdLMvkGrbpt\ndavgHu79TbketvgNFtNkw+HJDMIf7AOXKhgIKZw3U4UKi2eQA3dfiro43XM7\nm0DVs/ofeK/Mp2klNWBxRZQGOlh1xv9j8ZHwE2MTWlwFMvK2Pzqf4TFCSfKq\n1EO0fsVRg9agsZEPTG1Na7YwDJoHqx/LNEejLhqtBH9L1yYKYAlVazTuBBKz\nxSsSJE5rck5Otb9JW2O8TNF0DtniKZ8KCmHFqKcK4h648WxzX5LuQyqJXpL1\nPsznD9G2gbwrZvvNp5RqVhHS/1PCYh9N21j5sTBuVOx/aP24zvesQS/UakPj\nxXD4\r\n=XpCn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/theme":"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/line-ripple_12.0.0-canary.ec22e1da9.0_1620670982696_0.9767852035679416","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/line-ripple","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1fb3efed7e238fec1393168c97cac820cd010d46","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-nightly.7427449f0.0.tgz","fileCount":34,"integrity":"sha512-NjsuKCL91zz8tfpsNf7UIllbSo3Xke21mNc7qRBG/JiTSsTEWIFOQC1C72dwaLCC1M4jQLWPdyUrUu1DovHEwg==","signatures":[{"sig":"MEUCIDTuj+UvMneDvRg86Meivn+20x4TcOKERMHFB1onB2ZpAiEAjC1tmyr0UB2skhMNCqIifW9pSEyzvnVcSQn+fsQYc1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8nCRA9TVsSAnZWagAAt4oP/R8PZf6i26GSY7nSAoom\n61fqWl3BLXMPRJyru+ucyQueru6qaIvNwHl0xI4kH9KcNmN4eOMv071Uo5DZ\nXTZdK9m+J0VTTQYy/kvQKSuHA6PSPM/eaqJ6PcDZ7rB00JUJWibC/hoqlfRR\nmdDrxh0dn6SdgyXo5ByPSvNqWRB4oCnov/E22tKmdKg6h1WpQX++3nSkVqgG\nc0IxCAU5DP00M96aYQFD7QdHM+EY5+jwn9XAGRHxRblfAKqp46OuCQy67Op/\npTx51M1S4cgn9nI6kEoN27FALw+VaVrkcB7E+FczWetAWGeH+CDohSQh4r5k\nNoKYpBh57dljA1KB1HAMGVir0vyoWszlNcLYpE14gXDKnDvouFjnDnFfiUQa\nf3whwz9NKiHEkE6GvvgKSXGqcbPVlRttMGQQREOhFS8VN82dm7TJZDYfjPko\nXwpb8sNos4IyEsei66kH1VUBugegHrz1r6XsClNWhh5ap3F63wEiQiOveePw\nz+0iVFobEZ6HEnILuCgfKjSuZaqFn8ZqeDJMFdms+8jEtG485aykb9ANZbvZ\ndhmZnkRzqbIe4++ll1rb4oIGFvM5cGOq5zIYYtJk8Ld/AnVk+OwRBb4MrUrh\n+wA9bEnSDVPejorZGndlhmB1hUXklIt2WKG7Tgi0p0Z9+o9U4LrTNRbijMGz\nJilT\r\n=A95L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/theme":"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/line-ripple_12.0.0-nightly.7427449f0.0_1620672294990_0.6325652663493868","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/line-ripple","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a6180026f66bb28f996522dbc4fb15d70f066830","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.957cc3bf5.0.tgz","fileCount":34,"integrity":"sha512-ymgqmQh0bxVVPZPeVhb8CFnCgzn6/WEXE1UDagAXhgyskSIauKEilkGNBr/FfM+pLpoTT3wCfnuDJ/LkP0yLxw==","signatures":[{"sig":"MEQCIHYxhaYVIDoyEkTqjTZx8Fy3ovMkYdf5xgyBW+7bewdzAiBBPLw28s4dhavP1BEFVrkETdne6tUZ+xaJ7L1xBR62Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmawACRA9TVsSAnZWagAAgXAP/jOD8+QPUxnPdYmnfaKs\nBxNVKSrNUj8UATUBECOkXJZQtM8q4smhQSLUiHhvOc7QEpkMzudr3lQxCM/B\n0DFJDJW8Z/eZMpNvH0Snp9Au2pPBb3Y0khq+q6fVYqn5bSSCIZ3d3LxQyvCY\nlWvasD40IxcxAI5eXLFyPfWXLY3N6UKhF9ukVLJUBV9ZcA2CPiHLN5Ip8/dk\n+0CtD28DMhmlHjP0wo4Bo546A9hqD+yDvwiEVrd6vrfkjbtjDOq57suQqmP7\nn7JeFZ47aWqnCYQYHuqe27JHK24X/qJph447PltoJ713VKjSCvN7T1bFzkfp\nWOUM7I7Lc2ax5yNInOTV2KkopFSqHyTIqIAzF2I4j2sbGe8vBqioY0JkFn2w\nSSMsu7kWyvj18D4dj9TBMH4KtrdahL8J96mmdJPspCzquwa4Dy69P0so+UHC\nDtWcvuE1ggE4mYZRNLukIx/fWwfWQgyLZaLHY99Sg3+YUDKuyQ0qO4Daf6Ko\nvrOK+WTRbqdpkCBDgyyDtYVR5yNjla4ITboqyvbGw+bBPK9lpEFs6wc1odgA\nxp2SP0jowOJtpk95t6ZLLmEaUiMYSY9n9DGGrGNjO8fh74BmKV9H1mrbEwVN\nVo41ubbS3oGO6LAVg1pvOIj5grly/4YyB+O1YXQEceLCxZQfkSpxsAntrnTO\nHdV5\r\n=Otwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/theme":"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/line-ripple_12.0.0-canary.957cc3bf5.0_1620683776121_0.8105960286866303","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/line-ripple","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b572fe233a6d3e3ebbd76f2b3b5239b4165095c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.88a33cd70.0.tgz","fileCount":34,"integrity":"sha512-732ZcaTE5QrFJmP4FjaXi43TVY1NAoNG/ypqMNrb2EyNVF4nv86twA6xBV5liXi6lXgtW7dUl73hTv5kWmfTNg==","signatures":[{"sig":"MEUCIQDcwQtPOc6+I5TLnWQGnQH7n79Ebbwnmk6xDON/DAIDlQIgVKE9jcw1JWEDPT3ECLrzEUi3nLOpankB8uRYEN6s9V8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcr5CRA9TVsSAnZWagAAs5IQAIFuFEgZ5G+ncc58Q26H\n7DWNYMS2loxlcUKZe+wxQlyNZcdUcZjFoHcSHrTQYqA7OY75wyxhoXk3e9qL\nnXHVgCuqF71JVcUsDtQ0KT2iS9Mi3FyrJbTr7sHyPSF3ceNpk2HKbIKzB5cj\n/tMf7LeRJM26CRIZ+1eAh74PRYI11YFQheTRLmIm0GjE03nshNd1gLGQl9wQ\nAcUlCGCW7GIrKhTuM4pNwUuZwzjEngT2SiO0JLn+bdVME1qqKgnDpHErr2VQ\nMFDMehIRCxj7+Rj4oedEyDH0Es/LJwlhOeYaRbSlpo1Ig9LUanJhYncbAdSn\nS/ZrQ7n1jqsys3MBDeEF8xCYdXBUQQy9jMw1lGfE+G8tlNrlCcXI6BaVGU+8\nM1giouhutlgMR38KyKQd/s9/zFz4CYjY41/d/FLo+JtJvNdpWAiHIKbZ+UQd\nwIv2P0Tqb2ftFrumTZEnG280DoT2HoRY/Ru/zQIkk7RZBgClFCTfKM0JglOq\nxleqPWIbpiz5Bn2lsDFzkbHN/UwRat9n/jCfm/WA2R5VTHkQHtG9sptVmBWT\nw87jYi/WY2V4myyZHmLhEg4I0isaXa1scY7GyUNPZTSrRHH/nEbHumFmrKTV\ns/DeTXYvy6toa8fP/ROKBVcuwwH1DFFzJDTh6WcdLsxkzY7ZuaBSN9P6xZ5+\nnNPH\r\n=NhEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/theme":"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/line-ripple_12.0.0-canary.88a33cd70.0_1620691704628_0.3421705545110587","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c26cefc9e70d28f9ce42cbbb1413ddded7952891","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d20dc6dba.0.tgz","fileCount":34,"integrity":"sha512-rpJRQlAg90zHx2zc9mZ/RmkMhRhi32UJ6WWaChO6KadObqkMux0/12aNtKRX1GxIr6fudhdbqVAKGWhwQ9Fe6w==","signatures":[{"sig":"MEUCICfaOJIf1Pt3/4b0upwnInQPqp5e3Z1GQs4uq1Z/n/P7AiEApJAWl0fOlGom+S9gSAq8kWEBaPgmIUYf+78OZPik1Ok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc6rCRA9TVsSAnZWagAAnX0P/iLIJbzgsDTrPQvyjtJF\nI4MxBbyPOlPyzDsR/gGMtjvUL7ZmfE7xxwbCowbZJh9KTW8Y6m6TZEKucwFJ\nKO8sUg3RHd7JdFWJ1HdtJiCc64BqxZMPMOXxy7yc1YLsSS2o5v6uhSDcIR/d\nO3VviAH/0+ZB8NJYTy7ioCX/BmF8iW1eTvpwoRxUzESh4bwxr6fsHdTKxmzS\nwVk+rXwwz/5/unIT5E8kHpjTLtSYSUAnskzrqAgRVg2hiOUL8GCPwX6wveyD\nvZ4dsXguB/QWMNepozZWif5pS6CkAS9bZxhAzMSAwg2CbcSieURQG+QH0itS\njEuDfqlOyLqNPk2fYzsmlaAR0SNOcsqmzAdisulGfDsdb04qn0GsYdn5XvCZ\nwlL8kR97Dd53/Skfdu0neToESVnAYCza6SPndChGyitj9ZjVvXd3GUlHxqfN\nzSvbHUlZquSpcLCz4vqakbDEBkt0Phydsc8mIJsERXRz82sFnWra7D4kIeRJ\nsavPCkUvmiLFhJFc93MuPSwOS0MplB4YMvf9BbMx0unUrD1QgNYyft7ILlvP\nzKVTp8/PMxZxfiBD9o4HY3UIDQu234PF+jXVxzrme3vIeF74qo6/7QORPCY/\nL/YCpwogTa80W/Qt39wuET1PQkJt44I5tMpFQXrtxGQFvsZFT1nXni4O7yuL\nso7p\r\n=98Up\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/theme":"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/line-ripple_12.0.0-canary.d20dc6dba.0_1620692650937_0.7425697958956787","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/line-ripple","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f587c02879e4672957fa806033ec9e3c22bc7f0f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":34,"integrity":"sha512-kLE+0JSIXrECzTWFHEhCb7nlMG4fzgfqbIZMdfbWYQTko5aSR3aF0ckpI5dwc/h5ECpb22QY23WGbgE0JwZmng==","signatures":[{"sig":"MEUCIEAug2z0yfKnKm2T1aBTr29PjWupcgDWldRbDjp5ftTbAiEA0J7GHWgZHqPNte5wsSRE5/STHDkFyfS4riEY6BJ042I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdadCRA9TVsSAnZWagAAaXcQAIUFxzXEmBl9fJ822L80\n2Xddl6RUfCGkP2fYnxVEpvPw0V2p2UIS5DDEhtg6B0Fur2PDgk68rUFxuCi7\nFsdzqadXgfpqKT0ygHz8HzHGqkC8Yeq2VOt21SeZs0lyg9chmnthmdgBf6Cl\n28E5NbkVpQ05z0Pghj0s6eZ+6IpxLu48MZshsSyVoNz+CklgZnIottNbRDti\nK7CdbQb8tL8ParAfjWHnp6w6qq2p6B5g9sx+8Gy1uoKgGgLDpjAA1WdV6LrW\ne2TpfRjepQO347ceLQfbTd0aY4uGY9DSQIjOeZu8F0Aiew8TprqOVJ3RZiGt\ndY+zsTGtX9BlJT6aCfmWo42BGKOUzfjZUh9QGKCTAO3DIKQeBtpICmmMTtGR\nUI6sS+qNLGHqcK4b144oXtJv2e8QL/1D8Gb/jHNW3XNlVDGqudPGEhHtKfiE\npWd1lPWKfAIZtJEM8Jc+yFwZgup2XjrZ0Y6AYNVvDsAxHkLe1GNzoPnzp87O\n5PvJZjKAz1gAnbDfsG3+WOv+kxJhSmBUDZsHNz0Ij4XrHibXqOqvU+OaEwrS\n6hHZTNZoLtHnoA5+7XcY9yp1n99bIBJWSIgoGuabG7BJOc8FmVBptfE5oa0Y\nKwpeLephuyEx8TSiZ9azdsbuRFruQ+TjJxoq8Na9QD/7E2H8QmSAT/Z75aPT\nwEQG\r\n=4/OA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/theme":"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/line-ripple_12.0.0-canary.0ce2fdb02.0_1620694684662_0.24560636392081503","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/line-ripple","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1724825d05d7873fd9f26326fc084561de13ce92","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.cb162da37.0.tgz","fileCount":34,"integrity":"sha512-49pjOXNW7D7fU6XXoWdLbNgKrPiq7xZVL3OHKiZ1INuf0zgaWPJUrI7mXtIfgAbtxa3DjToimzg43CSwrGeKEQ==","signatures":[{"sig":"MEYCIQCJXk2/occGTm3X8fEZWbgopqHJslTa3I+lwflHYv6p/wIhAIzkU6G3sNI9u9QMDXPikt1TE3yZVuF14WlLBCCaUjh8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeShCRA9TVsSAnZWagAACIgP/Ahmt9ksQNKtIN+X0H2B\nqKMzSqgkx3OBzslbivYZEMh32i2FljdsjEUOYnJ+rwjkX9MFgwDPQ9fOdjkp\nCWT1aHzDHlFAlCvVhql42v6QhTTXqjcbH9767WZMFhlnZnL/n32FSF05KAKF\npNfh/pb7/jUDSTw5pN9Kk9QCUnTHpwGhuhlBdRmwlzd43PPeRDZtCbnh+RoK\nhT19BRAYpvbTzCJA+3zV1qZt5d8x60T1WpVMQAr12QlNmhVjI8tQlYprzKg+\na3/WZX/1jAhk3pCEW6E9qoY8IoOwkEuen2zj6LcujHk9twdns0CehDRtOSLw\nUP3UTTPkjsgKRAjDQ7QjMz4uxadkAFOGesro4mI22o79heInnXewDbtVgZS4\niqw1n3t2wEiE3O3rfCQlPwxMVLlsOEy8weOvp72spa4issWJcktzGy+0qV6e\nGyVDqOhPZBEXFCecyyIdm2+mYgw6wVh41O9oikFt5sUtHt2klAfeiCE94M6X\nD/+itChw1uTBPnfcNV1qZttiBh5XKWO+JtHVVJSOlDmGjtzYxG79kFg2Zwz1\nZBUeH4L1IzCCkH6EfXUV8YDMGEvXcmtFAExuidEIg9siqvRCTtV9VV1zzGzL\neGv6oiy4mlEe6hJg8GQBUOm86YE4e+f8tRmNjw4TSwEn6k9WqQsnw4msFXoL\nM5WT\r\n=yLb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cb162da37.0","@material/theme":"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/line-ripple_12.0.0-canary.cb162da37.0_1620698273050_0.7632363781614504","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/line-ripple","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c8705ff557d12687a5fb81145143497011e155f4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.573dc7ffd.0.tgz","fileCount":34,"integrity":"sha512-vNZf+OywSUFY5KrIWKLPIAq53sRIhO+/Gwf7n+KoDTMoKDwoEww+gspMgR/RWepfjEGUHUTYxeueciGQqhRFbA==","signatures":[{"sig":"MEUCIEisa2Majk/zRPq+8ZH2XXMnTwOMLcrwyBXQGZpw38R3AiEA0Pw0qzqb2wZUV9S2UYmyErSvxHmm4wI+qS62bYPy/2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmekQCRA9TVsSAnZWagAAO/0P/0mjGGnKjy8YlRO0lvt9\ntGTXJbOl5+GGIff2MuRxc2PIWZGakShVIXab+OyzNozQqmI34rDriyeHaAj+\nUG3HG/79NLYPqviAEaD7gCkiPs2ARC8KvVTJMkgqRCrgxYuKYls/tvFQGqM1\nmLx+nPQIT6eDEHPIwawqfYVHx5r/ClYfJyqwVOzpPpOAeiN56rGB/hfvPJiw\nwW+eVSTE8FaNRng3z4LM1rXttpKCoQqiIfM+J1cbR9Z3cKMnn39AzjpdAZJV\ntd7nxW2FWrYy+fLrl141632QAYqooAyUr5P7rampnWD0GrWcVUUc6z/N5pEp\n/rLeKu6JoHOXDN6IX1dX0EbCUFs2KKteb+pgKU8kVUgQRE/p99Ixzb+B28J7\nqtAIzpE7VGNELK+ZyuO/ATXHB6KV2YqidEViFaBS8kphzUlc5pGXiEyKZKwe\nrPpXt36uKwcaKeMp5Wze4vKfDNcqOPtUF4fk50D4dzkqvKbvHH+6hWF29vLd\naCRloF3fylGzJYmp8z/E4xek6aTFPXdaPUHMgm3y1RWhiKtZSskuPsKsXxxx\nHSD8wbE6ssFfgyRT/tOe5JFDZMhbRxgv2HbLqzT+onu2TYw5V4aejYpW+zB/\ncKfeT21WYZhs9MuFmp47Mmj88qvHsj3+PyXamq37KEMjpdPYVqUG0diRpK/a\nkbMH\r\n=NE+4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/theme":"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/line-ripple_12.0.0-canary.573dc7ffd.0_1620699408315_0.09486965062974129","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c28657fa16cc709969d1624689161a8ab96507e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":34,"integrity":"sha512-Mgdua9XeOr2ZWZquUdNfat8xNo9BY97pCppDwl3aeLI2s7I119b8mQoDkiboLSdi3JDYMseeB8ijcEy2Nau3Hg==","signatures":[{"sig":"MEQCIFfyuS+RRsMk8CegGsud9+7bD29MIs8pp2/UWMnnI9GfAiBkxGT4lo/MDWB8RpS26J3FtNjUP4f1F5CBvthChejZnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxGfCRA9TVsSAnZWagAAbcIQAIMviwSE7/u/hCyMxKyz\nVGC0Yj7WZHIfgwLZOvFDyNGxBsZUGmLAouC9cj9E4eLCThN5AklT4+U82ii0\ndrGhh3agLWWAdGIARj8keFs2uZJbLceBwkEdeWVQ0WwQrFiwY56dR8h4B6w3\nbWKy/14Uxq+NlFM59xDqblGq72j24BcZSTX3OIHTbhmU8ZAIqAfxkmc6wwjT\n+XBy6o3zuNJ9MqENSVDYQzlhbyQepKpn0u7joaLNTw892E9AohNtqCbXttwH\n34KPqVI/NacsiU93EC8hZaZkx5hPql1+YDbzmmOmXjiBeWjzqf1hYQW19oXH\nLf2NTrC6nqxFU+7Y6Wpk+sBPUfPB2w7eCnvNv/DRDCBgTjaiVubm3I/KXXOl\npxKNsTvloDHaHGx5KZdv4jnWEtSY7scf/Vke0nIKGlQpTLD0nBU04YDxeaaV\nB3PxhS1AMi2PmJCFJtzy0MKoa7/upXR9spax/INNIpnSWSLrRO6aL08YCROz\naIli7vWyHFtXvctV6VxvC7sIvWwUBAksXY6Uvt6uD/SCYKmno34O9/bpScFO\nxLCFI/6e/+PYWObDFLAP0a9Yed0b+Tg4pihfgrRpfHlgDyhQW0iEpCOCktjS\nhGJymQNDHcvZqO5JrG4EvXUR60DDt2dq39Oqp/fnMsZUDRcZwzVex8wC/99s\nw8Cn\r\n=H/u3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"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/line-ripple_12.0.0-canary.d5f6ad3fe.0_1620775327380_0.5645820434158462","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/line-ripple","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d03e33f0c38a24bdf5ced4c22ea63c7f083b8c54","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.25751d2ed.0.tgz","fileCount":34,"integrity":"sha512-Fe+0Aut6rehjvsvcyL+DHpSFtHUlA1DH0umUfihwBr45aMJnWrJ1f51NaAJxpKupVpiNfWJRL4N4ooLywWvjyA==","signatures":[{"sig":"MEYCIQD/2XAgcttOJ/DSkmZ5aR+vMH3nRIILTqD+rkyZ4U6ZRgIhAMa3NGVPbKjSMFVVW5uMlTwA0QQ4cPdYHiswQOlkjo/D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAAICRA9TVsSAnZWagAAxTEQAJMhYIUECGOBSBbH+YgC\nwBXMt6L3TH3Y3xgBwOG1bI7d43WpETXePrGk5RXwC/mG8jJQuddtNrTjS4gS\ngfYQnBoYUpzf8hVuZ7+GNCs6/mI4cq4cx16+F6VIccz3OxVTSfHfa5KET/jk\ns5jsAEeK5NVF7DMN5kr7x4gnY162WXY3/8j9KVbjCVIeY6GfctnTPmCMwosT\nglKWMy4EJ7XUe6+jOhEcSXMWqY+5318ZeAhBgRASWUCRxM5O5tmcHQIRzi3H\nZQOjt0/b1VIQB3mMi7oLOI0f/wl7Pen0eY+3J3JTYguTL8MAGqZgZs5ttgYq\nAn84Vchwwf8ErXpGv+9aUsydjzUptTbHo+cRDaQ4kQKnB9GBnclDvlO7vneS\na8k5lkJbzFNkZLgLNykdQCp2N0eweWKU4dWEcoef7ce6/pil4q/gdb1EXDHv\nFZ7kzR0NyE2VelXPczAhzFrkfGpx/3TNgnGu9SDxr3x+W3LfaFeW81xX6aj6\npI/zxLRUAI2s7tmCE+WCPb0yv+K5ZFAi1ur3LHx+HaOYiesznREXdKue+Mbp\nlMn7EcDassmSd2qQrOkB+Aay8QNHV+CenXAFsuwqHYLdJ3PvuCfZOSTmI829\nqrVSzqBFSXZ2cq/eym/O5/822NWy0o5+VhQICHTm7h4bFTW0KfpgpjLJBXDC\nfHX5\r\n=AGsH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/theme":"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/line-ripple_12.0.0-canary.25751d2ed.0_1620836360140_0.03820222764876724","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2415792616fb41489a76e2f45ff9c19482f0c374","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a23ecb682.0.tgz","fileCount":34,"integrity":"sha512-yH4aSEg0zXKPNTLpVP1h6TR139jIfmpzmp5vTiA+HE4MBDIl0Rg4Sqf6f0EEnC85RNKGdMuDvbhXLQK4VfS4fw==","signatures":[{"sig":"MEUCIGEU8eL9vgN9jc6oMmiUX8IDKFGmDDo559XrzRRaQsVTAiEApaERc9v/SUtNlh3EE7shmXQrUSom58/JzAh45CPS7No=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnBzxCRA9TVsSAnZWagAAvlwP/A0Eo0X5eHFufWBAq1tJ\nMlbsqzhrT7ENn8rmzG2MJjha+B3ppHpj0w3uXYTTLHgO3VGERRawh3u23/SN\nluQOSKUx/VgWxO8Qsa//mcfveYXeDoHeF6ayucxxQzGCph+rTdivE/JX0O9w\nFFaf8a3wEq7AyXsMs7GYUyT9sCPlmcQO3VPUuXJeE9j3OYVCePkP8tqqCObe\nrgIl+IbMuVLA3fKuXMUmeaA5j4LNVnqp3itdDpOha0ndBAAr8WMxRkmMB3+R\n2vRzw+Exj4KLghRR6/Tob3/M5i1DGTVv4I9l7q8MJDBWlYpkJJlM3jDa7o37\nWacvi2TXs9IhXxkGP1m4VMMiz4iXmU5TlR7O9tr471ehHZvdJ9CF/I8loZUC\nhMNUgA2J1+TJE1pb7OQRva//3hqqkftesFEx2m5XKUz1pSFtBNQzsNxDIvWJ\nj9VviT360Sn8P+v9YXT3xBL9hvM2J/ww1m8mmbiV0A54jcM2SF92TQtMwSZz\nE+XpVgfmq0bzHywHA8emHxxPfYBmYsjHI8is+aJ0ya0tSvNke7of3qerq8yZ\nh1k2oogc68xeQA/PdxoaRXSuE5i1i9T49Y6Aq/jiIeyV36tntTVtrT0tWifg\ndvdsN77d1KgP6VURHkkvGpKfl5XH8MCdQ8Ca/+NBpcrCIaQZZOBm/oE43/sd\nFYw8\r\n=zJsI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/theme":"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/line-ripple_12.0.0-canary.a23ecb682.0_1620843760423_0.43140482422339255","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/line-ripple","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9b767e16a4207e8800c41ecb61fec77c60ba58c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.33a954852.0.tgz","fileCount":34,"integrity":"sha512-U+18uTMQ6QBPlo9+ZdrQ3BKjFPcChzPEl8+VM22UI8fxv4w9LNhS6xzGa1+DUkCYKCTjM5CRkG4eMgYIndnwSQ==","signatures":[{"sig":"MEQCICCqd/HnaaDAKCfXY9bl7jFulv6ezXasRBf3KpotXC8nAiB9Pto9ZqI3PdGqvyT8zaLS7lhPHvJAVqw2QZYLX92XMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUCeCRA9TVsSAnZWagAAE1AP+gICM7+Zw/L3Tu93ppuX\n79U2Vn9IIjlGVebMxUm43RCJKTkr9Z4xoqqmWIMz+58z6WFmEim+pfAww5fM\nqIbRCmnoWo3sFP39WVXzd5DwovvwfdJYh/N9VtDkf8q4btYyQeAXNKqZvhnv\nghbzrFp46+5I/oOYhWEeVx3YnqErIh1y1jTfDfVcHBbW5HUo4q21Zo3wMaPT\nER707dJKemuofpcL8be9TWGJEKjehbzGmlTTGQ0cjd7FHSfXoq7dfrCZS+uN\nbmEvy2DdYUNBzFVA7gP4gtrd0oHX3pjb46s+tJqPFioPYPa4isp9DceSdo2r\n05v/H98F5AyIvLzq9V3UOAhCk+6g6TC4X1efgLP0hoM1m/v+3ZKdzEfqcWTg\n1sRe3P/LKrLOLtx5DyowQbkocUcuTooAwKl8Yrshp8XUVJocxR5jmL4iGRPa\nKBbUqAxTVgInd4Qm95u+zpeDwCgJoqP9GEwi162YCvTZC7tlL8reWA4bFYi1\n8muhQl093Z7yM/Z/9wryvKzmiO6E9hGAHvKxODrLNMiVtXLWh73cdZwPjVrY\nmy7AeG10KnUg4jr5r68WGiXgjjTqyWfAnhpO55INOlPaQF77z5gBHKamh+8J\nQI/vvVuoWCuWkC09dhLlbB5eaQPPtmNqw7gQm34EzJM4ZhK7Xh2XkhvZLRtr\nAlh2\r\n=Xa4C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33a954852.0","@material/theme":"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/line-ripple_12.0.0-canary.33a954852.0_1620918429522_0.040663555943737606","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fcab8c1fadd9b994d3fcb30e571f4a99f8d87a4d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a4484849b.0.tgz","fileCount":34,"integrity":"sha512-mOghe0bKgGYbeygYfxzwarrOUG1nCoNLbN47BFreuFljxi6N+aDsPcQzIrLLO4bGARDxQAg/pWLq5LSngEzVmg==","signatures":[{"sig":"MEUCIGpdMw7ed6pWmYU6MH/EkSM/v4qBHsr64GMHhlNqvB5PAiEAru9KndpL+xJEzhdmEaYi2xNS5R/uzP5ztemTg4zgegw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUYUCRA9TVsSAnZWagAApK8P+wR64Qql7o9G5yjPpQh4\n0LZahZOQ6KypAlurNLdcHHzC1ApFlGiCmINl5Llh8h4v88b8lB/azt3E7KPH\nKMkmNkhQB6DRPJ+qY4B5gr0vuCl0chCczEP59Q/xWLni1OVlnJoijO+/St6c\nNY2FGKjDwDNjdJ8ndM4bBGbtfidaG0EVIeo5b43vugKlzb/qTBcQ2ahGU0Sf\nCDQxbRpHUnSPGZ7w2MdZOPcEoXu8FFQ/TNfdU6I+nvR86hq5Ermtk80WeIrc\nwqk2y5jfHsXcKb7oi3H7tRC2UUPKMfHR0J23f6wYxjxVJTKLQjVWSiy2XqiH\n0bXIfv5xCrPVLGyyQj2AJ9VK1hZSvAx99vlVe8AOjKoQcpr7V3MKd/K8hk8o\nl2RBmQgneqXutXDdO7IpiHDrZN08dLsz4gw2flPPXITeXfUBlNgUVxBHLXJE\nqR2DM0G2fCo+akn4bcmYjjoE3pqUF8noFScURsePvV6tTEfdE872Ct2dwAD7\n7kMeXzdC4fr++xBckGsWFg23B4sWXvOPfOgAGI+w+sx2QXB9EDX6qgECrPtq\n/Xsr1BbPLBRJZcvoQL5X8I5BkKxcm7jWpk1zSsYvgfWr+Xs3lVsS3CWnAY0L\n7bi5o4hbxYl00NyBI2pf8WuVO6muvRywHgP/oDeQsmQdB5Hl9j/oI9ZbdthD\n3Deo\r\n=N/HJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a4484849b.0","@material/theme":"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/line-ripple_12.0.0-canary.a4484849b.0_1620919827792_0.5475082452111648","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eccd72bd85a8beb03bdb2fe7ecc676816be7960c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b4c3f513e.0.tgz","fileCount":34,"integrity":"sha512-crKw6mRvRBXDnm4zacXViSbX9aETIENpQ4rE+i4VO4JKaX/bPkr6etYwNRF4sA7njmzGQl1CGYbpKRn+VE4JWA==","signatures":[{"sig":"MEYCIQCC0W/ksvtiwt0M7Ge5+f78Zf5/KLgj2hvC9cskiR35awIhAN72Jsv6hQ94f4FBOQdJ8v0wh3C1aYj8hR6tlWuIO4Qu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7DCRA9TVsSAnZWagAA3ZAQAJ4OVw53HM4ahrHZBTZP\nXimUE/65kes+ubgEJJkVTpeuCKUv+UOr3rC/34igiXex/tvNfXOQqVDPBwLl\nngXOmgNiOVUWSi3vgzKq6uH7up8RlaCVOmwJVv0uOqrheYfFqK9GvmivpM8o\nvswDKT6CIuOajTz1h7mpgpsD5pWyJM7/nXcQ8ejRldAhoVI50bOEXOxqRPtz\nPNQSRPnDBi5XtfTLidtiYMglPert8ud54GtGq2BD2cby7DE8F9BD1XlE9PI+\n5Vz/1oRUSECejWeG7/lZBcXtMZqXKB9MBz+75toKGYLjKijVkjdcWEIxas8z\nG4y6Ndu2EmY29Mf8xz/mo7pPRp031vbBdj7YFVmTGIw4wN9W9pZBvOYKrflg\nkyIjRg7LZ61BUehoGUmOEcSt4QIFsN8kIakzUYcDfAMepYCGtannxxeNzg1E\ndaVJXkL8kg3zXXVwRA+nMa38thYAkiED2Z3k/DicHnGUAkAvYmPaRn+uMBH3\nF3hOVSxt+QA0p7c2Z355NmdtXRXuJGavjqnOjwTs9lAgMu8hrDYoQAJ6WD+f\nqhsAHRDzanMbigTikCLlT9Th0n3pKdcktARGYjye7y7VXIU8wzsq9FuHRFGm\neUZ0AZW/0v4zdI4GoXnCDrvkB7AWWFjxUf5AkIC0BfDwUGl5My0TTOwfIWSZ\nM9GU\r\n=BrV7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/theme":"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/line-ripple_12.0.0-canary.b4c3f513e.0_1620922050645_0.8324649939473341","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/line-ripple","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"09894c7f8a4e742dd14726d36371dd314c8143bc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.1a8d06483.0.tgz","fileCount":34,"integrity":"sha512-nzld6/1KmTO5n/qJCdQP52QOP9Ey9eRUpwWm8Qjhvpc4PQOO7oUN6wakZOcZQtmDssCpwSRmSkGDsvYltNXoIQ==","signatures":[{"sig":"MEUCIQC5S3iPqJtouEPhlSx/WqhOosDmbkaxSHyCebVhkOxieQIgQ+ogR2FzpHuyzDAg6dksmHLPxr9nwlbK3K1CDNsRkeQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVAZCRA9TVsSAnZWagAA9v4P/37YWuHLdTKxSBzS80ug\nzpzLMytlhN7IHINdiXqNhVk8rKO0q0Hw4Ve2Fewf6PPAwtiWHiNkIwv2G1eq\naxylwhUm7L+seE2+46bG0Aa9NtCrIdSeTkDN+aaVYZS9ww4O8CVCsFvFBsOG\n4INgwN63p9btJ16oYlgzbJpCE4MmYbdaZcztPASvlRn22nVnl9DJdHDPFPG3\ny333aRbZyX0ffPSNjOZAEpcbBX/+witnIySPi4Koz143TtHEqPS9YCtjXUhf\nPD6xtQMcD/NFGyVgZtnTj5Ae/UwO4SpMjyyvDrI4r7Hxgle7lngOHkYzMmVj\ntny2J6VRh+gvqpB/DTsVLZuv3e3tXXCl/7yMvKGPzcqhehmPVOuaJHQqcwi3\nXiQcnht5cl/GP4IxqLFjlwTd08u3k5uVJOZY3hv6oNwJ+czWEHE+hKB5uEPZ\nl+T5CDj3MwBdJ9DP4I7tFgDp6ymxMg7Zigi3KlX3xaWvkoAHKst7Z9EjjZ2s\n8pJy4aEl0oIKgHwB76tM09GcIcRJLBl8P0pL9eJs7cpl2A4nUCH56m4y//Zw\nr/DAlCNT8CSFgJvZxcKX1Jg3XS7mcMOcBqqxlITgenM/8/QG6KXmBpe479Nh\nRbmPmplEBhbGS9BgqrPeVO3OaCKoIt1txSD9e1DNqfBh/O/B/jyN2h9o5MNu\nDv1a\r\n=NVsa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/theme":"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/line-ripple_12.0.0-canary.1a8d06483.0_1620922392772_0.9389585812670787","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f3a7dd3e2edce7e77fffa385af7f763a75a6185f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8e6081836.0.tgz","fileCount":34,"integrity":"sha512-NgeEI5rpk8OkBdJuTdEbzDiyhAxHJxVVFlydl+IA1XmrW37HiEji3q8WqtYAkYmlf8AXNSfSTm5tTp28LwIH9w==","signatures":[{"sig":"MEQCID6PJB0y8hKva9DeswyubUBOiBQ11O/xE+k2yaSMqZhaAiADJiNCn7+HGl7GCeVDH0QIFbVOr21LurAqWLt+5wWIbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu46CRA9TVsSAnZWagAA65EP/RtLQ+L/KzhW+QMwK1rQ\n29L2X2MYAbTRvktWwpLIILTnspkPrriJBBMLtti8akSGXJE+coYZI6PlcDfz\nZ4O4AIZDIH4JA0SUZ5ng7DZ+5RHMRLjrBkt+qoJj4+a1jyOHwz86EFPcGD2j\n3L9fskvj4AOe9g+xbExvQjsDXzTV1lB484XEDSeLvasVpzqQcG3nIYuuaUt/\nhNxIpJ1rFsYrDIvOGz16Si8ZIHng5kh6hvGl61RAQggjZABsF2gb9F8Amd46\n/IeEgizMramvusY+JFgI3BG3oTk+G2or+E0CKzbijIwRnoRkrjrrnyI4E4u0\n6+ueZaFWlKHvahLp5KBOmREfl4tUxixbI4QgEIvDDPlOx6v9ze5n+qQyn8Cp\n+9PTGcRZQIFHqm67F62IEFiRiAOE6Xv5vTTUvbMU3fPwZ3MMYyxL46YssNji\nmpyigu6E/sn2YHcmQx0tmpNmD6Yg9YQLKy+r2qMFyJlarPYTJlzCPCaS28/c\niUT/BHHCzslFNPHi69kBt7UxsmOeHommCM4JZ1Suw+0zs4V6a07B17z+qvLx\nfJ6lFf+RVLTnQzRoNlQmXlS8ywis1EW/711ajH4MAILqXfQUbMOvLO9RHp0c\nDadnFxc1oBqg9SvhzudXIg67LDhyRIHigilpdXzxQ0hk8ZuH84HvkhuyBRWa\nNxgq\r\n=HWvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8e6081836.0","@material/theme":"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/line-ripple_12.0.0-canary.8e6081836.0_1621028410057_0.5109246927399418","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"47861444e9e89d80f69f650eab407eb20d6682b7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":34,"integrity":"sha512-kC95bwUH/K8SJcXvSs2G9c1LyV68/2z7JyUxBcNa9AnRhEBf0LR63mQu98riRdGXxkt1U5sKES85A/dQzrtfzw==","signatures":[{"sig":"MEQCIDqvJPZrRTAcEezESOvYmHYGBSuf16DEAVn8Rz9RTfaHAiAbCK1LpaYeWJx8Ik77oMrXmrGkxdkaV5lw1jA61W13sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvFRCRA9TVsSAnZWagAAQiwQAJmEOigKEM9ku0/PktPm\nTIuEYsk/p++G84TM3VoNDTO6Mzj4ura7aEbw0xiODSosdf6SzFH+RgW0lpfK\nani9q+53Gvu5fX8+EwmX8vvaa24ZJ5vrzlE8NMD/C5QN3d94riGtYs1Xbt0g\nhyG5z1pcYUWgA4klwe0mimCYTAdJYU3+tIZH5x7PKDcU6ktX0jD8g/UwQ+Hu\n/Z++zChSUrsUjfsPiQNOJ+RTv3qVjFCYye6I+jrzlHbecJJujuHUPsN5AqsB\nDwF2bcBj30Jo+MAabzhsUfwKWWQXc44JPHDbHBEG//hKVZK9tNpq+S5gpQp7\nwdR2yLvs33RBzn8xV92LV6iEiLXGKzeMBc9wdnTg0Oax0DaTUsckE6XOSmq4\nLK2agDC+MiqwnTAg6b0tgeJ+4CfSh2mhqLGtmf2DwNe88zDAQGsWTRzhCIMK\n+T2YNsIMWuJhorfPL8DBuxAOL2E1iIp6D1E9lS9nMkX8roSHz2hvLT/4GgbT\nJiGrqXXrJd8snzqNe+/G+s6/JkNy3+eLptpMY3h6moBwq6xG4yIiFKoQVzgJ\nWrhrKaXNHdJpqxyCX6D+o7tilTgx2hnVfHHY9iXQPfZnYnDP/3c+6P+mq9H+\nvp3fUG8/JGi4NeUdWYNC7TYMk81fiYbp0tNJpPM4JBlgdevvjxaqyYL230qB\n3MJn\r\n=dYfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/theme":"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/line-ripple_12.0.0-canary.a2b0f4cee.0_1621029201282_0.27515774682990735","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5c4414deea46c54f47dc4de448bb7ef91098ef5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e8e39ad19.0.tgz","fileCount":34,"integrity":"sha512-ch8K84veZXiqTe9xSGsjFKVQPyxhFzOf++kjBI3IxG0MDxaUfqdO2exlNafhiO9tQmutBkIMLkFcR0YXNvmGkw==","signatures":[{"sig":"MEYCIQCAsZY2wfSPqjouO5xb011lmTURnegglB9vh4RWn3m7VwIhAMdne+VgExtsIbAf32VvHNq2eOs6rLH2+6vdXhdT1wrk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpB+4CRA9TVsSAnZWagAAkkoP/3VvzfY60lVulwzQiPVZ\nUIiOnsoMR8INJEsYlhyS5UuusH4ZMlHSkdNhvr+6BW6kr/mDVOyRZJ0VL+QB\nHuJ00r0RtODRLHtyMArQt7ASizOPB+2C9wmbjHQ06riC0eTYXC3AL0Z1BNU2\nYTRKdL/IJt0HrrnkbShG6B7u13bZF6P6i6x9NFZCoKJ9o72FzR4QnyBKog4v\n7LJwCixA+eUe8I3PpIfI26jcpEHNstX4jHmtp3LIpParrEGSgei2tw1046wk\nb6Wm1CROes4lRJVyOI451iEt3BbD4VbYmVS7jmXO0VSMtcp/YzNNj3wIIxal\n3rwp5v5LF5/9yAcJlvsypc1+bUZdTjzku0VqSj9DDifEwn3/xhj1d1Jh0sy1\nB2Adk+PPa54B8M9JPcGCAiMg2d+9UUhNBGXY+mvgFJltFClTjEx56uSxb20t\naa8k+Kf0rLnBv+oeUdLm8gF1z++sotaveeK1gHzYcjqQY92MNA4J9P+yK3vx\n2Z/VjQX2cvsqS+NP0RfAkmbx3YPUTTutw9ZmZSuhURw9RBa2OY6kBvmP9i2M\n+fDlUV3K9MUIZeX9fpQ1AkfUsdzzuImzcAUsynpYFPOVuO7IrPDBQEZYcX3N\n640vXUSRWIao5eylphA5706/rX2X6kDlUaYjQOfWIcDnZ5vrDOVnsOIOpQoa\nYZJF\r\n=jGpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/theme":"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/line-ripple_12.0.0-canary.e8e39ad19.0_1621368760125_0.7935453689898386","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be8e352c9aa6670c1720f06e88dded88abd7aa10","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":34,"integrity":"sha512-8cMzWyiqWi8rg5qtXK1D+Xrt0FS3OQdnNMAhjQiZW7C2+M8X21ZW5TgN4+DTwJ+srQTMsYBmVuESeabCxXtNkg==","signatures":[{"sig":"MEYCIQCH4545PLdssWqEu3RkMTUblfJ2JLenvoxImiloXXcooQIhALrEJQ8c4kk9qixjKhEy/2jjYGMWavAe4t0A7yW8jJ2r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS51CRA9TVsSAnZWagAA38wP/2WHJ+R/iBdj92JskWC7\niXuZed+fryJAHeGX0+i0zWu7oTnTQWRrPrpQx16g3DVCjJ8Llfh/WWZ3Vy3z\n/9U55A4FyUrFe6nfELbnIEFuEX3A3SjNP1Xxd9XCLKsECFWTJ1xLLPx9TDN3\n/z9J+v5zQCREd1zQ2OgnTLQVE4j4aF6lrYdArnTZ0uq7/nP/QPN13ZQZYN7K\npIKEbg0wB489L6z0Mj+G83N0umr1LAdXD9Z2CCIIf9xbtjPh5ReukL6DPXoF\nSVe0VXM2xEd0l3DUfM/LAgc99KQjRwpJ1DVOdAfYcyN0H5tLD+bpGGcEOiul\ncr8MJrd+2FrQdf/rkAiluiw5qMuxbmiY52ndoxn6SwCgkdf2BR6kIUOSsGW9\nFmcv6Ry1W+INtQ4LfuVoFbqBys2K5UAncytCjnI5kvCnJ8x/hu4V1ixLFGNd\nomB2kkUebFgBaQOH1+cKJvlw6Al7vJtzWvfWCmsTI9QgRfdlhlTU6z7bdglu\nrltzQAvS5OCbul7mXDKcW3RFeQ2v92rxyMu7wbXmQmN52EhF90VvvGVS0qB0\na/+SuFHnCYK4xhAKQnUXWgk0So0D/9BheUiEjx0yigiVGpfwz442C+ZNhQ3c\nBeH954fkATZDgvAwjfsBD5eiYOP/t3Ah7u+/R1SKL7oPiVDVFZ3/XabMD0is\nakVx\r\n=w9uA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/theme":"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/line-ripple_12.0.0-canary.4bb5eea2b.0_1621438068691_0.24946462157369576","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"38076bc807a2f25a4575dce89dd25505ca12da16","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ccce99cd6.0.tgz","fileCount":34,"integrity":"sha512-p8DqqMmVX4EqFxoRq9avi+ccKe6PXrNXj6Ky5KVMOhSfBaLbPcNoCKQ+XJzjmjirMwG8AIURGcP88givmQbTMQ==","signatures":[{"sig":"MEYCIQDJ8nbxXhysEhG+gawdF/PL6pdBB6EZrRNBIEXK0NFD+QIhANBfSVt5NCYRw/rcregT2vPU/pMLVKcO3uBgwmcSBiQL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbO0CRA9TVsSAnZWagAA0e8P/353vRQbQ8hIwyCndlM6\n2JFS24jh7Ph42iNOO10ZSwuItrnlMn4TkfDtVBi9WCcIkyxPDu6BruylY5ba\nS4PYx35ks7rJgacTEvctPvGE26UJZKDdagjbttxuk1ZgC5Ayxfk7XdgPKZY7\nQO+R7ylgdlQTUc9EuOTdW04ZUdmYzDLpCDDGi88O1zfNLDVZtWwIFtMjvmPy\n/C48lZA/GQz7OPIsIotzLssGnODrwL9lNovIXI/XEP5IxtM1y62p/zMYpWLq\nJbc4IL2JVsIXGwYsXJ0B7KNrt6Zzd2/lK4UcO8baNL71i0zIksoFudOlgrJN\nqg5KN8wOhhf5bovmzeaQ0t6mhsAPbGR4afEVc62uGnoD7+8KH6P1sq+kldrh\nVfoEC8eSWgcEdL8dqd7h/0LiV3U7AE7E6MP6reE8zaggC0g09z4+akPFXLng\niDVct/K2FYdVRdhtqIsV/iZCrbD6en51tuZOwiu9ZRz0Vng8IXRIe/O73tsY\n5LU4sntCfaBT+cbwh8duRSemJByaKg2Ce1ceKhZkjgNi/b74KtDLvXJgtbM2\nb5uD/GEJfWKA4yltKPfDnxwW/s3UyteqZUpTkKdBRiewTckGxhdeBgO5Uq47\nlbEYjAdt6Z8UNkVHVwgM06d+bFBancLl6289t27lUV2Ccejdz23BzOSPFA0a\nThhA\r\n=i1iA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/theme":"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/line-ripple_12.0.0-canary.ccce99cd6.0_1621472179543_0.38721133477386016","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/line-ripple","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"634ceebca80ad657f3ec132ffa232e6b374eda50","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.14767a8db.0.tgz","fileCount":34,"integrity":"sha512-EbLhgGr+pamK2MzZP4NDqxfwB3njzar65jJpDLppuZog7S/51W8NOl39PVz7A2dSBEVOvTROKozCjlJxvW1Z+g==","signatures":[{"sig":"MEYCIQCuR2CqHTcBsfTlUUDadIIxUFhvGQhiv28u6ZSktCFG3wIhAOSWZVajr8Bt9DKKRcV4kTRoSU/4ZNsEd4ohgFAal6Ef","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpsuSCRA9TVsSAnZWagAAU/MP/j8W4rZJXnzM+xiG3yjA\nw50V8P3893r9zajNxrlyHlEWGwZdmcA6hsif0KIrRwWnjYB9bxZkFV+2Q/4H\nNTNE+HphpTyhFXGgo1tGhVerAH8MubeKHg+HEynCfz9VUa4P/qQAe0f+TnVw\nbmcvfoBkZ3f4IUJ222fwkeHOXcVOdyW808AL6hr+53LigME8fg4zc891NHzz\nprJX9BeKzmDwSvDRDRItrPEAreIz/dAMflJCJ/vJjuHXoyI/lgoIqsP0Mfaa\nZfjiUFESRz15JyekKk9uBdC9uWN0mOL/eC0Mkprcj6wWzBPbFkKQgJWNYd+m\necj2WEtigjMLCnwpURAn4H42ciryR1NIAxDL50cdtKVAd5GUd7vB8i/JKFum\nOvDX1wssd4MpAd4RQg8+jpmoYCz5TGf3MUkk+kHAXYrzZQ8EAZmetOqp7A0J\ngSSPj/0Lf2oMentdpRJ2c72Iv0XaYfFsjzxGhZTR0JDVNaKfVWc6y9kmpup/\nLpfAWXMa8hX8ZqBIIn5D+amc+Zn0Bdkt95xLHj5atUXHNlP7MHX9GnyTdOFJ\nbxOyicmf++DgjVfcQdgrE/sSkq2XhGUPk6G/HCl+jqcsG7K8Tp0SUtInE7QF\nYbwwfbxU4efx8CqD0gzFDdoj4iA3eo7tCOWSkq1fYvQUYnD66DitvSQ3BQ0j\nT5V+\r\n=5a8K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.14767a8db.0","@material/theme":"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/line-ripple_12.0.0-canary.14767a8db.0_1621543825675_0.452865124930133","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f1d53eac9b4691c707be02dc5aa7c8d7b81eeb8d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.22c6dcff9.0.tgz","fileCount":34,"integrity":"sha512-GCWFsu45RlJKw3if5iME0Lonjp5+rOa3pGA7hkajHx5kNP6SMBKAPu4/Gt9vLXNOGNstUa5jvzDNU0f5NLlVCA==","signatures":[{"sig":"MEUCIQDcHml2CeuyrrvohF+7B0/pPmTgg+ZlPxbsRFcXv1M2nAIgFW3/4hPqkmgQpzKZA4twbt4YNMYMEkqpDg7b9720xNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8OuCRA9TVsSAnZWagAAhOoP/0GJDm4Xu7WBRdBzDHAd\n8iITx7uQ8lla3ymCjAGwMPhIqJoSYO4iTi0UmeIwPgogr0gn2csOSm1gSlDR\n1ROjbeWb0NH0+Jos8MwkXwTdFfpW86IvBUZSKDJxOafNcEQ16KUm6hLXJdz2\n+1IFIm9vwIsK72IyveZnLY7tdIWvAGD8FkjiDhDHWqsHU6n08vWmqhabcTXY\nswz4p2gpVMZxwGdEDcDhCSuxSVQDdBaH+0blXdLKx7MTX5Rz1gUK1p4LXJhk\n5LI3kRxOxABtZxpcrdwsX2D1TI8Y3tC5CgilfJuIF8TcdvP+gB0psfAJsy+P\nt9MC6u3PFKF4P7irxGwR/0UTr8/HeStwvwSC0SBLFdIzZOBkkuwZjKdKyb/Z\naXzjA8ROKJnaz6tWz+yupSFJu4/DqF3DOgdbdjQtsv98oES6mW3faE4XF9U2\nYKMu1ZFLOXbDoxrAJ84yNbteX9BZzr6FSQShlvDd/U71J39dy1kU3NseW7Ik\nD/HN05Jzy6SEG2xWnDmHW1sKjQa72gtOENAo9L7Mpp2VnB/T4Zvl2S59mv5j\nCVIZf6dMKQNJpAuZhvD3fe9xCpbhiZqueVkPldBXBzd4JTJj+zjsa26L3xlC\nwbfWQOOJ1ZYWtN0+ABctshOQccEaThzmIRes5Y/jJuUmLM791ufKQM2LnKI9\nTwsU\r\n=C3EZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/theme":"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/line-ripple_12.0.0-canary.22c6dcff9.0_1621869485975_0.3472309375655782","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/line-ripple","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"43bbf4640ec652473a9b06bfa64e61e7802b5434","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.fadab3372.0.tgz","fileCount":34,"integrity":"sha512-NzWAdQT+26D1VcZmliggjzXl8lNiCsWtZjV4YIcpYAbUEy/1IlnESEccLvSTL5xuQ5mW0618sVzThdjiH7gZuA==","signatures":[{"sig":"MEQCICZM8Xyk05DGg15Qd9XzckUDHpOff6JzUsBSmNh+icJ1AiBm0PA9GuNjbPnCRMhDVfPS00N9I21ldpI9x0qj0wsiRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq864CRA9TVsSAnZWagAAv3kP/0aRI8Mk1hYi3373ZNoe\ny0Dr972pN8hEgiAzxfjPDbIEfHI11hKU07BkFPZ2SvyKvxUmLLkRmk8CNTFm\nK+XVV16gJozLAMZnX7xpJ9+Ooe4wE8/UTureBb7Eej8ktBNNW3J32JVCfEer\njK4YUONwvLhgveYdtgmtvYIOCMaACMRV52N5i2dxaMtc108PB9rju6U6yh7i\n1D9pNjhooEAiFcZMWpI9+NaPeDSEk4EGgzEKG4/XYu8CMcW9NimcJ7Cp98CZ\n0ke8O3w/Nqeg+hIYbj07Z0s2yNBhoRfNNdb5ZuW1EjXcbSJzIIsIi0vj88Wl\nDoC8Plh6HDYSglH4Qk8N7Upm2Jep0Q+W6qcSTQyhPOWT6Mx9gEhIwMqSwsWs\nnK2OYPTKSPgfBh0B1anJv+hhkPOEDd6qXETVn9xalI1jWMY87TVmYboXfNF9\nB27NkCKvE3qrwqpqpEx4NjLqJipM/M1f5MB1NH8f4Zv588x/VioER0rw9gqw\n4crNr0Vrhh4rnjMObCyP1h2SIsO4mKMsJ/7S0KkmnxnvOirHNdN4IAr47+ZL\nOsMV27dtJZvYROhEja77l+vhXYqtLoiNQi+BkMvqiAFBXla7O28/YdHeJZ1X\nys3OM/jch99aQVyar5TmbpsDEldXyw5k8c5vGOElYCpnxhrTB25ACedwLAom\ngjwA\r\n=XRt0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.fadab3372.0","@material/theme":"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/line-ripple_12.0.0-canary.fadab3372.0_1621872311998_0.9308286184603429","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/line-ripple","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"146b0fe5bb42948760485a27302d94ce602407b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.caa73aeee.0.tgz","fileCount":34,"integrity":"sha512-InscTseqUZ3zaTjZGgSI8Ri8kSDJaPskWrCKMw6AbZnG1Xg4vngsXc9fy9S3t/BeLcGA7TIvlxDSAJ4YGpyeAg==","signatures":[{"sig":"MEQCIC3NS1BlZ5ZvIlvUx+NgPSC6GOrpac5FxFGzm33BM/nSAiBWoPOp0KZIAVWD48O9qWJGZKiaSU3CqBQc4kvRLnMLvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQYiCRA9TVsSAnZWagAAZ90QAIkY2+7hWdEkeWfLfHfv\nqll1YEU8RDFvNVUJqxzSltgmNL/c+++lY4edCnU77CF/phPLJgtDnY+I5iS4\nryooAd5sJ2vQBC+cU72q9iiIh98vvKixX9r/vN59QlHIskpEGMyi9YRupLV8\nYmbMoyNUOhiWYJ7p2kZFxDDR2bJBRDBUAzPHq4LaoXGNmWC+soHUOWu2S4gt\nT5KPEORG2F2msT3mvpENP570SsZPuEUlofZBbV2C18e6VSBmXjRhRcJ4+j4p\ntvK3ogrKw7UfMxZnBEe5uhqNU2zwrSaDF113Weu56qF+VhEaz2pbUtvBBOra\nvd1vOIKIkq0SeLPTKShWI8DOhOFoypjxirp+8Ir3Yavy3tU+6XZxk2X2vdlE\ndlSHFqUUhSbCjfkCb93P8RVjpGsZ2P2duwkey/x1hGahbPuP2T5Pzf47zjGl\nzE/qebVpjOXjRGtUi+yNfPvy9uNagBRloIXJLQAq4gep68ftcYIB2FhETYNO\n7/0SXrUXdMtilK09/5rFfV55gdhCHkc5IDiauSJWkyafSEXw7xWLUjuFmAta\npUq226gptUoq0AiWYv9n4GYXbMcM7W3XWbFoCe5XaDRGVP+NbTdZhIC2fdH2\nKOI8yzRmkUR9GLLTW2rZG+zAiAA6aZ1hJq3eh9IJfyO5WHIR9N2YCcBj21bw\nPi3P\r\n=Rxrg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/theme":"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/line-ripple_12.0.0-canary.caa73aeee.0_1621952034049_0.5864923362577144","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"55e768b1efb855c6f393971859026ed3d232681e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":34,"integrity":"sha512-9+fSt6kXbHXIl9uuea/VgfLNEMxO0AV4fTB7JUIHatFO22J89dR94BNTpTDD9Yyt5DqMMhGDg9onFm/+8rXtmg==","signatures":[{"sig":"MEUCIQDvKT1j7iA19/AHYcPHky0otAFV0Hi4rz7LlQhD3v5bdwIgBqAQSK8RrYGnKOl0WaUFkm9V0LZ79JX9k2ZvYL6TH0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV9vCRA9TVsSAnZWagAAUDYQAJWW1D8M6+1fd9YPr6wB\nCGchpq6Pp+ufl0TUhLQ9gYQdWAfnfAvfHjvxc6V1sFqP5Z+ktOOlnC5+TTAy\nckHB2IKk0fzGt2h4R7NeWTcTq39kf07nKG7RkLItPZC951kwExi3OAsF6Vk3\nri/BCWZFIsRwPmeXtGmgFUeFQmFMOIlTZOusnXjIhNu7KmHbpXtNt0+1R93/\nAmUA216ktEA4ugbfoaqiAjpgtLgHBLBymmnY551WOWLIjbxqSRkxv6y4jVqq\nt8kg9tilDUAcP9TGXAmZ4A/KgBpKmpfKuz0NCqv3SBnt+3RdrGeIdB4/Ahr+\njNQoDnF+4TKtFA4XvHPiPHAQArBCIC2ApsxUyowpOZUgLVIUTl97nTc9Hks7\nXMTEIXnMCCMKWec4yCTCwQNS0Km/yA4/RTFdopZ+eBstVb35sDc1vlBDkR8Z\nu5wZ9BafUY3pL8Y3b7uIFr42ebDpWY4s1ezZMhhIrg2ijuNfnmVzDUfYqwNu\nC927BKXu9tGire1xdRjRxtghfl89Cn25WdjWgr3s10L5hgOCcbFaaOjIU3Ni\n5D8YLIrZRe+F1zWZC0U80+GUEkRvc41GvqLuw8ugVjBzf0KRCT/72wuhjU5k\nKPkPo74B3OmRMZadUtw90Lk0g3m2Vtx5VU+hVmf0HxJEaMOTVPmY3s6ayL7z\nloGt\r\n=kH8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/theme":"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/line-ripple_12.0.0-canary.ec31ae1ed.0_1621974895079_0.424195992515757","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5f595a26b1bd82204a54ec92a23973be7d71d748","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8530d3514.0.tgz","fileCount":34,"integrity":"sha512-fmnNrI03jQK6+KOqtUIOuA/WT8EgKfZT0Ye1EXeDaxaLps92hAx3OTTr332PJ2Ipkero1Pc9z+jloivnSPULJg==","signatures":[{"sig":"MEUCIQC500IKO4EXzySmnoqHZ4NlBujutgtDHnNzUtw+0zs/1wIgQcdbSAqZ2xepttos1352zeVxg4/x6oiIfK2afZWUa3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8MGCRA9TVsSAnZWagAAgCoQAKG1dYK/x2g5VQ7Comlt\nsAXBQt4zR1PfntEGn4nJxqw6JKE2+6I4kB58pFbINxYw3PWRqrfvXy8hQqU1\nAo5+ljAZQ+QtOpq9DH31gY/UzsiljkEcDdZ+oURgKREcGiqlP2tVNUG8uz3c\nQUGAYa1rWYfS/PjCTYNeK/Z8h8NX2pvUlaMzsoz6eV3cvu0D0trR4kbYIv5o\n2MupY5cjguFRkWcdpWUikVkuhWKc0vZvRdlBHvNvVKoG1dpMJO++zk/TTbap\nmCpd848jgsoLmE/uMEXvaVEsPpZrUQ8FiSbSlaxauIsxPXPQXvCilRbKYF4T\nLhfAmPs/ipswbggO2HHBP5mEHDzjUb9YVxyZ7yHZGSqypfN9KY7e3ji/eV2X\nltK9mQqmwfRstYybL+o58KT0wdw544j0GK9COPrcjDMxDN7o3hU+zLvXLeN+\n5b/XeimAScEsOS2UvTV+BCCojyjVVn6F20FLmm9w9y8C3GGUtaQ8D03TOHQB\nMkz6SpicERNKlZrD6/Q5djH8xjpXlhoEXRfvkWrbq/5qnWWy+xWIniorkBo/\nGsn5P6fnd1IayJAsmuKlJxId6QLZYiKXkRxpp8yhtugfVCIGVkjhZgBxPno/\ngYnmIF2HElKb+SLynOjHhECyQSgKdmhGn0+iD9PecoDLqw3ntaGeI+sue36t\n5mqG\r\n=9+Lz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8530d3514.0","@material/theme":"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/line-ripple_12.0.0-canary.8530d3514.0_1622131461845_0.6589393882560901","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/line-ripple","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fba020d7ad5a5cbc4b15251924634f303d773b3c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.00b5899dc.0.tgz","fileCount":34,"integrity":"sha512-pn8+zQT93AdQVpxBjFqasfuhgi1V/Wd0hmimCvTsRmbuwhRga0mnaPyn+Ef7uvWmQQjwS60onipSkP299BVF4A==","signatures":[{"sig":"MEUCIQDZdCpsgv1pLcJ5CcCA9NwGtkudb/yqK1SPtgSqBglvjgIgJNH6VMFFGtIjnvkAWELmrLk9cwhQoTUIxJ/FHNv8cfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrhzCRA9TVsSAnZWagAAa7sP/R7/B34nPts/riA+Nav6\n7qprmP9Hr9Zy6NjUcbhlGpYC8TpQQOXb72X3jkQJVnnpp7pbeKE5CBi06sPN\nK8FzTyI8yRS3uFJbXJ0kcS9oVellDkBnhX9ueW+ZYmnTeBARy9CNLooP7Qwz\n4qflLY8A2Ob5NABG/4QkKc/O8PKMR/H5DKatc5OY67ZadNkis9+iC0Gd7mhP\nqsMMSlRCjHR93xyZfIy2+aZYSPauOLTc4UxmXvn2wUjKRUO4dcz2wJPCUwJY\n0E46HxlVazNCnF8PEXwuGk5WgPo5YaAXP+XeXL3c6GzeCxZDd13IdhD5FSrx\nUIMhAhp6qGsU8oJ2IpmocUNpxNhicb0JvIwZJRwufcSaYz6jNMZpMM8T1bQm\nMbVkBVi6goOseJoEd6YQSW8AS5mD9rVE9vl6YhLunC/RaJvZ0RulbUQ9L+xM\nUS9MyDPmJn/UxOlK1kgndQ1FWXj+odflOEu+Ka/3A+A+dnTxFKhM1mjl1yql\n4njffdLWRpHskez8+RTGd1O4IR73x9m5eIyK4nJi8FEPdsFabt5Dl9vC5zZw\nIKY5WGmkLP+QO6Fjr6gc/gLbzNAeH4CcJILfNwxffVuGxmqWd8Mc5mj4s8x5\nzixIJwjMwWTDtpY71BN3nuJ6vRU+ggJM1Ok/Uzc5Zhx4esq7MISwTW0KpBUI\nvnxc\r\n=F/QQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/theme":"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/line-ripple_12.0.0-canary.00b5899dc.0_1622587507300_0.8864127551051255","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c7e55b3aab0326eca3462e28da5c0649495d065c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f1525ea3e.0.tgz","fileCount":34,"integrity":"sha512-IHqdqxTeFrNZFnmjvCuUrtdYS3MTiTmVn3dp6UZzri83PyVcrzW2iCcNUJleDx9q5mQS2MfxXAETgOtDpqOmbA==","signatures":[{"sig":"MEQCIB1HoRpDMeV43m00Zj1x5CrIEjxu4+dzn0A5PZSYBMglAiBP7VBSMaQo+Ri9oY3vyxRY+ls2GHNq4MJ8oV4OYlt4ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN7zCRA9TVsSAnZWagAA8AYP/jqWIcZ99e78xJBOkP3l\nd5VjzZapWXOOyX2zlySAplholYuFn+zNLW9+YrsfmpolIINSfitmKdUnJ9Ci\n4abfTxl3lC+GIrElUw0xkf6T2wby2HagEp5/knVoXjQQGZwZan963gugCS5G\n5v21ZtnYFPCXpwqAKzl2zXreONI/Q1V+ou8M+rduOrMtyCNulf84h9HYt0uv\njfl5TFwv29BjgDIW9nNmQ13AVIzLvpRpq6Nu2QYQ8FImlLC2Q5vCy/2hMotQ\n+VCx+D2u7k+zVeIveFefgAMmAMIS2Tmb+aEEmSG9mbIEa9eZunle8q5FO7rq\ncXB8oN1TyFLIU8R2B/wvij86UdcH6MY0/DH2LOdh3uHvPz2wY6Dq8TUZaNsu\nqpmRgnx0hXQ0JpHcC4y9A2KnO9oeXRj9GZVPBhTs1NrYHViB0MrFqwQZkg/R\nVOEsde7JXDtPhRLSZ2OIw8RCYp1mOQkIaEauNvm0Bn6c0h1jHyJ5vJnJT6yN\n7lOoBxou/MdlRkRaSUvBYfg90h/P5bKDKkFXSCYIwAKkAzaSw0DIC2IxQ89j\nQi334ufwRbV4vETrdDOggJBq7Ywb8JYJ2l7Nee3aQPq07pJGIG2SgBDS9E6M\nvlDoOaVx1UKofx0Rx8G3GIcDKgztkAycmUKzSVllj6WBCOxFFyUu/Ujp4/wc\nN9kV\r\n=opIz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/theme":"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/line-ripple_12.0.0-canary.f1525ea3e.0_1622728435045_0.012363288670820038","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/line-ripple","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01e62c01ec2b06b0c084122aba54b9dfb6059232","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.464a00286.0.tgz","fileCount":34,"integrity":"sha512-KxVM7SDLJtoktgT0PuN62jhr9sqpgxYv8eNUg3G+PtKtdvAt8hV6jjrI+CGGYyxPpnxhjaP3o3Ftmf1KckYmNw==","signatures":[{"sig":"MEYCIQCFgOIGoHLeQEQ5zoDn5+It1vYs6/JrgrpSitN3vyKxhwIhAKx7QT6l8amC3ZhEuFTTZipxSFFBjjjvK4Gh2TtKDuPY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOr8CRA9TVsSAnZWagAAej4P/3LOULwsmw8jp90iXYNR\nIhoFD20biN2nuVc1XQqm0SbOzj+LLCoMLLKcy/zgeNBS5uGPVRuWrZm/rejB\nxXVu6F3w4u/sop02mq/b/MD517AdxQdSnrki9/pYQ+mnS9SE7QLVczIywHDS\n8t4SF2A5aI5DoNGvNylRh9G1abD9FzuwNMJ2RNDjWJaEPN9SzKRYJ3UE9r7U\n6goDfv8ugPNkDV/2nhFmJM3ML8ci7kDqhyHTo1Zp1AB7KCjVJXgvBbJZU1wq\nhWoR8wZMEICdIiePTY8b1+6Pl9l/ACbQfGFaePKJfBJkIkrjdjOcSl/GTb4g\nGN6PODjlyUN5Zm0tYLesO3AonM4BSIjO429XvZ8DEz/qBnk2wk7kAGKhXg5W\nEAsqGXQ3AszcyzWOA8Tohbq8mPY/DQVc4mKceZs+3zZ7OhiwRi/M3So/Higs\no8N09un0IlNow2/uul7R1rCTCjsEEf1EZptIKKhPchQ4/brXqD1aGHmdzePp\nBMR72jkURx8atPA/hO7O3b/+wmBTCiGqsBa5skV0HBCw1nTTiuN6sN3wrzM1\naWNZ9h58M8rbLXXUUxPC8hSKN3LtAm60UJEWGmdJaCyo+ZWR5H3mchNVQUjQ\n8HJMKJ/R6wEYRMI7iKoqa3qiPLM4ioyNDQxfpn6VFyUHpUO2AXPAOuUz72lJ\nR6bH\r\n=pTbV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.464a00286.0","@material/theme":"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/line-ripple_12.0.0-canary.464a00286.0_1622731516337_0.9103013139447047","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/line-ripple","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf992880c17a1fe8c226c102c0b2f075912552e8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.474de7878.0.tgz","fileCount":34,"integrity":"sha512-gDnQa4xSgHdyZSuTJZ0bEDFlvDUJZTEvP92nm4pqbLPecjerXol/oeHpLq9l+GMTIWhwIHyrWMwN3I1jg7hVVg==","signatures":[{"sig":"MEQCICXaSvpb4lMEnYVBZ73Yn/JVPmTWYBp2d0Ovoai7+GJkAiAaAk5y6eJG37NwWMqfeMf0W/Lohd1mYGQWR/piGewLLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPGsCRA9TVsSAnZWagAAwDkQAJexGAtrKD8B7EOoyawu\nbqgIMRp7LS2oyy+vUV5DAnKUaYqVXgvMeS7kZvXBxTNOf5RYB3iGev7zzMRh\nMK8hFhDm7sRsnmbVUTXUqvJ/9K3RPQlz8VBwyzd2wD0ZT9k9Q8z52Omf39Ya\noIUXzqtAYLn6NRSPsq+Fr89AQAtSZ4WRy1cLhT4q8AbXtT7kW1fGPio18LeK\nJBxhwdhqSyDDlKuERkjDzmdbAxp3kgTBLsSS5L8QsAe/Wz1xFTHUrNJ8N/ki\nNZBSg6yI5JML86/l+pNauP/yHsVCTcoxnHFd/tWp8x/JwLuMh6DLRRL3iP7R\nwTPT3U3QZV1siXeF5oiD1E68eYCS/W/Pda27b2l+X5K9CdtYS4mJkfLXi4Sq\nK7DQvLftOz6mKj4feagJrc6VUM2fDx7H2lTQPgvOK4yowLIFetUS324rn2Aq\nZPQKQLzb0BbFuFeF+Df2gKy+TDYvGeIzDhrYdZm4VwuNpwLPjKb9phn60F4l\nAVea0bxdvomZl2+7L1WxDoek15xZaGjgaDIsU0QhUwwq1jz+RHDIHuzteF5G\njIocCK3gCOJKDp51w9me18NBEbKJBxq+DZ9+LIamPGy5k2bCiaSGKRwdV7jd\nxnsgw6tKoxU5b0aQLDCdBnQD4usUC33jRGzsK67wgq+lzW3+jq4ZA4oy6w91\nuLU3\r\n=plEs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.474de7878.0","@material/theme":"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/line-ripple_12.0.0-canary.474de7878.0_1622733227789_0.6259786789373507","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a4bc42ea7a65d3852cbc5d81b77211d71e9061f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.b87ebf74d.0.tgz","fileCount":34,"integrity":"sha512-fRFFoNW4GmjKyw+Ar8QpMY7oMmwWaejt0R3UTGzEYYZgEoM8zr05qV0sNeoIdb7JrfyVuMpwuHoLsI2FG0zlcA==","signatures":[{"sig":"MEYCIQCPrves7eVdeBxHkZfDfmKxrDay+zKOvJyZJa2IVuTztgIhALxcJ+D815rtnZJv/szTGazXPjhyLvlypZc5RsxiET/c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRVQCRA9TVsSAnZWagAA9moP/2L9ecdEsrUVITgTijav\nyz79ws7jEzMjZox0ixIEKSvCNeLmE5PvXIaBr8oH6/H5gwIPJqo/0SKYfKkQ\nx9gFMQl9ypOs7nKvpmPVC5jAvdzvyMu+wYrDkJnyMtwaOf1hFbJLeEgZykww\nhypzi34PX/9mK0QPeE+IlSoUUd1pEFna1Y3AAzFYI7bM6T3YCyRNkZP6vIS5\nvU8pj9pG0BAg5bmnjzHz0B2TWuGRoNNPoU4eR+QQtZJKUMonpRu0mkm+5QCH\ns02x6ktqRphmQeqFk+x+qwNgdClD7V9+lzBWWPpTOY8ktqcdafeGQsDirWmc\nRygqzbhhjHZFRMWZ7huo5YmnyGzzIibb2E1MAyP/OJz8GHtt82YhTorChWuK\nf6yWiTR8G8Ar9zshv5eejGnC58s9XLwwjnwNenX7rFz00YPyeZCRa17tO2Eu\nTAAP/AeddRsabn7nxyLBJDglOwVnevG4qsrrS4RAvWK7Bl982g/SCCZOtIOv\nnBU6te9zgA647ZLo26zodBMpzfHNG+hBVLBsQ2aD7ZZs9Id94rYSyiAuP4x8\n3AJPbtOynFbnOhBmqA1ep/UdbTbznz9ao24fp7vz7zUEaI5avNVR5yS3mHXb\n4kyPhqJtgUQarAHYGXs6JgYJGbOO50OPOHG2tTIs0kxetTQEX+4pJAROg4h8\nv/Qo\r\n=d+BU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/theme":"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/line-ripple_12.0.0-canary.b87ebf74d.0_1622742352311_0.8507526093114806","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/line-ripple","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4c7a6e2f4f12c36613158ba30b8c196f7435e99d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.2daa49b35.0.tgz","fileCount":34,"integrity":"sha512-iihPL8uy6k6v19rp+rTGhqiyfhmh3vC4ZkfVFQyx+zZNOgbKDi9g1Fhjbai1NI0MBoKLcjK0ycynfxcbpKoovA==","signatures":[{"sig":"MEUCIEkNP/EI9RnXjnAH94QBtI7pt7PsC5+64rot/bWKCsB7AiEA4Dh0CjklL7PcuctA/Md8tE2u2V87Cb7WABePxOyHpXM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulE1CRA9TVsSAnZWagAAQRMP/RwAxQARlmK3G2yUe9Fp\n3/2tDTf5dlN7im3PPLdqDKVvpSq45CAucHWh+Jyz1Ullqb+KQj5dL8OzGZ8K\neZklO8s6yNAI9l1+vr+I6sv9gnrh9FaP91bz7uIjm1p6Rbm1KQ0G2Evh7lLW\nf6elXsP214fvRvzJEL6w5uOsKX3GFZ9uPltPU1raktgb1Aw23YYvThdQXuGH\nhYyc0+vUlse+Hab4ZQ8LkXj1ovGNPFCAtaj7D32qA1YzfEXTTZqPmxzjAPGP\nIatgFaYQNDJGvNCYs5YSswR5k1Hf69fHqUoVgEYZgw1FUCfceD8/XKm2mZpG\n7pICsf5yxnhR6RL3ZHsNvx8oguXJFPtLt53rzHgWDhAU6gGh5gJpoHo7ONHa\nYzwE0cNQPdpemyCQ4oxprjULiNubseDHawfSgw3i1jwzwMSfVv/2Z4fK3R7q\nt3huCGDRkUD+cOBdpgC80zSAoNpoVYEDJksDldRvxUzEIOLnTDps1CY6mckp\n8hatMd5Kp29J8tSMNv88VqQtr6TAcWaaD5128trZ0RaIqWwDWKdkoDW4BItK\nV+EsnnoSSbVKz8Lcs9EKcUD2d0rkzs43oMETmr9HEaumtuHVaATPX+I1vbV+\n9CikyjSQYHRXUMlNqRLofKnzo1GNijc199qxHEBf7ndtTCMV2k4bjIf6e7SG\nrZkO\r\n=MQzC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/theme":"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/line-ripple_12.0.0-canary.2daa49b35.0_1622823221268_0.14963741453024015","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/line-ripple","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b714cf6a6654e269fc254fae0fe4d8054207fa6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.08db3d737.0.tgz","fileCount":34,"integrity":"sha512-przC/cclYliBtwJoBeCV+c0sL2dn+DKwCEozqlucsrIiRBSohpTR8MO71LtPsqaHj5P+SbvWHEWizwnNWRpNNA==","signatures":[{"sig":"MEUCIQDMWHEZU3rMwWdX5Jl2abE7tpRb7Zr75LXWoJJOM0wurAIgMtM+fjlnYoDyZ4RmRAEGdwIKaKJcsLO6Im8b2+Ip6Z0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoHZCRA9TVsSAnZWagAAN1oP/ifmJrc+f2v9Kps1W3dL\nPi09OqWsuP06Y7h+DutSwgeuxoP4S6Zwij93h1J0q4XTLt5pBGt3UfLUexhD\nWVv2o7TJU2XTd/c58zxPuZnozBRrIAa3vRFK12egyG319Z+eiYv2QSg5O2Dp\nBUDrHsjSo1vee+FQdJhoehN4ad+2iOWsrgQmFUyKiBIGBKcH88XcZvxpFywM\ngRAhSjpAYExXpLloVVEGWE2yHbUB+iaCDA573PAliM+wj6iKVlwjOvTiI3qv\n0pirAV3h+k6Xph8wbPnQMSmVOyppYBGhh6Vz67wJQe+Bi1xdTZQo/mmJZ6yB\n2gUHCkhRMQIKW23tfwyScLG+6Vc2qavlVxtjEYPHVkCO3JhWTTswm8Lgf9vE\n+JQA9Sl6T3JFP6zOW9HYJotucpjILPv+PlF/QQZt5d2joqOEv1Mp2CVtUQpa\nF0TazmSRwl5Ys3MVIdHzPZTfQWOR2CIh3QuKFOVPvp4mDSPRee8ZRdmhmd7/\nBfEFBroF+BN/iFHFD4EJN11PnxRjqClP1RutRKSIrKhPeR1v7ul12xriI9mD\nZLRVIZ2H4YgovQiYKbxAmlnKC7CQjUTJ+gX3TsaGCBrQtgBHIvM+IWWkpIFh\nqEOOsj5R4XOwvB3p1MCCpMSiZHssP6DAL1tfILVXN7HMUgss0PUvAVUqltQn\n+eNQ\r\n=OwhS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.08db3d737.0","@material/theme":"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/line-ripple_12.0.0-canary.08db3d737.0_1622835673734_0.7273064384926329","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c2a415ca07d17e8941d656281525159ef282beb9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5823407a7.0.tgz","fileCount":34,"integrity":"sha512-eLm9IBkivfoiXt2P0q24rHzjZ7P3R49LF2WT2SdjnllVu4N4rjkCrsY6KxxuUcjGubaR0vKy+qFtVUm8df3/Qw==","signatures":[{"sig":"MEQCIFZuJIak09ooYudS/2InbjabEpwn0hJX0izHqwkWL9x4AiBnZJbArJimS+/JZFlKh5UA0BUZbxU4/LuHMX7WiMBUDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr41CRA9TVsSAnZWagAAkT8QAI14j4FtpEF5ugSP66w8\nn9R35ho9m2tuJr50XN91Y4RFaz//vaLECQ0+00/8PwlC6KXR/XGVX3O1NtNj\n4IGoH7qSP5RIJ0LIqvVZ4jdOMDhwFa36Ipdy4bQUpxqKwoe2W9xblP+Pl8aI\nuFRLDphW0G49JetQjA/K4Y3lxgfSXWBLQsYCs1OqqWoUmQ9vpeqh3fkTUgHN\nsRHL32ITb8DZ6wfZgkpeX3+UmbNIV9wbMeAgeDM1gl+mnlkShltVkagnAS/+\nxIgMTltC2e7HfJrGS+HjXHWD4PE0FoUl1hs0N1WwfwXIvioZRwsDhj/+bh2F\nQVdUGcr1Jfn1/Kx2rImZb38lpbgJiYv7xeu+lXsCdFhPvTqRtSzKnAxlQenq\nedOqQmho95QmhkEWsPoh4V6+5RwmZ4OMf473mfagB5NcShkRGkczIsj5z1aF\nGsdlbXegNGtJeSlYyTL9xNaMKVxGmToaU/9fdFgLGRvtuaTxrEvQbfkNzX/+\nYuZOzNo65EdtHw2agDjdtAZRbIf+N4rHstE5O60Z7u8OYRwYCn9anN88A7Ei\niiLCE1c5SYfrXj9scsoAuc7Og8BGKSvHSa2rr4cupdmrwTm9Vfqiw9h0IvPX\neNmQoYg3kqg1ke/T+/ja/ssehM6GKU/QQfyOwoMF2Rt9wI2Wcp0m2d0gGs0e\n0UAn\r\n=wKS6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5823407a7.0","@material/theme":"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/line-ripple_12.0.0-canary.5823407a7.0_1623113269149_0.9768993818639395","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/line-ripple","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"130fba5032e83ef68d4bdae00a71215a879f45e5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.23b0c5e22.0.tgz","fileCount":34,"integrity":"sha512-qb9oNyElMh39/qeFKGgLEC2lf4g7xadFrn0Lry9E5iZjPK0kSWm7HiXQc1xnV+dJqkBABGJtiaqLVOFYN+FnHA==","signatures":[{"sig":"MEUCIBklGRaZrXsW0ZvGIAVs7Gu3DYKeMjDF/bZ4D456HmdUAiEAxEcncrDrgBAFAZVPD6DpvcdCBmdHWCC4ZUAV2BrOZ28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5kYCRA9TVsSAnZWagAA0uYP/1CvnrwJtPylJVRDegLG\nLb8ps0kuTybhDsROqAT14j1TYDyaBWvnRPsVt2EVK+BPLXwXEI7F3tBMGLoy\ntSeXlaodvksd1q1Hp7rtBQu8QGscqnMYZ9TLRAEWOqLOdjn554dNPfL5hO8k\nbJWxUISXT0ykTyrPEvhY8JEi6YpCWRL2+b/6bHGvzhQgbmv6LUpjl18H7oi/\nf6FLlvmaYjVrHviJSZkACXkfaRxU8lKnwOx0S52n4XNSLHLuAt4symfPfWYy\nPccbCOcv96MP3nb9LDjG2tbmSSucOIQUvMCqDvGyn8N9ba0JwvXSvoUJyD0S\nMz6Zf3F/ZVUP93fARN3Henji5kkeqrgXeW9wPYa0j+spDvF5d+YdhhvtLdJR\n3WYVC6FUrWQEZIxUjL7E54pYdg7kKXsFfE8k89tHpvdZl/dATY/18IswAbo7\njVfg1fLUzrxftZhPTJ9ZE2iaOUZ2yIKaNMw84mSaSvLGAQdxkQRGb1kgcWib\nUVgE5jpRXVSKDuBh7qbrQ7lgAXNS3nRreaTgBEGIv2rSTaYER1A2sLt99jYY\nf3NsyRrlQ0ut+6EGRRLUR6gJDaM4biLJiJCGpj717eguYh/tIFKrqvUXRkON\nGfKPSCNsw/E8Se/npEstOaZ4IPL2ULkxnDZEkI6SmewADz6PwMoaEMdXBbiQ\nHjNW\r\n=AOCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/theme":"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/line-ripple_12.0.0-canary.23b0c5e22.0_1623169303791_0.683465169419964","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/line-ripple","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8b00764232708ae25aefff3ce6b4bb69ad9bfb22","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.2952c6a76.0.tgz","fileCount":34,"integrity":"sha512-9kn3Tt1wF9xhX/5LR1dYXc1MfIKXrYxrxNVjyrwszlWICSh9Sk0JYeA0uBX/98lzx6k1NSQAcLlAj/NY1Tpb/w==","signatures":[{"sig":"MEUCIH1BfA1ZweN8BQy1FFARUgGVx44dgKA0I94Ewv7rGPbnAiEAp6Y0t0GSoK5WByztzzBicvMa/Kd5WGzRrdwDc7m6VD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6uCCRA9TVsSAnZWagAA+DsP/0DVCJJMOhCpwrwJP8Ra\n8PEfbLkwFqfOjLdoWyzHYQRbzbwaEuB0HSihafBfJGdjEt0JhkfNWAYeBYih\n4h785gTT77bqEVrWdQLE4L66BA0j4xbtFO6Gv+qoDKI8uw0+2nrZrpJCBF7n\nqu9NoWPIdLvoHqQ5wap530F7eLuDZUu9IrFWuHDFWr9tGkftTn8ZRIAWfoEE\nDK7PF7twsbPtL+4wW4Qmlq+Ju2PTNnd5O/MGBmq/fRPQsz6cVcjAIIqlRE++\nNbOLSt/vvLGDVc2zdaCqfi6RHHEPoWI+VoTvKoDe+MVnr9KdSHqyhaB8/qxV\ntYLVEaGhzQFVh97OwpOKoz3KwdfuC/jMuEYF2HFUhtvVcVBwbFqRl6YEcrzf\nW+H63gse0GO3oyi/6w1ZMnFqPDkBw6+7lAL4X5oAUUpOnRF5//mQTzZJzbHj\nEld32M5NVzNrP+eL36dLhjILtVTyDUxPxPgGgH8Zd0p7CMgYXdSObu/J0PnR\nprcVxEVlk4r/jnduvxAevvFa/zTmgj3iO7825ITFZUlVgpkzoc8TfSpo8Wls\nERb2pMX5TogFMXx9GmyAXOFXOswuPuLgf6EWwf20zIBffNVhrf7UkJKbo7xY\n5cr/DQesiEAUarj6qsBnlahF6luslGnTLhdrMmcgQbB8+rCYljozYPM7T9Jx\nSUfR\r\n=vHxI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/theme":"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/line-ripple_12.0.0-canary.2952c6a76.0_1623174018264_0.6840752007860762","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2e7c9388cbd2a73514bcb0c8d990f445fdc5f5e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f12425f88.0.tgz","fileCount":34,"integrity":"sha512-JXcQqfIMyLKlAxFImQoUFfNOTPNqnE2LaCkYuCZ6xeTLYutovQ4mKISzADo/JCZ7iXFz+3oGFdICGFLLP2nx1A==","signatures":[{"sig":"MEQCIHSew+pTnJWy0YmeEfVGmFI5uN7UuxIRbdcEb7ERL4+sAiAfZmN/j5jYGS4N6Km8tOMAZa9o9Sjd6tuqtrOEML5FeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWVXCRA9TVsSAnZWagAAKjQP/iJbbbjvlrUIctPLuPBv\n0WBYrDtOZF7RQLopeHVTAtNEs1m7QN/XEUaISQ6PLa05Jx82WwWhuCGxVz8L\nlbh+ROC/MHjDuTyoniGhUK0+arWYxADPuHDHCoCK08MG8n+mb1XCCfb3NtPB\nXoFgBlTJXyvTjKBakpjiBI4ERv5O0mcCaaaB+mPX10ncqVdDsChv9ZIjXkdu\n6hEZHNfi1lrQePSy83vmsSauRjwQ31fMP1MZMzHf+Qh/ku2/fM3m6XGtkn8o\nwEF98FkRR3cw1wjNc/+WxInGSrv9oSRUwIXlF9vdiJNAbyxxYQ+WahVqrBKW\n2Y9ia8FyEEnVgBb77aB4ZT0+p4ziiKK93vbwzxNTTr7g5WnDFdJYJyjIoCYI\nUnlHXyYdkS1f+iC2aM2pX+OqDiBOYUuk6M1mueSeoC77N0nPXq2zAfOfh72J\n7mHO/IlUEpZ9dphXzS+sHmFO6+y8r0eREGVr51oKLTJgI4QWd0+VZJO9JO3d\ntpP6NIG/T5uH5cv7b/+v0Bmu1U2OZ3/NvM5ZxFXaDwgRKQ9dOHFuIr8h6LBP\nkmDtkegRkpKg27diN/ELr1JJRIOjCG/qI2gK9KGVmr12vSoqOyl8FPBaZ8MR\nBpLVWJL7CINdCrrm1ZfGo+awMu2U2OGufDwD/m60nCd6zI59i2A4emhj2woE\nXNzP\r\n=3jyB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f12425f88.0","@material/theme":"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/line-ripple_12.0.0-canary.f12425f88.0_1623287127389_0.0959304221542625","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3502f95e5b59770086feb736f6ef67bad882e77d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e543628c3.0.tgz","fileCount":34,"integrity":"sha512-LB6CnInxJpnS0ld8BcOmO7NWTYYPOeVWNctFh+pUxiED9da0qkCSQfaG2MKLUlmcruRVFKP7b6nT5AjORWMClQ==","signatures":[{"sig":"MEUCIGiawzWrUnX9rjjizEVt5utrseh7JhGtebQWzQHjUUmMAiEAhJIh1qexkTA6FI1KOUhQl9rwnxZUtR3GXty1+hIBLPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWWXCRA9TVsSAnZWagAAxk8P/0SXX5IpxPGufNCDO2MI\nFOoWLbcAXA3FnWXN7R+SArTXKHEx+0uH0hkNUUxVFcYjeqErsjbSCq0IQ/7G\nmGO2+QW4U7XiadfWODYg1b56JwsNCkWXbMW/OVFRmWVkyWHJICzY2oAI6VVm\nvl4mOUYYrZqQheu73Y2wQEvaF9g0AnIW9eo89DleKfSMnrdLe6/t2W7rDoPY\nBIf/MQdKj314IbjvWQdsq1Fvoz8BbgXtvgrRo3pE7x7I7cEhT9h7rJ/TIlYb\nyAQUFz0z2EvdJegVmbG160LilUAIAsZfolVqp0Hctbr9C8Vn+/oKasoCzkow\nW260yp0D3LoAf3lICr4ixNptF24mGdbWaJilljpf54w8wwx32lMaScjfXXaP\nFk1tviBlP3O4OOZ78vrdBEkVs33WZqEZ1XxGcJL930rnzbPeLMxb8a0qZtS7\nweWHWecwXaw4AKW3ecSGNvKgqekrCE/Z72m9mxshDZQYLZYAN1WNNa1oirQP\nF6+canZSHyS3aJG7YJypL5etyr4hIolaIIKJMb0LY/BVOJWoo0RT2U/WcjP9\npQ4jI6Vk+ZuOAYBqWOpy29wRdjn02d16ZlDkc9I/OFHY/a8R74qgoKFdPh7A\nAx9FnNHm6Dfn0y1LS3jVJg5CZgIEZcIRahHcOxczSK0eUq1S78+LplytXzgu\nNP3L\r\n=wWyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e543628c3.0","@material/theme":"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/line-ripple_12.0.0-canary.e543628c3.0_1623287191653_0.8791505110228763","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1a27d36a521277bd05c594266ff24e273b705794","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e0c346286.0.tgz","fileCount":34,"integrity":"sha512-yCJWCsezrwpfCknWcanCsvJV+rX4G0tjMbceRmj1yaexrOdCTIbVpeePdc4qdletR3WR24G+VBLwaB065DNreg==","signatures":[{"sig":"MEUCIA82x6T6/H9ZzZMPhxsj1W6MzX/N2zB5suNL5ojAKUJOAiEA6WTEh/hUGtkQNVKs18eTUA2dbdXpmnNgdJMcOHsQXdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj9JCRA9TVsSAnZWagAAVTMP/R7myF5+/blsHsSXQMCG\nmIxMWqyUgklDfDh+/TKaGJ22ob4jkGeGHlEgy8yEkG6NSSRF18f2G2FNkzAO\nuN+cB9h78s4bZ+PBoiPBfU/joHDTXq8Rr2ZYKRtZ0BUlgEcGSpx/bC5waVVg\nQrYmhnmg73lGiGFHt0ETajq95OFtf/9qFZa3J9VoyhymFf+/O2vzPdkW4LN0\n1ilJUO+sW4evlf4PZULKz+EZdbJQVNxfaEIqaZSifZ52yjpqI5flx5wAh4HQ\n75duo2KwMq1CB5LOh+lSIgH0fZvayaP/Fwi+kGWehtBAl2ybjKOi28MX781M\nWkEJzReWZufigfthPLbiwPA6+k/6m5mgpg6TNYOhZxpeUFsRyuUKD/vMVRuV\nqSbgEAJTdvGFxa6UyWlhgCUfMG+4sRJr5avzZfH9Kul7ThsdvF5wZlC+/V2U\nE5byxpW/eb/G7RVY13w+eSFzQAfnse0I578bazJ9ssVCymI0En8SrW8MJwu5\n1dIwAglyVGhidgoZx+I3AK1nUzp6xJXWlOMZPnPTvySSChzaM5EB894jAJWc\naPhTWd2V1gI3y2ZaaXofcNS69zPh5VHdGa030jxe8CBqEvd8mFqE74IJ8zKy\nc99GFgoNfa+gX3bhB+3Izp069dehngP3Op/R4yI3qKe0EdWEYvZ85zwkGl2w\ntNA7\r\n=FuRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e0c346286.0","@material/theme":"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/line-ripple_12.0.0-canary.e0c346286.0_1623342921848_0.3303303045916033","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1728753232a5c43f28220ede19cd9b5e01ebc223","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f43af5633.0.tgz","fileCount":34,"integrity":"sha512-U4Fg2JQEBmhdqFadyzasUlXc+zv5nfdXlPNMtnbnSjwU09mrjbW9taA2IqBtn4hLJgdUVy4wuH41cG2U1gmNBA==","signatures":[{"sig":"MEUCIQD2dWxSrApMZJRWawasMQK5wg7zfEhNndvjj9FiWSXl8AIgYICokBqY2ZU4Bry4UjbnITFVfBSr89pdOwazd6/cF5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwneICRA9TVsSAnZWagAA+VEP/iQkxu+h4wGreM3TbRWC\nOVEtF2qk1xu3VsBQPpUKsYrHRilVIXwiTHeIjetisTH+3KZbMq2XyAyGGN2v\nkv7eWIie7kpNFphxmmqy/p04YVgqFOWWnmqZIahHQ0Nv+sCMvVbJ7Mrm01tJ\nBOJPEgZ9U44Y2QMIMX3YRgNr3lL8CmvzoTXsXdgrIhljqfsjK6LdXhbiaivS\n6s+SIlSzRKkNaFWy+RfQFR3S7ebi6vuP69lCw6yGkMSP7IBSDveH9UNDj/yn\nKMehyUCJViyw2hwacAKbKEVTqAWFqiZ+wngaJaoz41VUjxEVgoGwtAWW4ggW\nG1TWMP8CZ3r+blQHe/5+EmFUnOI8GUv0DRUWxjPWLcb9UptlsZEOKwkWHvFr\nulUEuipoJjCxEZFHNsmuEDXK2EeYrBK6RJ4uw2oUfDQNjhCEynwbbkczmAl7\nDMODb/N/NkVBdFSzBah2Axt2okVmbiLGhhD7x1AUumdOciAw985Wl6QRUCn+\nPTLuX8mXM9Dgdb3UtY2kZHxggDPyfbhPXLzR0mZr+QEecPmjxkkI8Z/NEdIb\njGrsRSUeXXo3Mg91l0UskrkyGx/b1KZNzIqE6+iWx/5iPk70XR9LaTdc1q3S\nFJ+zSZJf0FuhPwN4ilIRPyHeKglU3tya6biNvstLzmhprVi8hT8z6FswZ0zy\n0Rtn\r\n=6B+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f43af5633.0","@material/theme":"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/line-ripple_12.0.0-canary.f43af5633.0_1623357320332_0.8936218558937836","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"735c11465802805491443001221551bafdda1256","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8415ae585.0.tgz","fileCount":34,"integrity":"sha512-eYWRsAmv3FwJUP1czvezl60rUolyNupnMvdjDoquJyouWXc3ckwvDNsPrfLePxEb3lbAfOyfZn22lDb6m+5f5g==","signatures":[{"sig":"MEYCIQCBzmLdK5ha5uRnL/PCS66JMF3wNk5u+IdylanfN9HNyAIhAKF8Ei4K83H1+XTiMCuOTtrkSA8Qsmc7Vyplu/G+36HX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4m/CRA9TVsSAnZWagAAVQAP/jYlei8jt9lsFWBOrDUl\njsX8ZmI8UVb2q6J9wgcWPbf/4i6FDJJz4l+SdVWogJDQlNZD8+k7+wnVqkcC\nkYbql1LCamlYIT9WPGlgOksLTO9KvzMT+gsL9QtRJYRAAE7X4FiTe7gkrJdO\nkiM5qHdF9SvWrc1c3PNG72I4p+KRC1oad2NIsEvZ0OooPa+oXkuAId91AIgm\nxzX2rI9Bk7b4LFI1dmQxTuiWTs0SP7Qjv0FA7sZcp2X08lg8dLHG9KhzDpAA\noTSozvofI0R8qIRjoYNatepP24FQL0ErzkGIQNbRcHFqubF934y1ZAka2G7t\nh+HQ6lT7XenAUA4JFQfkW+5x/LiayMMEabJUsyb/Qc6I9HtQjydfJGQI9gUx\nCiurgUDkKhRzcF/YHd6IWL8LPf+K8FbJtqQQZyYOqOq7Gd9vwZM5WkwG1KmA\nkRMFZ3ylUJsi1zbwFYfTeiga81NKFGO4Mdqyx+Cpmc4sFc464kYer9oMdp9o\nWoFU4GpviSROW8XBhA/jN772Rv0NwEIhIEaAt5Smnj66HL3tVl/kRdP/H5zs\nYNyBTZcKe1NChkNgZfHhXwZvmCBeyGGWcGUWGjK15BGZbcQU+pfO+AeuwyaN\n4NZhQHACBcPRelboZqcRty5Ie/mqeuqtW+uPe0id+KYvgGnsV9/wh3urKzkj\nBXIp\r\n=cCy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8415ae585.0","@material/theme":"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/line-ripple_12.0.0-canary.8415ae585.0_1623427519509_0.16754763177357468","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/line-ripple","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5634cbf926bedaa055a5bb971f6cc759bbc05024","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.598fcccc8.0.tgz","fileCount":34,"integrity":"sha512-+BtOuSC+lGU21Hv9ENhhp+6PRRHRoEpP53avaGCj6dVs0vu/dhWMLMtW5K3BMgsOrkTBscD8YR8pJlq1G3UFjQ==","signatures":[{"sig":"MEYCIQD9D9i2a1DDsybComefCBsDudwLOE7f0o5Yg+ZYllxxsAIhAOIS8R+J8lRTOeFAUBZEZ7w2nW6XSSC25YH3Py/obvdz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9mVCRA9TVsSAnZWagAAteQP+gLLDw5Tsgx0sJ1Ds2OE\nwrK/K8wFv6L8i9/0ZtUD318W++mxX+z3s5ie2+5cKRC6pLVPqmqqn1l9F/Lv\nTA6IoQrIZME0s5BZmT2LYwr0ptoj1giGl8wBp2Iiju7wo2eXbX938YSesm08\n1JFgZZt+E5+b+6+yv333Fg7UIyZojBk3a5YffOW9chryRBB1EePLJBPDTh1G\nwFO/aoknCy4aLPbFkXZIeLPYX4NawBf4zLyV+5MwrMmHaUwIfmhvTW+HoatU\nK+bYtRxHHnGSIzy6xUQ1SNQ8LtFxYOXBhaZu/887apOstwu5oDlsZJ9mXxFA\nvgYmVBjvJ2uhgBVSS9liIBeDEDgtesoBxaeKVAnjRMbdP+NF3spMkySyqWQj\nPXzXofGNbEAx5b2NWFCN8usOYr8x/D4TnfjjdwOBsOSJaAN+C5l5zz/SOtpl\n3g492fPpDEKDLrU6zQXkry5fiHDqMFV2A/kgOD3SINtYZBAKDZcN1J3wGeFv\nJLtNAb0RuKdOJF9OWVpizC+QE1cLaqfdiHd3qrMbGhWL1Ozjp07OrcH4NF3t\nCQR6rB89iSNGu6unoWj/XDhZPXPMa+gnyEWIsulaGx1aYtYBnyuy6p26CRc0\nb7cQJWIC0dlm4RCs3jIGp2MRG+KtbCRHwDnKABiPgDI0bYvmIr/we0T3kXRu\nAuyc\r\n=Ck1A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/theme":"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/line-ripple_12.0.0-canary.598fcccc8.0_1623447957311_0.8051893436225166","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b820aac46cf6402292e2511465a6fd7df1b8cb6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5d0605188.0.tgz","fileCount":34,"integrity":"sha512-rg2HskhRuWgO4GxcGJk/1NTaiiK1OxIsicfqNkqQiiRKLYHo2SN/3XKBN1jwfciMk5wS6l26AfmkAc6C9Hd8/A==","signatures":[{"sig":"MEYCIQDoQd43PUenNF9Zt/dQMcz35S5+XtsSXYOROLbMVHTD0wIhAOkCVaiDwsv9RG70/DOdD2ZhPx8lJiDA/5gMP6lTnz6D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5QfCRA9TVsSAnZWagAA4KIP/3QbKG/F9wlqGENNsBXB\nu2VonFqhFrjLJDL5rIqG0mMneqyLPSrJJ7ABBcQvCIOI2XksUQiU51P+kBfb\nCarJql7k41UeyMCnDZSWKQayPxk23btPkdKEj3pKQnH+tJgk+xaK2Yp1Yd/N\nRpJu2l9yge6QZ+VNm8Je6T6rKIUUKX3QW7MzK0BkBeyGEnAIxLgEvYjxcC3d\n4gOPm7ZQBcHmjAV1o7SVfIuHbOtvYIK3MxnV8qFYZWzkH6GmhAHGUeXec+W/\n7uFAvzjaRoBomIRtZpwi+R4dlzo/NhY9V9qljl+sMCaGDvyJtRL7AmxbA9Jp\nu94dfyBeASrZQcR3qLJ/3/KsmauDkjo+oQQEN9ItAoSVlnATCHFUbljuBQar\nrPNCxOjToy0NdfMjL+iV4w2nForpvhc3lj9elZ1CheqHFkdZgF0+/5tIcuSk\nb9UKlGZVPm4sDsQIiyA5L1fslCn917p4M8ZNhh2eH79YfhL15B+BU+jr4im0\ntmw5X55MbwF0xcVOk4gbV+getT2+MUrbnRELGQcn4Xwsd1D+eXooxQ90Q8dj\nI5e7cX72AzgWgbVrMhz1i5ZzyrCQoZN53XQYbKRagR8utgPUtd2yjgMjXwLB\n4AXZ1sNAo9JrKsOfyEuhw8l1p2Wu4fEx5PHx7oGWF24WVdNY3EBFsutmtBUV\n5h9F\r\n=Wdn6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5d0605188.0","@material/theme":"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/line-ripple_12.0.0-canary.5d0605188.0_1623692319156_0.17150969091501844","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"afdae4e648f1e0263ad616574ee6db152eca78d5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f147a2271.0.tgz","fileCount":34,"integrity":"sha512-tjVAb5z9JX/vGHXw3L15uqk1lxSetaGYxF0YG3MK24STASPIcyiKDMUOQS56IZU8ZkSirAaTdWlQ/VE6+A801w==","signatures":[{"sig":"MEUCIQCPJMWgmpvILK7TMaOSWEcKVvL84tlM39g353j0vwXT/wIgVqN5PEx24pippJqZTRzKqi3vYpUT/Eux/fHSc06sCgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6tPCRA9TVsSAnZWagAADqcP/3iRULD+OgCl8Zewv7/6\nZM43T9TfNyQyMp1XrWjVI8055o1NLgH2sSrfnZNFYFj+KmgEjJy5LF7jtgTm\n7ptWQE14LNgd++DEp+dA3C6/GnwrwLMf8AL194uNaJ5dzZky/AUMLQYyLRCO\nGLN1Eg7ZtOXGMPOSj4eDY3u8WLCFKyhS2TSgzb3a4FO5FQtV4GzQbElApzWx\nyETANA1sbsED+M26vxA30/9M8sTp96LXwn5hDjQ45A8rd2VWR013MPEsECke\nkqCDhdXlqbDpLQXQouyy8tx/RgbpAJG5Er8glVawJGqxA+HVfXKFzjUlyOOX\nA7/OsBZsqI13XiGuc5yZzsI1dmoBBHBYTyb3+/EsNgWCOMiuvXL2kZ2d3y7b\nNi3YzyIf3UcqUDHTswk6qmeesWls71n+iuy0DstHEi99qI9PtWFF0MAQhSkJ\nCcpsNtW6WtjCljHQP0hNDpB3GiJhjYuBadQvOygFl4zvw0PLJk4jtw1KWGx+\nAQz7O9k/Q6IknxuUGjSCfOOQMLb9ZbmXYh18jAVGGLbYopskxC8aCSaBASOf\n+qOAEG1aIaYQsJnu+zC/JXJoRdWQMbMcGbcLoc+yqtSg9t9AAy3bwQWb+3oC\nMyVbG4oUDq8lbS3NMngRn/eA/ucQYl4BaBSy8RdCydL2hIw498JIdNHkLaQ3\nSgJr\r\n=S0hd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f147a2271.0","@material/theme":"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/line-ripple_12.0.0-canary.f147a2271.0_1623698254920_0.8847863514778487","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4f0e6f60bb687aa5aa120695a3e628fbb3f0f903","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.33579e00b.0.tgz","fileCount":34,"integrity":"sha512-yjRGev7SeiPNRVO8lORhzC+aYpVxWDjugf6/LSnPNVCBrwhZthvUnHv4Y2oP4jsTpVNWhatA3GYqPZIdZkChiA==","signatures":[{"sig":"MEUCIATztqEilPWJ498ihffmzc2eY7Mk8yZBzQsMfNDswyHkAiEAoiulb1X0MMXHZ8GBsJgtF3eEqBKSSmEnCZkqG6I2P1o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/KHCRA9TVsSAnZWagAA0c8QAIbd8MiLKwhSKcnwqpgv\nMEFLC59xRb5aOwypmVAPzUxicze1i3jqVJ7gmkiQPQTFhomrK488ILZ2IqDe\ngRZsU+z4wso7mjv7yDSfr8mQRXbFz7Q7WjTnHPmmOHKB1UwICnxIO8Pj/7bV\n4ZDbfS6PcFTYTiCfov9d1+LoqTXvVTdTNa+EXHOGtWXSthEUiQNVwaNzh5B8\nFQDHDGMBC+rBayKIjQz0BReqSSaAVdh1yTfnvtOFUEB3+6BHo5to67vXGOgL\nteX94taDcRZj4qp8N/ZVUAB2wAo/WJ+zqJ+kZZdKMkoguRKKuMMtfa+cHCs2\nTGeMSoRIB1bOwDeFooHZmhYvdoOS5+xvjV1pg9yGQK+DD9BkLGxy7zdWHbr/\nTgVkZf3t4ELsyoyXm1Beis3umZ1+DNG5NnNnoE6ouom3rHoc3umxzm7lHYEA\nmEgLL3rYqWcpj0g8MMXRoxldR4k5lwnGv2jNLYZFZXc6auxckK2qbRUB8S2E\nLcPVO0VaLzGcBTUG0Fs5L2pHBLDPBbaKTs9FFw8/XpyPc3OJbpeKF7ZEmdoc\n0Mhzs80m42+I3XjsMQYs+w4Zovav2fGExVnfhpINuZ48xjanjdzU0jjO2Is1\nkvYU0oiHMiy80uRzsYgtw6L2lAbPwJ4vP7DveTQmXH5d4omS2rXc4fD7RBW/\nVWgP\r\n=P8fy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33579e00b.0","@material/theme":"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/line-ripple_12.0.0-canary.33579e00b.0_1623716487313_0.46854033343099655","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b8659a2c4999f5b058a11e94e21c19ace939411","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a6909c0e6.0.tgz","fileCount":34,"integrity":"sha512-gjNzrXTdhOtupsqQ7F8M1Wi7D+aaobla7/RgjXcPXBsI0qTnSZYF/5oIZ1YsgDu/MEyYaRMvDJtEgqQz9rviYw==","signatures":[{"sig":"MEUCIQCs3R/+2aeHwtcp1OeD21ZakGAC2xNq1Nxa1cNbZx9LrwIgX7/9gvfXGbwAIAQonSW1VA/Yxul5XcJpkD/aK355m68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPGTCRA9TVsSAnZWagAAPj8QAJO8J+JA1cyGy5G4hJJi\nFP97I6w4jEPNXG4sSQWxQegxdLiN2jCO2zlEAH2Cz1y5ovhJSC9xQde1SVyC\nFQgOpdzRakDvb6NYW2khkebN59xhjHB5qWWClgojowFq1syi4pMd3SVOUIjy\nMKLokJk4zV7WXE7kqB9rKQEdw23hvsRTMi0kw0mmrDTQ6nnlCjme1bGSfx+z\nHwqEcVPk3ILx4iOXxHr8UPsPLuGAlaBBNp2f6TNkg/b22Lfkhl0jtd52sWfi\nWHurYIkvyDj+q2qOgtQy9/4t4NR6eFDPXIjPmL6P4GutJueCk/cu/3SF12vJ\nBXCTQ8dH3XUpovcUV29wQnX/RVPbHTEeoL0xNUk5zILwDUG7eNaZNr3litL5\nv9zhUl9UtWrjhZIvjqYxXsM7Stvg6/blIF8rS15LIpjDgpjG/uDcd+f3tfEP\nvfNg4dqYiasdJL/fymOrQTES3Dh8QetesyGQagczBfQs0FnU6d24BqVaD4c/\nYwyxgKDnJnSO47+VEL6vEZfErc8u8oxYNkYsjG4Cc5Gf4snJL6SXm0Dchpsr\n8uy/upZFHg2ZziVL5fBNFs+jGWk3y72FBpYjY/NRTTRZBq7iHuNgnHL3MT+e\n8Ym+9tH/vs5mhPtclz5Ka57W+kSVYauVS1/dfTS0zLvEury6+oCGrCbBl1r4\nMIxV\r\n=9QZi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/theme":"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/line-ripple_12.0.0-canary.a6909c0e6.0_1623781779841_0.9117555133246571","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c6ae7bed3e6673e4e84fae26cf2d4e96eeb4f730","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c18b5925b.0.tgz","fileCount":34,"integrity":"sha512-hbiT+E5fzv/1K3DSK1TzWN9VwQWOFR5B1I6JZ8wt4sEbOhiAc5Z2vgN6BzqpSDEf8u9IN0HYI69OpBAgfVmtTA==","signatures":[{"sig":"MEUCIHcni+GjRifWTx2Ctk4BibYgzBKDRU3YoROYwh9OK40lAiEAhnjRsEQ9vni7229YyplmzLXBqj65m+8prBHTXu+VS68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRWHCRA9TVsSAnZWagAALcMP/2R0rCOOUBWqKTb/Ugc3\nXRQne1aCk0LXX5vrn1XKta/5Dj/P9FtjSfAJnm9HxaLX2rYbrpWz6dSlkx6f\nxd72VJifTcmgY5+YAD2M01RJAuEQe+B/JN868Dac/jn5woOtcVJ/uzABCDC7\nJ5mCj1Sw21RDaeu6tKrXc5OxQo06/Mzw14IGkP/fQCjx3a6lXzW1BcpFjB+C\nC/TAFBvNRV5bZ318dY6m1J4MuPc1emG/1omOBJrK3Z07qvdPrW2oQDA/R94/\n+IxvNfAN953lqavkkGL3C8OAxZh0HCtyB7sMQDLSqaC28F4An/TWOPxdjFEa\nSJ/OxNJWqhlkHFmGg6MRwZRSgsUQJ/h4Li+yP7ZxlY0jO5gn9fyDOR4dk9Vs\nTYgsezVA3EgG3dyFb5f+qetu+1XLhLCanv6TpgPOJSeArscIdSbhONJOAcy/\nZzwDhiIXUwXOggFZteDJI2Ms+hSHc3+PtybW8M/yUV62X0mNKDqfU3IsOOln\n+KKc1KWgdGF8YrDotnRaX2A+CbggP/RSDSSju6iKdvPJIGqOhY7zmK+b3Gqy\n7rpwsiTozbJkVR0Hr4Z5Xf4dfhbO01rmIVbGaqhjCVzcD5G4PzxI+v2fmLE6\nNK9CSOb32vx7tQ7KbCzLxxpAz040Iaj5dC3qPrvNS+7ArAwcbzxljYa6ZGCz\n3PtS\r\n=p/xt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/theme":"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/line-ripple_12.0.0-canary.c18b5925b.0_1623790983553_0.5268398041577336","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"690e070ddf9ec265da8c1e49d832aea9e52385e5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.7ea2e830d.0.tgz","fileCount":34,"integrity":"sha512-mX2nTNAbaTsLXGcPrnghRY+82fsXR/xI/yToDJX9uuNgnJM9M0m6xzSEaOGNKrgdcDntF26H+NkB+H/ZXk250A==","signatures":[{"sig":"MEQCIFAqd11HL4Rwd+R4SmojNq3wRIZ6eqVmLt794Y8d7fFIAiBFkNUnZYNe8TUX42qCARrIYc1oQyu1CWUzlr5gOwBcPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS6lCRA9TVsSAnZWagAARNUP/2RD+bLn1OQQCcxkyiGg\nRDmMYAYXYRY1VCHsQ8NwKTkm61CWbYZfNQjlJCZLtnZkUK2yFRcGaKITezN7\np+gEL5t0MkiT4XzpVF/ya3/xpuqibs8SAqFrDHUFFNFSLRy5D3aw4d/knIBO\nOSDCKtd2BODJ0iv3ojsF+D3JYsk4zVIqzJlgHXAMWgaa4RPUrfVldBTBoKRx\nCl/fsBqoowie2RS0Ws7wLioJ6hPRMQBJyH64RhR47UkFl1CLZgCA3GaG0vWD\nuqqnJixDqG250PmhLl+jYDGO4O6v5HK/vQx096lGhk1MOy7YZU+GeWco9BCd\ntnkExgnrRC8OQxjj1g4MjMCkYElGfZtzYiPmK2PXUA5Tykedzi8BAqfr1CJL\nyx2nJY2AGJZJ8dybkttJdixKmpYVYsFcyMyN7t/3/XgQwfTenvikTbiFLDuW\nVKhu709sNs3zZU+8MQYPi7yU7XIpnRAqzyYAqyytDTA8IBf+ICnAp0rs9pXj\njuwCfGMvlVNmVhQZyJvqO+te8G6Fs/K+pbuSNZSS+kkffeZRdJpAcrZKUW4k\npFKdXGdebUHgUOr9Qd3c4PdsiFpMHkSTSX1j80zL448IHi6bzIQq7yYV28U+\nISGgMq5bXPhKxOUpqGymI9Xrs2VGmkNSYY0gBp5F2ZTh8N2i6TiQvmWtLpxo\nccXa\r\n=H0UC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/theme":"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/line-ripple_12.0.0-canary.7ea2e830d.0_1623797413588_0.013421095745163925","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/line-ripple","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe749a4273815b306c77f372fd4117e1fea7ff04","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.271fff902.0.tgz","fileCount":34,"integrity":"sha512-UsHJPG/nOFYiGsgw0lU3pUcXhfy3GzULVApslKjPuGa0oxMXwLrLlYeweT0TI3aEDmxnFu568gPXA0hPV6lPIQ==","signatures":[{"sig":"MEYCIQCvWRdYFuqVmSHmm/s+C7LIDDCDralxivO6rtz4XNQDSwIhAIiKxrgkXjf2ytgq2b6ANzRLIY3MKfduRZc/Pw61TeF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS68CRA9TVsSAnZWagAAJggP/RAyWwh4cIwxhBmRq8jD\nxyH5s6zVp8NTTE5CK4n005Q0L6ffx/KNERYXNQcJnoyUFkzpA9kAGrBFhXNs\npxjRH0nSvEU828iYXhObL/LRuuSAyI6ElxSZUYrgXZ+KObnUSd3of7naubeW\niI/fn/WmkkdJYuwHLH4Op2CR+Lw0c7jxyGf/UlF57WCDQnJo2tgCFOw3amXI\nKUDl49ynT4l4sG8gIObxG7QYmPyDYbGuJIHHfVqZixqpGfS5rUWxhTj9NlFL\nX6R/88GF5eoHvKS7n3WZxT4fF9szBYpEDsf+4ZWDg+qJ/xGdjKqEA8O9gut5\nbSIGhyOiHZh++S7lI2aiQrsy7XWwTueSuaHrN1CzWThje5zdisHbOGMSGqe7\ne1jCILOoduqzwVUtTw87y2U+XaW5nqrhuTbx5ycnBZjx4s5BwRyS0OOhHYeN\n+jQWEVA/4VRyffQCmiyCBWYfeY0Whe9fj0RlVFLkd1+6mwAnjyfwagyO9l+G\nmA/o5ecu9zmbvXgC+bi39dKioYRPibv6s04jluhyCW0vW2SBcfw2XPwIFIe9\nl/NhhnWmGSgEkddlIlX2iHx0Vnb3AtTJvWP7S+V98zhbqGtl5wV3zz1y82TS\nhWxh8WdEezrpTRh1MMen+86eQe95TxzYY5Z9eHfDaWcBfNvp6oyRf+k5DhZr\nFMA1\r\n=nkN2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.271fff902.0","@material/theme":"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/line-ripple_12.0.0-canary.271fff902.0_1623797436106_0.31660469424773097","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0f8d397d755f12eaefd3c85b0e5faf6957f24a9e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":34,"integrity":"sha512-lZlWTgaw1EuOaPDj5ZercH6rtZKY07XAhEgz5yE3tzAmR69unXXza+CqKMirxN+lJHQ5DkApK8aPg73tFmQYTA==","signatures":[{"sig":"MEQCIBExPEBHDpy3tfiPLCR/emZd3p+PVlCvryK1HO9xATv1AiBT4v+bTuOOMCXDSA8a/XoEXHmt4GzPCUZAnmBX5SWXHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymejCRA9TVsSAnZWagAAj2kP/3v9QkDfH5MY7qzsMLjY\n3LtULxo+5l926X12Ax07bBEbSFqRs9dw3zecX2NRxHc/EsOSK+OVmpI+u2jF\nQCzLgJiBAtUbKvwgfQqS7om9RTmAlI/e9vqn9X5Qx59Rk3OTqHdZjU2WJLWJ\nbkn4+MxcsUBdvgO8llqKaTHWTAcg23CzIsfDp7TthivOKHbHh73khoGHXS4S\njF/QkTr1PlJ+3HcrYBJ4du8Qo4j9Q+F9wAGpln3TrA+xVXq2fBm19m+0PxCi\nMPjE4Ff232RexEFenZ4/Dqna86n5R/gIACGF5IKwpvql3BYCNEzjlRdnr4Vd\ny5wvhd+fSrGhucwphKWEUa8dC/ApCuf05DIXGPfG1DNDl0z18g4lZylrY9bt\n1qb+UpKn2NwI3o5Rx5CO/eRm5YlLWenMYu+l/q8ycvasCLdAeavDvGvHggJ0\n/0P2GsKK+AjBxavBB3xyUxj6+dj+ANH035nXXS3RgJoLMY/y0lwvD5sk+EB2\nBowe6JDl3RPhwQtfZMmcl6Dyfcx9wrePDvLH732KmIwLy4EDPyPZaeAAcpPO\nHir4RTWPq+GSPDkb5fBIcqtYT4gB3nYQxD0IMp1Krp++DNAaz9Mmgw3MCHmE\nNXFj/N403tnynqWGa+b/+7vjmP/KwYf4xqN9Jf90ulCpsQibbC53dbDY8/+m\nOc4g\r\n=ChKZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/theme":"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/line-ripple_12.0.0-canary.d96f0a1e0.0_1623877538974_0.725053505727852","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/line-ripple","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ac589797152d6132cf0f1fdb0b22985c9462560","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.a6183801a.0.tgz","fileCount":34,"integrity":"sha512-FXxFXDiUAZq5LvEkSrMqesbvgN74JPG8l8oA/j8M3We5CVUChjNTGYvQAFXz5YkY+sgy/e5qArbsc03a7iDtDw==","signatures":[{"sig":"MEQCICGE8ohEv3rX6QNNHofhylc1FDBS87rOwQYVxOmr60hIAiAEdE0VjpRZqS5aJhFnPEsf26G40RmVYhVMkkWm21qqTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynWGCRA9TVsSAnZWagAA2oMP/0YYWLyx7+G6LJPydSkV\n+UUK3AbxixVqehFDYoxz6ypmejfk11dwP83YXPQepkwID2gg/dVif/lAlbkd\ndL+oJHZYrt3Hy+dRJqBC44FT+8CbPyfnVQTdwGJ0i0MlFrMljNhmHxesWnDN\n3l/nXbx9QqhDmbZY7a/4e/a6mL6M785u5Y32erxGpOTzTwdUor5EM7gHGs3e\nlS4D518P7/4XWpSUVTCV2xofbslsilzX26mkdnNnvkfZx8RKesp5K42MG1BL\nz4cSlAw7i853WWMwK05JFNa0n7Sr6X6h9MYvO2i48AIr+AoQl2JXf5pnLZbZ\ntVkbeR6fmdN3DNENoJ3CG0sMl3c2qwTmjiJ3e3lpQmRNZLrIkL+btcRrHAUe\nka521UTsKgW7lzH1zClub0uvhdniaKbIKmfdnRV0eR8mQyK+HLS1u62ajxcI\nxAiJzeJuQg2+1fztMkJUGUQCpPHXxRaJPN49MPDfn7W4Q8uBSKM/rwLEaoJ4\n4l0kGjKdgnYtidsSLL/CpmvHQR/BN2Idkj0LFrOc+w+MKhzy28lP2a4qfSti\nvulHKBFxlTSU8iVkPA7qZF+t4//Hcln5ZRy6K0s5uQC3O/BFuCLshJHycBYq\n4lXCG7xmNByFnovPmUw/CRjOoc8FKUJ8KwjC3rArOzothB57htIgrzN9Dg2Z\nGiGQ\r\n=ndyv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.a6183801a.0","@material/theme":"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/line-ripple_12.0.0-canary.a6183801a.0_1623881093726_0.22999005969080777","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/line-ripple","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"00f8a412e532f899f21fe7a04d4cb2e4c1d7c926","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.940550232.0.tgz","fileCount":34,"integrity":"sha512-13deOYL+b8XC+ppe70g188+E4+caF5u47Vcr89RKK3wD49QNTsPN3uIkfeZXq7K1Kq2KkQhMYs/F0hhh2FH0Jw==","signatures":[{"sig":"MEUCIQDUHOSVjEcfkKoaXTxL8E5XeUkZwQh6ymcflZ4hSB9QZgIgGgtuGrGIFMOEXaMCmRc0UaEok8H6urPSpyIH7St4ctE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6T6CRA9TVsSAnZWagAAtooP/04EVRgPRPV+5Ml57qqs\nXHf/mp9y6bLCw2hE2U4AX3MunaI1Vcuj/1FMWanrhMQiCFaWevX1fQt5eWts\n65U5cwr1EBuY3hYVmsC05zorGpiBvsILXgAHpzZn84J5Mbve5S3/pM7YW/ja\nE/TSBdJbphnT+Wi+MhkNsXzg8SdUc3AKnIRGugsJXBT/QaV9Ty24PQH0sjC/\niBj1RGhNNrdNCVwVuZKHxPj0fZCv1fAR2J8KbYDRSrbhjfol4bv6Jn2ucCv5\nYv+J1VvkSYZ2kMa5qMV5b4MNKa0vNj0859bgcCquoNgKRCytXbEHswl+341c\ny78pJ8yWK+oCQ8UMYE42yU52AJspBK4Ba8eVOt3AoKrfHseeBeufh9s+hpFB\nHE1fyu4rVUdhtKLldVxexpy3+orzaeOAvF1khEdtXiNYvjZwVbx3N06PnuQH\nEqdnTVAQM1JBesRogx2VtHdfemcoPkU0YK+99FeTks2NWvOaQsn+IOOIzXca\nVYx7f8LiAvmuJxnjLTIPIn/xVG0nRVazfD14tdcqjdCl8OKa0x6zhqu/DHCi\nGlQApBnXOeF2S48un21ymJxchblq+Q0/BD+Q9YjGIDTuDdxgT29x7UyqTkPr\nc7+Ap5XIWYiZDMOTnvUAmDACiwYE01z6VBEVmK/ss7/7H3Ym6IoXV35miS4M\n9+ga\r\n=6kbj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.940550232.0","@material/theme":"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/line-ripple_12.0.0-canary.940550232.0_1623958777569_0.21184116065728964","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/line-ripple","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"02d8589f1c550568bdc20feb6e51363e29566993","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.f705e8048.0.tgz","fileCount":34,"integrity":"sha512-2QT/ROWXIRlfXbnu0WZjAoJ4lvTV8ZaBV/IV+i7rN4O6TCOW3XEfP7Ck084YtjPdMtGc+yFUZBpr+LNL4kN4ng==","signatures":[{"sig":"MEQCIBPgAaNP5e5LSehZyLzbF+FhyhRHkFvQ7ughvGV3aEglAiARxnIkhOgalr9W4IOCR+Bx5707xPL8eItquWwxaUAeFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLqNCRA9TVsSAnZWagAAnj4QAIg0QwDgSU1O+jOKCkxU\nb6JRor4MzHJeS1stz/pPDH5Gk4eou0DaEphBAP1UkhqP7q433vCR9yvS6x5o\nKlMzjqwb0H6wB4RFdrEg7JPKresB3EnKBGwEZw56ItUBjuGjeuchPTmIRDz0\nOzMxgcJLYxI1l8KjJcc9p55O1X2/Ee5/9zuw2O6PZdg0cbd1Ia6uMdK8a8cH\ncjjgvswbGF0TJkBynp0I7w2mv9A1eT2eRoyen2s2PDQOpLvIgmfKZ7/i+T45\nWrhxZxfn5Qwe3I7mcau3bdZ3hWl8cZKcLy3TfoZZq/h7UHBzw1cXJFg8JpWH\nhyG9MmKJjl4FiEfsQrO8q4nMoxvuhm6kdcswWhD179Jo2yi/xs5VxE9Hjc30\n8B4tTLM67ustWxMAnIsm9jaY0/61Yisi4mMPiytpmGL75wkKH8CsAK4fcnC8\nGRLQiN4XWL1eqwFSjfaYKPrn0YGTSZr3nn3phkrd7DP9cZdPZBLdcb0Ysi5m\nsbyEElai/vA4aym4GAfF8SREDRxMQMZkQO4zjUDnDcLIr3TAp/RYnuPKDXJG\nYiXSCAMKgpQgDy1sRofWnH7AfJiZKJDfpGom6xieEmGORr/UagdmudJ3Cmbv\naykQGrsqPmDD6cpGlbEqn14PETFzTm4b0vWwasP2NlHUgFfA4ssrOpAYThfk\n8CL0\r\n=+t4U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.f705e8048.0","@material/theme":"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/line-ripple_12.0.0-canary.f705e8048.0_1624029837237_0.5403263293751925","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/line-ripple","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e8b776cd8933536bba56874aee2971d489afeeef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.08d791f37.0.tgz","fileCount":34,"integrity":"sha512-2WhSae18/qP1u5ZghfyNvYyqPmfQF0Iw/Y/sid0KwRA45pp+X25ZgLaysfVtqXEzd9MVu5PaKPJ8XxL+ITrz/w==","signatures":[{"sig":"MEUCIAi1yNlywDT6bUpESZ3d211/6CFsnHol72+4kUzjQOy9AiEAwixCew+05Vf2eDU5uL1SpjVAsWvhFZ4ZEXtEShxfvYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQvvCRA9TVsSAnZWagAAfwcQAJRTe1WyIUY49RTQT+mE\nmGERgQmYeMlIYrlKqQLXYehaHnrAaZK4PJ0DB83zCl/PNkGjF91z01FVq7L9\nCSXyzoVnndZteogfRtWvo2TIMitSKeLv5pW7PAD1nRgC4xAJi16eju/vZRmA\ndHwKZn9Q7nZHgQvDhXIbmTPMloKGZlx7Vs+UaRHr1Q4B73ua35xOVEsCmqmC\ntQOf1bNz21JFqH3p7N69ePbpFDXBlUDyUTNj/M84/e1LrbGepYXMCuLUOQFN\nG8NqQfsVzzJ6jJQAFQdfVxzO9voi9L9LmKiGT2wOMyvfJWZy04X1AGrlSU59\nLVX054YmYqFuJmqQART+aIbZnu1nywZqePcUWQJcwM34OHsdhi/+WUNPmAIV\nYr3lyDmeXo1M803raWBwrdFKHSUWC7I6wVHkWMkxhMO/0tL2wpqe0S/Xah/m\nt+8yg4gXW3DtHBFw8Qzr0jSa2SGcFnj6yLd6MjeQHxFxOHD0uxu/0fHkvPJX\nHjqRpKT7VjKz7WtMXySG76vsBeKBTWnppZWeYcxihCrvA+fDe4LuLVgRVYFG\nfPKkclGyCAJeAV7a8RQc5CiXXR4VVCOQGDFJ1p3DQSxADl7bZqXwrZZKdGJ8\nuVX4xfUvGsdedkavVSGDpBTBF3NRYzhZJdaZ7ZwR4pv2LgSFyZuvJpE1CGcw\n1FHs\r\n=JHss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.08d791f37.0","@material/theme":"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/line-ripple_12.0.0-canary.08d791f37.0_1624050671071_0.5880555640946876","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a10f92ba8fa4d90b1ac605a3f95bc7dd731c3614","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e38d7440f.0.tgz","fileCount":34,"integrity":"sha512-tgRAgcZ2np75aR0meeDIj0Zbwg60LpBWEFC3SDQbevCqu9RqQXZX8G4OM3bNtFBJnOJX1ekWCpzw3ASacy4H9Q==","signatures":[{"sig":"MEUCIBdNJ9S6V5VnVsgmzVdQIPvrXeZkDbYC4I0KryrbI0pOAiEAwBQY23SpJSuED7IMPW/FsD2TUNLhu/s7R7N9FXlDh5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M7rCRA9TVsSAnZWagAAk/oP/iWc8cBl9uEcqh0JjaDn\ng6fizjzLx8noHjFBPhOkHa3WQR4Ymd7AHskw7IUzHCyg4KRVskoSqQV6K99x\nVjzuJr18Wv0cU3qFXXDqHPin4no28g6ZjB+BuQtXamZYyre8RWmEJBtlGoV4\nDTx8JIXkzCcALL8ocHIlcGoU2X0xDcZddP5sH4GxmWjCdONqF9x/y9dZC07E\nAWOY//yy+DeKgJDvaO5vGMqUk24RB+ixrufUms98vjHjpvCHC+OsepXQtN45\nXZAsgZO34pqJI9MdNKWhcpbzHrW2O6aBldAWirOoSrO4QGZlNRRVIRtANpLd\ntLdl0OWZ5vlnnswMtosDGJSiVroHDj+qvjtuC5w/3MdjWFnRAl4DAnZ8oZiP\n2sO2Akd5+iFwdgWombJdhDQXCP0ZAXp1HDduY5LA69kUsIYdnBRd8VlvJOXo\n8TWPpe+C5fbFt7oYGPUWTzfP9U2ZgeLlIywVkgMtlFhl65u8to8aHgRdI26Z\n1GXUhLIP50fH6QnK5euTtJ+1ISAIQtJ8OC1nMkTlQoqIx88i3shhZJP1pgIZ\n/6u/nHvlhan/t5O0pdiWBr0d7zIDGrL58uHcN9rh7RJHwktCO4xVOaNKCbU+\nVikSAw+Us0TDkpufJ9Ek7KyGA14jkellVo3IbIGgACeTspFfVVuU0phaabPM\nLzGp\r\n=A0G6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/theme":"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/line-ripple_12.0.0-canary.e38d7440f.0_1624297195095_0.2764907355259434","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"60a31aff8aa480589bf39fbe3d20b0dae9f85328","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.75900a5a9.0.tgz","fileCount":34,"integrity":"sha512-4grSCWNrdnkfbPf8M+zAxc9ie6BUrTTUYnnuYG6zPldaIPWyWvSVbgWoaCE1gBZrpp+i6KwB9r+8hBErHjSnDw==","signatures":[{"sig":"MEYCIQDqD4pBxZ+2kqCatOJ8QILqXzmdufYbJoZk0+g4vjmL/wIhAO4W4qLNllDC9g6KZHi9UE4vcNzc8sxlUkxdFPV9xkTi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NwjCRA9TVsSAnZWagAAIgMP/A7JWUEZEQQrBdw77F/q\najxuK+rS1bXY3OWfDcDfhYCkDfaTsp/WrJ4hMxxFaa2C/nJX48ofNaRI+gGH\naOeTRtBoMCH2es9IEO+jUqiPDsT7tdKWlcJi/Vl/ke4DSEkNYraxuO/2nSq5\nBElDZscvWmInVusTk6yrnLUX+WZe0nyzvitg/TOKQxC+xbtn12enmyTYnCyR\nevMMmLVka2/zHKbOZPtVEvup06PwmI8w1mGq4G8G3t2jjoFxJf57h/gPwkz3\nM84u9PAaqRkOsp5M11fD2aly84mjUawyks3sO9x38Knmh1OBEFsdhS1r7yto\nLUwfKV9z9j3HWcsJx2gQocDbCqfl1RavhAJ7DOzkv37X3F0kWZF8zhOJ88wo\n8o7ekFSSJA0PZB2nxLNCJ6sqfVjx7oBQPoiD4O2DpGgDCsXPEfmOSO2TAKBE\njFgoKhhqDjMnlAy0mkI0akrvMeikR8ib27D4GtnL1qntRSmtcYFpPsdLqFv+\nWvojzlTKEPk+Vnl0BRVYFyGwjS2IG79qvjK9N5sPEN0LHJjuMNgZIH/Wl0VA\nj6ayuH01dxw7ybxfXtkHd2MIQUgMx/tO0DsyhEqOoi/A1tdXJflSYpueP9B0\nOQkeEGOr2jBhFGyKJ8d5/Q7ZhhH0WNO3yamDMk6eWjhrhiQwA9D5hJGoiEOo\ndAWF\r\n=RCAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/theme":"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/line-ripple_12.0.0-canary.75900a5a9.0_1624300578937_0.28493659942333527","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"83ee65a35e1cd0a45e01a14d505a5576a13b488e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.33e6f50e9.0.tgz","fileCount":34,"integrity":"sha512-YLlo3PmSlNUoPAbbr2V1Z+r/9OitybT+e+3vFeljFDcZ78OF4aGLMyya8yTmC1y5mP9sHNAdCycVg+7hqFr7tA==","signatures":[{"sig":"MEQCIGsvw3ETvP2MWV3h5EGV5SSIP30f0sdB/LIcNCo42O40AiBOGDVhvDvGzXoQVgvnTFjXP6n9L1ovgcuG6IIMk/dKuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nwxCRA9TVsSAnZWagAAXmAP/3NyMl78/7+HdkPWs/eW\nwVvX0D27wbwU0IvVmkK+FK5eYs+RneWzULXs6bcXUwqCcZuFi4MlFpgfljuM\nX7oBG6ZNYp7gUk8SiQldkotsY3xf09Dt7a9ozfEsgOpMTJUbDsh1hqydrISJ\nsAOsLcez57cq/sQQbPASxkDpc7I78g3c9+v5WMEx/u662wgwV7PTNIKjLChs\nTNdiFujYACp/JMnzj8q+b+yNs+TTI3E3ggyHFKWBycl0g9Iz0RydXcppbrmd\n+uWGL6QeU+aB+UdbfiJ6iHjr82fvE0ASNaJkfDvgMI4M/TcdLgk5szzQSkbu\nbuBy+SJXKI5H7L9JKkszIE5kOoXAsdCI+T2IDu9U5SLfQEElWOiiOqEnRFDC\nFXKI5qU/pwtC5NGgxdvlqmxiziHID9RL3Yytq0sTBTiunFkvPvLgrxhZhUBU\nv526t6C2O0SI8qny5dD6NIFT5g5QIajkT5vgGwJDjt0TB/BZESGH3RA2GOLp\nto/a9LbwFblswu82AgywzyPljNOluZ1avi79XNDNrzJTGtWGhAdWHuo+lH6R\nkXsdxI0m+lWG3NOuoFcN8iauPFI5bWLoOra1B+2dcwvkDw/V13vXgPfY7BzA\nsRb9vevvTTER0ywOp8fQ386JktzyX/k2gFyNoGvFklwCO6tN5E7Xk/6T2dO1\nOags\r\n=5Iua\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/theme":"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/line-ripple_12.0.0-canary.33e6f50e9.0_1624407088922_0.4632413247471583","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"493e83cf6c913a4e7c52c89a557281ef77eb4f02","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8c685301d.0.tgz","fileCount":34,"integrity":"sha512-4lGluMs19BTL4J0/7SmprxNFUjeI7KkVji65sOdC9VpO5XiD75+0laFh1yXnvsu/nQYjKb92/T3P1KDLLZBO7Q==","signatures":[{"sig":"MEQCIChgGJ0nd2tHnS6TWPbx8XhASWnujBaT2ylQFAFj5sd4AiBkShGioosbxEllESBoFPp3NFO7X6yBeqETl/2EmiOvaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03xECRA9TVsSAnZWagAAg4YP/jMSasPMBwtokUufF70w\nksR7Vbd/w/RPWlZAzVCa1zLGxrtMMT2+Cqst+KnMDVVDsRZWoH3flpue/jpZ\nTSTQ2XIPdjkGwb+n/Z1qziSZNd1d6Yh3Ykcgur8xvGJTk/EkU7vN3+cUypyR\n7QQU7a/H4SqmnDYr2sdY+E5FdqjWWacbktVKPgRzO3RybxFJwk/2bEVKDubK\np0lycNZxB6/XwnovrvtAsENjMv7kulOTyhfIsphbdc40gSPUsyvDkMFk3rnu\nqkmW/rxtpqKicmlsqleaGgbWt/RNnenxEPQX7cOruVxFT7PLXrfXw1Klbg3Q\nl4tfFn7/lAScoJsxKI+Tb82yXDy9GbIQxkqQCOh7KWf/fB5bGYmP0LPWEXea\nesakh2NRDna7kTQ8tWAQrCBbdHDMVNNhcwbubx6mp6QpM34CXVnmMih8zXjD\nd6seLT6vEAkeUThUI7AYIy2XqkBvcgqzubCfBvYPBlUpmDWykRvoo4EjvfhP\nHml9lZZxqA78pSyx0e2j1wsEoLfFJEI/7bEwEM0NdadfKqVR7kEf+WLKiM1T\nkUjAJhQ+KTsbJBqhe8QZSBc/0n2N/R56TubDRlYA4yMT2bIuS7/shsE9J8TY\nJhmnaANALEVGNtSLsFt5fo16ql9qu9Ze+VCxQ8cHm9PdOUGxq+nadRiYhrW7\n0Wgf\r\n=J//2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8c685301d.0","@material/theme":"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/line-ripple_12.0.0-canary.8c685301d.0_1624472644041_0.11168965311498469","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/line-ripple","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"37b883a9de4f351e825f8fb3e657ae91cb288245","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.8c7d994ae.0.tgz","fileCount":34,"integrity":"sha512-MMp9PuCb+8p4R8qxE0RxMMrQ6TdyOx9UCT0y1TavarhW3NLyVI3J+UOyRdnoARLshMphBb5hG+YJLYxj0q0PtQ==","signatures":[{"sig":"MEQCIDU9K88+SzplwiCtXsuHuyifbHth7MWto/lVpXc3vrNXAiBauHtlBXrKaRSYmp6RSPvNTgjCdkS2IlNrw/BpO9IxLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04r+CRA9TVsSAnZWagAAjCgP/R94Aj8YCrhv4C91RrtC\nyrW4yEV3+pgpsHxePr+vTWS1rtitLIEmb0DypbgSm/0X+mtbwxiBFkLlkTKt\ngWwo+NIDksHa8hpxKTjDUFizRuOaC2yVwb55o0IlxLF/20EA86c01//anOet\nJ1/7QmiOiSnpwf2soOjlmblrASME1ncb6aKrZcncTjB+7hgHg7nMdjQGIvqD\nQ5hqxXfzleaqm82KyeMwGiMe+9pXMW1bpAgUayCL22aYdxcbnoy4sn5Y5/py\nnZ/qmpYMr8ig39nOKVB7+JCa31PT1RWATkHmm/m94uEV63GIkusjzNzfpIL4\nARDRmoYsgOLNoNasK0yAliRK9YLYJb/w/ChKfvG6qYfzQIPvAbdjMxGidxn5\nX6M8WRM1NhAVZ/vwAKdNI3Sn92UCs2cY5LM2RjFoT7mnNM4OzG0O9v+NPQWm\nwriZQmWu8P3qW2aU/PbyAEjDqsgPj6Ec81wz90nckR9ZXFl4oAsl/IaThDaP\ntOMPt6frutPtjnlA63fL+t3ATA/VH02y4xZwtTwxfxUMR2g+N1+RVOPFRV/o\n4MfDuu0jLWgBYSuCo+UtxQkVez5VHvFCP3HAzphzwE2tTSXywn3B/YykkZAq\n9cs48gLOL3zgHHcsQLCtEjqv6G2mIEv3Ize5aUwfMI73Qzo1Qj3gJ2Jxloip\n7W17\r\n=Z2V9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/theme":"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/line-ripple_12.0.0-canary.8c7d994ae.0_1624476414189_0.8303009408036117","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1d4dac9d315e359ec3379b37a454950ed73e563f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":34,"integrity":"sha512-jTw2PGbPBNjP1QNz67e/CMwaPn9OuwuFBnW0PVX0nvMLi3LmgIJXQtHhp9zKl9v3+Up4LveDTmDntWEw49gI0Q==","signatures":[{"sig":"MEUCIFWAKKyX9+B0gXQyFyiPci1DHVbMuuSox5cofkAnQTtDAiEAm9Q42aFn9UZ3Me/jPSkemnW6rt3luYeWqxKRjtDrPqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K9dCRA9TVsSAnZWagAAzJUP/30UcgtehlxNhRwwD+bV\nhF0ZfTZmgc+2GHkk2dTgzojO0hgTmwaR3eJA5XAeuYo4DSFgKXdKbyticqfN\nTBOlW+53oithM5vL818Wksm7aLwpgWNNdXrs6QWHC+XCaOGjB+QDwQ17OFAU\nsends/beq85xLWmApsVaWVAUGjyPLgNTI65zP/pM70/ZqkjGUy/YmmwVjMzI\nwGn7dzVvMu8de09JNpOiQFeCw+p9QVJrGAna0GhyhNMJIvoOJWP6A15wng6K\n9Ep5Ix97bxxzijSxp68uuz1dH4UB549rWAwrpuUF7sE4FKx1vhIDpUs/9oT5\nUFqiitsisq/4yT7B1M5El1o7t/YX20UFBJlTjfZ+ZdbO8W76a7gs5tnLXJn+\nmLuMsinshOKK/1zUGxoN9pglFs+An/HoPfO+0lkezGDOH4AchE1HV5CTt2wb\nzsBhPZjMff1EvBI+X3O6AfRiGrVWKwst+iOhWlXtGuIylMPBtgPsXd9ym1Fa\nYtUaN5lOLGN+ZBLuNJcErpmVKRnco3rOWe09t6mUQrv/c1kyIbDLiJQBNzmz\nZTvfN4/PoeF7jTLx0cdgxRlLdLcwEINpjaFHP2pJ8N/7fCDSBNprrZq+kxdv\nsIyrDwPBhqiF0XK0cOOmMFnvy+15fgymLMNhplSCJIp2AAiwrXDBg3zrn6Rd\nurU+\r\n=2w3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/theme":"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/line-ripple_12.0.0-canary.4ccd39bdd.0_1624551260843_0.3619043061668905","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/line-ripple","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1d296da7e71f8c41787786b2dc720c930347042","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.17553e9f8.0.tgz","fileCount":34,"integrity":"sha512-HuZazGUS3nrBrrRcXUB7FfsW8pn1X4V6M+bzxTZpIWpffHnYHv2nG3Z3pwY5+iwdg8bG0AV5S12Ph3ihohaPzg==","signatures":[{"sig":"MEYCIQC+TljagX2ensLBSpoQ899YMjcQwrtndQNjvHI/xk6FGQIhAJClJy28AFZ4VcBB3ob27o4wTcNqY2Bh2xTpVH53iefC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lKOCRA9TVsSAnZWagAAl24P/jT2yILPd2Txr9qykmvC\nf+7xmi+27SsdaVOS9FdsX81O4d22Tey+cRgYoHjFSymF8YyS8eVgFsh2LsiZ\n+DPPGwEjLHrQYd63h0S9e6f8skV5/0lmrCOPdGg4FTCMXypbQYDgvT+rjZqY\n64bTWT7xs9rgcuumkNEeiuUicKz8+1A6C0jMUMNWQ2FTjZZv+njjXkCxnGQA\nzxHaAmFaz6D1wb8tmxr25nLYL44v1vwPQxAMNEoz6BZLm7ivRPdG2nkWcx6d\nzHgOVIRaABY+yuYcga6Sjv2gUuAPQZN+1564alYgA2Kt3ca6URNUItychrAO\nyY5yNyssBWpXxfcQWaru1qTRqoiPR3VLoJQ4AxF45rXsDJgMbVWPI9C4Q0NP\nNsKjsLZrj2YL9C6mfuFQpTz89W1NPQSsRksAb2W5dSlhdAhfjgW4H6AdpxRJ\nnp4NrGhR+7BZTEKA6wvphLkWbylYK1KIhZ4oFgfqO8jG6+a1r4ekdvE0Kstp\nMw2NSIhxXbu/h+Fcp5B9lgZejAwgxmA0uuxeIPFdJOst+hKzGJPNI1TcaQ9N\nykbNwy1CuBXM4v/xXMlOk0o9gEjBJP7ExXRXUFV4+KgGbgnbcDxaUmkFlye+\nephhwmNlpeA+XuNagx8z7Q0nk62E1IKtQAN7j3XwIA40gSvsltp2dxJ0bqJ7\n8qU0\r\n=cGYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/theme":"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/line-ripple_12.0.0-canary.17553e9f8.0_1624920717880_0.8845920685241597","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ef7af4569f2c55abcb9e1c347fe2f17110366d46","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4c80072fd.0.tgz","fileCount":34,"integrity":"sha512-0pmN56gtOmVu3C6b9CmQTn7W8ErtrD/uG+FPXir68rN87ISpdW96fVuzDdP41JKwTkITjywRU51Ywl/XfVTzPA==","signatures":[{"sig":"MEUCIQDfQQqy/7+pdO7B++tZR7WiXluxJCRuDkufYvVPvldIRgIgcrGYUZlwV2lPcMCBRLE04/OJaioBArntOnvdy+dAv0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22kVCRA9TVsSAnZWagAApZgP/30Rm4wteTAoq5lZB8DO\nGnTawMVTGqI87mUk2/byoEpKXxLOV01kdJ8sv0C6jHsfi+dPrPtUWTWuHrQd\nhTK/2soWtXSJtlSejNJXRw8xXV4BnAYND/x56eWewbB8GHF4198kpfC5DWom\nW/Od+nGHJFhR3GqAgfiBqAOQsdSf5aO1spwi2acx1KxoVtkkcud/KAvLYlUU\nVQBuIrfNfdGacxNMAvOSXubPZxYtFCv4P3dPvFHK8Nq6acQeeD5rJkr0uSuJ\nJwuoSe+AjyRsP25Dsc8DVcs/eeGmtCZIhetmZPBZP7xdeWbEsmnr9guT/hi8\nmrq2vQAu0XGo2I/79wdEIR9MSS0K0djiuY+BqsOLODtOdBUSUR7kfPmxaz16\ncHZFYBQUYSjJtbY8HmYqbXg2ZPoIF+s38aOWADxnoiEBV+KDv+j9OnJwmVNc\ndffnfs44wz/kZqDfpRarCto25a5pqaOGyU6ozH+wKOD3UQToCV8XrMHD+3Wt\nxcANpgXe8qnlovmYM5joRS1hzGBclKLc/kjcYaZ2ygL/vNxo1+5Sq8LziNYk\nntFl41Bm71otPw5ppamVzU/lynw0OMysWwiHh0gR/HOsKF6dJ8cZkOYhBFOA\nNJBEAasoocZzZE4J0cj3pIFQrOeJe4ACRdad3VBT123QAD5WMKiOW9fjlb2A\nQCaw\r\n=xC+Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/theme":"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/line-ripple_12.0.0-canary.4c80072fd.0_1624992021328_0.16512119292767302","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/line-ripple","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b56975853b57f664078f12c887f892bb76689bf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.796811db7.0.tgz","fileCount":34,"integrity":"sha512-wAwSA4vwMEX2T61nIgg/SRNBLCH6XdsTAfIe4btmUtFIwl0L4N/YU3opZh7yN2UC1oMhfuiZhnqSoHX4Wu0i0g==","signatures":[{"sig":"MEUCIDMFTToz5YpFS8EnndzvScWpTDhGLrxwWNkTYxSBSo/0AiEA4yK4vrQyHgx5AcdqLbb1I0ZWXU/5bpHC74LNHgWNdqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QYsCRA9TVsSAnZWagAAen4P/jUvVWUgVB6KSEp5AkTD\n9sohHUsibsfpKNWOKRwCsepDou8DKtDyAOJwcqJL0LXhrxn3kCutgywxXLUs\nZeVP5ePGvCpCcd7OzmNR43L63UQT40fG12344JbfvMmDQmh9nsla+L7w8iXn\n7MvxL7iUGFjeuLRmkSySebD8hDUVitxMj2V0RakimhAmd7oksGz6sK+mcmPG\nnauzzKSncZYgy2G5SKSe2+RQ9EocL5J64mgMjl81YBfk2cfLjJz7e5U87Plu\njL3bXuh6Q+/enjTDxH76bDytgE4mVyRT4t3b03Fy5A0uR4U11+cFjuIfIuNf\nydbpEbXg0l2deahKu2zoUHuBeXcb5iW/o2G/5zt27t7sJ4HP0PHqHCWNEFxA\nKEBU75zmUNa3RuHSO19d49XfXdgAEifHJYLBS8lKyfSUh7p6bcl/ryQiTvNK\nIFzE7cw/h9shxeLJCRrgEmhieCoK/cxChMS7l1I9i+YfH3v5YJX22D7P2ioz\n3QA/sCalSsGBt2uR3ybWQ/tpYpHdYWa5L4SxEvlW6wmPjgtrxf1gwtekmqQq\ny6I9Wq/hrLr28hubeZKF27Qm2G6kjmtrtJ9LgGQOYs5ibuYCLFoNVU1tEOSO\nNLVbPLOsaCHfZxmpotM2QcAar2wrNaZ/i6dLSaCqk6pIqEalxuhbQQI3FKA5\npdvd\r\n=u+v6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.796811db7.0","@material/theme":"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/line-ripple_12.0.0-canary.796811db7.0_1625097771691_0.4190092044223197","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/line-ripple","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1fe21afa330b9065415e7755c6a0cfc649d6e2a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.70e1efdca.0.tgz","fileCount":34,"integrity":"sha512-UpgstJbEcPGleytzljYnEkeA5VmMDGbljS5tRd9FEapifZ7vPdCeRrthszvBLxQpatefPVPT3HJ//a75FkG26A==","signatures":[{"sig":"MEQCIBy3e2+AYNraaCrgWVp4k+205qRLKE/zGB/LR3iZnkWgAiA+dcEaj5PmrmRbU1A//Q7g14BVInP9AKILr/GROb4vGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fX1CRA9TVsSAnZWagAAzvUP/RNXCBQ5W6JtAFBIQoB+\nGoo489ThMJ/P8lmasq3zu+nsN0BI/vQzSSl8B10UxQtZxf/nIiOA8+zzWbYq\nXHeyMl24SZbgRMUPxODOpglXM7qjUpfocl9ujtnu57laaqEZTKerNSu5QEd2\nG3w4OiJ36lZzAfBkboh2WTKqYK8pJsuqsqO4L2jP8vqsXUs3UgFtF91m7X2g\nsSqTJ+naq2gbSlwlFNKIe6QBC3u5zF9rDjOZ3WJD8uDy1m2OqKHv9IiKMPnt\nZ8IHLev9ReTAWC5BihfqZTfcS9kNVQVauSPZuIuqj+iokah4iwwq3VGcDkyY\nB5mAAjVE75ILJkybIpn1wIl5YpGr9opRHQr+o5Nbc4hbzEPhHZeV0Mh8cQTQ\nbo55UMzJy319kZv5/3G4i9ell+qqg1Xqxv3bmS4TZq69aScYQk6jbEIzixer\nBvgvbztyVJrFAD+wsucrdY/I3+b0zwijX6CXoFBFrkkh7GlUF6lJGd0uqvPs\nppqeKGbhNwL9x/hy8YcU/mqfTLCic21yf7Otau/q0tQE3Hno+gOVvE5gECuH\ndW3u+hZevHGBDORdEPSUw2VdjPYLqzKjXEkXeVcGsEks6tlOoWh8UxV+OK8V\ndO2GDcAxNHCtrSS1o+BR/f1XGKaY+uaJWGFSmJe+0XbNotNAQDV0DPxLZ66X\nrU37\r\n=0R4H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/theme":"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/line-ripple_12.0.0-canary.70e1efdca.0_1625159156833_0.25504567799144984","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/line-ripple","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7a860d6f5ba3b55cef4cfe4c66f1224c3474f777","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.435866d32.0.tgz","fileCount":34,"integrity":"sha512-m4lihIE/0HxNsfw/2iGYFcbfRyxegRZEHQIuGUhoRkKA6rOaFxldaUDnkC/Cz8iXZaB9cCiGdEJsJDsPsM5OPA==","signatures":[{"sig":"MEUCIDDYeh24YOPZOC+cRfI2jhZUdL0prQfQY3FUn91XXh9lAiEAybdkGjqQBCe5ii529gBZSCHa592dzTO1PVT8Qmy2qRQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31j7CRA9TVsSAnZWagAAE18P/1yluv1iRHM1zU5S34rl\nmZCof3kKhOhFq6dsf0eLD70KPqE4/WLcv6Toxx5ll14lkEqhq++NOmpnrJsv\n9poEQrxOxgQERTAhdXqOGax1ScZIJFzeYqDp6qX4ojxmjlTXLHXs7Hj0Illv\nROP6xR0AEjqjrrrgb50suF4PKYV47wQK4K1IEqrvEKv4Hqkn07lUvKCtotso\nTgHBNcnLwHgha2dpP5VIKJWggBf14F990HdVHEXmqNOG9NcXKgt/u09/i77o\nuHdioFxz1vOiT5iLF/F+vv1zrXLsFjZ6OkuwANEm/JlvxRpHc6wvTQiw/aWJ\nTZHNrrhiHK/tGwnspZcJ1HdZKUpT8CzLK6HhjICOtQFhHhkB7BnAcO1AsjEc\nCYJpIKrTzqwI5B4yQXDgKyiUV2nNxpFkWIJLqrDW+JTuQkZ/io8aKbJSpFCY\nqCJUhhBHe+i7ba5peTk0K9wsFAWqPbn8rpT63RiIupEDz1uKCqmtx3jNiKCQ\nlH+OF7zi6hR3qALw9T8aowj89JZcQA1rxrk+eiWYhnWGjbY0Xmet2dNaphrU\nXheUcYahzmQf0pyw0lCDXQcJX6GEBSfSkTqYsgB+r0P5H7wiMf7iMrov8Zye\n4wvnGSKhANLp1syCKtTgK4VyA3VlB27fZIm4z65cMacHBnagSffGsjQMru8Z\nLQBQ\r\n=s8GE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.435866d32.0","@material/theme":"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/line-ripple_12.0.0-canary.435866d32.0_1625250043156_0.9854391931609829","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c910e07b99616ae13b949cd5b2104383cc532f6f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":34,"integrity":"sha512-s8Hh97P2ZWM7p1BHhMU8X47uX6i2UnVJ1O42c5sKQlkQGQAPRyVqNOoMvKRBERbL6xKN5BMtGoqv0dTDnXYWPQ==","signatures":[{"sig":"MEYCIQCVtX9RKVB9Cw9Lbsx6n8Xb8UXCBdx4v+P/g6bF7WsdCAIhAPYXXjBWleEUnU9bbHwSMMAqV5DffwiekvxBwQktqs6s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36hjCRA9TVsSAnZWagAA2egP/3//vPm6eIEFE/uVuCKy\nLaqdMfZ/KPXPH2HPUIi363eN0g9aUpqB2vdBUwAZf4DYRqQe7Ej0M6fZ9J37\nwdbqXWIRVWBvEMihYKLFFgzEfrlY+rIMNHu5QrLhDPIT1s/WUdT3EW+tVsoN\nqiTrRtbl6Hl4t/Y92u40706MfABk/x7CjacHnN4VVeIZDSxiCbR/4Asto3px\ni/JGWp/s7L4bz8D4JKWVG6utHvstoiU+DXOI1fb5fjYOQEF49HXKEmM47gY1\nBLv0FQNezArThGZkKYHXtWMf50wcpB2CJOaMHUC6NHR1Z9Q37zAl4OWYe5Nq\nUHe1yfqHOUeVqIOYg6UgftisDZWWs78WPTipEKGq1nsSll2SVPvZ8cjQFEEX\nS5CizLlOjffGlNRTUxcSMcoBgnjCeMKNsD63diaAYBAQ4r9Y9ihItBsoDTLt\nHn21ScnobeHOlCAKZsaLbBanUZiVV6uA37MDWwkhmOjrjLGZ+ZMyQuSUs9MX\ngc7aOJpuWVYzmhyf7uJbiHb22PTd4lK33UAykNBcdUJCQQh9i6PCMN9kxkY7\nwOnToijiNcqwNHLHWA+qKPiE6b/mN3uzGDNOT4ACt2p41d2/d1luXrel2VLE\nzpF+NGm1hZPVbxm4wfbBPmmrbsRDuRxaPzqNC1MWc0VISnND9y1sbiPAgfFL\nKbj6\r\n=Io0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"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/line-ripple_12.0.0-canary.d0f9f3f2e.0_1625270370296_0.6690611496212631","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/line-ripple","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e590a5a1a9c7a7c6e39236204f064cb89df7b653","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.adeac0549.0.tgz","fileCount":34,"integrity":"sha512-qvRzXrbsq3xjBuji/wvgmi7W+iYhfQhrewpdhplF+L9z+/D6uE/VZCXVrXjXibWXxxAsb7y6sMMRK2OyxR80cw==","signatures":[{"sig":"MEYCIQCVIXsJS2xyIwWQxQk4V/cV7E00xpgJe9LFgLOxt6mYkQIhAOWHULmB83TwIiEZHXM0cGyexpZOYiNCE61ILuN7PTwg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xT6CRA9TVsSAnZWagAA9Q4P/iQNDyC7yyXd2tY1aaHd\n65skppOel1LGG4oi5YoCRR/vRxopaEpoGepSViC3aJ9ehXxuzKn0SgeI0RgT\n+yd7M19znFdN/TK88OxV3Nt+b6ijE99GfNm9Wiip+N1vgRbwJ4vrHEEszfYU\n2TKO75DSDc/oCjvMu/HiitTPdpXGUTymn283NW1S5n1MFnaQedjZcE1dJzXy\nJrXe9ePZ/aGcw9EAqOMAjN92cuzYiQjhPG5yrhLsAqemTXtC2KNaPnfK6YSD\nCnmjT6Tc1tEG8hbACVESatVQkiVmzYeD58vB7dms4sIhd/2XmqR3xJNKBuxD\n1Ddr/+ekGqIfVXkk80OzqWDHhc3BJTlrgOny+5RIHf7pKpjaTvpF8t/xaQ9B\nKCbUdHcQ0EbFSnOidnJhs4Wjo5w3xdL+POn9pift0qV/yO838qIQKe6SQCP4\nPeHNilBLvDb2Kcl7UNAYQPo/K2Jd69Z0v9YPOlnn1lbNj1C6CfY38/JZnaeT\npUMpB/iJLF/1joUfRQJKEJ4awTt1fkQczPiW1ns91dBVYk39RTkvumn7DVOU\npMz5vxUZgnKOrymCP6/SaTTrJILAHT6m9Gs3kTIFQ1Gbn1ulzrXAQN5rH8yV\ncMS81kC/IEwlCFJT9qpAqXrbnMiuQsueE7gYa2BKgyzlCrdjQizoYd0YGm+L\n2S1g\r\n=k+CD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.adeac0549.0","@material/theme":"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/line-ripple_12.0.0-canary.adeac0549.0_1625756922156_0.6893068241662346","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/line-ripple","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c6afc71d75f79ad9629cdbfbb02f6e39c00097cf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.068fd5028.0.tgz","fileCount":34,"integrity":"sha512-kkb/sCXHtJmz7VVeZ8Qm0jwPsHgOUaXYXvn5NOxOtpJqNt0I4fsP+AJqVd6GCQ3Q1KNfI/WLi7UO4E3TPhFu/A==","signatures":[{"sig":"MEUCIGidMNmkOdQ+KDg7sDNObU4WECkxcvlkjZgruEw6sAF2AiEAvzLADYSw9IdxUWjRr5p2j7T6PfYDELnn3SDz9fuufzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50vnCRA9TVsSAnZWagAAyq8P/insWevi5Np9RL3ZJbA3\nW3TsS/CK1/4mJxjvnC8xYe1C5ykek5OICmPTBlNv3tT3Wb2nMz3wn9JdB5eS\naethUU+u5QzYQ0pnrE3k0RN+Pbat6IrdBjko3AMXE4RJ5cvta5eck+fHWqLk\nDYSCZ8lu2Oh9unlLcjoeUlFwcIyG37oXeNXo7ypbQnoM6P+csiTLSAP50gL6\njQJDZShVq+4BgtT204zsREw4a8we8wBP9ocZ4arLE5DQeoqm49sNzW7LDizC\n4uLiN8CEfKXd9MQpxs67JVZIJQgxpTBCjz7Wy80whipMY8iQXHjVe34752qM\n5xng3zn/OG4baR3Y85WFD9FOL2qHS9PBQKPsLD59pWUSJFg7o31f17rgC7tu\nFxeCLYPr43pSEi7VlQF3XDRNyLiyHEIkx93rR0FjbNm8IDKBXWTRwkYHyfqX\naC27oAfhEs+fwzWZKqbBBbJNu753NgX0+cY4EAe+ZiHQ5fYUdWrORUv2p/Ib\n2TJ5ZOAQ6vDqUlC9TB4bBwKn7QopKl/Hx1H8heLGpM3Xc0Z21ohSO/LIWvSH\nz00EsY5CwAISQn8nIVxQxrZfuzILtfKu7aPEFLb5+t84WJsouLWYOEm77SXF\nReM0cG/t8xmMxegBYfmt3X6DjgfvwUZci//8pr6en/yqbFOtqha7KVOfaXYz\nhhjr\r\n=x0fp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.068fd5028.0","@material/theme":"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/line-ripple_12.0.0-canary.068fd5028.0_1625770983313_0.0021435840868644362","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ea2ff1fd7ae9873213199469e556f6aab74da69","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5dfec7a14.0.tgz","fileCount":34,"integrity":"sha512-m7tRWDLMJ/gGTwmAUjKHzp4sU65G+mQZw84tVmP4jmWL4tBtJnontw91GuT1B9xCBtw3+L+54wbKxfWs1KxwcA==","signatures":[{"sig":"MEUCIQD7NrCVtkbwBnVNNGlKuyB57H14i1M9eWUMfFnVt1rwZAIgIG4de4aqAOaZF2pzscBZvQ3FvlzxRFbZZFtO63lD88c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KAeCRA9TVsSAnZWagAAZlAP/0mLA0OA/oA/o6FSR2XO\n1UWJnaKUtm/DQdbMeyTtOFBSAxHcVzJm6O21eP8sAtjUvTMoIJYgzjZndI21\nXiGLka7gwsLCBzZTgV6ShaKAkWKlel9Dyul8jg16lug41rh5/vzuJ0VRcLOy\nqMBXDL4/HSMoMNr+znDLIAJ8RJYIV6+vpHYLktXi7cXl6YWjYXB4lkuvw7pm\n8B8wK5uGh7ufjHs5Xd+RQ5DcbU+B9XczQLnQ9sJFR+Bxh9cl+xwrDsdduCjx\n6asjOoDgcnGmwBKABK6d5J2zAOFBaSu7YuCLAiunp6Y/lfvGht9VQ3r46lku\njfJ6cwnOtCpxGwZG+ExYogrp7Y2TMmufCHGgK9MmhwHmVxCubWpEOQ/lUZZs\n1yGkJXk/odTE/pUqZOp+WU1Z0WSMwNXz6F06LUWiX3Wv/XT1+DQLG/LKqose\n1zbgiCG+iGwkJn6KUSSRQ0nb6xY3N2uwPhNFdG7CceNQLI7zWv1OaQJIp82e\nLMScNfORvDpA+l80KVPxgBo3lMa16JFvmj/vhQFm7nYynD+kA0UlpDomL4Lu\naXCaqA9l4WBsLTwraEThf8a6t9pNvDc0fQUhqDC9ZbuHc0TY1hlmqMVVPwcE\nSyksQzMmytrGvgc124WB4v4v0i5zHmoWXXIQVRgha2D1aFcHseeoDMdV5UeF\ns4qn\r\n=ytBQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/theme":"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/line-ripple_12.0.0-canary.5dfec7a14.0_1626120222215_0.8215890888624147","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/line-ripple","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fd8a21f11aaa5cbb4aef32c7a6c8b120ea6879fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.07a73750c.0.tgz","fileCount":34,"integrity":"sha512-TbUZibkd8TGJNCFVEvXYOXLCtZIQdAiwMuM8/pKx2rLr6VBbjjQp0urlU955CYGA/Dbbj3YKZtJA5OFsqL65Jw==","signatures":[{"sig":"MEUCIQDhr8yUGB4jrELZKmOOHZRGrAREPZ+adONy3blr+qH3YAIgIutkkcZ77tF7spgosjyM8BiBE+LkEB4z8FJt153g1wM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KUaCRA9TVsSAnZWagAAw1oP/15jIuNbXxqQ3G17CXcK\ndzbq484QEPMO6f1GHmPUaJ50DMeQnMOU0a2MuJlN75ua9y0yKJ0OD9gL5//C\nijtyx8pbU4VtqUp9u52FSHLH+9gQfrABfrtbwff5V1ZrXqTRWzXsOYw2Oqzw\ni8vP6jXmHeeLDEXH2FKFSsmVkFjaShsDlnbMpioUqpGOTnxzX5TMcHelFHIy\nP0B/jtxU6vFfF6SrCShbcxjdOxxp5tyrovMNK+wvXTrIcoO8RZEn4f+2JIG8\nUASXWWMQChlTxqMCht2ggpsO28aNMCmsBwh+tRwiVOnDz17/Y7y2MH+1vv5V\nPqnugG6+wPh/aSCe4BxQemYUCIY8RQBqOoNzTq7Nyi031CSURHb1ouQ9rLhw\nNr5wPnWBNX1LnYcHxYcYgopL/YBbQdLdclEQcJDvBff3YOIUIn3VEg+64Sj/\nHK7lmbjevH5vy2qjOUsR44IvcLqpoMSFFfVEt01p1FKzjMjLewDJzhBGnTRZ\nZFpKuNusf3WAMQ4JCNkTuU7h9axf/tFyaXk7D82tfOlddY4hgfGOjnZUE32j\nfa1VLDNIs3oaZTT5FS5DBtAfDH4JihIZgaZk9Mwn5B3hGZBGAXuuKqLAiHqN\nZcA6XbnDQOz9ZWy3yIwwoVH4RXcYHmkGKqr3Amp+a/wJ3nZTDEJaqFbBVUKs\nskGG\r\n=vslX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.07a73750c.0","@material/theme":"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/line-ripple_12.0.0-canary.07a73750c.0_1626121497761_0.05261857911599699","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/line-ripple","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a7e866559bc5bae0a45565dbd2441ff5f19c5c21","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":34,"integrity":"sha512-ZyGPTUhCD9fgyCive6W0K86pf84XZJmZjWJninfRaCZgSrUSlPzLaup6IoSUrCF5J13WEyf3XSNTw0GMcD1Dhg==","signatures":[{"sig":"MEUCIQDnglpxrOJp4eJ5X65rccV3GB9Gf8t9dfgNzjY8FtdVpgIgINI4VvnsZgf5jCZ3mFrNcioT8ldckgM5sB/ejKH4tU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PF0CRA9TVsSAnZWagAAn1YP/0qywDXXQzdzH9pNmaGs\nIxGqOk2NHoelbnpzB+MSuyF+Hfq9qZ59IJT4QGbGg1CfZT0SPH2cqcEMVEYp\nodL20Rho1Pb+fPXYQ4Y8iEFOHCcpfL4dVnox3ab+qPNWiu750AWlKGD1TW7+\n6KTeTegKTD+UG15KDtgjaHkoPzy4oNVfPpUpSbDrwacwQyoqAOIC+lZy1lkJ\nSQnQ4OhAthN5wbXwReIU0mPnYZL6gglzLdWIHNMpe0lJxrkizcmmMpw/fACA\nEPKeleHo5ruK+hV9cDib3OrwsCIl4Fw3Db3om+TqP1gVt3X5sXGGyVdCE2Yv\niMutfitakM4h7zHJd9vcnkPsb1BvRI6LcB65we/tT/15bTgok7WHT3ganVZC\n9j7AbtDhC0GeF8FDET9xeu7Kpbd3dJ5/68gEHDGhXZAKh2Asfj8Y1Lu9h/yf\nXHPgwLeh0hCIeKo5PLAvwgTJc4IuiXZsSSLnx16pRczWSk8RFUDmUZJ+sVx9\nXZIsJ1d9rbB2fWop3YVs9loPbxZ67DrjzDQ5eFQ/5Ba3QG49kJiq7s8A9yu+\nkZQ9gsSyutnAx+LRu5vLktKiKx3Wzl/svv69wGZ44v3Hj3WqumemgFiWV4Tx\nnwu7J+tucsYAmf5W+X/6F2kscSLl30rTosdKFcS50B8BC6SnktIb7bn1jLrJ\nQ8+x\r\n=UwWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/theme":"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/line-ripple_12.0.0-canary.3e4c6dca1.0_1626141043725_0.33190844629607885","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c073a3a96e42bff5cb4dc7a362c98f3fa444d00","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ea77795b1.0.tgz","fileCount":34,"integrity":"sha512-3RRJJM2qDOH0EbVW+wl54M7pGaGF/YDLEF7+huTbOA3T5FTLDeKrACsj+fkUO/Q7AH9Yezs0ISHIU4ZDITG94Q==","signatures":[{"sig":"MEYCIQCP7xw9GHK0rAwgBTDUJs2yy7Jm0WyCa77yyIjsiXwh1QIhAJS0VCcxY4AwNjHKiQk6zjNeiCfE0j12VThqrTSoWhQq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bXdCRA9TVsSAnZWagAAHSQP/307LHndcLIteldrVUnr\na0lvmkSdbAbD7jh7g9U1oC7jSIyOWCjUJ5wOyCmstOd7CEhneWoOG+K1DO5A\niVziE+E/CnLFqmXfc5QNCPGEja6Pxwpzp/xhf+MSgidTrh4L+B+c7YCalfdo\nBoCFYlkmHUDc+VFTFt9NQ0cE6/6L8QZZp+/evL5nNX+eFm35csjgTegZN360\nV9rW46hxq5HSnzhlU6g2/d3FZnjRksA2xi8K/MOovfjVJCHicGKo2fAyQGed\nuchr73yl5u9Dfj66lG+Fc7ZrcTihQBZdvpsH6qJ5V0t6T3V1iSCXUZcwLYh9\n6+u/mNaB3KomFdkgzxZPQfiqIoPPsvILjEB5eFfFF+V2UFW1LARd96vBahQD\nAl9qAuYWZ5tvHb61tUhuNMt81H5I6SUYp0VUiljjGDcIKGaRNgAxvAnQhbd6\nUWwXs4kMgbHnXqAlIVhJUCBA6UPuIaQP/z+3UplQr6/IiQ7vH7+AlrbHVfZn\nWrQZGghtLxM1BuYNB5tQm60UT3ldCuiflw67kNObiPMoJMfsjfW8XBUjOR0s\nNQNpw0T1omcF8I90RXePiQ5+F9rq0dLfZKprBWA6+QyS9pPyylG9oV2udCkr\n0Qrl8U1fzzj/CZ2k2EhzGcJeigOuuNKrwRUqJPl1qZi//EoihlB3od94JZha\nwihK\r\n=BMKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/theme":"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/line-ripple_12.0.0-canary.ea77795b1.0_1626191324777_0.21679865963010414","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/line-ripple","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b71c5f7665e4bb90f48781c3cb7cea8ae74c321c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.15a179fad.0.tgz","fileCount":34,"integrity":"sha512-nx7cKkVKcPM1f/t5KG7ud+Z60bQ7Ng2SizngVbTio+JSPQh9gGBb+cGcCw4KXLLNZ6saMTym/ITJVl/KNpK3Ug==","signatures":[{"sig":"MEQCIFPLdxhxWVx5+NVovmm9qZWfVe3Sa3D7oMfQZWOIrqlYAiAB/9YPazmWuIG0xFFKECylYyf7RX6ZSGN+nqfiZgrddg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dasCRA9TVsSAnZWagAAgA4QAItSpJGqSrMIf4sx4Ubn\n+M4RonXXh97OJcXJyVyfAgyxBMGuXmEeS9wzm4/zs7at5IjzMZo/pSfbq9VD\nIRP20FiEeC8KGrI9jwdnu+l072dfY44ytuC40i3WppGh/vLOhdlyntJHDOtj\n/TrmZQab0iCNdkUrJtIey/Mn0q6bJXrUmED5PuW2GrrGYZcO0pthQVLRACF6\nc2Q5r2o2eMlJWeIy0zlHDROrorEZNS4GQDXILxPTKiIh2o8fhHhjYKJ8ML+m\nrUos6J/ajhSrQet1jbq6eozj5RyX60AJKIhJo1jLeXq5RKS5iZENpOMZGE4i\nOOti189dkA2zPsD/g09cg1koG2IQE4LaFCRhnnU1b276s/tok5Bt6W/934VC\nTR/9srU2j/n0+TgRlGNysOCDPb5rMahYVA7/+ME6XSLX+MsuGmKllhVgP8g0\nchekC1rZeb3uil40Z+sUOYzWRpn+hWM+9tpU5qncv9ji/UnZIZOM180R/p+k\ngIRNNNtZ0jx+62KL6Tz0js3qM7gn2AqsxkRKdC1cYD0VBEanE47TXNaBdaIZ\nH/cRAsJnAU5jA+1FTevepTwmfu39SJzK2jPQk4hVU9HDvrydkQSUVK6HJSWh\nZ6T9YS/dpXZ5qrD/4+rtfCb8IZsfecgspf4TSVDyKW16ScNQVC+dqWia+nlT\nbWZ3\r\n=ZAiq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.15a179fad.0","@material/theme":"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/line-ripple_12.0.0-canary.15a179fad.0_1626199724450_0.683505023346749","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1064dff4f93d5f8a4fd6cb5baab06db5d0512ff0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.c73142a1b.0.tgz","fileCount":34,"integrity":"sha512-fYdoxuruSTMTZdOsa2S2+cyAEcEP8ViA9dOMkA+44ObFZ9csq2RcIcpFeNldmAbJDGPQJoDzrf+H79NCDPLytg==","signatures":[{"sig":"MEQCIGJglQw8SvMmNF7tO8raIwmHzFeH7bKX+SRAWPRXg386AiAuXBMRGszqZAZvU1FoYKv47FdI889VEeYBuC6z+1aqHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d7fCRA9TVsSAnZWagAAVLkP/1hpT6Pc830PDA7RdG60\nLpcjQ1tELRWPigN2YQMtZTRhy3Mi7qB8yiIk0PP0Qrgsp5TQi4G3PqnDpJ2m\nNMQ8bhmlehvCocqo4PKm3b2sEF8BDMoH3/fiJGB7KJCq9h7vRCDyi5ejYlWJ\nhsToMdRRH6nyQ1lCBllxmRNhe03//7iyBNOKG7Pgg5uF39Qxj7x0Lmqt8d79\n4OJpHV/1iuQEae/NtMi12hCji970on2tJgfbFdeq993EFNq3+TNXvAzCOkAO\nkvpaYtCiGMuNLBndJ4BJ1dlFuzzaksCKucyrImdr5WbC1/oWjsz/eyhqoL4D\nEYnoqPAWXqlP8NiU64jBiuSI0daTy0aWtRAGDvOzOvsCCAih8ommEJcHg7Y6\n18CxmiKZElcn/HmktysbM4xMVr0yMsTnRqUkmGINW7vVz7dFQMGPx3vObhnm\nokeAybsd+CtMAiyEWZ+4eyJjQ7Sw7Qmj3E5PZ+emqOTPvFmtR4hjfUbpIfAC\nx2Gh6ctvIrYkr7y5oUL2qUNsa8UvnmJCYgpEqu4cem5+AmIqHaHyuH2GBy7v\nKWmJ/QQHqtwQj6quJN456vRTgWwFYxKta5cnC2GE/oRI/vmz9Dc1dyNCWyvZ\nu5yfY4nsFaIf3+9meUCDQziaSpGGO1ca9rAsdW6bqiIIegmWe6t91e0I9IZ/\nkr0b\r\n=bwMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/theme":"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/line-ripple_12.0.0-canary.c73142a1b.0_1626201822554_0.30294824047754365","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b3e0c0b9c51eb1ded30c060079caa11a97d7ed7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d923db73a.0.tgz","fileCount":34,"integrity":"sha512-oC9C4ZuQJLCSpGhQOHFlJyVXb4VFgUL1qKqCF9QHstXX5RxxOCKegreHrvGbhEjVIQohSB1myd2+Xb6uJAOn3Q==","signatures":[{"sig":"MEUCIGAaG6+lptDnL/4nDU5WF2C5WZpeLDD3b305n9WrYmHMAiEAxV04ted+DeiOcsKVBIlnl356/gu2olRXUWh3y+uck3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f1HCRA9TVsSAnZWagAAyrgP/j2aXpJ8XLpmQzUTmM4i\nyBcAtBQ7TA2DlSEqkvlybPqE+mKIqbwD74TkMSz/BY0i523aS6U+wIKzPtS8\n89U2uYrdu3q1FchrqZmunlw8Kd5wBxMeATrkhq4aqL2MJsg5ku3Mih3hnGPC\nft3UgyhWqgtwhc6tfpMlQazzmy5yRO5AffkFscG/wAaL3wM5f0Gn94pB2IER\nqXhTjQgkuynV1v7JDCBpNb+7IMbMyxtP2ATfLCMMW5agJp+tQdqutwlR/iIa\n4XY4FRZAnIiBmpZZMR8YrhlhSGlTgyIIt53QITBDnwMaJgVPIXOqMCjN1f7z\necRrNUcGaoupSFECGa85FoGi+F3GLL0iF9gUfBDA+Z3xAIEjm6I7lWPcF9G+\nH5XsVNKJKSeV5db5KCJOQtFKNYnwi7klqzE6ZKlySRCgHbVP++WeJrutgAfx\nP4AHhSsrGyUEgbsXkrFKvjM1xCPM++IRCZZuS3E6vK1KnJRHcibw7Xw7ksZq\n0bjRLn9yIFhGateeSG04InIMsuwdENGmpP0yIKsIT7MhR2rMkKCKhzLamTrz\nlarZv7OZ75QmPvPkHZV8IDD1Vv6/ZAv7bS05okRDZ9/2cykxqMD12bP5Pcej\niPNT/BKYAaNBSbqCLZWMAq57xzc/4hJz2uEolhzLjbpqSGdwi3Gw5H8vYXO9\nP4B2\r\n=+E/k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d923db73a.0","@material/theme":"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/line-ripple_12.0.0-canary.d923db73a.0_1626209606286_0.9813826044640352","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/line-ripple","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0d406dafd0d4a728d7833da52d2b89b116333361","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.22d29cbb4.0.tgz","fileCount":34,"integrity":"sha512-9LL/d3jWNesupmwvZtNbV2B1rc1i5BHatFgVt62B1xvfaViRL7EyS0K/+kv9SPWU6nqPLfdj33vOMukn2zIgAg==","signatures":[{"sig":"MEUCIQDX6W1Apr7d9kI2DUt3aLHhdvcPOLSFuLJeGs/8BvcKVgIgThlqSEmka1FsUy7NJaZugRBn0ZBRdeP/obQVlfKTNM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hiWCRA9TVsSAnZWagAAPVYP/1F1vk5oqKJiSGrpuA45\nOBUJOMBQn18A4VjvhZOTYqVKT0h/Gr45mwOQkNg4hCPjet9jZGHvpL+J37Cw\n0a1rnDdgbmsZuYO/+iVmGKhYw61ZxhYqPxaLeg1z5MgsCS51Vj/hDizHSAPc\ntlRNUzP/cXQanmda/Edr9EXLesjypJ48jDZBMcEMXD8jKqFF5jyMU5CQuVzq\nIqrmO91efegRWI5vGtAtjZyt9l1Ilzcnsy22wjMVfgLR29u7cSutIVohGyHZ\nqnlPLjSrWRKxdzKAtTnsS8RWjoxsoZugjnwAEx6UaN4W+yud3fJkvCN1RG+5\nXd7r0RXL9XNF8Y4zX7/CWrWiNMWcSzj3I0YyeMo+mAwa6WV7P0umltpaQQSZ\niSIhdNVMnzpuuXOMlehlQyYz+rjqtLdiPnQeTFaFmdveef5x5vngnj9UZaqn\nQK73OyMlsFYwUDehEnrJvWh8uUTGAnX8FKrXAfRZyJ82WAgaZAuPqW+0vIgA\n4IQ6vxg+j9ifVXXZ5nlkdK7YmB5xP2LAORZ8zYUuTKniVEKeQanqgYfrpuRN\nm9jT0Z0KEgZ7edkBfybwpr32KX2/rfgcKXOIBZGxHrqgYNlUyJxeYPt9bMXY\npgGlp1200/VW1Rk0SCwv8qMbkuazgXy5tDDlc734ZIOJzhbesxW39l9KpaQ5\nmKjk\r\n=4AGN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/theme":"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/line-ripple_12.0.0-canary.22d29cbb4.0_1626216598243_0.8317774498478951","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/line-ripple","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b49614b463f12b90cd8912349d86edb8d005037","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.2749604bc.0.tgz","fileCount":34,"integrity":"sha512-/ovWrFoWeD+A+NC0PSGUSbE/fJbbCDiA48z94SiO/7qPnT+tlJ6hFnD6IAtOudfbRiYs2/Mqqwr5VY143PryIQ==","signatures":[{"sig":"MEYCIQDqKTUZtRidg1DpGAz+zioaUWdOJF7/6IKDXaxWvNB6KAIhAPIAt+iL0MGyLFBKuuIR/olG/4CWu5nbaxQXslfQEJEF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w8cCRA9TVsSAnZWagAACisQAIauvR1YwYMfuR5Ad+zF\nVuMyy4SCu6+Lbb0YfAAmzsZFRKtJQFbdk0YdeTYFIW8ZE2EylC9QR5Bybuq0\nH3Z9ssbLBnDuagEBEJ0EyKQsxttz0n1D7e5s0cPX1rqTvVbV5Fr2ekBHLkMM\nXWekTJDwktYWo4wrqwSq489g4bbUK//dEeSwSvAFkFyYYQo0TQMVRYB8RwVj\n9rx5MP65THWaxJ8GxFzZJQlUndFztNUFIbWTZ5F7KIZyuioN60P+yoW3Mzp+\ndVFrYeIJCrFJ9ZEyJ1IQXHCg97qDCN4nZY1aJ6avCZB43I98PPvt5mXBSIsq\nNGvrR/vWmu+MdHCh5nCEfX82DVUnW8tQUnODtBNFRR6nJsJtzezJA/8FK9UJ\nBG+0D4DPjosU+crqrhNb2Ljwig+TpjMUrhuFK6inUH5epCZhGRjAX7rNS0ab\nX++wom//fzpdOMVhhHi/+FZJRwWQaO80SO4MLiC8uAi7SwMIFTpJO44IV6CF\ntfKLSZrCR62k2Sx85gSoQZrozRCCyJvbdsFjawfYPZN1tlGswEvmHWF7KuFq\nNvEbw/VPJW5fjAkrD8SmGxihYjVOQftmZupA5gfipYyBKxs/ru5TavpRLHcq\n3CyVvudsJFDfIdVMqHy6KXdcbemtGS6ni0Dl9st+x1mZCXFrNhptLWMVif8Z\nl2Kk\r\n=srO6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.2749604bc.0","@material/theme":"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/line-ripple_12.0.0-canary.2749604bc.0_1626279707912_0.5212673108710468","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e9067ba3b2ad6c566e8d2bf6eedb21ccbae167b0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.e1703bed9.0.tgz","fileCount":34,"integrity":"sha512-PlOIg3rhqL5rEyrgKDieVTN8I1k6jz9t8M4SZ3uGgLXanuYrKsOS/5NfHOrR1S+fZ1i74Fs+rcbLw4i2Vt7tdA==","signatures":[{"sig":"MEQCIG+M685eBlyOJ1X+UfBt+5jHIFrNKeISgxfDThDPV7GTAiAbd637R7zV6Anqj3RcvF1lNiUSFESnzVXKFqQnZ+BS3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71t1CRA9TVsSAnZWagAADIcP/35I6k+xJQ2R60VlkuEm\n0zQ5JTRcNjl1jnxLcYq/PHJO3fN8iKUQhHRkdKQWdiMH5noYUa9eW5JKiDqW\nxA2c9fQrA5QI9qiaIDa3Y2Gm1zdDMV0IfKn9X7AT2beV5WCHgxCG5DWIMwr3\nkw4yIB2B9OXr5mtAqH/FQF5Uu7NlDiP4p9sNyO9JcJuypUce5jBWYcZbJMI3\ntEQM0C6Rombb1Eg91/Ejx3CookfbsNf8GwqU3/CqlNaSRqFylfj4oAtlaVtF\n2SlQuZxoPpwx2986n4Z7Qz54ONzWb0pMbEIImODWFRbsX2pxIpjNE10Fsdiu\nbn6AMU1Wk6pHo1i2yV0C3jq+d6kpKW9uF9/EHtLHNcF+jEkGe4dI84LH3qnS\nzZk4artYWYDcwT5/ZJj4hvRlz7D6jtOBujmyFbR9feNVzYCihpT+Tj42VaUY\nEr6oSSm0N+svECAxyZT24mCjWZxXgZmIpGu2vTDt2HZ6j+NbD0OprHLH+08E\n7aPOKVmsrND9ey0sbeCTv7/IoNj/5iPj3IXOUibLudwhiOl18ec4U2yDqgdN\n4inb3KVNec0YMAZFqI+supZ1DJZELN3/a4zG+X9D4NyRh8Do29b/Cz9wL8Y1\n//BaIFMDhY03DmjWj9mJm1migUHpGv86s9PXAGetrQJNAfJI1Jr5IAPE/M3u\nFdGe\r\n=BmFD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/theme":"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/line-ripple_12.0.0-canary.e1703bed9.0_1626299253395_0.02131777064705198","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/line-ripple","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a8c9fbd6c7611f724a5bdfd9ac216dd03ab4ed5c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.de48eff0d.0.tgz","fileCount":34,"integrity":"sha512-IHOhyXOVRbQ8TKgnf+1xSxeNQ6WWDvEhhrAEShZcqse5x1GwCKMytAyOA43LJy96eEUUmI096ptj2D3fF7DBdA==","signatures":[{"sig":"MEQCIAkIcXJo70HFF5G07inWYEwBK0a3ocWrhiV1HTKc958IAiBZM276aFRU3YWu9cN9a4hBj8gYLh6exWcB1yWmpUvRIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GtYCRA9TVsSAnZWagAA6q0P/Aj2B+bIqIs4R727+L5s\n4z+Edv6GRlKCdy4eROhfqTzrbiUUheoScTc5waj9IlN7nGl0yzjxDArFr3Te\nqG5MPpQcADt6Sdawdqa6TuSCHtmpZ/qcLcw+lGCVQuQ5NnWTlik2B8K3nHNk\nycrIEkD05UIr3ZPb8GU7Ala6yd+2h0HKiUnlylKsHXYUWkjqwB6XipTjh/to\n/rZjUpSDB0o5iuMNNMA3aeBJl0jiPliezgliB3uMeQxroTFcfBLVMki+t9Oq\nR+mtaxaxyIyV83YNiPPYMryh2gEUR56rDLRFFCiAqbCZdtj0JDn6yFjU+BWg\nQ/gO/2qy4sjwU7JtApOG7kDV95WtDRaqL4P+lui076V3pCX0+tQvvSisu5Xr\nHZB71NQEKHsdQ2Cj/0Nnb0waTM30gYrQJ1CHUBd0fbDsCyuTwMB2w3vhV3PP\npw1MhZQQmEyVVO4siJbXU7eT4n2HedUY8UOPnCZasXC4nEqsPNV7jqs08Y4G\nIBDD7B8OAWhpq0LEEN+Y3U8bKJXtXaJ9uJ+yJ3Sce7XFWd/UKSiPc3aht3u5\n/rq5MPKrqsAQmlohiu1YDGb6OfOVMhnBJF9+mNJoT4mhUUaUZSV54+zWel2U\nbELX1SQb8foN3TtrtGI8VCsjhnxBW5tpjBOTYkqZEFnXXtGh+7+QIgpk3s26\nnIcw\r\n=DglV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/theme":"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/line-ripple_12.0.0-canary.de48eff0d.0_1626368856196_0.6269784547259187","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"393f47ae3e376bf3fe3fadbbee38e6766c76714e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4f060adc5.0.tgz","fileCount":34,"integrity":"sha512-7OMpGrroMgSYXULK2nyjwJ3eQFp6yCu3kA5EQuik+WDldmcMEoKIJ2BcSc3pz31frTFUy8bb3DYmGYfp4F6ESA==","signatures":[{"sig":"MEUCIQDzBFTvqNSeXyUX9h7+7COVu6lzU9tPvqNd2yPVhe0pBAIgHytT3dl0fYpx9VzqttXsIABFtXYghhDpxtDa5JrItIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Iq2CRA9TVsSAnZWagAAd6oP/R29uDr5jPLe2+xw5uDn\nAug0z1ulTUen7eM+sElEq0NoWdwf38vgtORAzeTl7E2DDP01DwdkDf8PmUhX\nH5KwuXvwmhpDnMLEriBajeOv55lw/xf9xFn4zzFH6yUAMfGnCsjVLv0OVQU/\ns1Du/ZctQa22zqxvOlqxz/56f62lQIXpwSH66tEfDfDklOeleGQScqrfQmiU\n4YajzUV6ZpFYGGdECTeJ61DLt1ZBDfbTolWtRMkkSMlzJTdNAe2hpejnSMr3\nx2wOpBeurd8cqJkOHrjWf02Ra7hPDvmGXM/z87gKObZGLaDTDt6DSMzv+tpb\nFiQ+H1hV/AjYS7xD/MUF6LmDyaoFPmuZQeLGZUNK8pnDHU+gOM36jzbCjmZA\naz+JClwtAfa3ozcl7EB5gyay5POM/IlhbvlhxMZEGD62um35l7m20WPIVO8v\nu045rApM60pfzWcoXkTWl1yUKCtu70LhGnioMkBp5iEoJpfqgoVc8b4qYZ/3\n9USQc3RDJ5dHV1SnJmIPHL0x2YEgaF/ck9bl4BYfV8d/xnmFX5y7qHCfWksy\njg9H0Sz363WnYhyV5iypHfXh8ArQx9sdN5gnciWGwU9FKe2GTxV4XFUi7kdu\njQnEfm4KowXHUoM7T0Phq/RaR3rwdjdvNXidNO/RWXmbFdkIcsGidxs+q/zN\n75c9\r\n=fMfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/theme":"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/line-ripple_12.0.0-canary.4f060adc5.0_1626376886088_0.22014308910889668","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/line-ripple","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"620316063572029fa210ab829de576e056479269","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.bd25779b2.0.tgz","fileCount":34,"integrity":"sha512-JA6REeg3qjMA4tveRgHfdMo26s9GlXZn9z6Rmh2zZ2xKt8HLxd6UopurZMMvwRuPGV/XnNnKk6FPyVzdxPf4EQ==","signatures":[{"sig":"MEQCIC0YgJ1PdH9pyxzKy4ZJl84BPDo9e0M1RXwrn/mI60t3AiBaO3h+fPHTz/KFmfNvuPqSLBFjxMY7GqoWVA0aUO85Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J2OCRA9TVsSAnZWagAA2DIP/0ccScHQz3YddmZhG76z\nEaS8DzlbUpyYFlbzVIV4OcXdPfFQ7G4/ieaiE895HrHia6+WfyNMVHeFeoOC\naDbxgzJJGUb4j2nopfekvlpcfsbKpRQ998aAfc4wa709mP40wKJpCxjgCObI\nER5B0FZm6y1k25RLf9zQD5fS3H5mTrHS74+W9/jruuA/zQz24HOrsM875/IY\nmE0uFD5uxoEzjpDV4qb5arA4iInuciqh9b5CUUoL1WK6PX1XZmh7iclI0r1X\nv1rWinj4Ols5Yk1m68EmZBPEAl0djGoz3wWgogfTKuAXamaTxzqfNOcNQGGu\nuZ4P6jCFQ1hwfVl6hYX5eO0QXrSJe1XN3/DGCdQyJMCgRNFBeb/gC4GvivZL\nkTT+LKkLfE1YDmCQuvZz/RHzNm/Gwq8XLXZoqHxZvUf4iTeF4/m0DXI/Jw6P\ncq15nTsjjuf4ZxuCZwMPoSENbekzaedBNWcr2uxCvzDGkdAR2I8nSzlCb6uV\nB/a7166LlIb9B3B+3ESm/M3SWl8INQqkwxbybLpco3tpn9+RR+TVHOlhqlv1\n/DcqzSCuXJMpnbz6u+JL88R55tirhiyUlv36JygwuSrTq9ce+pwe5lQCz3Ti\nzgvG6n8u9SVTzPb1CPS6HZDstZvhok+0Hb5TRo+mTfM5jn9Lyka4BPpOV5pc\nHiBZ\r\n=/JTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/theme":"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/line-ripple_12.0.0-canary.bd25779b2.0_1626381710569_0.16778861974562065","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/line-ripple","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d3d6a6a666d055f53d65d26dc642a71851e06f15","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.9f68a932e.0.tgz","fileCount":34,"integrity":"sha512-J57m3gsfQPdCvyDMQQX3sn6XR2/nEZq+Lyf9rDEwm1gvVxAumf4HJCf58YBAAvRUQUdG1jQJ567C70aRvpECow==","signatures":[{"sig":"MEUCIBnWeC6+E7QxqHk3a5qdaP4BRmbYnd+4wcs2m4kBnNJiAiEAuRMgi3Mj4TSp7c4+oClh5QhcSUscG9/cBYINBjdwFCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LFtCRA9TVsSAnZWagAAkPQP/j0VSI2LYSVD+Ky+8Nbb\nNtcGUPd3hfjq8Nhah2sR5ODs/VxShXPuD14Y80f6HqOAzv3Lak2w3qlbaAn0\nUufGJEwd0BeqyPdKqoL0LEvYuZGhfiLQzimSxEuvYwVhlHVqmbzppsvyF2WR\nz1wCIoZ+D0kCeqGWAZO7+heqk9PGuQEnqWxw+xFSvaZkTVVh8I8XLzpdg+KD\nVmUNTT4JbxJPL98yIZJJ6cJ/W5dEwakxlNsD7qTLUvsTh/LnwGmw9nnN+XvE\nux9JUvNKsJRaJh+3aSZwalAEvLtW0yx6mvAkvoz7kpubbx6I96sVdTW6lbc9\nr9jQlix2c2c5ScbCjBrgFOT/cVgb3bttsoZe6lWRr8hgq+X86/G1+GAtosX0\n5BDCR4cyTQVzVzPrxnrLa7rkbx9iYi43tEOiYOyDMu/1YIF90fNGmbNM019r\nWDOqgWyp6cDb+8QlhUehcKXh15pkaips1DfFqmmJDn0RYMyt59X5K2uMVVv9\nIwHnFcls12SYP8jHepgMcXRHzL6v+3/5cH6ArhkciFEIGyRWnfiIdAb5Eun9\ncnvhclI2RzPqqCD4E59dmCQ723iby9BX4wEwnY5ZteZPVuvTvfxlP3Thadgp\nttgpbxNHD/l4zfoB2pF+YOR7Mr0l2I5uRKriWAVjfuqFTe+jic44hKoGjGD6\nGcfo\r\n=dGZ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/theme":"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/line-ripple_12.0.0-canary.9f68a932e.0_1626386797563_0.5495240126356267","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d04494f869a77199e9847df63b6fc0868ee70357","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":34,"integrity":"sha512-Tzdl0f4LYlY1RYXPNqamQF363JOAugrMcUySP5oSi+0Qt1INa+YAbA3cmLxjPI+2CphUkqKiyUdu3Dnv68fkiQ==","signatures":[{"sig":"MEYCIQDFu2HhMfjEZ7T8gxml4035J5+ueHehGt/65Ug/AVh4qAIhAO2sgYVrzZuoe6DcyAgQMcAvWuoyqlC5TwCxI/NYplX+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z5UCRA9TVsSAnZWagAAcMkP/jSL9iWE/SnGkXQ0ST5J\nUc/NFnCAfp8WczSNvLU2OcxFiIfi3aE1ftq5iw5dxh9keMo7M+dO3txkksZd\n94jYxybV7nzF0+BKwxC5FxenS73++FvdTThW5IT/+JEFUfdrX3ewPis7ZyT4\nBtC5Iny16GOdodhJjPgexFgkbJ5t8182qNWKKJ06BTuI1UrwfNwRMFU0PlbB\nFJq7WbZfLdizLLj7LjTLL7+UqzUO7CDm3QUe/4J7oeDou33SN0wb2ervuv9s\njZBdyjSpAJPUagZAEPiqSQbkScuv/XuRjYJqd35XLBkn4FFSB+Ag/uEkpRkh\nB2El+++X/6TNyN8WN9KsnR32DCePUe62S0KlRRJksUUKpdb8lXd//a/nfPjs\nSr+iU+Z0SyygUeSZEJ9uEC4pmXVKb92ZyWMTlqAvzSCglutRBX1QyLdEYv2W\nNFltQ9rjVQwbEEeOcQQdZF6OQCDiWDxFpOFc6a8UW6ApTKJu+2VgHPsBM/8k\njQ+OTcZ2lWl6Uls9euFF9yAG9Ilu08iojsw8Y0ITp+jQZH67FfDNLZiIKqBn\nXId1WN/RbeuhlQ3f8NaPrcT0dqLzOirA0AkE3sFOgTTksOpxhb18d7VmZG61\nsVu6D157tkVOsG0wxudGBg4pc/Q3AzyhLq7UqwGjp+vw+GVakfxsKfzh36mg\nMJGE\r\n=puDc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/theme":"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/line-ripple_12.0.0-canary.4eecdeaf0.0_1626447444528_0.7097085426878778","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/line-ripple","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9defddbf2af1bdde7f73adef81bc48e5d49def38","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.7239684d4.0.tgz","fileCount":34,"integrity":"sha512-RUduBBBMawiQ92AdaeNwtYrYa8TW8P8oi8hypVXQhGMnd1fhpmNyohFG/4QSlabzQf1eL5Psc77BGmiiDrNbxQ==","signatures":[{"sig":"MEYCIQCl2bTyO2ruI5Y1ReSUPeKI4pLgzk0MalbhstUbTecqAQIhAM4FjOr2YSbcUCuMbhAxDYPrwXn8hv9KyLVZ3k8xwQ2f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8aytCRA9TVsSAnZWagAAWJ4P/jaAItw+aR62DGpDGD3E\nImPX2OWi20u1bWWIKg1unE47VJf5mm9s6vWQjj92fKlPPg7aFJ0ZURlPXRPf\ngv3HLqV01ohrk4DfHoFQW2F+Bj65hrUDFFcz7KXFl/ECOo3iFfXE0bABoUXG\nEXZU8o/vLdYD9Bt3TtbW0lsTXeACbL/IqoipPhM4evpEkixS7suWLi7o1HTT\nzCwhGpTD4bRY6bjnfSaB3cddRD1Qpv/bUYgeWDcdD3F7ZywKIXIvIRqo78ni\nl4jO9t4AVMLOxNxBWU5jDI87k38oiCr40h12kNkE/VkAb6+VxKVG6Zw8TspY\nsgFmrIbvwVTFGMBTEDNlxcn1QRRhM1BRvkJ4imTGiTYlchmZbTEnzo/WDu1T\ngPhzJp0YbcVjPe1L7+TiKDXaSW7+FnQwA5lXckgqFWx7ODzpw+AdmgibCPKU\n17SK5C+xvcAGAyll5GqaukawX4+aRcUZ8Y9ergqRiC1vv4WRPgeMHm9rfxCk\nvXjr5AOMw8lbd2s9j2lF9DREUTxR2S7QOl9fkDMCJb05RKQqJGPO+jXBIi5+\ne7InBpETIHbb7O/b6hA+Z9Ac5083T4pNHvnuMVmWvZnQOoseYdfQju1pABot\n3wnzTyoEJUQEddTqf5YjWsdjNL5BwzvB2Eiupy95htjyuJRbCzK3IPDVS6Xc\nvEkN\r\n=unsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.7239684d4.0","@material/theme":"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/line-ripple_12.0.0-canary.7239684d4.0_1626451117554_0.1471025245027311","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/line-ripple","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"937761ca1b99ef53a948cd9f8f36f4a023bd56e8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":34,"integrity":"sha512-+B2CNE6RyhuQagc6u4Y2lZJWLfPvueJgHDi4pcDx0hY0dFGMcplYnSIc96IbcO5v4IPhiZPbfXnhuJ3DpAsong==","signatures":[{"sig":"MEUCIDE3uFLaX4gAb0thvN+bmaHPs//eF3czV1XshxfQev0xAiEAkMPfxY3DghYYeuwaX9TNawJ53PLLvf7HrAJs1QFeJts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bAoCRA9TVsSAnZWagAAiYIP/1zUsYR0G9B8mmW+QZaL\nNx9YqQPaWBJDTuDtRwUBsSjsADiv7jgN3FCl7A9poF+RmJb706T4otkiapEi\nm/DBeeSyy79OPkoNakJMlrX6dYIAHd8vlMFMOAdH0xtbAjdqP4XFXqGr71YK\nQbUdnQ6GlK29ywYVPuLPfqs+uQkwuNAoXNFktCuoNGON7znWvxkoigTtDut2\ngQZtWyFZPgjpVRLbVwiuFjX7guHAicUH3JEKPsl4QntEiG+LRnGw4gTQvDtN\nKW6RNzH54yAfDFP1Dtqm7utw91Wf/355lEwwdL3EGBSAw+q1mWLNIFGtEh42\nE+VKyzHomqms8YeUrZ2fIFJTyFWuiLWfmwNoINuQM7lA4ociTa1p8Nwpp5iI\n6rDAqXRye20/KORdTJMwGg+tiB7YIqDU6TFxkBhMAbdyJ6iEB3qVdL2AVMMc\n9pkDm/OecWhad6s+G58qPPF70MohJ6wYwyIGDe4m5T04ST/HW7y4e0V6ANVR\nDXUDLCPxlqnM184zrYf7Np9vVe9+WvKN/yjpqoeuENPD4MacSGRXndcCU6GW\nzXXHWK3zVLTPXfqg6HFiiOJtjddY6pVLL+489dtFZMG1de+U3jCNHrUK5MXK\nR6nx3t0OLlEoar7P5Ai/Ub10qAtrC7zbjgAar2rU23aIm3P/qP9eQLCHON77\nnC0/\r\n=CRye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/theme":"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/line-ripple_12.0.0-canary.d5f1f7c72.0_1626452008443_0.03515949232717297","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/line-ripple","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"080c6cc00be5ca4601bc98aa7e703073bdd4bf90","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.4d95812f9.0.tgz","fileCount":34,"integrity":"sha512-mJm2FHrxQvlUdAtITY6sSGLZdqgkqKydG0UZ9s9/3awOK9ysLwfO2hYEEi3kaiRcC/iuttJJgjsSP2MoUbEu3Q==","signatures":[{"sig":"MEYCIQC6HZE4OevaHV8AoCVqN+ZyiaE3CK8oJe/pm4KBRJIjhgIhAJ1s++yQMB8HvSzXZnZInoPv+ueXUUGBfJ5bpMf0lHt5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eEvCRA9TVsSAnZWagAAIYEP/1tUqq1Jy9a/tU2X89MH\nGTuqCdD4+fBnFRtKcwB76ddrefyNKnwTJkctnZmaRcJSiYtuTCSlK6yrQIGw\nk434h4qNQVswebdHcyZH+qRA8/eNnPutfGy9Y3N2Mj2Z7gcb2s26JMLIMi37\nFW89dWVXREy132rHaHDrnhG5qyuwsTIE1GyTrABWfx7hU9F/ifI281yy4481\nztAGzs1+5oRZ57pWvigLQzT21GvHXDIa3kBLRsLRboRVqCQgauzUXjufH1xN\nHPxDrxKU11wllqiOgGtSK2jMsmgER55SMRS9gEAE65dz7MhJtPMKWc84gc2D\njR09wGM2KjEeMD4QjXiU73YQTvMSfrbODgjoLh/xuHBPCgaTg7gMHiz0rVtk\nd1YvUlJ4xvWFavqnyy8ihisAjl1pf6IoDJ1sRnvCpVtrslQZ5WAVo2UVrJtc\neCKZFc/LQVrlxNM9KC0/yLQJ/7G9VjcqKo76we/K319W26kIPdBwgwGyC0HC\nb4d40OSfiKYIFejNLCdlklb9lNVTnc1MWXjZZAX+3hDbjdBbUh1g/Cyirzxt\nJFnqMnhdkcqLJCD10xa3GbL0v31A6mCGwdLXpVY/u7/FMILPC+Zjzs0xIQmP\nyTYF5LIkSEPsiTobPdnl+/jarB0u5AME2Bbh/bo0HEg87s4M7SKZW8+gJA0A\nJeZK\r\n=corD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/theme":"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/line-ripple_12.0.0-canary.4d95812f9.0_1626464559071_0.3660700389284557","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/line-ripple","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c61367ccff30c99e13724550ac9259107c283e0e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.38d1846cc.0.tgz","fileCount":34,"integrity":"sha512-BPPbJC9izKWKJGO6uMkDueFLZJfBg+ttLYyOxD+zKdmwZxsaCiWAogwFBwanJWu+46ltS0DLQeRbSbuKNJlfQQ==","signatures":[{"sig":"MEUCIClJQI/vzrqv8qYQFbAr81TyNEZ4VKpFFu7ECs6yOvjEAiEAss5jK1ZWioI7KYsruLDc5f1sK1VIY8pxeskZy7j/tW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cdaCRA9TVsSAnZWagAALh0P/RhVX6YpNJ0H/vmVHI2F\nTQEwgn02Wankw0+0CEoN1xGXEI5vuN86Laozr4KQSachgEvT6d7fJHsHjVjf\nt8l+CtWJX4KtTI2m5fvZDbOJwME3QvYQbcIbZ4TAwJ3BqVDga3ZAADCqDG/0\nhkvAGaJFiMg82HtkAhW2Ky/RyDFnunqvUSSlAQqIxwnjRHznJe/xprWsNiz1\nZwsyo8qIOGGkEB71v50MjhPoJa+4Q2uQ8BnUCAn5nlIMOnnJT0QYxZt0vQ6t\nll4FFS0cX9yt5QrKvT31CNu9NSriGvtMLxvhK8yHmd7VpE1e3Hwpl4IW4ABF\ny108Cgz3bEJ42udVkLGThOB3G1nAfeETBY+3gRFwRjKmxZVfvCtblXghJexx\nGzW6MQQX+8vkBajFFuzkSkj8tXOghqhjnRJskhhsiR4sXIgSg4zFj2Z44WZ4\nErtSAWjIvOOd0CVBNBoApLgKYmgpTRddRAdrD8/GNvbDXcA+UF0nZzUV3TyB\nfn37s1W8Jqpir5IzYMDgWOX9ZCxTVPw/N7PJZJTN+AJyhQnI+68qG/tkfaRw\n00rVyoA2qZ1qRcoAaOZcuLFGuCWN4a+3SHiddertgonHthl/z9OtSYAUlgd2\nRshLP+ucvcViRlYCecFEBOYX0IIUFLE3LtFvlPTQBBU9J0iyfY7YAyMT4eJE\naNd6\r\n=lasC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/theme":"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/line-ripple_12.0.0-canary.38d1846cc.0_1626720089949_0.24909851709975905","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/line-ripple","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8eea1dbf685f79fef4fb92789720adeaa8283e96","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.3f691eccf.0.tgz","fileCount":34,"integrity":"sha512-nFvctWRMISu6d8qFOBgeMp6Az9bKAw6fUd7xD+RUrfNh9Fnrp/KGjrywZNU6F35KNmHXMTAOaFYMIG6V7NlPFQ==","signatures":[{"sig":"MEYCIQCu1dVlmpraExQqdtyxR6Kqfsx7eD6t4OYtUQWGJBAE9QIhAJJBuWKBHaz3AZRLnbS247VRCsPr+kOHE6sr6Hjhe6sy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vTvCRA9TVsSAnZWagAALEcP/1NW4GtI8sHMYkeBjoVU\nAGXh94mBJNpW6DxkW3+4+BeXPK/shnfFI3OqL0TdM2RR8zO5gIEKoXmLQZw8\neHLFFccLh3lyr4hQ+7qXG/q0FZeuVecXagCLsbiukMlKQ8tfCVb/EcYSFsbX\ndAdObk12aejXum5vVQZeWqJ9oJh/gb1YFXNrP8Bz6qmwW0oDLdRJCnIpTDmZ\no2stZK+PCdlgLv7ln5g2VyABAHDxbz7Edypm8MOWuZ9Ar20x9xLGbK8W57en\nW1kUWrIHxw+6RNH3JqmUCXQqDaGzvGKWWP1IIXy3GsCKDZDBUF3cChbt9Ym5\ntkYQMgeKFeLPACN9dz5P2wawP9tuLbFGkkBIICsM43VOuSCi8zl98FEceT2A\nYAuSLpi61JZwvQZuZh8A+NbNGCm/QnODXQvvwfjpqicA33C+KXOFKegBn8Dc\nYzlFwYrGvu2hsUFmyHGlryMzXsWn0BNGxRXCMhsCyPlZjNHqaNbzuLFnuIt0\nZr6cQ50/jkNeeKDoHhb6DU9X1nIOZQmXjGECSgj51B/bRRa9w6wxYKk2NQlM\nRBhplMePIXrbyAjdYqd23h1k5YnwpS4l9vfX4FJGLUYENsqC0F21L70cDGXg\n6nxim83QTfqzBx5zHpk9Oz1CnAXLgH69+ZqyPsy3IF2RFA6rCqpChVjZ/iNj\nInaD\r\n=Gf09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/theme":"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/line-ripple_12.0.0-canary.3f691eccf.0_1626797295212_0.8164736813883484","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf3d19ecb0d216c0e7ea2efa752ec0b3149f14ef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":34,"integrity":"sha512-TEZUfwImWV52eHXr5tTLhCRCVC8wePm4fQVueneQFQQ9Ao7J3zkGZQDGZMiO/ay5gZt4YboDP45E1IkGPlK3Zg==","signatures":[{"sig":"MEYCIQDTVfJfIOzr/nOoN04KFaWfmu3K+1++xv11cr1XoIHHvAIhAId8zx6m4uQwV+983b9xEU8IH5UmZP4E+0dQXYIA/4Fd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wA1CRA9TVsSAnZWagAA10IP/3J6+59MsHyrYnuiDGrK\nnW7hEpprgfKqXbLFWv4svmTD9LQrghiBuBLSZpHCJuhEFEA4ESpXI3U4EcNm\nr8CLwAz+Uw1EuPi16cVj7FStNXxBPt3gouksFvuuEOSBBirLrHuvZkT6y5eW\n3SVUApKuZ1BsYvhTFaLklOgBsLluMeEsrFLqgp6nOo9xZUj/jC8E3MeH6VuZ\n30wSYFnpchWNbLCy5rmWq3SuUp9FUDeOsfj4f6fIJ6O1Fv92IT4zmumg/ffy\n5AQu2Y5BkuvmACH7oO8Au6kSrmwl+mNNJlROuzscAkmUfykdhW9+z3dd04aX\nuj5pynsfmKiNr6VnLngUM3LmIwYwLZZNujqKDy/53TwVfDHgIn3PbFVq+OzH\nk/+cEB+4xp4FFUbfUsiTC6REJiBG5vzhKz68I+6pk2tsxZ4MO6pMpQZCHFqp\nvTbPGhBdgOentK/23oxInptylTK4L1ktqZz8umgFqwJ0Q3UfKOfaTN7O6+eq\nH0Y+ObEDrqkbk+n5W51uANXfao88Z6Wni2luUIk1VridLJVa95AnbLDSrthS\nzPJI9Ve0SwY81UAdu8cw4m+Ac3GNE3i4Dnh+gqnajJwZaw1jPAMm02u4yCuS\nnNYl+nQ4gGlkP78gwKuwlGe4jJxiazRFniL90TeFxkN9U/UVxr76gnmwN6YW\ns6j0\r\n=dlZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/theme":"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/line-ripple_12.0.0-canary.ebb5c73bb.0_1626800181567_0.730417208756803","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/line-ripple","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c0db996408403844789c189bf3c134b191d28db8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-nightly.778a0e8a.0.tgz","fileCount":34,"integrity":"sha512-mVCFO5bPIHnmK6uGfs4eIK+WTFllWbvimkysnYyg1m3uuzpRMO4+A68KppXcy9T6gE2nD9tvxFxTkbEOgvwK1w==","signatures":[{"sig":"MEYCIQCNXvbY8UIvoWx1EM6+wB/ek0QJfyaAGnawi5oHOlPurAIhALAWX6TG/XQK3t1NUuNKj6DqJcnhhEozjJNBe0VQrug+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132676,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zp8CRA9TVsSAnZWagAAdXwP/3jMDn6IJcVoyoARSkWv\niSsBVHXAjW5EI9wpntGCSlgurXzRUv0P/LmIzeRygXhJVBzvZqZ+NH1Z2V6a\nFHlvJH5OHV5nVYQ27AIRiZz9VE9Mm8fhRzh1Vjv9TlLFnMjVl4Vd9WU2J915\nwhDVk37qPUcHZez9J/5Tu83dQCg4/+tVCTJK8oYOATA3pelWq1EaCjbo+C0C\nGiB6R9aPjxPVqd2cGikPV6q4vN4PMRUr453hcW5QmlJ9ncHjNcSS0vyzv3V1\nd6uYmsxsOjYqzFTPj89lf/1TKFagE+5Rd+xAZZwwTS34fE5yqz3p6QooJS7T\nupaoseNSNdjFt1gD41wFXufWrlXLvDydQ0oRGaiM38oR1CXLDigrX6RCDTV4\n5Re8Wp19xLfxv2hxUDhMdwU7Jeo9DG3ZRUUpzaN56X9t1cyo0+FCVCT3Kd8G\n3W/8VGxw42sp7ZdrDxnQkd6CUSzOEC7MjUQ82OaAxwwZ8YLg+r6HbYqcuAV4\n4KFXXuvc88rbmPuG5DbicZnLC90zmGncGBVKAZajZD6ji2QXv2QRVGwmAyBE\nyVtIE/HpjjUaBQFwUo+WWOsv65trdD/6NEUexdsezZRvaFyUlZuUsEARjo8y\nG43lNg0lLeye74mCeptLLzH3wt9eyeleUbBKPXOWcs4CfO+CER2Lxre3zniC\nMOBU\r\n=jjsU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/theme":"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/line-ripple_12.0.0-nightly.778a0e8a.0_1626815100530_0.6754011421915356","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/line-ripple","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c80326201be84f0494ecb68071be4c4a984f886","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.791311bba.0.tgz","fileCount":34,"integrity":"sha512-rp+SadDU52XC7DZ6MSLdSZ4cu1S9lTjgMLDmw7j8z5H5V2wtuX14Ve0yYLYHz9MM4cJTXMkKBi6l7o6be9MrGA==","signatures":[{"sig":"MEYCIQD7YGQaWOASBfzB4yTVw1tflhojimuj+wt/7psRrc8e3AIhAK+bO8/95zXKRWtH4cg1ATjwDwed1B2vw/jIgZ4nv0XZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90kGCRA9TVsSAnZWagAAVYQP/0N/fEJYgodbSvBwCKfF\nOqfWfkq8FK2Xunxj9xKbWWEU2mT/al3ZsSavogXpsSeA5k4jFBJeCVRFpRjg\nLUYPKDMw1JV5bvaZs307dHk9uTgPJsG+72xTr/BfcGGUqdkssh4cU2ar2AyX\n0ZaoEfgetEb2tffS/500Bo4FYBOSaN7GbcZxL7qrS/ox1EQL6+IbRrux/atb\nX9kj/+VPiywvdDTb+YD2jaO6FpxMnXgoit4ZrLaPV3naieVFZLApofTRRGf5\nC1L1lqtJsDoCDob4BY2Mk/62HJQ6gFJtTlKqJsn5R59oE32ydW93wT3FoMaf\n1BLA2ghvL/DZ8KgwRPJFCAEqsqkyBnYkv9twY8byy+0H4SJ1JPohlIsMCiW2\nSKRXyHI3/g53Ax7sh2TwfYNnT7GsiKiqO5ooqMGUQxaQJ03yw205Vb2KZprY\nsMXJV8iKJnYT5OANqnn8e73x8KWNAF0Y8CAkaIg6519oywXkfpMh98Bv3NOD\nz+7EP7qhWHFdVl7dMaU/B1CBDIWLQRGuzLwpTtSWx/C/J9g5HsB3P4qQdZ+S\nbeqgf3L5UNP7AvJ0PqFq3ujcuTOPuODkh4Ri26QpmbExEmxSUTy1aN2pHee1\naUt1M7HEvpkxdw6NX1ONRFNlwuS5lgLvahjEY9t3yAohYFz+5iiA+OhBciZ/\nAvVT\r\n=pl/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.791311bba.0","@material/theme":"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/line-ripple_12.0.0-canary.791311bba.0_1626818821971_0.7022847291584791","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/line-ripple","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5aa2c31a7e4b32b6aa1ea6cbc6c4db6337d46ce5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":34,"integrity":"sha512-imr+DJzd6tyYy0czTZdRwFOXGCkFMdsLfFo8fBZQOxlLvxjvc8z8VtF4pi34EvvQotoOKunZ99nPNZHtmyggOg==","signatures":[{"sig":"MEUCIBwH+CRFRHJop9T+1Abb31wVuEYKFTkLPaaw1109Hj6KAiEA77DUHBoAcJZzQwo3e7cCM8XRqOZCPDfAVmVp3ZhcUnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D7BCRA9TVsSAnZWagAAMHMP/j0ryLuoVOk0uJW1W65I\nKtX2y+3HLLOXBOS+gfjrMBGSc82h/VjCV4eBdQRYL0SllizJBiVhoQCv/bhQ\nq2NQ+p/pg9WJy+zXO1mHCCCt/uTx50b46iue+FmEy6KURIFn3Hme3CWby8zE\n2ysV9SPrW/Xs91b10856zUIK/u2GsOc+LkKPYKEJO95a5VrdgtZAyI0da2MM\n6iRN/GOcDyhR7B8VeKSzKZJAIFPPom6yc6tSYOs7YXBFw/3csO9GCNhsBDuI\n1ojfSlvNasBSFeWP7db9DkPLjyWz1Bq6aIwMh/pJ8ME0EFv9fxF5JIWaYvqT\nm5wf99G5kEoc5PQiwZIvDle7wgZjeflBuCctW5reFfuHFuX2qcQ+HRtetW4m\n/JbOOAP7mfBmsdNdoILpHoImQbV+dIwfhNn9FKAK3ixX7wbE3TEIQ2NrzoKU\nmt0bT0PzMgnQnQTottmNbrVmcrvlk9jDA2pqMi8E5/pfdN8h1oog1wyfJjZd\nRuAAJ/Cqq3OJe0u1Gr58magD+49aIZRK1VQpUUvhXcH2SRz201pcpWIeShna\nBAP8a5LybgPx2adlMZKGjZ/mS48mYGFnM40ZWVEvJx1x2+dOWYfddXKzOag/\nTbkIWDCtgwQ3JnsmXNagaSxzY9n7unDvJnrGjenqpuTdrzmdzLX26wHW6oT0\ncUhh\r\n=j+1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/theme":"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/line-ripple_12.0.0-canary.85e9a6ac3.0_1626881729179_0.41303358573049853","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/line-ripple","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5644da96e661a309a321a8938423983df07a81be","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.6b0442278.0.tgz","fileCount":34,"integrity":"sha512-jin+2hb1Dr/1uQR0T1H7EXn4qeV7XLYpTNvKEycA6SiPVr//NNobRWrMlr4yo445Y0LeKT4SQehtBqKkNPLcYA==","signatures":[{"sig":"MEUCIFtaJ26EflpyO7n11Yo+Ziqrb1fLL9rvhbrWL8+OMFlEAiEArYk5zZ1NuwbrXpBJX5c6tWFVmlyLLJMGN6A7kv8t/yw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GwxCRA9TVsSAnZWagAASpkP/2EeZKJN12p4QZYAVO+W\nmT+pNQCNHugMVA7NVItXLi4B1x0k267j2MK/voy5V746iYD3DkiEpaxU7jJe\nf4QBrq4E6Fx4RwAnkizN7ONpVfg+JTxkTUlrzB5crNHF9pO4DBttw+93eNm+\noVP1wGbnRrFnpzC3Xw/lCGI1avYwmwKCHy8fLwZAewXBxwVGvn6YnWoMrD6T\ncUBdtvmGrbe9qUuEYKgXHrrUlp8vElKnNrqH9GtTFhCo71qbgwfjOE5dqUWB\nictx3gHzgfh5VCz9EoXtkmMlGcMX8C3jn9sqf2g0pdOS2WgDLdpygEow0VDh\npR7nJW2nB2aEFJ5vWmcX1vwy2jsPcMie9n1xNhkZXpYH2ETdTwHkUjC3k7WB\n0jGRnMo4+icdXGYM6B2wb9yK/+OFNVXipnG2Wu3BHAwPTgO9T2DO89aQDx/e\nQztWB3+qCD+LNjbcJJKYuDspyh1dL+UJJDW/mXYcRGa/T5ZjIDFuuWRA0VKK\niB9/URZDMC/UP6V455/BbwunsAEEb3Ch6Taj+FLoXG6UHD7IjHIr17hhIADR\nBIXr7WlzLSH7tVSHVUbaVjv6Y7r5+sj4nN/KWio5HlChFSj7rs5U8ZtVBqSL\nLi9/RxONKkGgfdXsM0u8EC1oBqIKpjGOGO8DEZaWDeeIiGDrCDQEUQldGaLx\nOcdI\r\n=H6Hz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.6b0442278.0","@material/theme":"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/line-ripple_12.0.0-canary.6b0442278.0_1626893361673_0.20743221165464676","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/line-ripple","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"31c0547e4aebfc9c5ff629dc21311b3c3cb15d45","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.5f00e454a.0.tgz","fileCount":34,"integrity":"sha512-kTUzkg8Ku8wnvb7W2gNXhi8YNQW+TX2Vnr1rwMo0NoZrTBUyK3biKJDBMeSTrIqQjiAWvvIOoC8aSiMvx6eKKA==","signatures":[{"sig":"MEYCIQCF2+Zt/+oZzUyNQ7br/6MMnrH7lwwjxUE/2DSB3a0/dgIhAMaRHJnHy56TCmFrNulRzPQO5km81OFhEjUCjkggz+Ho","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aVzCRA9TVsSAnZWagAANeQP/RWXoMHvWhcy7GrhRE8K\n46oOUiuRJLiWIgHqAqhkUYmybVi4p1LQ6edBn/6/B6Rdmy50xa4+DmR8x0co\nF6vWUQ227MhiNjEPj6p9HuzxSX/GRCU46HygFFxNEldm7SJkv/IeaLG/me23\nkH/9SL6CtaohvpTKbZwIng7eJV8HziccwAsoNEWhl4FsOjEW30BPOkb5nt1t\niNaRN/IQmE4Xcn91DWlqI2a63FqbT5IwIkqq2bjJRX2FHEQxHJTerxEK5jL7\nhuTwJzx0Zbp1sdgAG44npx78TwBN04k+6iKlnH92T3mXaLCi3ijyjtpQlyZY\n8iwSzDCyliQfwBEtYsV9rRQ5DfRguNwDreW0OcPJJ6dfhpWj1phevMg1g8Rf\nvoXAHZeX2UBfYkw0huBOHlOiIQwhpRRFM/GcdIT3D81vkwTojcVeOWEFHoVH\nfV0CKA2eS3CukGSS6L4OhcSi5EP6KUpf17ZbXPVz8ynB73hyfSgxCcZxRt3a\nBMFiASRyFfLVi36G4/0QMLrnXvioeByFkGwltDXI3xASE9kw2SsjKk4aozBa\nLrkPL1SXdqJD1MUirF17IspOVxMHqz/SrT8AD0Ub6Cp4UkDrIrwzRMECUatz\nwrLKzUg0XyJQNHrIfE62SrRbfCmCF9NYnDjrGINAsJxEzC5Zll/PnMYKz5af\nCvYd\r\n=WUVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/theme":"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/line-ripple_12.0.0-canary.5f00e454a.0_1626973555815_0.5943743211815553","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/line-ripple","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"45787c61db81fbb05b9f92f2898d22d906fbea73","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.90e08fc6b.0.tgz","fileCount":34,"integrity":"sha512-qgPraRXyEQ14WWG5sY36v6RMGNNpnh9GIyusG7WEl+WQR90cehZun8lTSxxV6/rOwjrbnyuXFyCEs2Ck+EDE7w==","signatures":[{"sig":"MEUCIQDgD6jqlzQLSAwmGGsSNYvC+QLoV4XDBvsut+TluNtWaAIgW2gT5PR3niw3AXjPDk7ra9TlpGG5VyQUHrdvHeRxT0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gFQCRA9TVsSAnZWagAAkQcP/RUwBVFHa6QAr5Dj1+8+\nzG3eYtDQRa3ZnkSsq4FBMyYTQmPmOeP+FI8hH5b8dNkeswITU76NLZRXKb9G\ngJ9b/rKU3VY1HgA88WSxYul679a9drq/AMJOyJj8tdK8J40aOtAFSO7+DQjj\ntJ3iS9B8Krj2OQyoeISsVSlNTJZbFyMdncNlr7tDAN5B6ZIXj7Ptive8BoOL\nS1hkfXP8vJ21MLAy9n0vlG6IEqstbpID/3bn1uDSI4BR++O36Oc8hcaYL0gP\njkmcaw8UA7JfGqfUwQULs8u5tYtZeMHvXSbL177bJPhGZzWbFSSH09IOBFh6\nIh4YPUh9Ee3jTlELoQKzrS637nc5p4l31B+dYYPuIIP7FV0SmGwU6TMPdkLh\nkjAxgTdHsFhMv+ZGwi+Vo0kMqeyOdA85ELuM58LuLvyz1m/L9j6UcIyUWGry\n/QldT8IC+IC7foC/usrIRRKtoRvXTE6+p2mc20v+GLPVMaQgNmZZIdOU3UBA\nKSa5zTLc36Yyo/32WB2duSHrg6y5En92T+kmJ0ejl4X1TfXEopvSlN54Hlg9\n/XIsrTC+DzaIhol+YuAYWLCpVw/L1Zl1dNj8tap/on5VI9F9XMvAp4ai2qE8\nkpQtBTmugXaIFxJIfMfjS8qO3wOHtsFxhO2KhnlWz2iksb1kzuuB3rSGQeBZ\nFa+T\r\n=mkP8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/theme":"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/line-ripple_12.0.0-canary.90e08fc6b.0_1626997072229_0.2157422514294498","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/line-ripple","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8c5ed2341252f19976c731c229a244fe18cc7690","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":34,"integrity":"sha512-kpoOVuMGmI9Hoq693mBWNRuCf4aEaoCh4IjfqvTQOW2kLnmjHwQQodzFGL9UIhgtdIpjpiOojlQGICxpRzKjEA==","signatures":[{"sig":"MEYCIQCZSfxUKVtvDIY4fNO1clogb+d97HQPA0Mfb0dne7RRRgIhAJeVzTKIDqZUyH4I9B+SbXcI8BY53xpoNczOWfgQfpej","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wZjCRA9TVsSAnZWagAA+goP/Ru5PljQGJJlVHe7HgwR\nMeYKN12ia3R63s1eeCrPPBs5hfkoAOJINUdK8SjPOMnwmk60Ah2BHh8o94on\n9XeXGySWq5COJ4W6g1r2z8CisBhUwyn8YGAG8Wb9EKQjQekBguPDOs1H0gkT\ntaP3uA3CQob/F2S0TlGb6db4u1SjzA86XyNLSIS9/ZS5qFd3a96EDHGXx6XK\nizWpaXvnJqR2/SWlPw3tj2CjKIeMQRru+QFCnPSzgcINYimxRHWwH7HiPKX9\nbXds4Frb3ybQsZ/LS1Wak5hDfHN3+iehSLl1yzhQ7EmR5MRjKhYAGfV3DU44\nVPjm7iLpr3Ke/Uj2YbXYMHwXH5OZqqGClR5P13gevHqYesOn5D3FLScIxfp4\nzacQHZa9AIdffPhDdCgOmh5ghfWyda/P3EtURz4fmAnmogvKd6xOu0C5Z22w\n+AaxsY/YmDngs/L68exjEe08Ncbt5aWJHPv5S8u2zVVjStbqzLh1NZ4bfvzA\nk7bie/bv6l9M8GIcF3Z3cex6sPUE/zaWp9BLZltUyMTQYa+QE7g9Wj/Itbsk\nv4Xtjf1L/N86QTs5lqcg6XT1UZzla5iydWRrYZkrwXXVYKglu1Sph3CTz68C\nepg4C9MFlsFRXJT9ZEfUSVO1SSIolRKhDMfDOJhnUnLOXKPBZ2srKYq2CbYi\nUlxq\r\n=Z1JY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/theme":"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/line-ripple_12.0.0-canary.cf5b9eb86.0_1627063906864_0.7900129574436889","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/line-ripple","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"406baf5145a15921ae67d2d2ff5de4c3d4efdf37","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.3f36ac75c.0.tgz","fileCount":34,"integrity":"sha512-M0TGaR4kpjLw6DFebG1lEmNlQSfyEVtEXxs2RvHp1U6gVpdMKtfZcOP2Af8hb7DE4+096pctYpkqNaYzvEIjBQ==","signatures":[{"sig":"MEYCIQCNS+/LylLVTCa6eqY41C8qv3xe/11lRF6CI3tG6z0IHQIhAM0xrJVLfiiKl6MkR0h6GajVjfN/h01S8NymUlaPZky9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wsSCRA9TVsSAnZWagAAkswP/RZxwaxwF58Y9qWt1Ij7\ngisDohRwcLlmAq7hwRVORvIKh1+eDLPTj+v7gs5RQWvcdhOTNhXbl5D1n1vA\nj5SPAptTGlhyzycKbVLJlfsriHUXM0+NHKGnXPywSryZ03iM+rPWu92a2j04\nllwqhqKt2E1kaXH4CkgEwzBvkXa99YHTkgyssZRAjCqxRr3Eajm203Sb4BRc\nXhU+uzgJR8DmKPrPfnk9rWCJAU6zc6qt+2VWvCAVFD2xkdsUfFJO8r1bIHYs\nQiCaV2A90DrkuG0dZsWi07f1IIYAkHUE2egP1BNkfKBY/5yfxDyxPkw/QAvn\n0Lp5/5lSVdv0fCne5DK9CIbEpG9mtV5snJU79GXS4t7PQ8EhBF8sb9YaOOBl\nivMc0jfv3j5zjF72sM9ugCl8iysY5Pfs1ev88r0qrcBZ1pUUBJ21+6CoZcfw\nT4YVzmeltr2P3IrvKgikSKIc2ck2zOraa276RNVqDdUsGheN980oCh4WBAtM\nNqpaKn2eyImos50tFppG9meGGUcxsHXzc/kl7T6gxEsJxCHoQKTZ3Lo/BJz0\nU9jsEnDHxNZ0mJP/lFcfzBILG8UU/GVMpZJt9aitIxfS9asSHq9zKhOFsjfU\nravkJMKP6QIrbSWf5/k0qjjwEbMWOtkU5ux/u8Db5vwunocZ9u9GQMBZ6MLO\nkSG7\r\n=d41c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/theme":"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/line-ripple_12.0.0-canary.3f36ac75c.0_1627065106625_0.6904600388302782","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/line-ripple","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"edfa53aec8d0aa4d2e412cd42c9f3ee494b810f4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.ea1e1b850.0.tgz","fileCount":34,"integrity":"sha512-V6eV3cKdhd1MSZYPCOBbsy1RmaByJNVELfK2zCgnwHv7qt3/Rn9j7EW8jJwqTcjCH78LkOLXkUyk182qvvefEg==","signatures":[{"sig":"MEUCIQCZgz2apyLcYSxMT1qDDBh51bTTx4kbWcC/AfOKubAsJgIgKqa7DvvZh5INFGZ0RT3yEGne3rxdeOQwShK0Y/HdhSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H43CRA9TVsSAnZWagAAZvQP/RsYXPnlM/+q1kd/UUdw\nJcWhBG/C+4vVfEbzWvMihBUw3dD4eFeFYb1RXagzKX2JY4Wz2CeH3mSX/dh7\nsGEqKo8VdjCDw5MnawGLbcJpu9WHP7n9S9cnZcpSxPIuAU3djvAQWmJoF0Ie\nH4fg2oXqasM2pBGdW9W49vMcGNx8DzXsVneBafGUQjPORKTYUAjIfQm5gKlT\ngT2brvKDvT1wdPHOuTl6gi0TPrehopoaYP3v0gSwDUkjkDVQ8LgqcolEY8/d\n7i104Bn9QZxbX97Zgp2DZJlXnRuWjc8aVXReug5vQFMV1jEB6klxsO1XSyj8\nL19SUL9cIE3HTgjc2jIjitpL6ZLFZ9neTW82X6sZmbWrIXLvTRNFoF4wXH6d\nHHFNPFV8eCqDEU+YOzA1iKvMit+UXCIcy69s5R/IR5aL3AwJG+2GrMfNjS+X\nf2MGqKfoHMcjnQ4LKaQuix+aGsuiNcuo4cP/AWkYxft4RMOsuspBVAh7KMZD\nWeWzrfDGwy0IzG1AxAvc7KNJ4raOyBmSZz7sVK8wTGuUeG41euhRYssskaG4\nueWccUaMVocdEc2EX0W4ziQ7lu3Nxk4lYhl/+W0pq67K8+u7PfisudnlG6/q\nhv2CZhT0ZwrmRire23shzQhULIbAeicI4laZhhu1OhYhgJZB1ciaa1beCydU\nyj+K\r\n=umxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/theme":"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/line-ripple_12.0.0-canary.ea1e1b850.0_1627160119426_0.04472391264751252","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/line-ripple","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7d7d7eade55bc5bb8b18b68436a6132096dc7937","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0-canary.22f390c43.0.tgz","fileCount":34,"integrity":"sha512-TvT2TDmQ0ImV+HflrcyawY+zTSXmJWiM1w8r3+kcRzYoBX3zmKP89UwY+58nRqFrWVTKzmVKYntARHwz2TZzyQ==","signatures":[{"sig":"MEUCIQClc1Ipiw/2mObtOrnB1x3l0iM/4Q06Qm5HskfwGFrhSQIgJoXUUF5AXUHeByjrfwfPWOZKhRnkcfVDWVdkL71b7ws=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFeMCRA9TVsSAnZWagAAKdAQAIM1vUFM59TlMsz5rgZF\nJYH1rU9zVjQBsFR10gHqqs4ZTdClUue6BVvFrcdekIfk02/Zd/FEYM3xBgQH\nS7KK4JAkY6Kcqik7zCYhnJBNAb3mkK4XVjNzm+rKw7CCS+nI7dX3pHtd62Tk\nP4anIaQ6HeRAxQtGctEvq5B9GQcydZsJKXMWaClkO/n+SvAgCdbPew+xMx2o\nItwkoAF9/nx/GNJXmf2wln+JcQwrQeh4BDxs+nDo/5g2HdhevbKvyXlzsS5k\nSDZnYS63gGH5Y2/kOeQJiamsc2xgcvecUYLq2zbe/Z/liHvI665p8S5V4J8F\nZ1Nezi7ueZr9VNm748WoS+JacsvsSvYM2UIIA5ylD/jLppHSr8Suc64o5ktt\nHMGHXT4PAVA/z8nUZQzcUv/uSaSrdP2PSHga9XWo/bh04YaedH0ybwrQ0nJf\n2arXfCtN0vlX81mliGbq81iOaPIoUzo//PAWiVz4yoQRQ7+7qKdaE+RDPjG4\n5KI47NFkr14sJMxHQeL04BrTcEfHJkkIWqeVJwklPFgWvXLDP1H9qisVtuyG\nLMX23e3Z7mN/KtaTHMT8rmuiiuD8X/92f2olgl20ZHnU9aou2V7hO5MX1hYC\nHFn1RzAOhT13oLqQlQX8KIypBEt1APzblut9x71Juy91ECdX7x/ootQoky06\n8y/7\r\n=3biy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"12.0.0-canary.22f390c43.0","@material/theme":"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/line-ripple_12.0.0-canary.22f390c43.0_1627412364850_0.6442508932828095","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/line-ripple","version":"12.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f5b9e05b5a44835b50e5808a2597bba1ca0703f7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-12.0.0.tgz","fileCount":33,"integrity":"sha512-W18BuAcjTzGfjmfgoyQmxEsXz/D+65tX3H7PTsudEoacxby6BdCNVJWwyRCOSGrzVjmETeNbqHf32oAZgApWXg==","signatures":[{"sig":"MEUCIQCPU4X7gHIoRG4WOdPk4/NyO09+3U47FQuksbqnr2wGKAIgLjusRtI+bFcNyRhO8jZr/Op/paE5UgqrEqDkhTJQzUY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGNDCRA9TVsSAnZWagAAfMUP/j5vH/45y++b97KTjnVs\nd1bJ7eFOkGyGNLqjee70oUAp6L8ZRI0es9I70M/xWdqgB1opk5DQNGGsPi/W\ny0ZuxLfcoSC9XE/TCbRB0wWthBtM0vuEBDIKMA5Ty7rQRZ0czXdrBs7LTpO8\n7Hy5m0ENKGXKfa0w8OLbHAmkJPi5YBI5AJWKwZnbNQT/zQZs/QcSsqyjwLGC\nbEM1vB6fu8rxIAQv6c/xWF0M2Y8WGkczF8Bv0wsBpN+R9TXEVar0WzrjdNpu\nvVVO19e7AJN5fo2hTsF6l897mIbpbdN1dgZ+4u5WoyHg6F9ELQylqQmgu6Z1\np0LETZhkLlXX7a1IZhVlHdzEUMFxgtj/OtAbpImc317oJRUKk3lEfXmNO01e\nFN3uf2nSvXyQmN2G6Puvtn+U7X9X4lcPvKpHNf1qDUuVIOXGRRcUJn9XAiNJ\nqReGVEUiwSb/fM2ZmoiQbsC3YWy19mooWWW1g5oTBC6kFeEry/gX21xaiZAw\nUJulGRK/2FFH6YCiobxRb0ofu0lQBzoIltXttqFBUXstVVRBhQFLvzXFIJcr\nWqhpGX7kF6GG+fdTyNgfN2WkW8bjvjH2ovrMN/LzGU8zfWKs9couL6O3z7Es\n8kH3lGAtmPmvoi6YvIioDQKOPH0d5MIgwXVbh0iWZPOwwfIR+isMx5NHUfFY\nOsq5\r\n=cTrt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"^12.0.0","@material/theme":"^12.0.0","@material/animation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_12.0.0_1627415362973_0.673947619286438","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/line-ripple","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"66e7d70ab177b93d1b989859e5ee4c70dec5362a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.ae85f7eba.0.tgz","fileCount":34,"integrity":"sha512-+v08MQsxWgMsEWzUS1Hme1yLkk8UrXnrv57BMWC2TtDvHbwemcNJhg8n55YIbH8XCJnuh893LU1qpBt0Ac4D3w==","signatures":[{"sig":"MEUCIQCLHzaZlJR7Ds6ChDyqzKuoWLuMmL1hHdl4PsaUwNUEaAIgDmjqL7rpU02VteuD8H6zeRW1RQkIkT+Iq53eRTlaL3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOgCRA9TVsSAnZWagAAil0P/2CREE6V6r9B5vVfx3eg\nYMLY4dXzFVtQkK1ABtdrqcFVYzWxwZ5+oWow2JRqaoemIOUaexyuwrP1wHgF\n/gc521Gs38qhx/9fteqtUkAZOlux/h7eUkxX3a4zrF0Qu0JYgVyX5xcNC9mU\nT82KwqqLzXzrSkytQOHPv3lgXAIuE9z1+4tLfglygQBWp+tu6n0KNP7EYAt7\nzrao/7J8+UpCkrexzHeuRgN4fJMAJVqeUrqFdRQotq6+meQTV+duuIykht0O\nZvw/z3VX88T3b/Ge2NAoxoZPqqM/tcUucPQRzQtF23Q3ZQkvN5gEQ9EY85rj\n8z1AGcgsq/AJEiW6s9XX3bJ/9ld1XxI+bXEdrkOH273uSa/bbNNE2p23WlqC\npe+Yd2ebfXlYsdCSJoCFVDnBbsMGxpOX8Wo3PmXsZD3WJh5Y19BIM5WVHq9Q\nJK5KyNVK2W9/BLUM3UvMgbN2uY+f+O/+tUU/qXyuZEVf1PtFdj5w2rziGOoI\n94H7pmM8ZtBqRBh/KlH1atlOyGK4gKac927Z/+xliF9GneSBXLC/D+pl5mzk\nJuRzD9RxKrTK9ky97lqkIsHVYDH5m56miXlX+OUernxcpqPb7Hm2g5GjiflN\nspAfwCjyB14S4jwptMx4GBLmMKNZ02SQwOt+AgQMYc3ZUuGLQ0rugenpXn9d\nsZHV\r\n=eqbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/theme":"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/line-ripple_13.0.0-canary.ae85f7eba.0_1627415456156_0.8102762521021831","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/line-ripple","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1f162625e71b2a072354b28e2f2dfb8eef5bd82","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.5981207f7.0.tgz","fileCount":34,"integrity":"sha512-KJd2Hh0ko6uls1TgRIcM8KfVGjHwEGvvKZNnLKEk6sWg3TakXmJPWH1M3GviIm/VJucDJBUjk+pa23nrN3nimQ==","signatures":[{"sig":"MEYCIQDh/n+2iA6jysxbjmtpgc5UgHZmheX2pB2xYRM2PU/g5gIhAKCqHAe8uyo0HHCFAp7rC5ZZQJ4IDT48EPnifEelKoiu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJQVCRA9TVsSAnZWagAAXysP/1nNfur87L7xmgIWSg/+\nhfbL7cE4BRdovz1j9/uricAbfZlx53KiHlVnw8mmrF5+U2FHss5sQ4GYx/w1\nkavSCDC+vNDIRyDzaT/cCbvGVv/xHJ1G2B7NjUS3pZ8lieH3fqS0M+dtlwAd\ns8A/hd5/T+IrXr9bzi1kmBQZcYZYTVV2CURanOtIkGvhE+LisRXlaWZNUTKB\n4khwFzZ5J4klJMSSXdes+TIhrh/Yw891ABv6cKh7mooaYWVPjwq4oXpxPEpg\nJ5ySI6FljL31QzPdsmoKp4bJb+coYE9RPjvK1Ev2zOLOrNKThXAxMGeK32RO\niGe226z90Jda9YM8kAGPiixmgSXHNJWAQFyTQqmk6T/spccCGh71kX7XhIgV\nsF52dyNn9mVpX4niSUcsSiP6tm8Ve5sJEu14JzXX5YeAPKBLoHK84BXUy71D\nLf1JC5GZr45HcRSdswq92JLjjo98BBWdpqyuwbuNLGopandR+HHvfxAtdqyF\n/9tMX4Jv6n/1DlccU7o8kMQffMKGQAInekUGpyGpsdBL3dXQ804+iIo8uTkX\ntwv139sn4BXDkAL1gOeMeA7KJzlgZBrVmh5Jmi02JqFAWHoHmQCuirCwNisw\n1lbdN+9mpA0nMwvLIv4Yxgua9sXm1dCjKEKLMD7R99dDszNSn6UK3CEj28D6\nNpyP\r\n=+iwq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5981207f7.0","@material/theme":"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/line-ripple_13.0.0-canary.5981207f7.0_1627427861703_0.1595733785006359","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/line-ripple","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ba01868905b1f702ca9087d09df8ece6e98457ee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.83bdd0222.0.tgz","fileCount":34,"integrity":"sha512-WxYkmU1mU4oGv8BVU6Dhx+vbovSR29N226NxdQkUDPh2h2WgiX0pnnzDkx+0HhI52IguEmw0BYkd0NU02bpHgw==","signatures":[{"sig":"MEQCIEDPb3S2l8VhWR6C7SEgPnHeVlAYQoUhq8sId/sdzdK4AiBGQpBCMS6zRFPk3OYOYjoyXCyUc2Hh9jEvxmrTfcstXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZL9CRA9TVsSAnZWagAAEzcQAJDHbkPMzu8/FtXjPKmc\nQcr9CZ6vu98eY4lJXgS709YCC0do5Nsyf45V5q4n1MUalKTSTEJn1NeGyVBI\nD3K7NrRhzA3UgP5qil3ZqriB5iyK4lYBJNtpAL9n7jCDNIA0j/TdO1ZCHJO/\ntiyd/jmK2U5ahgfxwYQzTQO+SAjl5VObrE+i1TyqPjzxDOqo+sx+7Ls/Vkwn\nIMC6O8TI9tN/SQlzJL8ethJPtDBKoN6pt6X/ypj8L6Br+1UHN2yld+jfGkpp\nxfjBFseYjZ2QoPihVGvxVr1d80awLdGxUhMRNILphixqtJQG8JdVYPi2KzkX\n63kJP/pQrrjHAmSuvvgZknlAuFNPkkzwPyOEsXpaBOiGrOPt5aDKOF3yyzIV\nUG7v/ZBEBjvMOafQ4o6iJ+F3fToE2iqbbpazWXpIuxFCEd+igCxa0OtyTnlP\n7byCq7suzHsv2scrizCiHas7TKeHsYLOBRzSINSm3/odnEr7PC0CuJt5q3j4\n8mfsGcUIrCf0rtiptEkqTaX0fh6zUdguwuLTzUypFP/FFLBMlXmnTFIL+qYj\nCMvvefpuUr5dJJ49TsWQT99NsZFDbyyLEBLgn/aNHZp4KuJVT5L/yI83e1yt\nSwboaT1Vb6ed6nmxRgzt1Jyx2UM5F6C7tl5XzzrUHQMGJ3KE+8MXjGwMpzuq\npkNE\r\n=MxG+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/theme":"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/line-ripple_13.0.0-canary.83bdd0222.0_1627493117516_0.09975458686199534","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e021063fd1ddc638901d6c8dbd1ab36fa856602d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.28656298a.0.tgz","fileCount":34,"integrity":"sha512-C7am/gLRNKMk6/SGbteIYVxJ0NkmLSnD12KmCsUn2MJHJ0/P7ZedJX2BJ7I5sNxUJHJ6kRoqJWmeYLAjPcXyrw==","signatures":[{"sig":"MEQCIFx/rCHbHEO63CydfiQ1q8T7IZXq5ElXg+9XVVHCj+gFAiABaRDWL7ebJJ5Jv9CklmlkwidsmL7g7CUj2k/0Sj6VnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu+VCRA9TVsSAnZWagAAhhQQAICvbuFMKw6mqOd3hcgE\nFkjol+kdt5HYitUFEovZDImaV0HyZfFyw/kHaK8VZzIsLYVafXH+uEK2wgbb\n5lppBw+ygU29b2GyqzwU3yCFOPMGeacNVNSlvRlwAVG/roYgrR6+qiAcaNaA\nbp7g7rFYNpaILN1IXqhsdyqYf/AmyKfa8LJTD2LdaTAqpwD+BP/gdEHgAxSn\nnTr/oWA1uEi7MB7j1tm4Nc+gzEP3Mpiv1PzXWdTfLU7ez7ATdoPnoRteIgJ+\nFEz81Fq0XGCJ6HXV/4oIA5PktwnIqwmc21FSuPPO9rdxfA3kwdmDXwVCdpDJ\nde/96Mht8V5EbGIbotEYxEn4c3CyxmrZf/OxJjTdREiOoG5bLd5uSR2mN1qE\nuzLPpoY+erefgaNeb5kKu2n6xyEPfpJydls3MvuT+e7lMc7cyrAbtRvruG3X\nbJEV29aTGShUGKidttRO5yoZFdqk4lfVwhNIgaPVJrs2QfmtqGfgOtumMylz\nlxjAWYrPJFO7cXbSavWLpJT5XZhKN2l3Dcy3Kou1YMYRW5knxCjDJtHqcyAW\nJANMrBmqrayZoDNWhYv0Znk8JA9DyZFJmRsPdj/3fnCvlbiY4EPzdCYWbtSR\nX+gE3uNJ9KPqDWw1RMTv02T2LO3uW4s+eSR0gnQx6Gm/NK+XIr50GqCHoM3O\nHget\r\n=QYEj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.28656298a.0","@material/theme":"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/line-ripple_13.0.0-canary.28656298a.0_1627582357383_0.14461772240280424","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/line-ripple","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2758d57d81f2cddeaf4c317435bff467b8de0a19","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.9e797daaf.0.tgz","fileCount":34,"integrity":"sha512-kSrqbwBmhOq6Q+/24MpjfdGijBJvUpsOgi7/MW93NgEB1ykigTPo0kxSciZx8b2+l9PgxjSOzf9G/7y0FfpqTg==","signatures":[{"sig":"MEQCIDCoRq36pqgGgJyXdavyFu7bn0H08cL9kbyz6Mfz9r0+AiAr/f6jsEhsDTsslLEi3i9U1RTu26oJXmHSFXegc75gGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvTNCRA9TVsSAnZWagAAPTcP/RZzkyjEPkbesFj8Ctuq\nzTSgTr0qFAAwxB8GKKZQi4Rl9T0lBmgDhMv5czjkR++bSVx7xdmgmXXCEG8j\nRjaKHQB1y/pxADE6ifoMMs255D8aIrZtwfo3X2CmCS2cNJmBewr9IOjm7arC\nMcuEq4AwmfqSwy1MvCe7MLyqBF6GhfXGR4dBE5OOD3hboGOBVYqjGVXfAsJ5\nGZf8zGSM6EBihVxSVTjbm1d/4G9MRrOKen7GsbvtG+GX7wfruxTvqdbSZk3j\noHIfz6wlKfS7TvI5YY6fBJyShNT5BbJAlnTA4S9YdCGXRl6m+wl7dpQijQNa\nEWyMrEzYx05iJjsYMOyep909eCPcahimsc50DbvynQqfTuswxl1vqDwYQ1mG\nPk+DNOI82I/MsHIXmyJzH9TjjOfNbC0QDdRA4UsygakYKenpXfSUsnjYEzcb\n5M1WUPbX6z9TchzxUY1UCO4WrHJ66eiXA+OIJzTwhOFhsO2IU7YrOYVgueJs\n8DQHbdRKHPAUGD/Ysu6lDbdGbj5K1xF5NEJAf/AAwJfow0imuvwHJ4TIbSpb\nWO5veJ0burfxA/h6dYfOJ2ear8EPPsdGMazkVy9pf6hJyo0+IOmMAPSJosbj\nHro9929sbbuGtY5gQv6NTDdFK9FBXt8rWevm6as6lOEbLsjRzOWyiqts2/15\nRsh/\r\n=Aq5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/theme":"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/line-ripple_13.0.0-canary.9e797daaf.0_1627583692842_0.5935092168100291","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/line-ripple","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f2655b8cd20b2eb2a45e718f3ac17f3e28c2689d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":34,"integrity":"sha512-Dhfk3XGIIvAHXk7/Rf1D6ICPSk4pAczXiQrfuxFWowdNt60MhGIqyKu2vhObKVsEi242huA93cyQS6LJlWkuww==","signatures":[{"sig":"MEQCIA7pbgWifvZ2TaRuWPHfZUEPZoAu3VBHJNUp9hrOHau4AiBVPB8L3W51AwhV25hisEFBYRaxv5SDfDvq4SkWhHK+yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE06CRA9TVsSAnZWagAAheQP/2Pg20LdoLWwXh3sIhBU\nGQHj+l/7znYgmzuel5oxHj/gfDkZedMsErnQttl7tXaAxsNkHHZDINc/v/uQ\nveI1qUQ0+5HxZp7OydXrnvPsJog0y8YbAZBqKiyGv1dHEmA7KNjgkoSJdP/t\nMYrUwu0zhitktcV6Ibd7iHgy8V59DzfDWE2yk3TSlhziqCQP9SLW15oL1Mnb\nynqtWo/X7ZmuWq6aomhBt5VbBWcMepDpkzc9oTMHrC/gxUULy2y7t3xWo0EZ\nAsCpj48yJ5hPXTiVW80hEZANf8DmaTRxxH6wKmGzxybGjL5bmQ9hV3c/FUKA\nX4XZYVx0k40Z/VC3lr8BND0MwQIMxJ2h3mj1vyvDfqvr/2GHlJdL0PRH4f7d\nGR5rb9Zhsm+Qkak/GVGcVFqe1KlgwQh6aGI7ABurfjJc4fn9wt2+A/FxnsPl\nNITpRbgmD2uA77Mmo3r1yro4+zHybrm/4JUtCPaomcKxwQ4v3U8vj5KKdDlA\n5SQ/lbSEvjxEy0E7k//H65INMHBUpxoJSHZwI2SPfS2XgR20/NAiuiq89rPf\n9q/wTNpbHBAKDiEwsiCsc88EReqyv4jXxRRzXB+ucpZ06lJKytpR59axwP2c\nMltpJ3n5o2oesVpMqJG5101uiWDhqQtM7gGsUYpYm5yg8eseuEn+LMEv3jRG\n6g05\r\n=9DEG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/theme":"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/line-ripple_13.0.0-canary.adb9f1ad8.0_1627671866349_0.760403909623848","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/line-ripple","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa61c70c830ecf3fe284c6e76d25fa1e9bb63b3e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.cc5377458.0.tgz","fileCount":34,"integrity":"sha512-KMw0er3TlwCgmIhnMrNGFgqJKhq47MNSrmJq+SuVmiZgN+7WKuzcIm1mkjiyUpmmn2rS5IwkmU7VQjYRkQuayw==","signatures":[{"sig":"MEUCIGNhKu3rI6HAJCh7M5r592PX0BJejSBkl+epBr2KECtrAiEAl5n8WS7Ik0ryWOagT5O/tXz0FkIh06Zbu+AM4pya4gg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHAJCRA9TVsSAnZWagAA4zsP/RpZaEzJt4OR7MIKl2mB\nvDzotTuSIwc+n6sbJC+SQ0qEeN42RVIgdyodN103Jp8/FP4zB7GqilLan/nn\n3ZHYk03Lvt+/ps0Vo4KoAXPnmaFTFPjZN2Zf10DfWbdhw15FMJBeOBmb54Ej\nr0oXsChE7gncXWIEnsF9nCnNGk+IPsy7uVBzFnnLdmO+ESA731skThlKhAxq\nl8PZkCj408zxixOnal5FFf+Kh3x6zn6/uRPrENsaUVPadb9pgfH/ejLFzraB\no1JuEKKsm5ENmGAzFFDya+1gl57svzwMUBMQAbGqZAKvO2or1140t0H9r9M0\nNN4kcm0ZaqSOxFBROF/+aOVzz3OacNcKUInhRkJVbhwtaVWE12bTq8uZhCAb\n+7gxY6aLcLmoWypTEuDDe4l/nHD3YP9BbJb6X3s51k90NnzA9PlvOSRVQdEE\ntBImQLEO/vCDKXA3qCnmw6EqagAV3lvOp262IkPUJUYVK2iv2l4+YBsFSHQB\nNbIHUhaKqAiJeAwizX20J3AqNwqB7Cd1iIRQAdeYZZa3hSafWFJK2h3+7cqp\nGRjdGX63Dvodyxjhoyr4Mxme2Xkx03vIFu4XhptbozoVrOtIAsAC5ki/Vsgd\nNjeoPCodD2UNIsE6IcjZvU6w4nLiUi6J6u0MDjqXpNG3BrxUsrLb8u9mfE25\nLOPn\r\n=cUy6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.cc5377458.0","@material/theme":"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/line-ripple_13.0.0-canary.cc5377458.0_1627680777250_0.3728421334611758","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/line-ripple","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f4862f9f40e1cc3486a4bfa8b741c53101944aa0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.a395972cf.0.tgz","fileCount":34,"integrity":"sha512-AIHyDSni27FWq4TL5aWTIBZYNFbH0pEZJhwgtHzwGy4s55VNVXS1f23BdI6sUgRH1wdokFO5QdbRzK74CRlNJA==","signatures":[{"sig":"MEUCIQCABC4vqWcCyd1US7R1oVMYIiea8rHm9Mh4jjyVmi8BdwIgHK3xP31HjHJBtS+cx6zpeUemt2Fmf5zQYD+VJzarVUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbOuCRA9TVsSAnZWagAAGkgP/iV/DcUQjU658zKEHJeD\nV5gbuGPm6h21yjKTI11v0hpRZbUb2PeTofamHd3KgbNPWiGeuQpM/TAKE40T\nbo0o3msOMsMw/ZBLGELAI1hbH95aqCYvHc0xfNvIC0PKMjGJIIt7xW18Dfze\n4ZBZwu35ZqMDMvF/hiaAjKz8q1P0covnEak7ex6Ds0IVreYqV0QSFcx1YBrl\ns/x2G7x42XC9Lh6abl1haPM44rt176fPru206TEJcC14gT4InsQy8Jcd4YsA\nUrV1xI8Oe6hEpGg8Avnh2p4DjUctpqQxL1dCclvZX4RNMCZ3VrSA7Tccc6D7\nhbCoKRB00o6rSfi0AHBIRfyNSAmgufwcPgNoIeHlHEuwGKE28kQea+jqw5s1\nd78o2j75VasTVBtDB+LF41BDAZj9njpAF4EYFUwznxK0T3PpRI8ixrrFDp6j\nG18S67xG+NWOXbFABKf+ucLsDksVi8r0u5zV+hRTwrj2bSfLT4DrpaGy7V6k\nTYzO+oBL4YaCZ8+bpzeGEXBwTI2Pfxh0LyN2TQLF1suPaA9F7fsIJVyH0GG2\noLlag2+ZHBEsvcTMREngynrCGQ40Gu07y9XBkv70SVdE0Y0t+SVrJQ1qFif+\nOJqXj5yVIxV3xSZtAR32okZm5GgB/hxNW6NjsUAsoxAbCfBeBj9+8p4EhpuI\nHRq1\r\n=NBuN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.a395972cf.0","@material/theme":"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/line-ripple_13.0.0-canary.a395972cf.0_1628025774241_0.6483253424348425","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/line-ripple","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"52e04622ac7f6ca89e4829d01ba79381df7a479c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.7c96e6b98.0.tgz","fileCount":34,"integrity":"sha512-uSLB9TJYSGGVmySWQkvsjM+7N5Bek/6eY7F6jmgrxcWi6lWOEakKillYAu2DcZwjFq3ArWx85ZYHe1ELC347vQ==","signatures":[{"sig":"MEUCICK1Zmppi0m76CWHkftqPjiNsbljCqzVaZwgv8w5exFLAiEA111rSMyo2hEHKHvIiJBfLqILQakuk622xs3wk/Oe4dk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb+FCRA9TVsSAnZWagAA2YoP/30UqD2fCzyQ1zHfj14d\nZq4lCxk2GFl1I2OqaKzVDMRkgk64dZ/8BDEhvpcTkKx6LV0qgun9j8WhDuzf\nD2CnfvG5Woajj1ThyUTGUx4VcqlTng8yrqMQQ9QzSYYU5FJqoqPbf1JhVu0H\ndPQKMqx4575CGQzcmlGCzesfSQgyna/hkTbkgXr0ZDJ8Kn8PrtePiWjzhVA+\n3sE8DgPX90wH/1G4pGm114WLZ1cijbyeshZTGHXJyL/5jaFy/+bkXE7mb5s3\nImykeACFk727o+WUWPLC0qDo5AJrpLLUhb80ErOjCCNAAjb9U2wdkydo2WmW\n7zWdZn3cgM8TAAwV/3QskEmxiEGBX/76Pqyfo2sD4tTtn2Y6aME9HT7vkrB+\n6onDI3BgR68/2jNqS/S42jEXQbriKmPUlbupr7RkJ68dHhAeH6lG1csc5eoA\nFRDEZUgNJuUFrzd0UYyLpnQfrucZIx9dGeSIx2ECXP+ZmItlKmSF0yVtfOnJ\nWEOe72tnyZqo6IXJAl5ts5vnrdEaDpplcbXm61YxVwla12Ts5r3JMy7p7BIh\nqb0iyTfMXeVVnWVnZfpb0xlWaDEXOfSG+6eeivVwTKzHGruwgonp8J4xEwOz\nXkdqZp9UMbDX3D39vZ+nBGuf9FgmJZd249KN9WfoVy6ojBmt1oxl/OyFiq3Z\nKWt6\r\n=Sjd0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/theme":"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/line-ripple_13.0.0-canary.7c96e6b98.0_1628028805045_0.49286751400997275","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/line-ripple","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a613e8d65038baac40278bd0288b3b461614cf4a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":34,"integrity":"sha512-tNEoEcD/gM6cko21srsqBZYRYabD9DKRgHl8Khpbsmd3bZQspqATXY4fAVNG5RztXLt1N4USGX7wEYSfNMXOZw==","signatures":[{"sig":"MEUCIFkWTmn87ulRJSpyX4KKKUxLA6+Pjwjr/20CfanZPveQAiEAjjR7xQ7jNS17fyukf0nQf+e0QAEl8QpD2TSp4yvYZP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCynXCRA9TVsSAnZWagAAqKQQAJq/JQcHa6eYpuqBj+am\n65pepjL2ezoJ2Phm5/FdoaWSuB3bfy5jhamiVMKGIhoqyFX3dopRVip0iDjm\nxaCc7QdQDBsMOlgpvIPHGOpcBqZz8XU5vLYAn0J59FgtPR6m9iTEJh4llff8\nPHJWtlJVBWcEs94YpWIxLTNd2PcfKL49zGjJP2Fe7MaWb/ehQrQJQuvkkQzu\ny+AXO0RQ6GJbysYz9ObDsAULw/9Wtv23ddLOLOPHUX/7Nv1eyfSkqopErgqI\n49MZPF2in3IGNOiq0UeZkn0mcyrqNspguydyDOgSBtPwzRUULpLOYhFSW6Ep\n4tGmR14VKNdqjnu3Rl584B09fVi5IuGxc4uwOHIWiun+5ZdNEi0oFZ3fQH+O\ngPyEQnxOL/gGcs/kXxqUAQRjUa1/yt8ObDKGs5m7cYtJjWQcmtDJGNQbNyzF\nSv7CPOS0Z01sGcqihks5nh7SNYSFaDvbV2agdiMV+GMrhf8oBOhn7ptNoi8M\n9iY2IrMa3+NvUKecfw/rIsdn9Rv8+xUYisMyWZFfhPbobP/JHZKFiI12Zsw+\nCIjr6bfloiLW6EEhIrL8E+7vu8/H517ECh7w0wh00CLT77OqY4QQSMLSazpZ\nrGpX4WT8P3TBy/YsLNa6rbBdYwwySNIScW3FwCJsodYgrS9hgCWbCZpovFHP\n5YVC\r\n=gJGb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/theme":"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/line-ripple_13.0.0-canary.a80c8b2c2.0_1628121559599_0.6396688682699727","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/line-ripple","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"55c2fa0d3d6e43f391b821a05cda054e981271b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.3dd611091.0.tgz","fileCount":34,"integrity":"sha512-pu06B9DUugesGQTJfqRsi8KaAtQE/bOsDCH16U+D1DROWw0I4YR4TpcK58ICcZBK6U6H58NOyapW0Zogjc6aTg==","signatures":[{"sig":"MEUCIFN85j5yD9c/RrekqWljwZodp5GMUrPEROG6pUHwtzhMAiEAtmbb+jynU6lFAorBsYiT3IWm/n1aKltBhhmpTu0cbhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2FJCRA9TVsSAnZWagAAaaEP/1zb27+cwzq9H+JqBpVh\nNrHeSbnDbbcsMle7akTKiuhPRDweQ3OKSMUm7D0OmD2N3elsYsGGN8wXnWCF\nsOGFa4DX3kdoNbfs28oZggMi9hLlkGRlKHqnYimmE1fMjcU/YqaNo7Tl23Z7\nfZpOgSHshUydJXvzfrYZpK+Ca+OSe5d2VOamiwG/rvpckAT4C2go4B2SX0/3\nPm6BQdNpXycocmuv53XezhcNFKp55ow3/qAmhTedNFrmTx5hdhF2Jx4SZ6fo\niRovT6W8nSJXKq2D0cUnSagozvZLN5eiji+U1W013Lqktq4FIDN/clzTj7M0\nuCB6bzKxx6i5BeRMgij4vkaZeU+VxXAI79DxpRXq8FwdKJtT/W0YrKIlOagp\n4tcc/6TOIKydTiiC2aLLNn3BvCCh+3WVUPIA6e6HQ2eP9zZ4PETe7edILaFH\nNi4JDdsiCHNpinjW/Ato0jQlyaa9oSgVwRBoQKot/R7bj73lWFFtzx2GWcDU\nN07OYmMCaXS9sjvlQ7tfLH1R/0fvvDnTQrz5gerPB5atqnHuKjCtlU6IR41U\nBlLxOMpE48UKo/0f21KpoG0vVKLWvDQmzqbyfLkltpomNghHlrpMSIg5VRa/\n5o6vD8GXHBDiELnErbzGs5w5B4enhVuCux832wNiv+HzMMRTwy3+72k2A2DK\nJLFM\r\n=vkmx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3dd611091.0","@material/theme":"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/line-ripple_13.0.0-canary.3dd611091.0_1628135753107_0.8137845349457895","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/line-ripple","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"249a07e04fff25d2bb5ee6a3ec115c57ad791a41","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.5dee37ff6.0.tgz","fileCount":34,"integrity":"sha512-i7LhQ6CXbKUibjSnneqnJX89ZycPf90Z/QQZpxgKhX4EKjzP12KBkJGy2U1sXiccz7z5A9QuyAR0cwVBGa7PZQ==","signatures":[{"sig":"MEYCIQCJiL+dhi7Z1l8QYBYRRvvQUsXIbZuDAc1Q3gFPumYKiwIhALAYISTJ0pEmwL6FRJFwx/di8qHSxbODmmDwyuOaY3pw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCLeCRA9TVsSAnZWagAAirEP/iAdyrcP3TsxmLdRC/T/\nNC0AIxqGRjMh2y3yPS9MGQEdII335ky6RHU0/HCbAAP6Zeom8HpizRL8rsIx\nlaDfqVmWMnSjX7LHzxBC5ChmYeC315hUBu9RHMqwUlSeP4dgO8132ih261Pp\npu8b7ysmouxH+HoV0mEzOtU8fdRfpSvSwtAmqpM3P7smAxfOPQIp3ochW8Mu\nq/tyrqztloh5NtHA12SQcP+OkpBOQJmwPHHyBe5kSUL4fbh7F/xHynbm4uDr\nVYQWAGo3dXzt8WVN4wsup+z/U8vDhIc9NktKjcZodxJu+cdydf8S6Ok3u+5h\nUfJ402Fi+fNy6d8Op+SjPLGmnTlGOlixLBJU5rTeVyZEDagmpxxgFLMbt/wA\nSXoJ6Ja/Pfn/JcSz6QjbDanVeQV2s4Ed00b0jDaPoqqoeBmpPE3ZFfT+PUJQ\nz6GYcuIqYcLydNeXApyndNt0Br0/qh/k0G4Bf/VgJBuhvKEeUYBXmPu+wb70\nvthEuK086RWImUrSU9MGSnQz3FEQsxnw8kP95Coa/WrIeSDtQZUnOnM5k4U9\nBh+Zhtaz+1ve1N2mQXeVcdcIODgIyjtkmZtR8ZeCejrTjgI30YIgXWYHI4KI\nsgTJt6uz5vzbxUy+Y9+3XIIrfNHua2QKZFv4PtJs/WxM47wybuTjGmC/oGyN\nK1Z4\r\n=vcjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/theme":"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/line-ripple_13.0.0-canary.5dee37ff6.0_1628185309968_0.3094082863565961","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"871a17ce2dde470cbc306a024e3ae2efcf82c123","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.bf405d22a.0.tgz","fileCount":34,"integrity":"sha512-GqvlGTriOs3wRxmlpoLrt+LQWxNVzER9fyb54nX1AVZ7VginDbZF3FjGB0Ygeoh6jTXZO9yPAlIbayL5yAS5kA==","signatures":[{"sig":"MEUCIEz3azSIgZVs+N/L08Iq29lhM0QWFhE3xVl5M2KCJC41AiEA5V5IM2ncXL3NaULhtTS6ZnzYIeoLVKhOrdeDe6it1WQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEdjCRA9TVsSAnZWagAAfVAQAIzYAGObMGVbRbvtFnX5\nIrJvYcXo2Z2RCwn4rfxkeR+ivC3EyK3QuHVC88CNpY5b7qSjexqlYIga0H3X\n9jvmvL9hfztIJJE1hThUdwQJjS7da12hiOTrir0SAvV7Y+bT+e1Lq3cGIEPV\n3eS62JCrmhVC29ZmtJ4o4pr0xaimWQdJ/u+OpZC5pq1loHS+rsjmvlYIQJM1\nXEAMTKebRPmXy9Grokyix3BcMcUQdS9zZbbqqfrCpajqdnJbLfUXn8sjcPa7\nrBgF7tLzlxQKuUtN94Bm5ZQX65MHEv9NAYnrs3pAua+lnDTdYkCTemETApul\n4Ko90zd4dPYufG9nJkFcwEyh06SWWECeg9HmP/YqSZdt9itvV1701X40H/Kr\n0GlgOyWwQebnEYE42ySxWvVBFw17zpySGV2yv7axmBU394RuEw7oylSY1quR\nkvYNh1v4OsiQgY+1QEiJJ2oWfcKY9bUSQw8fDFMcYMBgd2sjQFb/di321MfB\n+/Q1CNfNRNQ+h2iXHm/QrZYgnv9vKlX0VugOPK/DhIIsRj0HadZRRhReha9C\n7qDL+WjxHXGMwUT2kKngwpeG0RNkIpqTISl8hO/J8ZlSVCl1+Ema5RIHM8B6\nPCVvH/Y3raFLI6T+tEgFAdOB5TuvxnKU1OoSfEZYT1K2roEX6xjEhi8XsuA4\nkcbd\r\n=lb0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","types":"dist/mdc.lineRipple.d.ts","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/theme":"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/line-ripple_13.0.0-canary.bf405d22a.0_1628194658947_0.21233347276518222","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/line-ripple","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ef49e83e28bc947ebb5c97e2bf6587e4fbc0b75","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.b47dd37a6.0.tgz","fileCount":33,"integrity":"sha512-J+3SpeBYedH0ruKdaQyK87/mZmmn3ZMMPFjIvMJE4BR4LBmomRKdScixjnHxjy2hVaUuL9yj0/Sn2EHYB5lKPQ==","signatures":[{"sig":"MEQCIEN/+e9olf1igq2l/zU3zakV5/ctCzERPSNwfTEWNhYrAiAJnuaxSaDp/iBTZIGJLh82L+esqc66bjOQE/8OTjvz9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE7YCRA9TVsSAnZWagAAmbcQAI1QUr/30dAUdV6FDP4O\nihVg3yXc8dLtO7sh/yYIpc6k3CdZVLUBHiZjNypKCbmKKt+E+Dr7N0YdU+zO\njOw9z0DtDmgxPlrlt3bT8tszRm5g5w6BvDhSF/eUk2XIVsqPMNki30upup4k\n6OsUOJ60RGBFiQWlnR4AVB8Q5Q1E4E0SIJp2D6AXtcDsGeszR68dTmXdUrsg\nmScp1WxGDEhbd88hVm/+yGjisLm+jcOKnEd6guongXovY4amaOsv8Ce0N4kQ\n2C62CZ7hJqKdCV0YFY2xypwVQ/fxVR7fI8IpMuZ2pXWLwyu8frXVhPtoycAP\n3XoVg7GBF3M435VEtgZlXqXihQQUFqxT/BmgsaPYcKYthPNwjgWkcOWxDUi9\nTRWsnP91Vq0RzVjvRruOq4aw5x4gDoAVetr9sORNEvCQLGdIvm0COale7g9F\nC6gsKu7cJNQXbKzdmiahcLeleZss43D4vyTJHGcrXaC5jowS2jDhWwieZtju\nUUH/0s6SUbdpoYZCIHE+UMy2g0slwebGpZ9w7Ao5SdWqh+6A0ZXP7bb3JybW\nL7BIVQqjtdT9QXN4GEn3GFI28gTjcxtCdzZjwOP5VnWuriDxIs5Wkj0AvM59\nhuDo8Wv/vY0GBbANQmBKz0UytuqQaz4Q1RCVn7sCRNRebOlQyX2leokp+osP\ngxBF\r\n=/Sic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/theme":"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/line-ripple_13.0.0-canary.b47dd37a6.0_1628196568427_0.606661266868781","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/line-ripple","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1136c0dca957d1539e940ad8f2c7125f797caea5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.6c82b965b.0.tgz","fileCount":33,"integrity":"sha512-nh0WAPfWJKL7t9tQ87nUOJdKUttDXND2zJfcsabFh7c38Qkf++V8poxFAD5Y3B3BtEVo2+ntvmDGvTTu/r9nvg==","signatures":[{"sig":"MEUCIDaMl97ynaDsLjaWT8x09gxD/oghswgH+oUgPpdpkepuAiEAqwVDhOYBAeOcy5s1/8QIPy7P5sceDM6kI28Z7SSMnYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDV/iCRA9TVsSAnZWagAAwRUP/3zOtGTpa2+r+fLr/eSk\nDOOHV9/Kv+BUXOwcHFBwDVsZeA4RJCwgmZZSdb15ihHtFr260ly94R3/GZhQ\nVbKlG5+0ziaqTTa0lX/mp2dVOWSI6/OKdjEj8KUGywGkd8z996TRL28VZiPw\nFtasqS28XP8JAGkQc2ih0XkIWMhDzRNACEWmgIeMCsdWoJ8msFf9eKGTpPjA\nyNQffT4YAtmo8KYl31orFfqlR3YZkprFSoMxXTpiTjX1R+x9VxHFtkFW5Zth\nPoVybFPuOdDwe3VYAQnfOEv00NpvUd/CO695dFqLhXyzxZss9CFcjq5PFY3G\nSN07AMgenQScnEr8a4aKIE4O0sKMMgGWalt0l01i+8kdqb3LeiSQI18/wEzi\n8W6HVGh/C3EMV87ARVbyl8GLSDdJeOMUi+2XePW6H6sBSO6v+PiiuaezW7dB\ncBZXJuu9idIs/C6iwFQlEwA55lrqpKSlXZuLvfEb3gs5rbYWNhzL1FintXPA\nUdzNz9OuYnRw3OeCuCtdUNeHJeKT5bGyj0CcmSt1f3Pc4ubtHIVbBqh4vOxy\nQ6kJnhyN1nrlvuukHNgTOXEmtFpKvl30PrxwN9hM0H3v8iRtyUfU/gqb5BHF\nO44M83W41wMolxK5t7f9R3vd0xNVraT1E9FhFhooXHtUXwj0WTVyc6aUr3qE\nndeg\r\n=1a6K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/theme":"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/line-ripple_13.0.0-canary.6c82b965b.0_1628266466243_0.27177140456172033","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/line-ripple","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2bcf3269500cc39c6c0cf005919e84ae40eba7c1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.4ca11fe76.0.tgz","fileCount":33,"integrity":"sha512-DA6dj4QvhUpeSFQn29YuuGRL7HqmD9/1sQnzJsEVAxld/+xdQ7FiEt9/ejWYFrVr2UTQ1lB+QKsAQqs0cddXTw==","signatures":[{"sig":"MEQCIB3HwpH3st+W0iGhk6MzeuyCxcfj8y1Nd7Ia1CkxPV1XAiBHcOJB47tul5DGFcShwUoRkPfqCcwWQyiq/QWMivQD3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWwwCRA9TVsSAnZWagAAkOYP/AjImcxMLsp6A+EMQuoS\nAGhRXUqlq6ZtouNaeN241Gbw0TMS7NdcWK7zgg2g7BDYppl+VyScp+gGrGFv\nAmvNGBzGjY73sL1UmKmGp+KEHsekcFiFLvQL13MvhyG4QQk9failujC2BN+p\nLZmYWlIp57JqtkF7++FEvLQ4iGyNYs+02ca0lB+S6E5ZIk/CVpXKALMzk0u8\ncGdxDkBd35rdvryyp7jbyf0EIWfevh7g0/jlmB+ItytAy1fSsQiVH+2VECs2\ntDpKNrseuIDORTaTnouLLYoiiKE0R814aFDnNC7bEG5jObQam8Xd2LflzNhL\nx2uVo6c86/CKNc12Z2CzQJAP2WvYNdtyNqHOvKNDPyXhrgJ5EHOQ+X/CV442\ny92BN+4FMV6yNTUkuJscfDT2aNiucdzL4dP3ThnGHWtLXW3QvDRx7egTE+/1\nNroMew2Ew4QzpejPlJUeD8PlGod+4Blmy4FvwDjjQkudKS01RRH2W4Q5NOZQ\nfXTDc3mqDcAXOTwll4sPJuFfAnSVng7xdIKQQOrLwDZPqnrZ/ub3JG5e0S5t\nnXvzLzQP6qrlV2Rtficml2MsrzFcdtzBn4HSgK3Zw3ds4b5Yh4oiELVVxUQU\nXn3Jrz0UmlThiY3G3KK3O1TMtHI6JppTjUgKgZZPTaraLRY1wN46KpDUxkF6\nGtTI\r\n=TQ1r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/theme":"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/line-ripple_13.0.0-canary.4ca11fe76.0_1628269616029_0.6753483690900217","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/line-ripple","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"af522e21a8dc027016db641d745899729dc70502","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.510cf90f2.0.tgz","fileCount":33,"integrity":"sha512-jSjEzAytvp8FxGewMzM+StERYq3lbV8ovyZH3UbkRWIOLSPew5K2rQhVFNwfaoY6KFWoaeshHzZubkuxfFfoPQ==","signatures":[{"sig":"MEUCIGP3IDficmbHc/Ar6GWPDxp4vo06c6ANXwvIMZoP2J3dAiEAi9iiKqKEHJ+TMRfz5OunGshFpRgkspvCp+tpMZCzNwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWMDCRA9TVsSAnZWagAAWmsP/20Tu617GMhVNmjDy8Fu\nU8ekBnsfkJB0kGtAXMlY6dawcr/wjKi3sunNcObp4C686Ulq3MoYpFTKiBsT\nd349FEElrZmGibMuAhUl58IrD3N/2wDdSqmQgYm6lSBP4zBjNCyNG+ytiXli\nriBAOtIvWZ3eq9e3K4cCldhve7U5iKex8cV48wVUAsBa9ljralFCz5ReLkeT\ndRg0LNWR25Sr3yDaivGanXFpHef13bDIkqWq/47V9tSKp+uaXh9o8J6G+W+m\nCFVUjLqywryqnhTiUehT+G9f5q1VDkVn1uHpR1qEbUsmBxKNGbWfi71FYCWf\negrP4dQUR1ECFfOTUztDdQgdgKLyUZ4hKt1w9PQEGcj1/RZCTWorY45Fdv/o\nfGMiodR5BKBaWw8sZ7eD5GNx6vZHOzeHp3kHXkUWIU9LDDVmlAsdwmulpC8I\nexv1Bs6/xD401YVI9OEj10gycW6R69jIsYm/r/l+DsmHrvuhrbZW5aIhKUXu\nKHMqQzrcUvDQkAchYTWTcG2dlrguAADJun/pcHpNAjaBj7fhuM7MhK3yBOlJ\nBq8hCZ89Gy/iNly75c9jbGuZbucp4jww+AKLXhijnJ/y6jTFHMJviuRlbIFh\nEpPGXhm1glpWzHTVsi9L9yEOPn3xqs7M9iNvLsmP2exn8b/1gBAH4Vp5XBKw\nhUAK\r\n=zw4l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/theme":"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/line-ripple_13.0.0-canary.510cf90f2.0_1628529411318_0.8429310065905669","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/line-ripple","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"31ce7d3cee83bfe4d4c33192851eb90373de0437","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.17580ebf7.0.tgz","fileCount":33,"integrity":"sha512-5mF/0ku290kr/1+Gbe89/Ykm10/wnFptAAitOm/NH5eQgqg7jO8pDS/dZMPqb70CV2LAk5JEeQYi2NCDBlFFAg==","signatures":[{"sig":"MEUCIQDopNxsZbu1BgwX+TMxLtET2Rcg2oH9lZtbzNNt+EJD4wIgMbHGgz5oWg+1HgY2xv7vEj6FVOX1U+Nuid5KgtMP9QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXEWCRA9TVsSAnZWagAA0+sP/2ZalDDzMMjhL4zwbaEM\nTjhp8FSb1dd9SUJAL4A5D93DIoQUZiOepaEKwP44HXSGLsqM6oJb5iCsMtfH\nXPXyPEBRMGpyNMFuwgwNTBPwUWMw71zstpWkztV4lsaAnRd4BH4tndm3HGvU\nJ6IRpGtpV+rqOgwy2JvCSrLOJdW+DuhmdaqkzyOyJRAf8FFSDEGt4JYmrPDA\njY9gUUo8jMbnPJrINXlY6AuHjhOxp17TrqiB3jr1kT8ykbgGE6PtbegPzWYh\n2cWFwjPnVa69RhtPH2trVoFSwBB32s1omFaaKPn+/uyr/wDpzHQjm0wH9gxv\nnk51hu6UZiv9O4gresycc/X2PzFDa3K+1NufHkdK0p/KYVmflOOAAgakptAR\nj6OcWJ8Jwq5d0xeOC5lM9EA+vnMbx4IgXsU1nnPZwIsDesCMgIXtuhvnLiQC\ndqlzWnow1S/2Xb/6y4gDfE4QZ3F59viUsXGRiXrGce8XBWTqfGc26ZuKKeEh\n2wzgd8h0ignF/iwV9WIG3iuTug+1sBl7Nt7eSE/E87r1kjLqnwhvGuPfVmGB\nT8QBoSlVwe+NdChFhTB2yYmi+UVuhCnHA3oWg1URUbwZXPA2j78LGKHynE0o\nVie36+PeZl1ioJj+rC1BsalFClzKGDJNXTR0wUi8SWqq3zvTtFgaq0txtQbF\nS+NH\r\n=l/ye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/theme":"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/line-ripple_13.0.0-canary.17580ebf7.0_1628533014148_0.5341604861512865","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/line-ripple","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d898d7bc4bf1b708d6f74e6f1ba0cd7f21f217d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.7249a3060.0.tgz","fileCount":33,"integrity":"sha512-BWm3+wRl+vnRdP3xDUroU8EB4wRDW1mLtcNQa4UDk/SMd5Tk14uccPDubKxImOH3QKJFK0e04eIPbGwE6/q/iA==","signatures":[{"sig":"MEYCIQDJoePnpoPx3aX2P2Y847yjtb9wTTsYvKgxi28GnO9uQwIhAP/vkgvpKjM/3eS4SQDQRJLoOUGwzLn3fo7eAMIBkmQH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXIRCRA9TVsSAnZWagAA72oQAJcqMg7xFmGOJryHZOI4\nepvJ+XOf29v3FxF+jBN4kv0keCPIGzLKk1UWk/v/zD00xyk1wcbPDsvmQU6y\ntzSFQsbhYUacz/R+tMQH06cOHfFAwDv3HjOAHyii1xZlALmaOnQLkQtDLshe\ntOyJVsT0XTEErvHHPyBjBbI1qCAgHGeNS/kys/TafUAIBRmn9EEVJpSTbyaf\nvLPjU41MC6bNkpFi3F2fANTLZSMersbmBtD6zrTh8jtywFvKfgJ955YL/qn7\nIVMTLGt5cC1zSAqVmTKIOVbwkOH3lo6uVFZUQj/+7tfAPAjrRxhRM6IEODYg\nUkxCqDgTUaw8g+EP/Ip6VTeuYTd25BNSdv6EJfE4TgLYw58teX1v8zhTpP7v\nOUv9BHkOHBf0g61rmj6ys4Gzj0upFHL06ATSvuT01tGVbD1JCfN3lZfPwtsu\nDq7qbrCDlQ6BeFObwwnCCXa5d7VTBjVUVfXec2b3QhJY/IzywV5gaX/cIaYo\nCupXGEmzS8jRJFQxSkSJoHBkS1nC4jCVHk27y5TiJ1+L/Z9VdAXxloc96oIg\n1KZItbBb71zNdRh8TA1ss2e4GWfTvdS25no4D1p0ScaDUEbD6mi4d7yL70v9\n5D7AlQNuuSakJOhthTontSe6iyY0VmrOM7WbALnynGaVwYOj+8IMBxn1ACvr\ny92u\r\n=eto7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7249a3060.0","@material/theme":"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/line-ripple_13.0.0-canary.7249a3060.0_1628533264885_0.10894663656170245","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/line-ripple","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ba2da184afd58956d6f70dfa185c910bee73c13d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.4c405863b.0.tgz","fileCount":33,"integrity":"sha512-7fOG0FT24iGptuFsaxSBzIEbwf5kbI//VugwkzEKECtyQanIWNfXgm3Nk3kT3ngzfGXzwGc8uPNutgwOicE6Tg==","signatures":[{"sig":"MEUCIQDR87lFSz4BYfF+140zeGroSke8N8+2GsZiMchwDGiJQgIgQnDdEqZwuhzT6cxXHTNrE8Spq6MM4SjCmZ8a4c3EGr0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEroECRA9TVsSAnZWagAAVbwP/R50Pw4UKgxQRa3w4Tga\na0ZmzCEXN/drSUXUryCqiVnehcrXvwwH+QrgCy4Ru1AV6eF6AnNb1ppPwZwy\nw2Q3r20bCAkyDLsNVUGi93FyYrD/Lat8qaAImHgMcwkfrYGqL9PxyKJUqkE0\ni8P+tWrBuvecIYJ8bjNSfm+VcBeReFbpSyE1jFouYpM9YYB2ClL42CemnxIl\nrNNuKLfWpYz3bP4zOz2QIAfF4pCQ4qHgPqAh8phdfz7tV7EcSM/pcnD1jpsf\nryuU6+v11C7GRRWP7QujLkzAbKJsPqgzdHRLUm3zVL9+Cq5zaYZ7s43AYfdH\nRO7XLqGRM5QvzN6eME8aQ2rltAqwQgtaceF7jjG4L6JWrRP1ev3o+B7sg3E3\nhcN90M36MIIYs70B/Cf2Q4jBI05mR1mxbp4sSkjBR8ACqk58QpbljcSQReZT\nnTUuPdW8lc8jO1mkEVC/kd90Iog3tfDK3QU2T38kDDIUEzRNISnkMkeVHFY0\nRh6kPuDYVO+3kfR9UuoIAlwvXg9drW6nEKbtij7dvOWl6SA6XYZdayZEIGy8\nZKKkLPXP8mZrrfg5hqmgv0igAGabDo7cM2BbKLEMjGL/UVFBVs8iB5r7SK6i\nxRrCwb4DNDPAD0tZ9lf/EPSSzyC32M8naU5jUmz6LAWIlAdoWeCozrAoserZ\nU8Y/\r\n=Ptzm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.4c405863b.0","@material/theme":"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/line-ripple_13.0.0-canary.4c405863b.0_1628617220743_0.6477557337085385","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b8f32a9a8a104f25d0646363e540b56b2fe6fd0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.f4241a42a.0.tgz","fileCount":33,"integrity":"sha512-JodUyCvqomTB9qGKu3RXFlD13AeIRfggV0vPA1aONNhT87flxCfaondEJI5ehvW/uUYINKkfHTX0OeEIyUDsjw==","signatures":[{"sig":"MEUCIQD4eohr4lac2076p4z9Rzlj85yrnNnDn9hYcCKPh+5b/AIgSvFqhfEVR9g9RZEnN0+VyfLOC00D2XX4OB93lpoJvUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAHWCRA9TVsSAnZWagAASckP/RSICxJHttUijWtUcbec\nwMXgmMN6szSiMXfPW4QkyHGKMBX8tBGnWAPRg9r6VWDopyT0/PxijB3tvY4x\nfunbLzv7TvABoJA6wwGLlcXKPIE4kAPTJpCYmppO/6FyQx3n2J/gNrSNCbNu\nLVVMhQLjbr5sJMXfo7vSp2AiS68+qSXRFKyP6EncFcupxPTjsT+bZ2cADYAu\nX2dWXAmn3+sU1oLnQFtAjRT8yDTv06nuahDXYz6qLVpIkFTaFAtRugkSi/eA\nGKMT+HIXkU90We13IQIR25quCiwxXD9GUNp54tj+VbpaBAmjhd1dSyw65oUU\n7LTZYeOcUOc1dTkyUUOXP+1m//ccbI/g4P2baHpeNk9rvw3mVraDepAJEDp1\nNc/z/xh/Vj29qkR7jkViEiX7URo32FD29ceVZzClJyZtBqSILC/Um+C4Ov5H\nRwnXMkfohu2jF9fyZdCOnxIZECrkVCFdnrGmqx+A+V7v+ULHCAUwl2LzMDp2\nRSML0gXiyS9mGgTyAkLKjWO9llrtGF5LM6Z1DeW+/xBKSkSnk4/uQD4aiekm\nhUm9tpXtJFcCHVE4rAbQ7YN8eAnleuOKmVioSxY4s+EgZlauZFLKRnYeVWxa\nx2IGcEJuxS+zHQto4c9oBtj6EZsI6Qj5fz8lH1LmHmd4sEb+3ELXbMBQJnmp\nh+2Z\r\n=5VTw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/theme":"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/line-ripple_13.0.0-canary.f4241a42a.0_1628701142344_0.07575396040196769","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/line-ripple","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4826344c527810fb6c17d677c9cc1f2a063dcb58","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":33,"integrity":"sha512-2LARgdU0scsm+p5LElj2inadurvLWgJ00DUo9wJVYHW+ntIPwND1xsOO7a1LZ4hgdzk0VOWpNQh0rzYCSfYifw==","signatures":[{"sig":"MEYCIQCixP2imhqUCpXKsO/hBdu3Q99bxVUJssUdv9xXrUInQAIhANETFIH82xzsaC1hQ//XXrf09dsvM103v+tsF5Hwbd8u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFED2CRA9TVsSAnZWagAA4LkP/0WSZYBP9ArmlD1xsnBW\nO3i3RIg5YjWfeVe4VOIWQeMKLvLoAwY2Cd+Oq8hjxcHGx+ZDQTdtKjeufxXH\nf99Gb5NZdwSmQcuBx05w295wL/nIWAmCqDbWROlIDj+1cbIKUy2pIFFaPO4h\nNUeK6zcMXwcy4TqBVcATy052yhx37GdWqwNnQQg7y+oHGpZz5Y8H4kQi1z2x\ncKh+seB439o7GhlH8gzQLxWskX7/8szIa+TfLv45WDrgtPH8869ah7PU33mc\npfkU91KpaCUY1UgXqfpF3qACxTZ7hDcF6QIXmZXmwUSccvd7BPGOjsvN2ZxO\nEHSJXp9qqpHIRM2D/wC9iTwmX0h6aldlkTX47oNdIZ2jb4AS71vY7cL7XW8t\nBrotNKJV2AQTpPyBhPcMhzwHczUBw+dVss+yIuHo51Svs25OZe+ErJdzFTNJ\n6SpHXY2omiPdyidePD53SiD9NjLfTpqNSUCcI/D61RrtsXPJ/t9CgmCWXFJu\ncFp/8+5siEM0NmbWfkyXZxbRiy6hffQsgZurpf5gBLSbz1xLXcPzZfRpddy1\nKG6DyUS/4+oOTZqfWl9JPZa0TBiiTwlww6ONXrOxdSVaBTJmoI+G8OX4fJm0\nWaxlOQZ3asskVLNqODzp1UutSKmTKTtg31EwRzCRj9GScdoAla53SaCKNJGz\nVGEw\r\n=Hw2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/theme":"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/line-ripple_13.0.0-canary.0ad12ed3c.0_1628717301996_0.3609155566638844","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/line-ripple","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eac936bd9571fcd29303daa6d7a5d30f67165889","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.077dcfcfe.0.tgz","fileCount":33,"integrity":"sha512-zqoL/QjpaYc+JBz56G/mArIqEp/cpINNpCQDC/nFoDcMqa6HbHb/Dx1rEr3nJ773HM3dszJv7zrXa0wveQxpmw==","signatures":[{"sig":"MEQCIBM+Oot0ehGKo7SVu88h6T1AYNwy7qwmr1hI0XMCMKuzAiAyj+LI8iup3DlFCq7U1zlGlFwRVST3fH6zOXCpFVF30w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWBsCRA9TVsSAnZWagAALRsP/2EWsju3gFKtx10AKgie\nEiVHMrKOWa4nuxphSCj6Jo/ITSJfHiq7eGCzPIjXSOuB2YnSWWj6xl49eFzs\ngOvBEcvCLzbNq+rWdT95cw5LDBaIhzH5jDBdZTr1kmuQdUlfQwi2GpSFBUQ4\nmQXsCFd3JeDGmZwJEV9Vy+u+m3DgCHrpMIUi5XGqdlNvA5ped5ld+csfDYYN\nPt3dYQ8Xp9rMBRZpXQVCun01iqwsUNMgFwRj+34dSX01KhG2MMUyjfqqacwS\n7X61PmvmC8yah06bp74tOUrl9tzRWvrsipY2eUPLeh8vCzoXaOwBy/xof/RU\nXkgHrF1m8bavLyF84GNPkT7/N/eKoo47Yxs2P7HfsNkoCbOYqGW1y8cxfcS3\n1bNffecVZYU43ZpLE0M3WvpKaeB/axZ7O0js7dCv1ba5udqylRsuKi6KjpOK\ntJDggVEz6hsN9slyCiiQIOUvcjao2P95QTW83D7jJi6ff1EATQ6Vl8JXSL1I\nSLhORJaGpirGSb8KR24Ffjnb8ut5YekEchnCCUVhDVy1+CrpHfybqhm1T0NA\n+eRtv3XxhnR32lRXTCVwB+5ltF8FE6l/259h6xAdtAP0Aynah44Y76X5ruUu\n0cMiSM3UG2kmZBFQ7ONAlxbWnAEOUQrtBAfthlEK634FOoqU+0cRx2j7SQSe\nonSt\r\n=Arm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/theme":"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/line-ripple_13.0.0-canary.077dcfcfe.0_1628790891878_0.06680234659941497","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"db2f60f42165204d781cc250864aafde66396e63","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e3346766f.0.tgz","fileCount":33,"integrity":"sha512-cuekp9Uq525Cf2lGSSrUO6fBBpFcBung1z/B18p6fZg43tpcgEpHUIDh9KOQgNH9SyawiQEnKaBXXmnVJauF6Q==","signatures":[{"sig":"MEUCID6FVrAXv4W6xlcPf3dbAufSRYwh0OS69IXx6eFtY8iaAiEA5sDIAmZ0lUoIg6uCepbVKSrmquw9hExmP7F//nr9TBo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsuxCRA9TVsSAnZWagAANmMP/1OM6hLQabqVlCcdAhgU\n28iXBZdOyVMp0Kk4QD/VkHlwe1O98V6HQrYCJvD8qrDpia3dRIL8XA/7u+Ks\nBQyOsH2j9Tatr3Icx0DKaLsZQAvBoCaaPTBaefXI1NLr69qjf/hKKVELruki\npESrdyMpkujnaDqwQT7FzzJI3Wf97JZdOgO1FJzj11j8YEVQIC1fwyeCkQS8\ndCXWP7gZpCgI1WC4WpHuMnCAM/IP6NoFUamYZGNJquIfHdV29F+5JpSBMKYW\nHc0+Dr8K2feWNVHZZkvaJudjRiIpDggmMiGj/RVqkQ0NF69WCey+pAt2dFVv\nmq/PuB5EbUzP4kFuDivzOZwiCp+bc4nMPXyEUXCtGfH7ZEw8r+jMO5X7i7KQ\nMLQ70ylPS7i4jouuc7ucPpQQv6MkN2hCxgJwYvqqdWA4JgRcnhR5sRMe8YBo\nWNZTCHvmePPxPym0Y/o05zAoAnMtPy0/JJGss6PqVa1tPXHX3e9Ky78o1M0e\nmK95PNFWcAkfohtUprvUBdtiaJWBiri1f4gLtmA1vsrvDUURRMBQgfT09UEd\n+w6/N00rsAnpeIPE7/ZRVuDzhX++MGB9B+kpf1apCHWSsldn56PrEpUQL2Tk\nys4Wj4I6i+YeC54i9AERRxYUNNl4gDFH8tQjH3/r8aG+jZVwM0W0wKwuPX8d\nEmKq\r\n=JVP3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e3346766f.0","@material/theme":"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/line-ripple_13.0.0-canary.e3346766f.0_1628883889709_0.3553962323078823","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/line-ripple","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"29728c62dbd9f6685cf3da759e3b9ae4a4769ec3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.2fb068fb0.0.tgz","fileCount":33,"integrity":"sha512-kBW9xP8/yItfFAbSxfCEqtoHNgsbm5QVuWDSI/NYRnnA2SovHkREhYebxT7zxh80oyUJdeThDlARjAqNO8NnFg==","signatures":[{"sig":"MEQCIE23usyVupH+NOF/sPJTLBXYTGp6yazatcGrvojQX+QAAiBi0XhVWRtJuPpBPgvYVbewrS2Dz3i84iRUVZNfRVBdTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFsx0CRA9TVsSAnZWagAAF3wP/RdverJl5harh68kqQX1\n/PhPwt8ottu0Pv6Pj64ahwLrRLyBW1a+/Nf+NETLpE4OuWYcwAO3uMMLZLxv\n4vAhwOU0/bLijMaC0fTTlITURfMInA97OOpBT0OvLbP8RDBxtJ/pQFKmfPU8\n+DQSoV/rF6jMRqAyxkECHOipzGgrpMngLH5AgORJWW6a7HCm3g6STrnONHFa\np3lco4F7oBgVC9h99KdE3B4VzTMLQO22cavCk8iWagvDt3wqOCvwifSQAs3g\nm11o98B8dm498j7KQ5DP5roc1Yl21MPjANG5V1rFF8qVnvDrc3oB/esGWeIB\nTJMlKiuHXJa7yfdc4W5K276zVt9GBS7zwNKZzTK5r59b3sNfecBMnSkbBhLl\njGF2tfqHVlhovnrTD5VjW83cqCPWgfsvWFwwcsdoa3qkf+YFsnNyzJB0SEAj\nSssx5G09KDXSIPnyo8Zopoz18574Cl74MvY+3bu17P6xOMAJz/pRk0ypDwIW\nTnExlKILdcrVM9TSTYqvmM01FZ+lU83Ij8T1Chq3/8ONTeovqy/9RX6HQMQm\nVKnpgWsUxicStSVuYOqbU5ioPjvOF4GC4jpsZNBNPWxuk7G1XSgD7k2HkFgi\nKTw2A9BORKmRrfox7X0DB6A9+LoMzbHcPKJyKyuuZ0+q1XxX6zzcKD9kF8UD\na1fY\r\n=gGnm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/theme":"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/line-ripple_13.0.0-canary.2fb068fb0.0_1628884084256_0.9658785807398389","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/line-ripple","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"acc314c1d76adfffafdc9de572a940a8a3f4d847","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.fb76c5069.0.tgz","fileCount":33,"integrity":"sha512-00FIEN87piHENVCBaxzROiuucq+TZU/5tJiDQ9HtW0X4I09HNVJgtmrMENR6oAB6jxf1fTMeKE5LdeirRxztJA==","signatures":[{"sig":"MEQCIBsr0OgHWJLIrnlFRo8U8JAmrP0tlsyWku0zsgSfqyIYAiBDANWz7nfZdA5dALnThpnpYbYzZwSJPbT4N0QmBhAKhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsWNCRA9TVsSAnZWagAA4aoQAJeuD9GhbpVA45lA57f/\n80ELFoQcuULeiNTQE5afaF2ojGn+AdQgOHe8HDU+pqTHycq8K7URQYx4Kb1V\nvi2p+UIlr4Q7rB0u7a7g3um0Rp7sRB2GruZHapy3UFOT87+GPA8quGD4ZXEb\nbO/qUqVof9oqqzy9gdW9B/6644dOf5C7FoZicYJAdbv9bKvHGYf/LMZvH8e2\nIXZqSWzXSGHKZDfdk5nY/gGVyYVosT1uuvgs43BuAMZ5YpN/wKOsiMjy+wow\nH+Oip7xVx9mKAEWPtGTY2qZYUH/mPMzlffuNwyel67evVpR/hoS9BLj6FdZr\nLyCz1yDe24KbR0f9Z08CTrAdTUIchrXW9qP4pHjuuXvrLcdWWmOLB5RdSljA\nkxzz5jeLGOoCSXxdWqDv3ldSZqoAJCXuiTyWlbqIM/PXh5lw3mGLFZTW8Auv\n3v8hAkQz7fsy8yXf3h8zADbYLzRrKwgPKGtF5WnIASD4ejUd5eR3rL+Mb4mI\nmwKGZW4iVKRcZxUhL3IC9nsp+z61qLSHAxZ83d48y1oju8X3/bs9boAF+9mD\njdCgxWsnr3uEy+B+aGvOAlG9GkzrPYuwjtWWxYtpRpmOnLmloIOg1vOqvidH\nKkRS0YfTn/gw1WIklLj8T0H3n0IrAFoeb6hcwAecbFCCfEevN1bWAK+XaHa9\nlqWe\r\n=8ygg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/theme":"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/line-ripple_13.0.0-canary.fb76c5069.0_1629144461244_0.6121635071882214","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/line-ripple","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"51df8c5f2d607c6fa85a76e434ad23b3bfb1c9eb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.457d89aad.0.tgz","fileCount":33,"integrity":"sha512-jpeYKbVDx17PcLAyFypPw32O7FQQcIjntCNYE7iIvIqLWKy7suU8+Hftv1IqFB2oTArgBaWA2Ee2p/u4Y5BN+A==","signatures":[{"sig":"MEYCIQCGFX60kh0uuLf3m1GARC5q6zXqzTbGXi3QhW8vDV2ULgIhAMaP17xpsrJzcwP7wNuGFBrtiZT/MuH2JeaN2dkJ7jdQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9PyCRA9TVsSAnZWagAAchIP/1PIfmed4dbAVTAoGgPy\nveu3Y3+k+qMDMFUEpu8v6r/cBOHJKzPdad8UkYlDu3i1T3wgvSU4YhILoKgI\ndDWddsbBQB93bxAB0J3Mc8jPVoJkOZA284vxhm80Nt7x2mx6r3I2yanSwc59\nNmTjcCzooFZ8WOWnf1m8NJgbR0DeTmjWqAlOFhawAhpw2JdbI9SjXrqyCoXQ\n+RwIQzOeDcpyXZRlbOzxX1EBoKNQpayp/tiRS44Fi37ITtVCKRYgJIWO9pry\nKczfJhX+WdDZbOjo3hYTIoOuCApcNWmDL4En51MkZeZYzfKp3Db1DrXGX7h3\nyZTeapb3AyyKGF3BWdniOfd/4qXUb+vTMZMJxRlDHukGhU1IJQrAAUCwGRL9\nfMv8+ZMORQHn5kusGu7opZcVBk6ksII9floMMPxbJ6fVsMOJBH3lgc4T9Ex/\nsqutTeNFg612aG6aHR/LVYYpt3Ky54EDdQQkFu2kzDeEkl/kf2j2uzMtE8HH\nzNaoglMJ+jz2hKAHbkfswxoQd8+1SctBYZYmwtLxQ+8UpxgxjWZGxtl41OQd\nYqJOW71BDLgceeCkjPcd5MQa9q66ye+IKD4RLQTnh/rKd8pV5I3H0Fqd2SeS\nKbaBO9LbhJlai5DdA4P7O7W76Fre3ImNv8Sy6uxxW7Q12deAzgklRjw0iSgi\nmQp+\r\n=llSU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.457d89aad.0","@material/theme":"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/line-ripple_13.0.0-canary.457d89aad.0_1629213682375_0.1645398087105936","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/line-ripple","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0a3abac072b71c72275eac625febe1dbd66b45e9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.0de2f2edc.0.tgz","fileCount":33,"integrity":"sha512-paG2hMOgge4hY8dXKicsEDMdS7Tiu1kjw7FRKJPKL4ajDodBPyDMdaTJ4yG9D2utSBsw7X1j+19n9Jt67zXGVg==","signatures":[{"sig":"MEQCIBH1VgTR1mFfyTEAaE8ix+OIuHj0i8sQIPGVlNDK/KkAAiBnMa8au/Vb9P8Ug+8CGdXNuI15Ok1FzALLCPscysB/Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCHaCRA9TVsSAnZWagAA/NMP/jupwNcIo3ZQ3ATzBaip\nloQcR8CdCJS15bIZioVoqlFEFeLFNGVp12zLC1JU7+kGDbt6Gocdk5kyyCDv\nsgvQGBaR9CPL2dzxqAjLh7wPemrqpQAxNTNKSv2eat1gp+Iz9U4QKZtRBUiL\n8EDruqpmk+nQcCaUwEhA5SqkD5N+YugBugBT+DyIE9O6OfeIbFlHACGUWYhS\np6oaWXzJO9w+0WqawIPKiELhaATMCZlMDreDQ2PCos3eSJmHmOBrtPgPs6hR\nWxIgg0RLPlRFsD98Lp4Ho+OUFBee9f60zTODV5zcNp8lihv8/qdkfqyGkn62\nKXxlzYBxRTGrTd1m3NrSeTln4PAkX772wTijvRxWW6UQkHhCSFVvKOJxX3RO\nOwsuBKSdcGfHlX7W8uunGh3Ib7nf+UvHHphW7L+GUGMR4Czo0SxPhtigSxzN\npL0r+5wSutZE5QodkBRBxS5fOkj7XMKwuf8K0Mtavb9IsNwljLVVOh1BExGX\nEvCZlwkC3Rz/zw0ndh3NI+VCZ5EVC3am4rjXGwslf+csBbgxrRujsR08wVse\nTGqQa7rIRMo0Tz9mDm/JGXiUPFMP+Vud225mdhiAH/G8BJB8uDaeiv2bARZq\naQgwc1OZuvrxqiE4qeU0jfFuYXEPZBTV5Lz0MRwVF/jPIonRmqF5ZUYCZq/3\nKgzs\r\n=OjYQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/theme":"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/line-ripple_13.0.0-canary.0de2f2edc.0_1629233626846_0.5250848234197929","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/line-ripple","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"37f6640392e5fb2c84fde9a93ea3e0de5a83c570","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.1f9259b9d.0.tgz","fileCount":33,"integrity":"sha512-jvCzmQRHMIQRAJGDmZ0GqEqSLMbsIs8Ble/Os28CLBU2IjqnLDlRGv+tc9KI6AJVVC2Eo6aQrhY7sc6BoZdpEg==","signatures":[{"sig":"MEUCIAFugtzsC4VkNYKFkLG5eDmSzKA30ONFXchrY1N29namAiEA0tMEPv8oXX7k2Rqc5Y+oWOvbFSeTh1FDg+AdO9Ky4wU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDSVCRA9TVsSAnZWagAAFUAP/0IM0ke1DxYXMcXIX1L/\nL08mRtwC28wJOB50patXVJsVmGLZRht3r7PXe2z2wzvy31Uo0BU2YjoBWxND\nB3/7QZH9L1JVs9YEaGyYjq8txjG7+SnKkrsMWZOXA8gxbkblmWDmWVVp5HeU\nMSPQ6+U8f9YZRbfc9aBDv1fhYgdEKh1izw7M8ZebuJ8uRUhF3hp0tT87TNoT\nBPk/wSaRyxC8s+WNVmxTAv3hvN7rTU8EQ/le0cRpjQvo6lpaaQnT1660VvgT\nz7nY5aNOLBaC1y/IvhFVkiUu+oK5MNEphT3nm8dOgjwdaS1fHzH1Pl/uX1ne\nB87IXV2DcwRhld75YUtcVAH8S+G+mGGF24SEAjxwOYnh+hzBMthd0XoPJ1+t\nehmREM7MUHryrkQ43oDgKjJXZy2ERBorXrvybLJrtpNsbgA0c3E+eyDabPFd\nixWbcU1DieCwI+oR0vOszp35rXdZFxq+IeMarfhYkBwSlKltTHaxha373Ouu\npriuuNWBVpE9c5a0IX6GAhFnELQ5fPXTk/+BFgl5odzKOGrOoy5iMfLGrhGd\nrm4edC0YWSD38yibr/vvxmBiUPZa8NqpsG9KVqPiXffh/iMmEUxZtHf2bvYF\nibg7Cy0U732RnaG1qGwd7RlM72ftyn9kKgDTCEZj2/5u4Fl9EyWN7/v2xKPa\nCVAS\r\n=1F0p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/theme":"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/line-ripple_13.0.0-canary.1f9259b9d.0_1629238420975_0.7281030127555232","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/line-ripple","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8b6f5b22395a3440489bc6e4b46607fe45d46533","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.3b9290351.0.tgz","fileCount":33,"integrity":"sha512-pXrXR0iXstva/nJpzKQFKEhF4ZiJLLtbwcMExa48mbrHNO9Cgaw/XPO1YXKxSOwfuWBaXwjaoiu2xtXWumijIg==","signatures":[{"sig":"MEQCIF/0HemFczr72qDBFfQ91TJOGecSszDD4nJfzvWoIBB1AiBfoVBva9hjmLaJ0mP7PpyyvXZ35C5ACiK5NoxA3v5c4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJk1CRA9TVsSAnZWagAAc10P/Rot3XInFxgTaRQTn3u3\npPVethk3W6h/iRicoAY2s949nE27B2hFpxISdZR8D1C+1A0xkMDYts6v5nvu\ng7OBXW6FPzC/Uejy84XQXZgnDzoFDzzrnKGvXoOJSh2W07i/t66RCesX3nVG\nXWA53j9FhyPE3R9Zk9sDsV/qbRLJm3zDSNof1zTkQ9el0ZOETDPyGb6L4yJk\n9hZGzKoph5biV2IBPCCYhOATI/bq6/r8W3uRCUUrlQyWWSbaRBY9BHDXYbel\n55Xcmh7V0/WSJAvIJPgbr19YxXENhZUPXLGXFpvG50eGV2dFRj4YUDJHlfos\ncSAdeo3b8imr4S921PF4sS8kmHvKYYY/CpDREVLI+eXXEzmKl0RpRgQvp0s3\nbG7Oaje/0mLxkwHtOi+OTROxG3XMglZN5DmQ6VNnGNgBL2tycgIwpmRnEiFM\nqnoNivnjvNWTo2HJG77OiW/vZEvI2JVHXPFKK9esfZRiSiCi/Ucye7BV80tv\njlPOMCRkP9GJU7L4S577OZtK+Q+caX5MbOHmCaS4nxnWMSe5i/ZppwVR8Fga\n52w4CVVO6QViZZ13voWmhVy1Sqhfxadv4v7WkSJlWaN9R7WGI9greU6LHtIu\nhGwCMrGc7C+MGAwUbi3F1Cl8FGLVLGgH74iOw9/8anykmYEbj3XOI3fdDF4w\nz2Cf\r\n=Mx1O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3b9290351.0","@material/theme":"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/line-ripple_13.0.0-canary.3b9290351.0_1629264181131_0.1856953245954598","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4714e4bd92d33a28628a225d82ac31445c9584a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.43d2eed2a.0.tgz","fileCount":33,"integrity":"sha512-60sa4OPYrzzk7TTyHNUSjRcIjP1vVjOnje1g66qVis0D89skvdDNCT70zH3V+stjew8y/4WPZZVMhQnx/RGvuQ==","signatures":[{"sig":"MEQCIBdzGtbxGQk2IsvKSGfMsqxreCeIUKJDQNvbjc6R6IaQAiB0NJm9/+v+f6nSTZpkW3k4nOOCcE3fnQLvaaDwH2ThPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS7qCRA9TVsSAnZWagAABE0QAIO9o6IpDeNjZjOSBVIu\n5Zv0otwNQakblVetzVaMw7RR1esp8wDHbGVIfItYiZnEaPFLsezHoKWcZ0bF\nLoATIzw0shMv4A45ymg70VuGqyubf2/tTNa84CeW4gwTaZ1sv8g09vXq3E6M\nSzoxAPIXXD048UvNzr7eqezIY2rQmcGQZ3nPjBw/d/YgXWy1wIlZDUdWxHqg\nBSJol5Ma/HV/DNCTYRIXI9TgpjLDF1FrwCZd6hO2CMYxqlsMvpSfG1Q7DN0a\nkofj/UWzaJK+UYRfyFsZZSKdnEJSgNTXIv4kx/Iyo1sAgGQJJV+G00mYi0OX\nV/FSSYZIjaUyXGn5Cvd/e2aCmCJa2ugAPQAMhzCs+F5IiInKs/XnfjIeJfrU\nigNaYjkCw9wpA5gJnorR+CMJkB/ZNFcYp/dwxFErn1r0h9OmNgQDMH5FFHD2\ncYiw8OffR1ssrhjxDER9LNGkudfTRyXbss7h/Lyo0Z/+T6Dh62xMU2yLiO6b\nufA+80H7D7LJNzgsYWYM4YG//n6Jv/K9F23E1OrXXw0mQdCA94c0DC1EQ1TJ\nymBmGY9YvA1pPW+z0YE9gTjKOwvqpMgo5ytcmd29sFX/NcKek43gRYs+X0Q9\nsJB/pVLT/nCCLhnvrvW3Xgwhwf4Tk6XocM0CG4RjDijgHRlMBdqeTnMFrpEf\nFK2S\r\n=rbi5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/theme":"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/line-ripple_13.0.0-canary.43d2eed2a.0_1629302505895_0.012734149654117566","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/line-ripple","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5db87641b52702c5a6f0b438e194b9534bb313b3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.0a9069300.0.tgz","fileCount":33,"integrity":"sha512-UukAkbnP9iCVVrdqW3SzZSkvs4yLKP9OFCNf6iiimBbU1GwaldZx7TdasQBp+ye6kXlo5B7g54SJl6ddoHiG4g==","signatures":[{"sig":"MEYCIQD8PWXXHSLyQZGtXoIM9xya1C3MQpUZ+IaWJImxlQw1FgIhAP1Qxt8GtKHisLn/faBKL1oEizj58UtKNS7jKo8e+4xe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoQHCRA9TVsSAnZWagAAJqMP/Ay9ov4u5t6yJnY6LYrw\nlh/AQQdwv7tvUyj8/+Tpc9s4wO/BRxBKM4VhhpTXL9VZHKCXHJzIabVthNpD\noA2DOozHo3OOd2sNuRd4CsyWdpfTJnr7ZIaobXJqBXeSAgyg4pUCyF+lVv4v\n1GPl8buB/UTSUMUsH094WzPCAcWC1pztqDQ1wUPhw5nIe4tkxvDmaYjggAdP\nBJMsOdozelK7wDjxgqDbVEr7fPtj287nYf8IKsXMfTo/TBmLD/677g6U46cu\nxTEx1ws6JCIl54UDsRVkeP4S0E+N69bhsFY9SH5RzqGXnUYigkIHrl1G177Y\n8Bdfc/1IIptNPAV6Sq/Q/CNjD/M/uaxjLgWKIzuVMJSS0vAbgvvqDQ8KxEc4\ndVcPrBIC0au0fTfZQEm4Okbx0BbOUNneiOtg67fehnLSyIKL4im2ICCizJtj\nw7Cq/uNYnUZN6QWlmdCldQIuopomblyO8UYP72jHNXOH0dedHK+zWcOP5AWS\nYxcTCIQ1aaCOJkmuVWYwuwWetMDeU3jRnI184NRZ47/9zraV7P6jlNf6X1Le\n7/HFGKNPcHjlKhpJK0uUXESq/Bizf9b8gAVhvOzMjwfEIYmtahlMQ0Fc9skF\n8vv9qIxJLHp2u5bPe6rWtZ20j/mvIvybkmrIpyhsqUnPQeWPuGty9KrptLso\ndo24\r\n=JUW2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.0a9069300.0","@material/theme":"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/line-ripple_13.0.0-canary.0a9069300.0_1629389831709_0.9801911366001577","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/line-ripple","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4c0f387f5ef6905d187d45d92d6798ae7ff5b646","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.7da413ed8.0.tgz","fileCount":33,"integrity":"sha512-9LyFdOCY6OxhVu+EzipURbE/LmNBDyDcMV9Oj15AkRI6+Q7PKbG5x8hAtxxJeRY5j30tsaZ7UzrIYmCGYH3Jaw==","signatures":[{"sig":"MEQCIHMI7+MWdrKyojeAqzSJnMQB1kOnPvwd3rIwrBgAebxFAiAP/+hn7nmxNAiYoVjjHj2jbrsjp7yc1I53j03Wg5BKWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH867CRA9TVsSAnZWagAAVPkQAJZ9z4TfjflB82qw4yL4\n42nb/5V7oQVyuX9WF1HX1YC2Th9n2cySj7W0OckT/PujShCurNrhx8iah2gN\naFxPI1Hq52VYphbz86OYBBekRo5wwPH2m7ZFKee6y42XLjZYkTHDo0rildX7\nOtQL5QwczKjL3/PEsnISPvbGL8WpvkzzugfnqmFq2xCV0NXkW6o4l2tZPi6k\nG9AbD37Pyqw8bBwo/oMB02xCG+IUaCXAQ10LbVfX2GYr9uVG9HTK2zIwfwOt\n98znHv1j9IehvQkce2yyc6sjQGFEbxVStUdlepRgfd4bkCMwr90CBQ+S486q\nMzC7mqHGyRGpGYYUFiSQVVAZKYlxnwnhzyK1RgW1PVM4SboDSW76/hx/km7Q\nfSV3hNpibw+Xckqpcj5SrLbl5XFKB88ymwSNV3pEQMG0M0HhPhKW//FYsNeu\nsLVHklhN4hlgx4CsTPAsCYlDomeBxSERrsvYrfpQNLd2/vY2PEucUuwdZsrt\nQWo+Dha+IQlk4YSjL6yimfDiKxt+I+Qeb2GLaVJ9UsTtuXRFHB3RLDRoSC6f\nZluUC4Eh959/lDt/rS8qPRHgbn3+we7StiCJWF5JAhaS5O8N3vlkbE5Zg5AP\nhgE7D+k7LUR2I3L9pQwQGZJx5lb/jDRV47ZI633XKQlS5NHqGGOvOvAFTRkC\nLtja\r\n=INuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/theme":"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/line-ripple_13.0.0-canary.7da413ed8.0_1629474491361_0.48312963103274176","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"725980df824444f69cb57453beaf2df584915ab5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":33,"integrity":"sha512-HyT7LndLmW8rUeIrN3sz8LHCbN5pum3k57diVoWk+xE33Iamre9ko0HRrrtZ8xQpem8sSnf2nMUINVxGfpQEWw==","signatures":[{"sig":"MEYCIQDq6nlCPcpEIPpVhqEJrW16LvriBf78JqWJXyPFOPPKpAIhAK0hjPwzCKP6+3IHJKMlwv8A/FvpxR4P9oK2AH7gsAZY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAMpCRA9TVsSAnZWagAAz6EQAJ/VPVeee+t9gkXC+WGO\nwevbqA1lrSwsMhgRz4jqw5Ln7slKekUw/E9fMNcUjIULy6ghuMsgJOm6iCvN\nes+9fUdlxRvyR7pXq6cck3C3s2EF1ZmJq7/Vj6SARx8qI8912d0tKLoOz4jb\nETaufSfDBwA3yt62q8IwyLXYPSz2xDtiFy6IKOVrhucnCcfoWUOXWMHO9aVs\nFL0aq5Ud678C961dlBB5grV6EaSbGPCrQnbt34b/CgfeSFBp97xr2gs55R7M\nZ3klhNaK0BD4Z+GZHff4hhaCZIYdKp+510yIc2icXiB0AJvz3DLSWTmF0Cpn\nYAuhP2TDmXoSMr6it+ZpPmEanVoOXocXRBx/UGLVuWsSNs8SsLIAy7VMTV1f\nbmQdYvZPDCpITqGGsLpaJ+64Ca8vbCMwn6tkLuSmjkYDvmirrYYiAXGqqsKI\nPNiGX+d+kqLi103mX0Butzcn0koUqVPNE6hnxRyzIjzTkp9IxsEcFJmVu2YL\nrlHX4421kyFyHN5fSVEQRr3xCyD0zJaNqzpH6LohMNtGtZrjzIPH9LckCVmx\nXdS5XtpCQympIdEfa9ffKMRiuZxghOWzCCvLI2OT03cxmZn3vjVltvsnBah8\nc31Ajrkbm3bu7AAGot5Kj6EKveySj9bUr6BYmTxblSLXdLjHfohvVQaBA5eF\n8iY/\r\n=at+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/theme":"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/line-ripple_13.0.0-canary.e1e69fd8e.0_1629487912985_0.45264806698145077","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/line-ripple","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b36b872fe3ac62cd99b796cbe538c83cde07f6ac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.f5afc16df.0.tgz","fileCount":33,"integrity":"sha512-NrQ1uGIdrbfKNf69OiQ7ZT8WEUcdxDq/QK7ZZnqO9GTmGhQmED7hCp7t6XTTzCVVCsrNjDImXTL3EVNIYw5ynA==","signatures":[{"sig":"MEUCIFRNlpwUPagj1I/4Id08LoR91tn7WsslJ5bqsq9Us5ADAiEA61jqPGuDbcJp8FenHi1kFC68T4VB6wD9Tv9Z97TLuiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIA/mCRA9TVsSAnZWagAASPwP/jM6hxoK/Fcf0cnOoOWb\nex28bX0X8acuteDaei0y6YYbPWs3WIeo1DFBiOXR2HEm/JktaMzl3dI3XQsn\nQaAQpaLCu3HtBa62pCWf8piaOFT7HGdXRc5WqSPFzDWM9+8/g/D5+MMdLqx2\ntLgIqzzkorVUOvOcyVhhuztGc597CGJoifrV052vpWlnE3eOhZsyEywkIhDF\nvMyjxhCE7g26XUgaJ/MAS+H+G/4cNEM2bxZGtk0+WYnBRYycpSzvUqd9Xs8C\n5HM/VVdtD41abuVOinwjk+HVnxgb5sFLdm036jSH21VK38wblHlny8FGtWsI\nUASlyFVvDJb0GB9bQSkmd2TQoDK8laLSRLv4o9gWakeqcCzmBYeNFL37U8kN\n0b8AetvXyYKrIcJl4GbvnamuZgjff1PVBPzOSUjFB5n71Va2qKrEdUgNWtyG\ns/NKSuc1qPmW2tHhzfaqUnzerS4Amh1SbIW39btPhTVMHx+xpghRPLx8VD+G\nKze9jvUiZA2L8LsP13h+D8XXk6CgZjedIpW82Z8xRVqsndeT8T7q/w6ymrpz\nOHidRYO2h2yMBWJk4ZAMDBk2OV5hubbpxTibURYphURkaDfIbLo2ZeiLxg6d\nNozm0J878AB1aMzD5d/kx0cymRYx3N735cjyJN9/iS/ZVmRVehBIqVQ5EqPg\nEEbR\r\n=IrUO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/theme":"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/line-ripple_13.0.0-canary.f5afc16df.0_1629491174400_0.6660446623708218","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/line-ripple","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"852b20cfa9c0f12ee6a7f59c3eff897662cf582a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.28d0d75bb.0.tgz","fileCount":33,"integrity":"sha512-AoeytNtmDUEhxaHwMJT073agLVzs74miFXK5Ywv2/OqLZlT2C46txAAZlmZbd3KNBShyCNOjNZ/yuYfyMNEVIw==","signatures":[{"sig":"MEYCIQCnlDm5UcjhQrkvQ5KDCB+94rDeqGWX+otTqjlXDpoNXwIhAJaWTgKErzakAJz1YqrbmiDkknM1P9XQ74iIb5uMygbi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICqNCRA9TVsSAnZWagAAh9wP/RMvMvt56tFowUafrVuT\nLfjUYbQM1aLiXmIw3P/rICJ8deJjcfx1rKXZAJ/zJFlj2kzmmGCmtsbhFyqB\nVZCPLJKHEWzas7Tqit/3spPmJjLOyoFYzMbvjUz0BljUnQl72udvLWR3wrDj\nOl5HDVW61HUYb+sYPr1cu+oPw51zgGzX1PaaZMVW22/a1GEBC+xQgYezIO+6\nvbkmLqRLR6Be2ajp+Zo4fYg2SL8EUTqJ2P/0VAZanILXL+CQOSbO6oXWR7K4\nP2kVjuzK92BFBhUDWlFyyWhGFr2kPKQfBL2SqGR07xADqs5gPTmS2h+aDQff\n/IJORNIE5t7VG1+MhU5WZeYDFFq9c46lr4Lgp1vLBeBStHTIYqwIap+zU2NE\nqG2MnMpPaT7SsmsgQ4fvPc+MWt+ynkNEYJnK7loI7Vt3mUSyn2Ig+C44tkrP\nFjvobq6H5VjC1mJDe2oRhuKYwaxcZWTStr0IjCWxbURjTrHmW0Ew0umGmTjL\nOJwxiEaXWIkNt99J9Ath460HnXQyNsCTgCuHC1Is2NAwH149PaZ6voEzo9/i\nYycyTFI/vU4iLQ3PrjHu2kWnyhcdcM7ZXa27jwrRX7HoUEHjhzhihl6n0xR/\nGIRiQe9u3HUcDzfTpqx4SH0x8UAtJTSINjR6sGAuWbWD++/01aOQcHKO/sc/\nRvYk\r\n=o46N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/theme":"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/line-ripple_13.0.0-canary.28d0d75bb.0_1629497997787_0.6062180799745593","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/line-ripple","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"48faf73a4d2101115a524aba827be6b476bbc69b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.21ece5360.0.tgz","fileCount":33,"integrity":"sha512-s1MpA7lG/Y1GOqkxZWVhNh+XYMHI4xslCpclYxF7+ALDDC/lpoXNpQk3OLpedqDv4Z/zGaRNsZ4s6JLx1NzeUw==","signatures":[{"sig":"MEUCIGxDrGkTC2qrWgbieiKkJrZNVhxNrcCJVRpLInBil5IxAiEAhkby1e6o1INBNia1gOHt/uLMKBZX4EMmMQAhptZc+Gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID41CRA9TVsSAnZWagAA5vUP/1bu2VUSiq7zDXTZBL7l\ng3NV7IOK7CNqFAUThmyT2yunSpqSoH3XPoa0JZAX4z2RxrtFVetF1wi6Tqqh\nHfoXoCcMUjzIqZDZYQa4CclfpW+ZHmzuaWzjUieiIoi/wcyk4cjT580ChWak\n1p1HMsbyt/qao9YPKOcNlj4KCSqZf2VxV+wHlF+CZ9Q5tZQcFnjsoLqwhZsO\nEdDXgzzznSJnXGUGQjTilQidri/KItj52Zyc0LT/XiqzjhwCqgWqSq5jkZ0z\nfSkjB3UhfZgM8Y6CqyLWHRcUli5C5DZGx7vBIVYG/4umUVah9npVTijS+GFt\nbe6uE/vP+5GrTiML/jJ3zxbhD6yqetm3wOsE5kwCgC7hk90Jj6cqQ4kFgSrh\nm4ZswoNNKfBq7vpi+L5P1cNV58ONIloQT0/wKE8s9Z4MOGouI2m8j6GWWgIM\n752OUkKg0ZsGGHjbaDyYrVP8i6xXFfo1TKIJJqOx9ub3Ga/85t/foGMTsoV0\ndlc3MPOcDro93Io5h2pfw3BenQlDXv9tIOYgPHdCKlHGBTt3ylDfSBUrs1go\nSW2Mlt1/265y6vCdp75fLpIlnsibU6ozI0whnuWHGZ05L6BUsFhBfPvo/b2f\nQaY5qZdU2Wf5BFggSvm3hLgaLN4Q9CMOrTG2ItJNMNgHgDSVUOX8F89F129Q\nNaAy\r\n=DbW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.21ece5360.0","@material/theme":"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/line-ripple_13.0.0-canary.21ece5360.0_1629503029534_0.8962133030495707","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e5a6d635fe382206dd9f907ceb887ebe569698e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.8de07c02a.0.tgz","fileCount":33,"integrity":"sha512-Fof17jlAhfVPzbXhSTwbENKZV/qr28cJLEutZHI1BTJ0KOKu2uixtsfvtZMuN6XNno49FpeRmhTkJ2QUBQr8VA==","signatures":[{"sig":"MEQCICaue7YbTKzt34O4CJXW1mYqJhFGiPhO1XqFS3zIOktdAiAVrcdYnCoMTskIfUz/Kt0cptA81Llg8xz/7dOBL4nCBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI74VCRA9TVsSAnZWagAAZuUP/3wr+KLJMUtKSy7k18OO\nuJ/N3hGo9/pMMQiZqnz9Vil+zkFHpDgGnx0bQc4MEMRE7uvIEs5rXG7mYuzB\nY27/gu4H1L2mESgIWRopzbV7DV4jDMEDm5AqRmhB5UMt1bxEZuMQevF7HJUu\nTfEoncE9SjbA9HDM14tRlydT5Z+BPKb4h7P+G7H7sb5ZXmV/x/loz6iC5OUG\nNN7fLYbiNHwMEuH7TShWnTcvEN0tZdPw3kTjdTQSX1INvFOcxK5ytZmzGhrc\npZTTf1ErUPD2FnQ802ecVmr5SPEKcxIgPv/QR5t4MZGiBr0gz/yAhi0RnEQe\nOnsVoZCbHlELdVpBEPwCb6X4DFuae6+I0rY67cAg+VgSBMUvIVwLj1wtu3l4\nVK+jIQq8p5FxeuTEc1OKC2WZSniqWgyPJHRMc4QwIHWrYiTcI/CuazBeER/Z\nxdp0Ft9l8Zf8q3OwwoPUDMjAWanDqXEyuXJhozL3bZDj9wmw7ckmO/o/4jjy\n2ka2580N0jmvSmLF1VJ3wbslAei/42G6ObLA3o4f5M61DaJASRSa1BchZdBX\nplD6WdXn7lqrz9SB08P/tMOqwN47YTD/KobwgIJy9YZYwTdntRhExYmGjSsV\nguTizrgUKy7+yuTp2KU9HzM5UJ8MeH1At1OX0W1s5DTbpv/czSeWUkvVF5mF\nQvCY\r\n=RBxW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/theme":"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/line-ripple_13.0.0-canary.8de07c02a.0_1629732373710_0.6015661780978969","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/line-ripple","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"40a14e49ba8105675500d18a477dc7b5fd1b2848","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.65aa63b0c.0.tgz","fileCount":33,"integrity":"sha512-f/K8uQQoQrLQ9SX3cjcCS1zpQZump1GjoYIp+KsTNXI01TTumRRhPGHsIzXSFHUWg0lmuk9nfS5iqk3i0fYAkA==","signatures":[{"sig":"MEYCIQC0a/Kk5x7+zdok4xBCl0SnpQGuxIHH5Zbuh1pgHbio+AIhANQIJxcDjIDkc/d7VRPjr5XVpIso8lKIsMfkK7CULjJm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRAICRA9TVsSAnZWagAAin0P/jY9pw+NRtP3wDjmVBIz\nKHI1kriFcedH0NA/dIKDO3AUeMUk/Y8MTlmhpEyLvCsdR4W2G0/EogbhSyBx\nFT+U1hwsEel9TQLEWEBXggdjYBQKoEa3BTptVCP1X6aHVPWwzW/Hyl+dWKuQ\n0qSxDl35LlwtvArFSpdyzGY/5Kc7xjyGngIRxWVedrhhM3OyRL+cvPdNeDOU\nxvZG6ZJ1iHmwSTEnEwUcA2mCqY+88tKpmEJ3q0/YpV4N2tgrAys4F3yMrhYd\nHXAga3hQE+kfXq5JsMDAtF6ungL7Ij7JMcHsqPEMFKwDsps2jDkFzxO3Yeid\n47iF9nz1ws7OO4HJh0Ls7MCTS+o1MO/Fq161h9EnFc6uy++b19+KNsRfIuNA\nOFrn2yrPjyfjoZVh0FZNPYfc1FC1kgn1Mxt1UgWdya7iG7kEEAUgqNO2H36H\nteR/mwv80VUgTpSr5PU4g4tt2exZL1TsdiJOeC2+4awmXWyCHEPMwy3Nwb/D\nei4/sR0kGXT/I4BPxLqoMAChluOtXLia5GzM4ASJNZ6ZiSg8UHQ/VBIX4zb5\nuF0snkQOzstcrq6FQPS2F7IJxc6CbiXbGPlqwkE6G6OTTx1wmif6cAZGY6LU\n3aWVfiHuK6NpVDhgpZgaGJ7/QY5K5BkhK3GGX3Qk7BRH7I/6W4LIuefithuS\n8tW4\r\n=EAZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/theme":"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/line-ripple_13.0.0-canary.65aa63b0c.0_1629818887897_0.7664851988499473","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/line-ripple","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"972fe2415ed74f10d4c3c954ba5c2bfe9b1303fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.15981e9d9.0.tgz","fileCount":33,"integrity":"sha512-bF06YY7jiR3Tx1qB7B5ZoDLp8nsC13sFw5GckSHFF+nQIK9DntdCArcUwZ3gV17J3Z2fn1TKGGl1bMpvJfos2A==","signatures":[{"sig":"MEQCIBEEM6kC0iSLycf7ud0Ir9C9jSoHxDcfr3d6+u9L3021AiAb/gvLUmjYqWHdOnbLxmoiVGKjNkarnWKFEjERsXtgFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRtqCRA9TVsSAnZWagAAiiEP/RHhgX42B9csUBfFbVtL\n1oo7gIygC+T6NNGA7ZK5Y1Dev8GWMn7n7WJjezkOXnVfJiZ82DtbUETMy8bM\nOMNqSRhU9uHq5rov4fOckC/5bqymsnbNk7hwtm+AgSG15qKNGmZkxK+pKDSw\nMQ1uPIr3V8Cu0VZCj/aScBjJZWCLqkbhIWC78Sm+ivY2c18dE3v4ZvcB0xND\nw4ORmOmwP1hDyGFFwIgX83+tbbBw2FS9dHSK+WlG4/1PoOxFu1M8cAz1ks3Z\ndFbWYgUuTVNejjc7DHtC0nWRccpmKSS1EHPqMfjkNBOOoxqVbIbI5LhZGRPn\n2JePgvFnyP2dprsTJciyRGkczrZMb28DGuHH6qTuNeak9pbziADCjokplNae\n8nfKir3Zf5CcKgDTZ9hIEPtawOWS/2kbCSy4ptNftcw9Ddq0CU08PEPnn5zF\nN4LifHUiebHRRC/WOKEFGc/A3opBpIAhA8Yb73O8LYGzu/INqNYEz8fnsqG0\nj9xOVKUxMUYWSot2U7n3rSqh7h44dAsaVHeAR9Fti23Fzu104dP8uH0BnY1C\nQBhwp6ZteGzlriuvWghE8x9jKMPneOZdMXcgOD3oUQLgXGL7G1732TvkH/aM\npnL5428TTs1mxTUmWyRgFqoU5uT9wocq6As1Iaj1iWjkOCt7JcBauLvoZVHf\nvReG\r\n=lies\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/theme":"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/line-ripple_13.0.0-canary.15981e9d9.0_1629821802445_0.31932643063881905","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/line-ripple","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"93c00f3b0e8457a8af18ff58a7a374f01be8a779","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.fa7520f62.0.tgz","fileCount":33,"integrity":"sha512-VkwYSuId7UgeP8++Ymfk68Ttd1UZqE4Bo6Viha4mKBsT++oRwPGbLFHLuk8E4p388WxPdfSzylsSjvPGc+d7+w==","signatures":[{"sig":"MEQCIC47BaTWds8w83LZFJNv0H4wA0JaDIj7XvP55UZNDZA/AiBsISvcaeyQ3OFMPJ7m/YM2VXy//We7Ib0tUTnYmO+p6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXJRCRA9TVsSAnZWagAAOA4P/3QR8OqPbYIx/EIE0b5+\nHY9QWezW0KIywe4sdZ6TvPoRoHSl0tMA0Nly+RCiWlTuZzcaisSkmnuNl+Ve\nerQN8N/29qZTeBXy22Zwe9hZO7n59FOOPe8T3GI0WNaPXR+YT+B9FifnvbC9\nZJAz/Erh6Gihz0BYQ+k8vdoPPupPevNoepClY8KWAytWKpTvPGcQgyAkiqKC\nVc8BDjT49Uuica+xnUfTJXUojqyC1to05tdBDZRzzUD8LcdrnmiX5D+4e6xP\nu6PSu/aUIjUQGbzkZCWQZHRDYRDlEmJrwwQWwws4aNA1E+yLtyeVhYLEJUP/\nZlfP6Fnlz3Troj0MHG9hnXJyr6VpCPM8y0wCBmhjik2XxOnLkBzlhHJjR7WU\nPAH3wKEHGxIdLiQMjkqpPnhQ4j/3qOxaTivNdWlsPafRsfPLsvhc8Qr+zc8D\nQLJNUox7bkxW3HZfPBVVYllHPLpw/J1ECWXbaoDguQzyEoPGrJsrEwNq21ik\nxAJRAy/so9GqXC5H/Lj34UFg6BUojoBPMeJ2QJ01/FljVVbEp5OJT82Ndrbd\nVKG87iryMwHrvpGOAeDug0LJIwCp5qBCUpreroCGjcndoX/ieaiio6uTJO6+\nka/2CSHcy8f7uWenLKIsoPW/UAIRhQSddgSwaRvuauiEabtw9gPk8/lN9fYR\nDwpf\r\n=FKCp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/theme":"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/line-ripple_13.0.0-canary.fa7520f62.0_1629844049450_0.05750794921229363","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/line-ripple","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3fec8030291fc979de4b6cee6c5e78e3f6ba9809","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":33,"integrity":"sha512-wb8N36SHxi8ldfONPpyp/fk8TO/ri95poO55EusS/4/Wj4KZmtfsD+fl1ROseJ9FqsZJfntYJhYq2Frh8o1K7Q==","signatures":[{"sig":"MEQCIDsu7u2/SDMSuSgsGulJyog80JzRbMCkuatPT3Bbx63KAiBKUoEZ5inOO2cq/EJ77lFVP+nMtD/9gMiYleh8aTWA+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXchCRA9TVsSAnZWagAAYbcQAIl9ElDUcg+CoCBXBoFH\nTgIa+A3mdBO45LTf1hcCVHpmYYqWfl+6aO3zzSx0I5oFFgYXg86UTud4+Tb/\nwQ8ZCNgV91DXK3QI13jzynCe2Koawy18pGCdRW8Igd9URO/N+zzECfiZyWV4\nKi3L6Waicy/RZ+XDfHH8xZ7mgsZc9NAdCVCoeKh3vOmwryKbabtVZ59Lu6M+\np+mTwaOMMWp1BLyMJHmCz6dioHxEJ6uPs4ChgFsGgq/+hK3Mnf7BH+cUeuUP\nI7vnDb9oS5XV0m7/Q891mz4Tq7OybK1R9CHx5yeb+8gUJHNWWM/r78tUPTQ3\nFOiDKvIgdYgRjuI47nDOXvcT+Tdx5ljgh4GacFeTZr3Fjc5SUxf9T1UxMY6/\nbBxH393s0EAiKM3D39iCesY7DR5IEhZF3z5OIKmiD9jGzOAFjtklTwbNuf04\ngP8uE8GXhPbbJg9AlwigOUFwHY2nWpgijP6FHFXf+bMoliPpULnP5QPT7Ygk\nUlI/FlZWs9MFY8VTvuU3OHpkqHfiCk43Rdklh5dBIopAA8RJ58r/JaAdMoY3\nKyju+9qDYfLBPgTb72tF6ANBORVZhB4v8CNbBpKZFSOa8fASSVMFRxthJKYB\nLk6Ly2abS20ON6HV9EPdQxKCFB6ZS4vyZgty2qSByzTrb0vUNTG4JH9oK4Uc\nC0NN\r\n=vFcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/theme":"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/line-ripple_13.0.0-canary.ce25bc3ec.0_1629845280911_0.2605769833440057","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/line-ripple","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9f588eed21f2cb4e5663b86dedb832117000b0a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.12f5622e1.0.tgz","fileCount":33,"integrity":"sha512-1fM1ETbqBhOofEeb39x2S1S7efO7l7RtuMAqpEPEGLf1mBvXQD9Xs5hKnhOrXFtNg3M4Ctyx9kUq6Zz3HFFEbA==","signatures":[{"sig":"MEYCIQCdfuSunwGCUvFvimZ+Xock00O+PEga/HshYiWzZxJOtgIhAPkWCCIzEVILpbgzaRvF87AEcwosTi7d/2GU20HTwyXB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX4ZCRA9TVsSAnZWagAA5KUP/R9OlCHjd9SmwRYc2jEW\nediNInpJRvNuiWkAMzufbtCPlxeuMthncYCE+l4malf9UO3k5hWKEYbQMcZV\nLTcv1yKYjjmawRAEKpJj60OU0VGwCI/KBP1zc0+dFr1CLa+JNlaJVmW4hjj/\n+UF0f4I36N0CD5EeYgHjZCSG937bU1Md7WnO3ErWYWW6ysZ8L0GWWjeYw1rl\ntf0hZAICGYQxNwb0OqZT6zfDnFOecLatthsHqIb2OWkPopn9v86Ft5RZC9hr\nLarFpU+KsuCVjrdHmEPXpajko06bMSsLqeivDLqbDLtuPU1aj5v/QoLv//1u\nrq8Cdlz1bi+ExgLk/AtLGi44PImQ0G6g1jRGLjJhXzUSOOv3vYnALOYMcYYF\nhBUfEM+LELxiSBhRFRl8EPYfTilJF5eQB5uHNV581VIN2DPsUnL0Bhux2fvq\n1FsGe6C7P3dlfH61XJMRHivemQczU1/h/AiFrPxr+KhGqFvAL5ve6Rl4p5dh\nh2M97tKW3FJuVjiTaipIS0krPKidFLCeCr1VnVH0oJrM6D6NFyrcPlP3H+do\n8hmWshv9Ju89IJv9xS3qbvYZl31DkoBdDsvcW+6VpneVHI1M4+Ti0FOkIZa9\nDjazEasXQEOjj97gTDN5OhzeFjBXlyXOeMV5wFDgICcCI4dD6h3Of6W9GVdc\ndd8r\r\n=r8Ls\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/theme":"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/line-ripple_13.0.0-canary.12f5622e1.0_1629847064946_0.1566463770380504","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bf80fb517e6932922058cc8d0fb5744d854ce51c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d97f8f133.0.tgz","fileCount":33,"integrity":"sha512-19e9vhX/oZZi1DwpXKTlZ/hABSaL45+3NUn44Gua9P363gYkRbWLe3UcgqBLJ/9g2ByMYDjPye0z17S4huyUaw==","signatures":[{"sig":"MEYCIQD7mUx20+4ijgGwtItLnrCOV9Y6xF90gNk2HoKtWJbk8QIhAPuFtsjn+C9k8/A1CxBMM2h617pMXiysH1PrTZK2kgWG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJozRCRA9TVsSAnZWagAAwXwP+wUIsK4jjdW6WEzh0j6d\noiYTRBJQHYP391VTnxHvfk5lU5SEwbCNIWXJIfKu8egLY9yT+piux+HRelU6\ncE1l37nlTtJYWTUm361/Dea65XYC4BOZcEkvnZJlDOZG3qPNkQtUlewDwkTi\nAeP6Qj7P+kjtu4D5zTuQ7W2Y8mzp2+puO87BnZfveEDtjO2j/Fac1zgu3agG\nVf2G5Gfb0Iz3SnVJQcjVdVW/zSincSOjLZcQ1WGsou6eAATLvKUvDQ+wF0+k\n+Ly0xo9y6lsSXBPz1phzi4ezIBIUmAQrdkvL2inxtcn/SaaPPg5YD9E+q7cw\nDZorD3LNifUouJ7C0D8zSyFtM3RY3LBFFJXpKY7abmIktkDrJHUW01kQWPl6\n81EKqXm7vUxmnZyYN8qUR99VVe1t050uRfxqR2whziFI/MD2nRNmnYM2jkQ7\nFFCNx+vqxso1SIlFkrb7ZGVzLsdP2o8Q4vmmyim9n2eFbsxRSh2iisMNvgVQ\ns429QS3S08v9myvh8GjGLAksL0KvEFmvqlR/TIEnxuhZ3cOEEZreCRLGUybp\n408tCk66l6oR6QQAczTxYOR7qyajkNZ1/sUVGpiXYkSOzueFGQkG0u+WGRZI\nzD0oZS7z17XFF05xTa0m/fXmhsRMrncYRqgN4nNE4v9KysRCtdvKNIIQhYHc\nmyag\r\n=twu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/theme":"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/line-ripple_13.0.0-canary.d97f8f133.0_1629916369776_0.09195966646304865","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0bcd2d472f7fa53fb1f47093e7d94edf968bb246","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d86fb6fac.0.tgz","fileCount":33,"integrity":"sha512-DUtKo5WyeIlkpmV+W6/cw1XDTwZbU1q+M8gGZzfhNhXOeqnoofXd/qpfcGx9Bg2GvPTFs7+THTgmuGkce2X+/g==","signatures":[{"sig":"MEUCIQDXhVKTMKivi3SluDstM7tUYUzmPo2gsTk6tJUqVxukPQIgMiJyUu3GIy+bV8qCr/uUYaUA/mQ1cE0PcADBETzUSgU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpGkCRA9TVsSAnZWagAAVXYP/15L88/k1iFi7RNhwBRc\nBd8+AQHg3hSvl3IcimqTxYOwJEp5PhMSzhjnctsEAu2/IdFb1bMUuXPCMW/Q\nbrmdD2DTkAHgL7+jj1DRi+Swc5p1OYI7aW9rlqTzTjZOULEgfnXdBNcoSCVN\nibdrTnGY68s+f6HPRP5RAqVX94eMZvfje5K3IxNyFF22K6t0udNAVnr0l1Wf\nrS372D7ahqUmtQ3+ayODi/wLrKhc2KhvAo1lFxKjWG1pLlq7gIynjOR7FSFS\nAK6s0/jq4P6UAwt68bVxlHsTjX8SO1aD1sCDJMugmE2mlLokXQCbLvnfrGjc\nIK5Hr9W7/UfMjQxPLe72xOmsJqbZU5FfW0w8gx1Qsv0r6zazSyxYRb2tZPal\n0IgOJibAkXOMBEDjJaJl6vbywk2RJVO2ftI13hkOD2ZwhW6PidQ7h2nJTOXE\nPir+4M2hv73SniFb2shEzgMy7ziM4uwtm/bqc/fpENZ2dsbKtR45/bRwNntn\nHOMpSa3tJfMwYZQRi7oCBYlBltPOJ6C5fUib+gh6I11tAaypzKMaYddGQvVW\nh1LFAxuXXIkiO+GRpz5/2gLOsI0yzpf1HG/JBqgF/DToW+hJ5QapWgbKeGxm\nIKadgOwMw8FWUgIlVsDiXJbaeul+K07+GeL6ElFRkdrIZkjTXOs/uEQqMFxG\n1jkj\r\n=4K3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/theme":"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/line-ripple_13.0.0-canary.d86fb6fac.0_1629917604776_0.9552656838584639","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b3fd1cb3bf254eaf0e713fa07faa6207dc0ee449","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e8554dbbf.0.tgz","fileCount":33,"integrity":"sha512-92Fa382ylIrmaHw3M6NQfAkMK+T3rVeH+hrh6DLiUtzwYtctoH/yy7G2o6K1hw/pvLyPhupc+pu7wNuaimKdJA==","signatures":[{"sig":"MEQCIHNztJP1DJe4VlO4zexngef6p4gxN/95Z/43C7iqft/BAiB7Y0YbcKV4AlDsg2yKWEtAtRGmPwYvP9boSuRdf47HMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr0kCRA9TVsSAnZWagAAQSEP/2EGh22zpvrC4/qVE1nw\n34CcQjj7LI8et3Sy8xlvH7KRKsPMdQ4S9f8oI7YkXWb1ze2fG6McJAj5Yo+w\n2aoe6Bds/a1SWVOe0kDw1mGW/ALEIWZ0uOvVgvRjlsAF3vQGCkQWyBuxmtEB\nbpNxw8LZLsY0J3v3NsK2mj+6DT7f5c+EZkPjJ8bPD3JA6xlSvb6s2XUoMsSG\n6fR5L5Kw/J+bE/tYmfy7GQ7cmMmOjS0NQvjaOF0KmIpUWyGTeR1rPONoIOI9\nLhilnQxZAejpxmb951csPvgDrbVscuhJKkAy5VZqHFvY/j7DphAdE5Pnthg+\nIOyJoQDSJzSQ0i39N5dib3FiuZn75QXfWlgrr7PufBrj7MlK1eMsIyUF+kw/\nY1JrBr8TzV1vEOcAtRaNnEzY1Q0zHQImlc+8Exk9yQNDcULgFHSQu5P7sGk2\noorfzUrhTTh6kNnx37vt7hq1g31UFGBT0jxDE7jOiMPX426RRI2O5JkDug/o\n+4pSU+/yiuX9zr195ar3VgqzJ3ngEIE4g0nj2t7Ob7cj8I8b817tZgTADw7G\nqIIczDs/gborM8pa/nGLnLBuLE0fWQ6PkEYScmAKrhBrIsL+7QlAMd44AOr6\nAxvKGN1c0Ce9/Hc8KBc2ahDDZxq5BOvcHC5Ju3xbL2BYAXLnpjpteB3JBPPi\nGWZD\r\n=hP0J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/theme":"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/line-ripple_13.0.0-canary.e8554dbbf.0_1629928740550_0.30006160039514596","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/line-ripple","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a8eeb6423bcf825d3d742568304094b3ee9bc32","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.877e3fb0d.0.tgz","fileCount":33,"integrity":"sha512-a+xKAWpWYhytcMvbWA4mQIBpySasUo+EHC4f8PgfSM3CO8d4F9Mo0Ex/YlRoAXHmzG95Z720SCWFRZg14SFiug==","signatures":[{"sig":"MEYCIQCYy5j3W7xnPuHnS6Arw0L0EarKLTR/qH/Au8lgIvqp/AIhAOdiboT5HheKS3vzV3h/JjgE7aOVSwVp8MZRbpErwKRj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7VCCRA9TVsSAnZWagAAX9MP/jeGzia53l2iWt/z2yAK\nLFLZGIrsI6uqTYXr4y70ZlwvzW2BtDwoWZ8u4ocUvpQOYzkpBLqRJMiApVLJ\n6u9mPMBC+jhoNha4LgBN1piG+hMo0jb2BGq+gPLgEpmVwkAngrVqWOHdPEDJ\nK+llfOREWbe/9n6NMrNb+S19u4COkrlyJbTS6z7WyFGCUwvupXxe92z1X40D\nxaHIKb27rIiboQBPJ+nfe969bwb8xxxcYSRPAslRCou6oTYOd8n/O8djii3S\nI4rVwNnfSvQV3DpN6MWXEwXseBVySSV8pmq+yavr6GWtor/di/mnwEB3xSA3\nqIxouA1gYgk/akJGPO67oCvGgPZT2kp1G7wBvrZQhh4YgWy52Vu2TT3lW/og\nU5bViHYcu5woiAgNuO5DX9m1iR1YI+TgOhrl09iVnEZsNctUz5ilYe32cBnF\nf63PUQwBTSp4+bNEPmxkvTo6ZNushvZ4LA1zlr1E5JafEcS50c00syFv0JaV\nJN8yEYRvChPctoiWucm+BRn4N9PgZmGaeUEDlu3AAnUkr5zUA8voYqv6jhHo\nJ0qqIXbqF7L6US9eNd3IA7H28DizbxA6YJZXM0bJt2NfW1iOaopw4FFklT/N\nKTCFhXdzrSa/jScbZFQiZhWjKOljOwTfeI/59/32sGT+GSd+m/bXQ/gWaZ+7\nvFU5\r\n=QAQN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/theme":"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/line-ripple_13.0.0-canary.877e3fb0d.0_1629992258316_0.1340244811015383","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/line-ripple","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"72f8582c9f0d57cb1755e2b0aec7a63c83aba34d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.6236f3576.0.tgz","fileCount":33,"integrity":"sha512-3JNF+a8ea/h3h/wPYE6oEjxCGoQVoWPEGH1zflxfFOYYnAmuInUgl28LwdKQr3BA+GfAz96HtQptSWA/coubIg==","signatures":[{"sig":"MEUCIQDFtfumS+DT7O6P2kNk37v4bVGurgiEtLwr+UpJnRexiQIgUZCOY9YUuMddOpCALCwC9sv9AzbaWVvMTQVK/uwJviY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7u+CRA9TVsSAnZWagAAVC8P/0gSIU9KdQ9VF7GviKNh\nUc2iF/TsAH7cNIg+HOZwqSEJKK8moqfXYQMY+ntY0uWdV4V96zVSUXJ3N6d7\nkem/m5Qy71PoHyR7cm/DL6rPahsqhNiPiBzoArybQqdyNWYHP+BNa5MbuO/B\nhGOxt2tC/enn3SBiym7ntKquVwQnB63DMxzQCVnyvSa8129jUb1jfBFMi3hQ\nek5zPB19Ebu17wrlJyCGTWqzrykhl4SiN0zUHc2+AYHEFZh6y8gafU/J5/hx\nZL11M+zxx6lo52vCFbP8tifetHPR2JTbs/oKz/yjR5CDG5F9bjBh+Su9vwih\neWbuPRQ/MNTAsu2ErMCGyCP8EMw3uZOl+4w7J3kl4cNY6UgJpaPg+s7JGMYx\noERBxkZfLLqqDhhtD9v+R49rMrK9w3skA5XjeGOaBi9bUe7Wb9XpbWdoj6sF\nOnnqKRPhG3IfAhpgnkft2616RIzeFcBt95SltJvjjlaBgH/Bg/3anxxp/gSi\nKQln0qnMhKAHapOIjicfpomut129R2SN5DHbnKNJxpcM3Nv8iEKimIP2c/k2\nFPbqL+9+2ZchSeeoNYp+bkSEoTu15QvK1f2TFzU3KWr/zWZzMyXbMqR3ENHt\n2h5x8Y44YsK594CqeC71wEIeXEaL5Iqa+RTPrmOMqF7DrTPyZm2O9O21s6zW\nDPY3\r\n=MvLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6236f3576.0","@material/theme":"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/line-ripple_13.0.0-canary.6236f3576.0_1629993918485_0.33580595470894603","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/line-ripple","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c11117e71e17399254766e928147cfac1278ab02","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.1d19158a1.0.tgz","fileCount":33,"integrity":"sha512-obwAaCtvfLF+q709WDFTd8hhGyCD1NWQANfxdMVGBXGb0vYYLw2GzB0RZtNQy2r+VKzgfzzDFmyL2CfjOX7i0Q==","signatures":[{"sig":"MEUCIQDEII1zhP3gsO4DYb/9YV4XGT+Xi+kE/+76qmZreX9NmQIgCVSnsM9HuQIMUKN54wIP9JP8QlWMaiqz6hsy0fjLnMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8qQCRA9TVsSAnZWagAArugP/RrK04xbnWMiGgl4+a3f\nuBhEvh4Lk/MflcYNJFxT2mfKqvrhco/LWkmL8hRmO8+BHGJ686obcsVChWok\nBj4NvTt6r1K/LND6Rdi67yKhuFiNZJG6kt5tYmraSy1yvuV8o0IWoMykhTBH\noWcucISw/9Y0L6ngfAmaJpey70qGxsZ41Xc4LnDsCug5aidOreLcxW3n5jMp\nxdRPM4HN7HwNWagjrJKa/yhbTZomxdmLNdxSpXNmc9AafQ7AphCHkJx+ufEA\nVmmP1HQXWQLIHv85XWOchU8cDXp+Q9MbWr1g+99yhpJ4OMjy80xzVQbM9uqy\n19AXGxrXZqcR+WR1Irzov4cMmecVnAX06a1McrjZ3Z/18wNmjZjIIQQ9dwDY\njql3kwBeKcczxs5MrRrbKTqd7IHko9YrNpcKP2UC0gRM3irTQ+fC0iKQNGj0\n3LVsWrY7AYIR8nrE4wJWqb2/jLv2Lv0wtGOvmJiNX15TKLeNrFuqYhA3i72E\nAvHP/nwkHVWD/eJyWmSk0KQ8ciTJakcsdZ0NlqW+/450YMPMSs7zQsxrdPrb\ncXiG234boIvCb9AUup1XIZY4b1iQwJfGRuiDhp9cHuYfBU5gCkm8xYklSQro\nIykKn5m/nuH88A5e+1onULCisKctkR+856uPRJ6zo8abTMOOBq7suLRwIPdv\nEfun\r\n=YR8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/theme":"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/line-ripple_13.0.0-canary.1d19158a1.0_1629997712654_0.3948578236618565","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/line-ripple","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"105e24d4a44c0b94205b73d133246949ddd08a3b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.6adc9e83f.0.tgz","fileCount":33,"integrity":"sha512-jbZNr+VgHoCGPlzU2zhtGBEXE8L+G7nSVwKfUUHxfvXDL7UdHa+jNh9hr2lb2a8eRm5YPfzwkWuueCN9s5e3JA==","signatures":[{"sig":"MEUCIHKpdWUt8KiFwgaah3e2h/kDtGwMO8vaKyliTFLsP9REAiEAorN9zYX+HYmyvSc0GRWAMj+HACi+bZTwWBgs63+MP18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV8sCRA9TVsSAnZWagAAN6EP/jnZWXYAqe0oRUC6Sp8Q\n6SflrjcfCoBKDUblcJzm/EJqrGTn+cocctTghIw2qTlPwaxrZHDH29N/dMNA\nsgY0XdF1TKmNe+OAecZrwWgHi8L3+qSgrvxBY30/ukonXrNgbBOlnI7mZmuv\nqv1GfVmrNRlgWjTeJf3yZ5361qEdQkxoJT6oCJUqcoQPITXa2XsoG2lI4hLp\nOOJK5ZLB6IxAQ32j6r7ELzwhrdAP9pXxV1msOJ5vI5fk46xIHyd/+36+qTKR\nG/S1r4gh+T28kJG86fNac/COka5YdsKWBAMY1eBBVeYX+67CVBh7/R1msSSC\n42+gHNYECmJzjr5P8qnhmkiBNumbDCPWrNFI+ZudYIBJBQ3cmqRFrWITAmw1\nsCtBxqPKx3dNqaSvAWFSVbjI8MfeaNUsgRRSs8ckPNTT2PKXdpnm84kekL2v\nlTw+fdXH02zcXcUtMv77hXd7UNob6bu5+IevarV/efFxMw3jWGYPGFLheiF3\nQRV3WC47IbBWPH8tp3iK9BY2G76d4kJ/u2SuOIvpKqiK9gJ4StpmGzBhe7YW\nIyCzHDAdExTIddUBx4D9BTa8rAG8TZtBX7T06iv9QonqAHqplKWXwdHJlru6\nw5gUAGSkaveyfkCywhaCmb1nj/F5OJvQwNHA71Sq0kV/zarGsrFPKqCzW+Tj\nFnSi\r\n=7RUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/theme":"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/line-ripple_13.0.0-canary.6adc9e83f.0_1630363436393_0.7039802248236031","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"50381468dc3473d9178cbfa6329645e4a100162a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d082790f0.0.tgz","fileCount":33,"integrity":"sha512-eVrc5w4j4csCd+OZvYSEZs4ln0fHC7arO2Qzs8U4BjF0ZLCvrAMSr6jcGW14xRE+jHad/uYsR1QoFkn9Gl/w8Q==","signatures":[{"sig":"MEUCIHJtywV5wE2tDoJBRLd8F676vpOQDK8ST34WFmLV1QIrAiEA17N+QwE/VvdWszRwTxurl2zJi4dMHfxZ5NauZCF6FQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/Z0CRA9TVsSAnZWagAAkRkP/RDgGUn3Vwq13II3MuQy\nWuQ0IB5sDyva5IHxetElAPdGA97StSWw6z3gUdq8p7eHXaVu12Gbd2ZZ9GjK\niQOxzxE7clmUNHvcvOhITV9Nh0CAAn06pikQoouxnd8PyEcnCpHCQtCx5gtm\nIqsB9H98L5bGbjoSwxbyNb722x1wn1x2vJkLFZi+r3WVzg31aGkcyTk3MAhD\nmpkd9oAZKhlwU8ZW5QaaUNhCu6dLAwU0+Z0oepcI0edIPxUGPdbHEiITlt4o\n3T6CtHYtXgQKV7Uyh/ywOODhUaNpaTF/gKCEJj2ExFxjbcufUmcTR7DsnmXC\n1SzN3zB6z+QxGyHL25oGCGp9ABDFtqzI8wbMmiBnV6QTLi0CTL+FUtDjSwhs\n1ko55qLJRyMzI/l1xqxHPkGppUrjJ2PeoG44OSq1s3WkqcF+tm1nzxiUB5gl\nbLp1INL5bZrW64cjY/PhCFa/PxXLVj1MB2SY2hoU7jy6DXzYnAQWn5snPDwP\n2yHo8VvpYGBVh/kmLR6HVQqeLk9qwI6qnHoSXDTUwan62tIg192M+xy0TxBV\nyuNJlJiH3Gmq9NArkjU4eg2iSb4qDq66uP0UAHTfOXVlLCveeVyDN7Mt1iWd\nRFO9xE9ogOrKWzogjuOWVzk82gRQ8sLDV06y3H6UMGwkieqthG7L8VSbDIHV\n/URf\r\n=70sf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d082790f0.0","@material/theme":"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/line-ripple_13.0.0-canary.d082790f0.0_1630533236349_0.8030435129604423","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8aa06e6e1afa863094368c78b796783f572dd5a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e2c4f0196.0.tgz","fileCount":33,"integrity":"sha512-NTgWvCB1Xli2bHHzIAMLMaHPIntEoZUn4qIhYE61IOSGNUNrm4OcCfTCb2XIW4OL4nr0GCEnbPpG4Umf8HL++A==","signatures":[{"sig":"MEYCIQDMH+zeZQ1D8WvkPFRHmoxifnXj/BYtq5otZGQPos3dywIhANwIh12A4MVvbXSmQL+LkXubyW6e0SjiChP+1TCVn7uH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDKoCRA9TVsSAnZWagAAg0YQAJt5CoI9dEomZr/8ZbbL\nNt0BmsSn+hsk2y1+Pp9qqytdjR44JuHRwNApGnZRZlw6VjpSTJXsYi/LDPln\nDknrwaboPgvz6NiSqLfkSO5nUN7LsZ6n3ICwcZeF9ZCiPstpXuBUhZ0yX8sO\nygGoisQ0YPgBgeass/2bWcQKQYp+4O3ISw0OVUZzUJLMTttNwch0my5eFhn+\nSb0L3eRa7mUcqfG71JlvHwEwFZbDJCADhY+brPXzbwKkBzHnygLQFMTHi2yw\n2AqSksQ3aTZg3LYOG768bLx7MEKlLA/qTeTfd4TThEO2k2aNxk03uwXXY2DU\naQtJyoVuJmwC1Db3HogJmJWo522WnsUYcWCAwd38WE9XQW5GgBSQxPi5/vR7\nE06vOOhwTPArkWRBzW2Nay0K5HOXCYik78eIAN9cHmxmAG56RmpajRhDBr7n\nh797AW7i7x+zkKECFD6BRHUpm3Vhe10vI02KY76LcnsDb597+iDy0srDxV+0\nv7LwAXDqhp36/4iXBKzwXJ0FcBH5ZsyK0cIP6NgQL7L0T6bEsy8rWKpOBiFB\nMLwa8PQsGhE/HmvYNIjV5RYV3qwzuPTlF/OTmVdXEpIsE2U4inA9ekGe5uJS\nyOnwi0iaMUDFW94X3apdDlPtQVbqn7z+kQPmVNSRNA9Tj7RhT2aGDNTnB6GC\ntyNP\r\n=/xk/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/theme":"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/line-ripple_13.0.0-canary.e2c4f0196.0_1630548648617_0.41801812807695393","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/line-ripple","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0e876365d9c6388165f04cf2bc230bf96eaf55c3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.611db508e.0.tgz","fileCount":33,"integrity":"sha512-atQlQa/Q9Khk9N4i6tGOraAxjatNwd/+POthgkEfdUrIYDwttY9fqJE1V/vrkGTSKXVXjmwEPkNEKpPbn/c4qg==","signatures":[{"sig":"MEUCIEjvPVsaFqdVx5eOUyoYir3J8B7q5g4KREBO9EQ9QFJhAiEAlY56s5ysbWZV3NyN1TFBUkJSDV5nsZhCdDIRS1UcZBk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEGaCRA9TVsSAnZWagAAWUcQAILftTEvQDXNWaH54EtL\nu/ulWUt1p7hyXoXEjexabZz0eVTfvNMooJFWD8q6yACVftDBe/HyzNA4sL+h\noBFdf2x62wtRzvjlpfwtaRI91f4F85L6iyUn1sBRKCbgMAkTfj8lVNp0hs2v\nA+s5lH+DbBBoTYB6zd5xmw+ozGkL4ePre2dVOqbPS56IayW9aaw+pVF9AHgK\n0UTLZtfnjV0W4wWOqxGfV/TxT7OX8d2G+kPi1I+AB8bVSywtd0TC9iNo2wTz\nf2K/fmvC6cUU/dgmr+0BrdUo5jTal+pe6McUUjLoUFqFOx5XSKBnPs3TlFue\n3kZLwgyH0ykWuIXK55GXzSmRbWg9qkiM0oRCYGWuN7y13Jh8r4uN3XxABfCj\n1PipPPWt9bEZgZJFajOzJmA0jLES8hen2CAbPJu/d6FWwKBVaM5gYmB2SlRZ\npjIUiZFGyoOA/DS/eDA+K/AzrCLmt3VKiBg03oDDzp75KxJ1vawd9+OEHdAR\n2rqfZz0MNfmWzVrbJzOJw+53udq2XHRz5kkvy4gAqiT6Aej4VkOwaJ58zPV3\nZXmo/YDLdI/w7U22H2IivV5R30dxMbBjsZuqIIMQQ37FUdPQQVCUNjTucPjm\n1OGNfnUfYmgL0EtCzGntV4ag8FrqHCAr8UUploe6ulOHhQZc+ssC1dWWZka2\nGvUO\r\n=4lvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.611db508e.0","@material/theme":"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/line-ripple_13.0.0-canary.611db508e.0_1630552474317_0.20779679024899855","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"65ac3eebbd9a85ac6ff37827b8c626c1ac75946a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d4706933f.0.tgz","fileCount":33,"integrity":"sha512-yQ3x73dSHa84MVTEoDawR4qnR6wN8yavJjDD/a3RHVtDJ2HmDnreThH6t0dMw1I8ABmpPOCVXBZmVnlK1TeQLQ==","signatures":[{"sig":"MEUCIQCV+6xFgJYrxAJSyt459PybP9vABtm48dgBtxpUcsjWRwIgNjMVYt2Zf2MRuycuDcGwrg7hil7ZgO2zj5AUN//kk08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMO+vCRA9TVsSAnZWagAA+rUP/2uPoNDSk7bhJF0IrYzU\nXnbUHKFe7OBfIu6VIxE/WFqUiGggvfYm14vrYQujbNjTYtVSP8DT/+ZaJm8d\noHA4Bucy6jWV4Y0nAhB1TBcA8rvm9kn7zM5L8/XLJ2J0lCAfiVPPeQXr1cqA\nh3IZaHxBK4yqV46NHddcWwxT6dIOdwIiTNVAKCWcTQWIig4nT6tmadqmnsE3\npHqaA2qptTQgl1OOcDUPEDnZku0LfvHAhzFE3QNzpvK9WdPFXBBtjKAWCXxX\nC5f475YbaNof24pOMKvg1RUU1uuV1VFQg7QnDPzttjyYvgBS9yXsrnKraHOS\nvJj30mhNocNQ3mBPeia7uVrmcLR+zzcEIqKFmN/PbLt3hj672jwbOO0haDGX\nEPJds2Dfc3i4p0ZXv1oLLYSd6Bu5b7T1vSaeD+GLkKo1FoYKA+Tw5kYNzhPI\n2nC6DO/KXjWllcF9ujOIczIYC2omKJUKJOO12Z2BlXoGjgRLg/2Ngb/+SKQ5\nyNRGwAb6FTxc3mMFUHMhKdqJCnnp7r85G3aLCtjtm4HlYVvk2hwMNMnc4UJZ\nRpgFWOAvcmClA96TS1eW6xiup6gK6G54PrWFtiopLfrBFY92b1UBsugLn3cT\nAPCqEGuz8wvRygngM8q0rJ6YuymaqEbata9X7jKRxxUsI6W244H5rztuNUHQ\njqNE\r\n=Qtq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d4706933f.0","@material/theme":"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/line-ripple_13.0.0-canary.d4706933f.0_1630597039084_0.2603686365200111","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/line-ripple","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a195ecca38ddb76fea93180406d97d34c514b59","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.c16fe03ce.0.tgz","fileCount":33,"integrity":"sha512-6KzYglSBmZhvv/31juV945U+qiX1nuASqJdbMFOwIir0Q+/4BUoh/CVg5hb4SltDxHPCg/YSmd3zqBOpMjP28A==","signatures":[{"sig":"MEYCIQCCpeUWtR0V7q2RihxQ7Tjj2y5ods8zIH3qi4uUfJysTwIhALac08dRhtDXRbAXC+b57ZhrH0tWScAEzg6WlMsdiHoD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ11CRA9TVsSAnZWagAAst4P+gOcYFgSCv9S9XVeWMDZ\nadGEHbUnuKqo9ztqaLcHNup1N48yIgCsObPS4U0AU4AojNmFEkYGNN162vYh\nQjsknqjN9VZ34GUwyKu4Qc+xywwkiNeyayGxy+RztlX94BIenQaGb0rvJ4cI\ngFpQpUQUWpHUAS8IGD7fcWAbxTbMWzxMjC1VfcZ6oK66vlotHtT0u54bsTzU\nCbNbenUQrqsmBv4vFNKQrOZAxK70RITTx8kfjhUeE2sC7pImRZGAz4foZ4Xc\nDan01tboWr/xTibG5Ux55EGtgA5I9Fz5BdPHeW1vEwecc8ckFBhly89mNLab\n9dUbo1naPNQySHyJso9ZrNLeq1dhsM4W8NqrHMYbEDFRxRGokcP0dhdajQnq\nHXNhpLGh27VWNON3YSxhOQssEBEXqDjaGd4hpnqkOLexCQLpPYhd0wcldeW1\niIwPFzSUjcarFrp6Ro7l5JPDhD8M6cAvLxAUp8hzGQ4BrHAMvANThC8PrTJj\ndOJrvHrRFiazvpQVfIKzSJWRz6xgqdvss1AObI6jPfl/SGXsJ0yr6nuBrzJT\nXPEuIogZMDT+k+J4aP7F/HNXFnzlFl1qNr3vBVnHT2ErkUSUcHhwkBLiBzML\nFbomWM6+Bpy2/TJvnr98GinUzDPW+oRLql+oBq1py1gR0AuxTLJWef0HEZuH\nCnrh\r\n=F0dV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/theme":"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/line-ripple_13.0.0-canary.c16fe03ce.0_1630604661181_0.7943422947638652","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"51e415655e7bf1079863b3f4facd81f966fa039e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.9203a958a.0.tgz","fileCount":33,"integrity":"sha512-ehyKjS7rTqlhMCEeqBtV1FUmbI+4IFu9GCN30hihe2XzB4uZKL24ToiZjcY2e+tMF00CnFu3UBqh2Ct2K2MbeQ==","signatures":[{"sig":"MEUCIEWxVlXsofW5an8Tx03405sBuS2MU2g3AmqV6NOaw0MKAiEAp7TF27BTDgyKJgsMwM9ee2O/bNk7T3qPj0J1hYHfA+I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122369,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWIxCRA9TVsSAnZWagAAIwoP/RpE5fPldWR37ANxDBPg\nUe0HepJlt+a/fXA+F+P3JVS1QmuPsZgdlpT4DrPJcZOwmhPzm0XLDjjgkRu6\nxgpFbeit/Uq6NL7Ab4VGDtUTnyR8YzyV8a5kA5cbtrTR2nHjyYT0UMcgrC/v\nYuwg9gczXyF6ahOEt6kVSfYCJj/Qqte3yb53P9iNC9+jVBbvN/hzbxgeENFa\np8kaDU5hkJv/WxQNFbNP1jmUZO9Ob/JUFtETvt49SHmO3iAy5iHjyYrxvUz0\nkDlGqyJ6SCx8PCZXROTQoOsRlCzxnJfe3UIjI01Z0qTOfbA3UoiekV/QGaAc\nfoM+OYGpIq2s6QSeVrCsxryysFcqDMKtWsUjfs8DYqfZupIvvh5xxwCrdg+D\ndZJrUBviS27q5v7ZXQ8SxuOmiMDtVhK+eW/9ysfVn+Z+t/MBhezAA3+tt3pY\n5L4BXBvfNVeROKIxgJK5m97neh53bIpLdHyYWMPdPDLmB5CkIg/21/seoV9G\nFcVV+mbqOE92mnS9thTa3pnxm8utNmZ/A2cbC0cwM86eP/qERXrJlAruiB1d\ngucXVxhAd9b4cniybt/kctgkKLozL22Vlyn5hBz5CaOmkGDNEJebfQeV/RoM\nXdU7OtHVLpXuykxm4EhLbMjx/zJnXHtr9Sz7QgriftUYYYbRS7VOoqBU+2Gm\nAv/X\r\n=Fy3G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.9203a958a.0","@material/theme":"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/line-ripple_13.0.0-canary.9203a958a.0_1630626353447_0.6456217110491327","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/line-ripple","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e728d390a30b8d1d43f7344d5e0d4e114d2d45f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.fddd5ae93.0.tgz","fileCount":33,"integrity":"sha512-Q/j9NoG9EmrSrbAL1wL8fQvLsOM0HDs/q3WeX85x70QB0ifjq6rqSSYcF8qjOCcyVK8uhRX8fMaiLGU8Q2mV9A==","signatures":[{"sig":"MEUCIB+EJYyPuIQpvwi+vkyp5rUOoTV/bLCKbd183PxBf0UzAiEAsgDFD8ZjUFQSAAFrN3sEU7mWw1An+o1d+n38KQ9R6e0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc7TCRA9TVsSAnZWagAAyJ8P/RIRF70krjbVE80/hYH3\neQ2X0QhGkMCD6G2rIxMQiqbDkNsb2gcCHG2vg53j3fcCUtvJtuyvFoy31n+e\nx4hknajixADXt5myCGWakeKJjUG8SARKk31D/6ZiSlJ6vbA1RsFBGWxIN0AH\nOPISVtXQ89f/HYYKz2AfwK3AdRfwex0q95rH4QmM2bi6DZgZZobYLmHbLLdN\nqcgldBEOr6zqip5l23fMfQuS7hdL4FlftHKMEgK63tVPSzIFLOP0gu1axDnd\nNDeAeww+U641jcv97VpwZXudTbRQ0HSCxFhMuttKPOnOoxfLwuUHYjnBGNN4\nqvBx+FSjK6bkC1+sZxs64NmY97kGIxK4lBSZzXEaRsh52NQWR22BzGEKm5Ph\nG3Y9wm7bgqJWZrpWCSS4/fYwXQVaOrnI1vk/RGYTrEwlSMTEWL2pTjbpFsqv\nG6vDBN6m/eWmhY6nET5RJi9TzBIEZ9hw4RWQet1UIoFfBkf5ESlybldu2rCo\n2pgsKRbIiaO8171EwnxEQmTCRRSxEkV324NUz5tyirlaP4uEKWb4jJIvOqBu\nL90uuNvaairaQBkGhYvu7qloq1cm7br4LTCzCEhSk62/a2fQYWbT4rCkCqys\nPq0+alg6Fjdy5Lv3bqdiQOTSsGHWhSWduQGfaeQCApBeOEKk21k0QowvCh5L\nkZg4\r\n=Y/+t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/theme":"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/line-ripple_13.0.0-canary.fddd5ae93.0_1630654163363_0.09644281235884655","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/line-ripple","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fc89818c6c43fda69023b5a9e0d0e504435ff675","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.117599a8b.0.tgz","fileCount":33,"integrity":"sha512-xj5t9QROrKvzsuQ7+DC/PMNIUy3olYInaa2vf+iZDSxmCqgQD8Q8ngiDvY+CI/VtIoM3/0Fy+PTa0bJKJiehOg==","signatures":[{"sig":"MEUCIBLK+u6FGT7ukiQQGR75Ivix6PrFBG+j3MufLY86nkMJAiEAysETvQI1Wtc+TtG7y+afeXS2MtDNc/DmbZR8gqSNvJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc8qCRA9TVsSAnZWagAAEFYP/361BWkeP7D6P1bX0wWN\ndkUljKZ7DZNMrc3k7CgLYPgDhdwLoN5khsxFgol2qeC+kukGvlPTWhMII693\n78MicT9SCAAGcCLES5WuLLNtnn7NCPTHyF9whlUqEEXe8JcOCAMrEDHSJIIF\n4uyYeAw0+1ywiNzGaQtTPTIrXGChNGFm9qLVpt9ed9HfuYJpL3OvbcG28ov8\niSmxiqz+MAvyDzRppueufhQkU3rgAr8w/qe+TWcqJTYqoyqB4ptM/4YSqg0w\n0Dfb1Lj7vddGXNf05zWZTm7pDtdEFiLbge9wPhg+UsZH2Bg8sm27cYAb3rJ6\nNXPqNJB/7BMBAM23ltGreJzww/M0VEAYkG8CeQsztZAgwxOgHvJhXvjLfx/U\nK67pCoUVEfUHVTZcKW2qLaFoa/NW5C1dtZyQL3cK/+TsOmoI5NRMegHe5Eh6\ngb/vjv/Hsr+KYWRN4MhEYZtHi61YD8FuYYpXeepAvvznTpD6nf8P8DfNi/27\nuNfzDvLB1nr08TH8sZ4j2WNCHnNcJJC64mRNstXRunv72tD5mzDeeL5FZFoG\n8qeEXxgOtJw55RhCKHeXN1E4pAxXCK4Z/DX5w5x9Q323D5RT2xVB2W41VDck\nIxcxAIVESbz+knaXMS/NQWkzuwDITmyJ0AFWfl2Bt0jtR8Baird8m9cmuUjo\nHHVt\r\n=FdJv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.117599a8b.0","@material/theme":"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/line-ripple_13.0.0-canary.117599a8b.0_1630654250573_0.0007766823679742352","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"746489ec4dc692356728b49a21392e9bb5b6517e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e4180d07b.0.tgz","fileCount":33,"integrity":"sha512-xDKjeRJ6bmvg1oq/RhpMvdOsA4C8oEIXY2YbyO5rvZIiD8zseV9z87M/83O/+a/cNeLl0DJrWodZuy2vEraaEA==","signatures":[{"sig":"MEUCIQCDCLKstPQZZrQ7s5d9r1mwymjV4zmhjUEUMYNO7eQ94gIgORDw26VqZGiNvDB2U+i+ZF5RYz76YpV0aqfFGEIwVts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9JCRA9TVsSAnZWagAApE8QAJnqgUDvaV7IHrO4HpO3\n+UjAaJR+H2A612kfshQqcomzovBkQriVvBing8eaYxhHxsiRxSyzL6sc+N5d\nrpKVwaDa+DLq+ZJ+aEnDk0yecRHkrAxL1Ik/tzYJKOyR58iy/YYsCFFiTvPI\nKZgCw571ogHCcFyIYET3g1vLrZ6/5cKpr0/+d2bH6C//ygDPWaiIwS1kgC3Z\nJjEQvJMNm73gOG7XlP9tncnIxodes4pqUuGl335h00PcCY58vfjxdpitMSMJ\nGixEYxsPwpf4VThcuoLcuq44qPmBRUKmnF7rws8XO9EbJYx7hqyBnlYs+8HS\ns+ZNXVEdFppIMe1hFW6zWFQiiJBmW213xtbGSxoYxGb5TgEmWAITO9IwMXji\nlpLI9RqEh+hEjPQvzRbeudNxMDJpCono+3HhNF6tLAKl7kNkBNuH8EmUsgIF\neX0lnC/FQ3tPXfe/c4tJbRsY5qyVu6GJ+RxkftpemBOCWEEQss/GgT44VPGe\nPQ40JWtfKkwhZp6lCI57awDMPBn87pnfdnU9H9S0fj4m5tr9Wb73rotHS0Ca\nHf4+JTZIAdLsxztHQpbfuQGJjLZbCtGDfTjmOAT/QEaiOg5t+c1WCk1DESPx\nU7rx92D+TEbdowhIx3l9EVE5BfwA2njREZABJ39kvPy+VsDdubVT8Fy8glWX\nD5Zl\r\n=Dtn0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/theme":"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/line-ripple_13.0.0-canary.e4180d07b.0_1630654280992_0.3406591045538183","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/line-ripple","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"709429e9e00af6b5a0a24a22d8cd5104be77dd47","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.42d175efc.0.tgz","fileCount":33,"integrity":"sha512-hA2xTbGemUbQpQKRizXY75P7nD7ERIg5VklOpSXNJN9mbG14e4LYzXTdFxewjrfIjAP52UO/fzXFAnoD9EKHJQ==","signatures":[{"sig":"MEYCIQC6Up4k6C3TVfFfGdnTuR7BMvaBpqDACkyOGWLT1ZSp0wIhAKsHTR5MkvAvDXUPsAz5BV1hyneRwbxBjcinkt4X5BB7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkJcCRA9TVsSAnZWagAAqycP+QBPqCKI84b+Sl0l7juW\nj7DeD5A1eBbc7T99GMGJauU+tzuDtB+fRl2CHWLUmA7ZxEicK3f6okh+BNeK\nIsDpRr1w2/wNiYN+YiJd++kBHbSqPTzMzlUxS2C7iutQw9FU+9vGu8uwbM0p\nt+TxPonGWrBpaYRhfXu061Y370dNGtBmCTdh9mAedFXASe2q5C1JD+dd9lAk\nktZfeX84P1/GFqtU/VcHH52ZGknjW6vKqHCtME+4mzIdV/7RahvS1aP+8tQ6\n1PTkYNZkXdsSjceKT3tka2TaUuPUITcEC+hU1g2DPrZJdqCUM/OSuLTYPHfi\nV3vtOHDVSifJcdDZXUBXJWptIHRs1jW3C+l01HslCa8RCD6ByHJPZ+cWFubN\nA7lXK8eATrBKqhkIjlkVzIgRY2IUS9u2KqVKPlypclPJt3TMlh4hydAHEYdQ\nZEzz8hSngzkJd8hhzR3BE/K05BqojjnT8qs9syiTBeQuk+QGJH0gKgZabClq\nVR51xOB1E5QynFkU2mB4W2Oih8euZJqphK+ArHgYcKWyut7rVVVJ/N1vPuIM\nLpS3J2IgJRBdO59EGp4VP+hoBreeWXd1Cs2r1FgvMejm9Or2GAOaJ9tPIQDx\n3gQ2TdCCnvlYso/8yasyN8rmimS0CRH3p8APGhjLtZXc8IBeJYz/K4ADUR1K\nKg0U\r\n=5DVr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.42d175efc.0","@material/theme":"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/line-ripple_13.0.0-canary.42d175efc.0_1630683740406_0.6960775608033891","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/line-ripple","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bea0e7453f10efd4c37ac0feca2053e2a7aa4ce2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.72464476c.0.tgz","fileCount":33,"integrity":"sha512-JfBxzf7g3EZvDhv1g7yjhuYDPaFYQl69swpsllHWZzU/AHrAEaBlyiLuelZKxJvP6zE+jv/IPFb5cW1+7NGjxw==","signatures":[{"sig":"MEQCIASvQoxamm1bDeWm6gHwtQGpqwVT3sU38mvZX4a/wD55AiB8Y4u99DFi/VGOy5XozQk8/uXjesbtqvtVgDjLwnx/wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4ZRCRA9TVsSAnZWagAABPsQAJ0vKiN/oFHmc/Q+6wld\nUevIIGeej+G0G7TXI7dxiWAgi10vgHj3QJ/CxkznQv9qFX2dxyRCburz1Ub1\nwbPB+3iGKyat9o+HHvv7rKLiQq9I8cDfMyGRCP60WssD807pOfirsUhLrO3B\nQA4abO0BWnmmXsS4fJtcKXgx77UnCrqs0anZMPUK1WB4UcSXtXPS006resvP\nECArOOAnVauwhCYpiUU9q442BnYVTnsg0xRBwGF5fLuJvGZZYmKx3P1cLMJI\nPh7baaHCJsQyJy62T+0tcNhLQyC6oOU2s3d01EL21+EDqkIc2O2qh+Qjjpl6\ntf92B3kIkUjHqCmr/B8hoR3T2tJkJdMx9bIwpI/U0Twm0ky0gwPLnRjAXTWQ\nZMbsNRwS/0kKd4RUi6sAISJbBHFYXbOMyMdLdT6+lC+W0Z0A5UGJuYB5nJR/\n7T7i2y0o5I67uprWldlUxU1lbPCaXiISIL5brI8vSqdlN3nH1q6ysZq4INCh\nSOZ1njEgLV0zauln6zERGU7XrxbYkGvz5d5Fql/cwsC7XWN54mJqo8+ztsdF\nCp9t+XwFetyllpwf7ANcevAsIe3q4Bxn/3P9+M8vAVamJuDQuC8BkF4zczRz\no60xGnJhnTLKb1RQumc0yLRoOj7nWbKHf/fz7c1/2Ub/P28JlqvHEliFkprI\nFCVA\r\n=bCCP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.72464476c.0","@material/theme":"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/line-ripple_13.0.0-canary.72464476c.0_1631028817452_0.8152738693102304","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/line-ripple","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff2879d3abfd5ab0c68d95b0d6f46e5a97163ce2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.37d4db866.0.tgz","fileCount":33,"integrity":"sha512-Jl/xo7Q7DroHvuW4dl29+n6GmNaioiWE/wHGZcfjxi72HDYaeUAq8+Undoxef+yES7qHIXs0AkyQjMLjtRHg6Q==","signatures":[{"sig":"MEYCIQDUwu5ISpVqCTR/9A3m+oBjIaHmlLh85qtsiBx50yhYtwIhAMDoJQZgyx+NT3pdCZLewxMSTGFd+5Sttgst8qZDTK0b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhsTCRA9TVsSAnZWagAATJ4P/iaWmUoM4e1dxWnjJI8s\na65gGTqHDzUgVSOGGVX6nCiTn6EDKferDaicD/HGHP1VzbssUn5veVw9l0i2\nAvHFlYJLY8oHNhvsJnkINof6P/6vlHUF2Kt5MbQ9VLCJeKfSR8a63GcJYr40\n2VIKaHCu+R0p9uZ/FGauhN7HXbN8PGcEk2SA19fLpUPdbN1KcxHdY/FV56vU\nedHRbJWdIQhh/fkGyZSavX7VgK8TjzapaGbMDeSEk6ANjFNDmZahXywguFFm\nLAaB27VwaD+DppJ6rENkPuV30oKtf5Q4uPDnNFPpRZdilCr74Aq+HocyiNW8\nFERrRsnrj7b1pPIm+lwFVPLPo9kugDh36rUPT3bQ8i43MvrZVeI2aeUoVw8d\n4iQd89HWVkjLyfyV92K08yaBkCdjxGQrL3eJi6sVnvGGLeOMK6GWxbabJEMa\nQDL8qrkmNEJACGAwvH88eN5VBTAu8LC4mmWAE25GNZZU/h1teWnCTQNMGVLV\np4vgXBBAn/22nutjxN8CdpUbluk02sIEpu4gbJJ6kMJISRWDOU7pc6BN9ZcW\nPm1y7TwPVcmKY9229Z8FsLxvOT7By0oXFTyQHO57zr894aWRyB+NxvXOew2Q\nUFgSnbp7URljuM52jYk3PnPud3K7hEF340b9obp3zRSRp5XcW50kAPbBwyxJ\n2pyf\r\n=vxEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.37d4db866.0","@material/theme":"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/line-ripple_13.0.0-canary.37d4db866.0_1631197971109_0.7511048762063803","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/line-ripple","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"16d9790f3eecd5b65911ed75d9a82d5021fea450","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.6df682e74.0.tgz","fileCount":33,"integrity":"sha512-/gnaejMZ7UzW/f+ogtDDYxDRqC0wkJs1+hvkzN7NCEqVjjJIk8y+YI8L389WCm7qNPANUBzMqv5rPn/+0dZOuQ==","signatures":[{"sig":"MEUCIQD9dEA7B3vNLwGEtJ5qxrUVug9xcaP6PQ241A77jAs7sgIgWJS3l6fK6mJsUEmRAIERhGS7UJSPqnW2nVHosglv0I4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOituCRA9TVsSAnZWagAAQ3IP/A4jOzH55kF0Mnb3zal2\n8MGsYe17HyJuFsutJqTQXHybIpoXxHCJlSCxYjCxomFdkrXsl9gr4y4E646q\nWB7SeKBAIt7UzUKED3cT9B8h+d19QvcskJYuKn9JTFPbQhjoulkXyIKuQqvb\n8CbbukbnZMj4GaUkfbAmBWPFHylF1KkydK7NOvO9fkaKbElvdvoXZ4BU9LfC\nuNQQqKkfZAfKcZlRlGo+ULuraeNxJ9ztJ6dLA2vsvpur+AxEjIBQvnh/vK2e\ni16knQaC2vXdvY9MoWw1SAhvwHWnMnbTLlOZRoihW8mvkiW5oSFkh1z6svja\n6ZQB2yGCzZ0Rn4bwUswJp4u63bn85OKypCpCVBagaqON70Xuvu5LfgVq3wmc\ncmD96kcdU7ar9peePI2sYWll/nNqad0BzXoV/g0Z0OY7JkoqKyOS4fnys0tw\nO4EjOGkzBCj53HtQy8NqCZd2rJLAoANkhxXzAs/zRM76JOOAjFe1DmYrh93+\nkl7flcDbSQxw2N5FPIS3nZLtbFvM+MTmcy3tBra1FxW1e0mn+N5khV6DKX2S\nVc5swF2mRjzm6WfcRC8YkTO8up6qT9mgCMB8PTTxsf940uy50iQYLyZ7e2/b\nUEI6efqIJyqsb+0cs7rY4/XYgWaeWH7CL0N4Zy7Wes2WMeZyl7YpsAwABnf5\nrYpt\r\n=Hzs3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.6df682e74.0","@material/theme":"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/line-ripple_13.0.0-canary.6df682e74.0_1631202158413_0.26264278136913566","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/line-ripple","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"046c57d7a87c5a8cf5647020c36b53fde176da3b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.b49359c35.0.tgz","fileCount":33,"integrity":"sha512-HvmdFgYXU5pyC86Z5oiwh8nQtpcO5MN3KpOnIoM2GBUuGv/Y/3rneKSXiv+IPnprYLlOQqiJlVvkj9SO6pKFfw==","signatures":[{"sig":"MEUCIFviAHDZc/QgboyzIX5GRWZTMZmb6xqOXjo5bMS0RQh6AiEA5iS1Seo2hCAX6iKSx0t6rWA/tpyu2AsSv2EYg+bEDHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkXCCRA9TVsSAnZWagAA8n8P/ArWXGFCs8RJmKyyLRAo\nS+3bSMphN+PdNSabtSfTQUit4nR3DooPzjBh09Rt3ajpQwOPtc4Oqqd+5VHw\nZ2XOe9+9RBJ3e88snq6ol6UOhlbruCysMbkKJjVhdR8cQ3dyFK8j5oMfibNn\nbafgYm3DbWmBYvadhsnDIdEEscjdCVDPcszmtxeW2qOjLqiAQ0T/n1H5ql4D\nGu7Sd8ghMHIV/9TXslHDNZkAmliez9Lr8C4vP8rt1MDhxjgaZpk9/DwxOt1f\ne2G2L1atqaj7vz0cmfqheKghCsbN6BsgFj/ghWiISER5FXeKwFMst+X1FNTQ\nRwaM4s0FTivZ7bqRzPu4hXzziLh/fOGs6Y0ced+7rufxjuEqLHjpdH8j8g85\n2KozyqT4Jsmx4yuuvEPHAGqxd8wDW4aItTSpNQz/Cxy22ENvcRUQk9QR6wyN\nTpZDXVAaUm0K7kZwmvcwz5i3xEXmAAoSPuRieb22qiXGVVHeRmFhQuYZ0VAy\n24RH0kvlWoY6T7ana001eT4nBwNh5whtLhTyt00YFs3w6FqLiq38Hqx3top8\nMRuf4f/hEpN4D77k43IgLNPcvX6A4oOGVFiRqQyUYgyRT3ZBbPSTWGA4Ei6o\nljvYtf2AInj9GnkSv7txHnfAcZhs+9LNajhwS+kHpP+OWz6n0jv3z4ykxt+/\n/oMH\r\n=jYgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.b49359c35.0","@material/theme":"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/line-ripple_13.0.0-canary.b49359c35.0_1631208897848_0.8107878390974705","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/line-ripple","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c696b30630c59c8458058046857d03eab2e47fa9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.470bd34e8.0.tgz","fileCount":33,"integrity":"sha512-QkCwIuslmGIysTfWlGwq9FdAgaS1rFO/pWmgX79KVzvckbTGm2yCS18nqtMqLC9UGAepeZ1sRWdan3gNwpetFQ==","signatures":[{"sig":"MEUCIQDeuIKXJznJ1+xPMBfyG/oQSFJmS9mPujQMZ5VsGOKEnQIgCYStb/1zram5B6yyXqVvuGdqnsFxC8ipSkPoF+hYEW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOku5CRA9TVsSAnZWagAAyMYP/3GQ3gD6IxND055p87Zk\noxbfgdERn8sybB3D8ExZ9sHLNN91s7NyYC5S6otv00euILBTACZfQ9UqcSQo\n02pAsPRyxPXOGWSd0TZSaMKM9KrmBqVWIE+yIgMXC2R1EKvPGcy7Fw2F18Oj\n6KXZiMpAm0v0aWTNM0/m8Y9PWsZiOFA6ygTXC4Dlvt1X/SfSAiDTMxQQBUmn\n9bPCQkkZkQKZkghTB6/5CrjS3FO9nZZNkFDKTP4czjJSGU9rrByUysF0Oi9R\nRJSc4LgCxKLl5g5QTo7UVAqGU2BSgXf6gn5ZWnIHsvCt8GPOUFH07lFXcICD\nQRQWt4wDdRDrkNqNKiH+a3QKUEGI2GzFdX970sxnFvcbNQjzMJ78Ddd9Xshe\nvQmxeysl97MsgsLD58SaQ/M5PWKKOmOIPrM7OZgnBvX/m7L8MRyXvF28NU9Z\nijjrIi1Z5ND0oe3a/lgNK3jBUHb6okNrtgPyhVpj8gvCf6IaNtJ4NjhERSjH\nZtBErCycZ1OXJj7ucopVcU+aHmlPzntmyt/xJh2PBDlqydpWnAtL/W8Oxwnp\nKMsB7BdPKoyM6C7huUaSoYP/penttB8XVtOs2gP97i6JeZ9NsWUqJguBXaht\n6NT8Gms6Fc4qQ5Y8lXfCGOZxayW8UeLVDhD2TuCl54b8gDZ5HY2Patqtrzsl\nGLjA\r\n=jX1N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/theme":"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/line-ripple_13.0.0-canary.470bd34e8.0_1631210425794_0.5128815770164306","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0c322cbeca5b8e09c760df0969c59b6a76d957a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d48a01771.0.tgz","fileCount":33,"integrity":"sha512-rAulZg4PLoSs9YyJNrPnDaLns53AOD74cnUx2Bdae2qY3u6fPGfLEjFZIzGACqNkexfsgzjAAOkD5k9b9DU2Kg==","signatures":[{"sig":"MEUCIQCSqtHJjmWkS2jleSQsP+BOp+v60i61+EA6lCx5DNXPUwIgGb4kW72GrzEfN7gHj1fcqJlXefIE9zxCGcAxemt8ydY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk3oCRA9TVsSAnZWagAAdgYQAJ7MKqfsbUJyHOAJpCUo\ntwRmPukCDkmSNhLL46VtpQx8BSUQponePxszU7B5+OZZH7ZsNrFtVmqFzSdW\nvDPE0Gt2RricmLsvyaWUW6r1TdYuxMy+hNhKIXISbIH1oAWM4rKUs2rd5PC0\nBGCEeVnpzyTnexYUA7NbR7dEWThtYLhh5b8rhFfWA5MMWNjckFSWwpsS3iib\nB+6wAURGNS5Im9Y70w9ouwYXM32gRN2O9qHumaOARPJbX45h69e+0CAsba5M\nlZjVYHeqyIdV34T6knHSqHcZBhzhB54PMjiZXvWp8MO4/nqkSLjHZx0yb00k\nNWR4/o8eP/KJYyZUCYbIPE1W1Sk7oOsioUpHQrdLv8uIQwqnNDLArXgEPOVm\nPzT985B3oQ8bWl+DcOgUD54lQetdo6H5aQ7isSMs6oYG1ApJVvS7/VIVqbAX\nKq4DdLLkjpqGSDp2gd43l5s0z5Eyoeg7a51BK0vReu1vmXrSbOx2FjnmYweS\ndPRxRHJgPLMGtd1MtE5lcybTZCiJGFJq+E8vE/Owbapg22mpoTvBBRyC/0bi\nrCFRywXl5ZoL4u+d9vE4bZw7usLP3rZVy4iu2et+RKjMPIM7SaVyJnFKUH7W\nESnBwkrUy2368JTqvH2B73xOkoHwwM28xKTU3W6orgf434UJDJsd95YW5f1r\nXtlY\r\n=Uafo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d48a01771.0","@material/theme":"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/line-ripple_13.0.0-canary.d48a01771.0_1631210984633_0.41735386493429605","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/line-ripple","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c46f8bae6517efff4f262d859d688eb3ba318cd1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.13db34b34.0.tgz","fileCount":33,"integrity":"sha512-RhAobrZlbgnl0IqLxFK+Ro/7d62SxyhWO9/8G1AGp0BWM9l14+ol9arEdLd1ocNFHjKddXm5wEGYow7Dpv7U+A==","signatures":[{"sig":"MEQCIBoXHSjc+rgQvzMGzeZFYZD3Oyp1DqvZvP3YiWU+2THgAiAmdKSNlG8Td6m+8NIJIaoh51kfWFOF0TWLoccrNyj84g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlFuCRA9TVsSAnZWagAAPisP/04+qQQzdz1X29TqJVhU\nzLIphwptI1g+9QJoVcb5s297wG6Np3zAxre3k9NeNkEpFMdxir9TsDIR76At\nEd3orjWtbP73K79FA/PRij+bB1NXzsHZ6LiG0d5RNx5iiPxrj2QfsToVJnpr\nNp1irEIU8lCa0uoT3avAsIa6tpHivXtfSoz+0B4YtryAPlkfRLWgl4kf/kOX\n1fgvc0OV1vPPjbfycIhHVYb10ZtiNeF+K3ti+hkdKCGlN3Hny49dOez44N7C\ncNPFGAySYjHFmTceabABs/Cq84e1cDCR5IkI/16FeDExzYQUf4MZUZDoaG9F\nEW8cinENMjA2z4RLyjR8PItBwAwuc3FZBnkydgR08dAsYEncyLcy1Citrs6Z\nmw53zSRdc90BzQI/PhiNmDQqxocphHEcO6jGxawWZoUc/LGaWJ763EgUDTF4\nGc7GgS+cpRJwmG08Pj3WfOHzDamBRYexZ6MJ2dRzlF7N5SYFSY4q37GQM+ov\nC82sV9yDAYcQeBtVS03IoJARoZHNOj++at8D3XCQTRxiBqT0N8aceaSpjlHa\nVKh6i0XmPETjBYyQII397X8BjlocdHQGQZZEUyhTtn3K1dxuZmV5kfiUMKan\n8Yt/io/p/b/T9f5LXFj4ZgFB9c3WPYeBBqNSiOmQnTDp7RH83rpFkaIH2edA\ncRkf\r\n=pjJD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.13db34b34.0","@material/theme":"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/line-ripple_13.0.0-canary.13db34b34.0_1631211886133_0.05160185962331898","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/line-ripple","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa42d550356890ee8be20f1c368d3dbb98603d8e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.864798678.0.tgz","fileCount":33,"integrity":"sha512-v9AxHBPJypqGkv2NMRi7vaSEB4TiBr/TgtDdlLPoKZzel23OX6/WaiTofnMHg25k4lcCxbQHBPZZ/jKDJZCL+A==","signatures":[{"sig":"MEUCIH465y9ZkYP0Fkle90TGJC38xhydQcyUNERH9UbtOkFLAiEAq0pbK45mx11bsCmiZDEoKUoxPVrtWzj9bFn8cmIcWls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlQbCRA9TVsSAnZWagAAyPwP/1rNh4/c/+O0h2kkgL62\ngGGNheprY0Fop3DnW0+V02WuFpqBWMzP5bpfwXvFo6p9/ebCzhTcvRdMR+fy\nvqSdK8AbGD6k4sFnACVhy54hmLhx4Vta5ICKnQPUMw2xkSHmshpe52wzZhBE\nDQnD7pJRTb3T7H5N4bid4ECEOXY8veDSIl/Cl1ofz26G8SMxZ5ji4qWe/Gny\nIds2uaIXwUuzpDz/64sShsRQM0wGEyEWFEWJ35yhNX80CmlA7HR7Ej3a+fNw\nEAh8f4r4K0Q/LVRu9FqUILP2PYYO16Ohp/Vds5G4lrNPhILOlpH03XomAJH+\nqdhvKiwzN99GrTRqj86RC0EA/JkofvE27/kjMLdqvIjrIEoxSh8/oO/o+uhc\nNkrGWCFNK6KjvuAs8JVrYHL4jfEDTEyWJJ6gYUeSwud8jgvki30iUSHMo3go\nNWtNj5dlmOGkiqdg0qDm44V2QkRcCEXlM4PY+mzRLkU8a6VI9CfBU3NQyquI\nrkDK/xm1bNqCMz+4I5+wblXbSoRG0hzUdh+FOZ/PunsYDHWEzk+n0ofsloT3\nCG3jxOx2sMf7kgEiO23DCF+BD8PtadtugguCRXNTe0tyixMk+FW/xOTkgjAx\nhA6UqxRMc1e+DJMt2ZUeTWQDn8keb/ImIN5K1f7w1lLHJaykuKLSJf8Iyzvy\nXdiE\r\n=v+lQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.864798678.0","@material/theme":"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/line-ripple_13.0.0-canary.864798678.0_1631212571733_0.3048724427419347","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a00afb6d627834e0371a0635921a7eaa8b97521b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d04bda3fb.0.tgz","fileCount":33,"integrity":"sha512-nh0xlZF6Rd+bHJxHlYkjoptA4iW1uP/r+XBNUbmVBtgT1vrq4VUApb4p38BT9lyIVo7C3xadzvuCGWs6uXVSUQ==","signatures":[{"sig":"MEYCIQDL3YJUR9NE+pklPeyemqTDDxvXPtC3UFfRyXHSf7AlHQIhAO/CLLaGIYiSSlABq3muAFEMHBNX0Uzh6fKri1q0ZVwp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3fZCRA9TVsSAnZWagAAwcAP/0tEeftGUSSl5HEOcUKC\nKMVTEFikL7FQBK/1nphUTZBdLmlJKp5QOc2cIUB5yr3Q3LQq0daMDpvq39tv\njYj4oZ4EdBMbAWBmj5Z9su4dbIzEwjWYHb/bzPhp6C4dR1tO1DzoJ/LzVv2S\n7gW9yCDhe7jYn5dpI40NW506QaAunv7tE77R8Llc53t+qfUcp7KBTRAywGnH\nvub1kiIUiTboQcEGt3m/0X85VGm1tkeNJKQT7LnXigp6IzAZxG8zHHojU5zC\nXSEYUp4sqXPxKRW18hmmSnhRNZLZqP/OEuTTnbo45RBXm7bUkGmy8MWB95or\nNStbMK8/m88jZYZGRNmiXbPJK+xZoKNJosSwr+Dt+jWAviem3H7KH1NjBO8s\nVTo+aRZYeccfSyH+L5MJn/esT92u6NFPwiMZAomWSKSbGJrHOiU4fi8EJpEZ\n8b/cS0bRap2cCN4o9nN/kXLvAW3UF9koeGEzRFGijel7DoEzAhoo/pP8Cg8M\nWwzuYWFL6HnUZ6bHiexsLN33vBwV5N+2v2HUMGDRBCxz2pntvfVVTVGMgY7K\nKBlJgB2TFccErvoc0CJImbiMEfzq0h6OqacWkh/Zq5/L+4LppEXiiFiZujkh\neRL4zq1/l8JrAAsddlJTiLDKH3y8rmIioVeDcf8opv1u67UmFIouRJeiKyQd\nFaaC\r\n=7LYL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/theme":"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/line-ripple_13.0.0-canary.d04bda3fb.0_1631287257058_0.15514552423629246","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/line-ripple","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4613ef3e6c78ea8784a1c6178de6792aedd096f1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.5533f73d3.0.tgz","fileCount":33,"integrity":"sha512-TJymHeWPoveziABVImCXaCt4RHzO3+c+h8GkqsLrI1HaEzJhLJ3XT1W8tlXBy9JlUeyzEemJ0XX9KEUZoDl9NA==","signatures":[{"sig":"MEYCIQDl72qI5tX65M0st11eKjlsJkQ6bGVc0NcgxPS3XYfkPwIhANB3n+CZeSibeHTeETrbuxfyv/laXxJEShWpiGrO1Mjf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9ioCRA9TVsSAnZWagAAW+4P/iyUJwJBY3aAmAKbEYr+\nlmMBSfkqSLah+UDSo9BqhL+eZ+933ibNGsppNKcWwYSUL/QXVYqSEfcSxQ9X\nvOmVS1D2Ecc72NfNfUl4PzI/BL9WZonnj64AUsfkrHMV1hNRM9h6mCPKCg06\n1/nb6jbQ/4JeQ3OWOHVsFGGVolcf/K8pyHVXefKxkpyIRYwAxuv2y7gIxsBa\nu8+Rp4X219g7almL2Rsrpz3QeqKRnVcnvCuz4v76X6RMn36vt8pcEMZzwdL2\n8hC1pFD6A3ps6b4bKLqhDpIZr/c7G4CM3mLTDrFjXaAAGp8uI1hWI1Ay8lEr\np1SiUwH7wQKdeZbd4wM7rsacr9M5Id/XPd38Xh8jmvoyGqe9F67rgBGDHV8s\nJJ1ZQmWTpYe9An0xmK6q7ztPUwlPCub0F3DX/XZ1cGjz6PzuPVv/66EHNcvb\nmHfn8uFkgbVq2TIcr70yzFsgBy1Vl13rhzxgA7GW73Eg9qdtOCPHc8G4DbuC\nKIBuA874jECxAgXrY1qQRgcLm9butaBjkYMcoLOElJYWpQa0dd8PHPKI0GEO\nLEcB6reJv7iekEPFDURxLAEzn7pt+kkNAo+Aj24nFyVq/POkiLuBUvZlyzW2\n+VgbrLdtLdwuQzR6ujkTaW87QYr+f4/lwrShHB10l7ATVPywxkpvySWlIUPr\n7KHv\r\n=kSAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/theme":"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/line-ripple_13.0.0-canary.5533f73d3.0_1631574184873_0.21665119325259474","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/line-ripple","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8759d3f50821ec769ec1314445aff16d81b0dda0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.08398f880.0.tgz","fileCount":33,"integrity":"sha512-FwsIe5NwomYHwk5T1uFpClziJ3tW7G+TYqkSW1HSgx7htmiv/SfuHDrKdv+0+b5BNld0loNgiNknyFIHqbi4Og==","signatures":[{"sig":"MEUCIB3ERyyuBsNg2W7m4fiI7aAX+NcPWot92Vrpy4C84lWaAiEAob2JZpP0TetyiuFrM6eqAsF4IgY/LmWLsJQiuIs3XVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9/bCRA9TVsSAnZWagAAXaUP/331seNbIHliQsftXoIp\ndG8xEv6jPYkJYGdkzIIu4GtQddRfhSpBun9ayjvhYO5oM9t7wXlr2/LwzSTL\nQbIudPQq2lGo914taiyX9yrOtGVOUv6StrgD96KhblEimozIB+mRVxnFWEr0\nmp/GEcIflxWulsVNTUCuIzAZV5z5hvKfJVxlrKaKc/nRBfck2pDT4/A7UVVM\nLa9ijMuNt6+AnMg8TbYyR7X5X1A2MQCqg143asnzKgcGzqM244EAfr8GL3Uy\nxme1F2MyRyT+6ZRO2GV5vxsMx1RHEDYhYjF1VtmWkAF1n7lgZmeeqria2nMG\nmKgiN1M9yullNlCF3ERgXdT68fY8LJCfKaa0/2VxgMHmLPOIC6eUD7Kl6BVN\n/PFu3aM26x2QgTxLhIXdTqRFWe8JvmMPj/GR9oxNlvgEC51TutAwPluPX9da\nc9yy4rib6ph3ofAZ2yaVzC/LAsTCk68iD2vQ+YhBR9RfxStkjsC95LG37ULB\ntc0Q0J/NpVUbw1lJxStT00XYesOlS2r/OnBdb0ILcAfmBzrqZBhrKcsmJIop\n/EYE3NUua8PgC3yxM90ILWcuhp4J7/WUQF/AMcdJzq6BKNFQXRGYvpmaC3nU\nxOhzPMqe95r8X3mAda7dZ76jC8vdcz34E1dVMY5tGAoSwa/ENVpgJE52+nUj\nG/J5\r\n=b5qE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.08398f880.0","@material/theme":"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/line-ripple_13.0.0-canary.08398f880.0_1631576026922_0.7032851079385181","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/line-ripple","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5893cb86c5c88c7f43480cb827a65da1e01ad115","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.818f4ee93.0.tgz","fileCount":33,"integrity":"sha512-d/BLMrgs3nKsmE92M4uht633lI15tZZBg+Mdajfp/g/80ZyRWIjLGifMhnxMjHbuU+cmvolqf7aSR4ykecgMFA==","signatures":[{"sig":"MEYCIQDCdYgIMMybQfAZ+O25lkKdRWt82l8tUia10a6XEef9YQIhAKOctAXvYW0MVjDrgpj+O7mum6RL2ufNDqxpVaIwjeYZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjI2CRA9TVsSAnZWagAAmUgP+gLDL0+c/q1gFUeYgw6x\nAwnw8F9neOUIqv8XngPHSypmSjQuTEzEAoGPIiizeCsSTrBIZEhGe2Jt+MKX\nO/qXB3EtaCaMFhg8eFd+9+gGzMuu+Kvf0JXed2ijpluq/Zabcpsr8/jFjkQq\nr7sxSpXk4PDKUXrxJScb2VQfmADQuCBYIfNBjsF+FwkHKeWa795Xj/cBRZ6C\nliFUOVMzqWfmBAAGaMCiSA/9WvqEw2qFnLXB9NxUJX+UbBEFRE/942TEbO6n\nq5eLxcsUNbSGogne42HvCAlcxPFed4N/LWEQpSc8yd8vfC8JLuAuqibRDsg2\n4noehCXU23gV48uYfp7AqKp+H+KqvpdXhAHbkoCOidlZr5N0nUfLmMvMekP3\nui/2evSI8cx7Qfb3ayt8YSF+Z2MMmEBp1zSEHR3upAukPnKE0SddhEjhqClI\n7fX16UrjxG9fY/RdYMbfBv8ouFbW/IwRhnRxylBEDz+Cv9tJwxQ+mJDm7dpI\nv0tu8jsQw645JdvZkD8BLe4lG9b8v/5USLfEuuTyfNyEc6CkOmjo5wv+fUh8\n1Y+qeZ/7BM+9PKaTiSw5Kt1rhBcAqvjOMVlzMiqYJ1/X7gx+LyaYbWk0Jzdw\ncv6z8T8BEhwwApzgZRI2C6T3EYP2LP4eZs8N116Hsr5iUZS1bN1w7a5/LkRF\nfuRY\r\n=RRrz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/theme":"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/line-ripple_13.0.0-canary.818f4ee93.0_1631728182056_0.9630696153168206","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/line-ripple","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da0b2693648ce39f8694fe67be669cb06029e425","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.8355e14dc.0.tgz","fileCount":33,"integrity":"sha512-qVmaNIZtdkT6cH3gHmjwxKXcW0+DnqDGLlPcISeoHQ7zgcDxyIY1sGRK2h6fqdZLS9Kdn5NMJ949xcu2hBydzw==","signatures":[{"sig":"MEUCIQCLPNkA7ayVf2on+gpLSSugRNk5fi9OZI1aGgBpCBBCxgIgG7bQXQtk1wzt5VQAtWOshMDV3qShcGi/aW0H5OlyFiw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkVsCRA9TVsSAnZWagAAsG0P/Ro3LZa8tnkowkHgGdl3\nS+Trx+KwT6TkWhXKIJAH5sYSCFXQpclizmp9nYtxUpBIlErMvYKfLjhs6A7O\nWCYG29ObVKhBRcU37UTVBFlxfnvb9RiS/0ocVvSQzmUO2ZcIbXZlOrSQCYr0\neKJLvIQz3s0k7+noIxt124ZX5jZJEFbjh6PRmxJ7AZuPFq+YOmdnQtzOI8IN\nzE2r2tlJ9/vz+R5U4U/RQsdKVAUDd/8zMkxd4TfuG3Dm2AoltGjYD7swNoPH\nzIuZlCtBNkb67SYoOm/6WlvIzsW6G+T82OulR56kyr7UlPvvZnYeoxeR2kf8\n8A67o47IQ9tnDxW3DctbHVIkQM0RgWaMSh6puiGyY/99nMu38B7YdiWKFcna\nP5du/ocxGT/Lw5xeufBFsLlr9Lo5yIUfxJldruBnx9Sk+r5nAf13OqosgC++\n06GxIj/SLOSEskoIlQSuMiLq2MrjoxUg7HEOUFQJZG1tahVi/RskqCFO5PP9\nN8yVYCBojheOkNGVX0T8xYlFRCg0wgioGlhAO+jT5t7oC8evjep8aceCaur3\n47i0uPEOE0KmfImsQuK+kRP/Dl/EnjOgUeBic6rDUbAKgo0u8nenu1F7xkbv\nlGcYoQpMUPr/Lm3dqyP8muNZmHYbUN5bNSzEOJlt0U3Db9xPlNtwmdquyPEz\nRkNf\r\n=sfSC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/theme":"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/line-ripple_13.0.0-canary.8355e14dc.0_1631733100656_0.2939760392549253","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/line-ripple","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f96505279ab027773c691d65205b1d5a0fec670c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":33,"integrity":"sha512-X3/SBu0pWv9jG52FbHnNKifvhajCiSygiycogiJ/T/M1kLYo6v/xqQ1XTBfhuIi1OfsJ7VVHn0dl2QRN+1MUDQ==","signatures":[{"sig":"MEQCIDJW9WQWeOIAXA3w25TTcvOncI9cmMJVlLTg4IoMcR0rAiBYqGgIZePDokB5RpomoA6OeLHDkFggHBLPl9Josuh7xA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmyDCRA9TVsSAnZWagAASs8P/iIUR7iVTPhdzGlpAo3O\nkkH8gesJKXUj2s7klHFy0BRMWfY7c7wa3QEmcWC3FI/1WNaFnL6T3vT1izQy\nyJGNdXi8j1LC1CAvatZyCN9sY37B3lW1IWTQtsEfY3De+X1bhO3KAkpgfBPN\nzY1FGwDMHSKcSbhGf7xzvigUy9Qo2Lt83i4T/Yt+Fm8LsF4dghjSfZuXTg4g\n/ZIDoKvM3yupq9eK/4LPbq2NUnVH1ZkmHy9ppJb5rlEEUSqzepOFoZnvKXhw\nrQe5qWACDmRuraJG/7XPqrxc8OvU2Da4Sttt6q2CpoRBm5l0ECOf5lFoNgqF\nQU0WqoHzulO611iO2kYenbr0HBfQE6sP6GfoKQwFcU0gHUCfoblqTFR9LYvJ\nbH9OtdiH+hudk7vDKC0iuSTzY75/T7Mw8kzFV7Y8GUEj1ksPiSV3A60fqGH+\nSzh5x1FGuPVDbVnncrZ27x3w7w53/TVECsERsBw71RXa7u8C7l47YeGqOSmO\nV3e2xcqEKEMx48xa0KPoskrPUvPUyLUs0EMj/4/O3FBpotka0UBXOHxcB7IV\nH3QZ+idbBhm8UMnWE4gLcAlYCynLwr/H9lRL+lxiC1izGqn8cXELsSAIbMlD\nmjvFwYzpHMZWpFtyJebyfSjZP+w44tZ0FEyLGvVIuy5FzZLC/xJOfusEgrPm\n5q6Y\r\n=65aM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/theme":"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/line-ripple_13.0.0-canary.d4e16a6c4.0_1631743107786_0.39511870163913554","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/line-ripple","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"64f68d8f8c25326f12845e99995b2be10a76be37","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.65125b3a6.0.tgz","fileCount":33,"integrity":"sha512-7nz48IqqT5ZY04WDDTz9bmzd6b6Rg0ox1GxG+OzMOp5J5R40idhUpeg8ANm8QuFj8rzi4PfL8K+tvJqH0/oFWw==","signatures":[{"sig":"MEUCIDPnFh7yAmtQwBuvNOOfymuwie/m8paKc3w7qaN5DoLYAiEAmbT625/h66MG2QuFoAgDTkJKOXeIKRkvtx4K5ssPLJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7Q9CRA9TVsSAnZWagAAyKkP/i3eGVgNXyiYFp/0l3te\nGO++ebUHEXDgnzg4NaZcD8Eucnpl/8lZ7r5/68gjLgCf3kMSsQjUDeyINpzJ\nhzgB62FW+cLMQnNGrS9PMId8Bn6DT4yW3yCyxUp88B9pW1CXMfki0wQ2u4KS\nf2wlpwwU2aqa+ZMxsCbziH8li8I7zbxQP9X1SMCOJ374Tiiltg1v2hFnU//s\nP9n9RQ5767z8uSaAG1jANUt7q2o6VRQaia8TQhAAg2STBH2gHaGBBDGwBUJS\n7ErAe1bKhgv7XcBiRFfMzKWOn6Dqy03uunEy17WR6NVobWcRB8KpDZ4/RmPy\nawnDHcisyCQM43sI7eM5u4777DmbbCUcnGKh7kgqa+EaqYUQdV6AA5gLI1dp\njjvKpmNe8SxRq8kBu727FzuNyw7CWUTodyYRaPCcMgwvdau1d5OcvIqaBMlx\nptlE6sSX3P/px6fGTZo679ZEaFalQGFLPIInPtKbSW1Gr7M9ZORYEyA4VqNW\nre7E2b8FpLM4Y06lA2OjshxQZMMl71yXBgNp7Chpt00qPNR/uhMRH9ZrwzAb\nzXeszQmhiTZY3JZjCiAMYPMdJe9xpJqvs+q22d41YHPo/7paSWfbpOGvI1In\n6Q/vRyYI0pXF7Gs5kmM6dYwsi331od3gCsNTx49dJIUKjtiA6Z73RExCB7X8\n5djK\r\n=y1Ea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/theme":"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/line-ripple_13.0.0-canary.65125b3a6.0_1631827005456_0.13452598502900126","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/line-ripple","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98a0b45cc0723a7e7264d7f5d0f6f499a9ef1c0e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.80a583365.0.tgz","fileCount":33,"integrity":"sha512-A2+ziP6knASAtuu3QlKwYc6keHT9ml3Kjkk9MnSIXN+HRlce6yvQRsKPHEAv7AleQ1KjujeGfKCkR2nCTWYJDA==","signatures":[{"sig":"MEUCIBIrQpKlsF103pkoGd81xexgtLDdL+TBt8E6Ocn+Q8aJAiEA6Uez7aH7DzyAwbWe0AwUdlAY9lMdCmzq71PBSfu/UxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.80a583365.0","@material/theme":"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/line-ripple_13.0.0-canary.80a583365.0_1631910912068_0.9199623434549944","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/line-ripple","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3fe250cfb573c2ac0f223e817c68bdc6a277d110","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.83900936a.0.tgz","fileCount":33,"integrity":"sha512-P3tVFpbXyPaU2A20aG8NTLOy+YuDoHp2PNSAWaZw5l3wjGcFPFO8Yod4GQ3DEF2E3ZYXGtmqi3df3XeE5+yqaA==","signatures":[{"sig":"MEQCIFMh/iLJ3el4qsGVQPIh7Uz0ABOIDhvUIdECA2pMhj0QAiASpgkDEqONeXe9L4eS1csGi91X8jyydgPAFeHxYKdHNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.83900936a.0","@material/theme":"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/line-ripple_13.0.0-canary.83900936a.0_1631921026047_0.5819183216108241","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/line-ripple","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"795739f2e827097a97cd3d5aa25ac9812f63e40e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.860ad06a1.0.tgz","fileCount":33,"integrity":"sha512-c1as4XjsspW8nbWPk7yWYUURY4yuUIlRUb1+gFe4ctWfJyjHabOg8Hsrl5Ab3nXHOTFGroU0tYun0BvAC8KjfA==","signatures":[{"sig":"MEYCIQDIKT/ULARsw5eJK37iTsaRBZJq86fxc/OrTNFvUTiemQIhAOgfUH4cVueobgRwM+S4dfGHHovwLM23fKgfqbIAnPed","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/theme":"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/line-ripple_13.0.0-canary.860ad06a1.0_1631921724736_0.5627815684230284","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/line-ripple","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a02a6d9406811019766b23c02c589b33d7e3fce3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.3b8d4429e.0.tgz","fileCount":33,"integrity":"sha512-2cRMapmSSj7oO8qGBjBqd0M4y3WUtySxKiqm2VCpBiyR4mnT2ghrPdxCeDop1h/EKyiT8nHFi8v9j8rgBupxNw==","signatures":[{"sig":"MEUCIQD7UKPQraXPUWmWWiN+Ltl8l7SQO1p3gagaRhSAqsjF0QIgPiuP5zzIjJfK8+t7mXex5MTi59KBi0eVOHdgmmtYmjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/theme":"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/line-ripple_13.0.0-canary.3b8d4429e.0_1632160018463_0.615935445766135","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/line-ripple","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dc21fdffb96e6fb1cdc16e8247cad98659c2b81a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.2da3606b9.0.tgz","fileCount":33,"integrity":"sha512-QiSAIQcyAQH3QCIUIzi5HN6wS4gSY1L82wWxkOGbyy7Aer9UFTVCr3drClIfk074xf9IjdjYYc4iOPTv+Y3pqw==","signatures":[{"sig":"MEYCIQDYhhC0ILH8BfFOGV16zYsd5s8wjdesFnK6yKieIohYzgIhAKWV3taEI/1mPV6Gzqt1ZCnr4xijfM2ENNEhJ2JA2u9G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/theme":"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/line-ripple_13.0.0-canary.2da3606b9.0_1632166629362_0.19111775212483084","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/line-ripple","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0ae7dab6db8107431847b3270bbdebd8d3c8d342","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.e8c598d1e.0.tgz","fileCount":33,"integrity":"sha512-W0kJo4ajAb3NEd/YfswjvMYExt0UQo5x00iKJUvoKfH9aRI4ligHZ4yuVO5DlZE7KgEdp5mkUP79A2PoqsFcrw==","signatures":[{"sig":"MEUCIH9wrE1w0fRuLCB2kRBeUDrgqtvD6dACj4PTiccG8+PbAiEAt48BMfpo1Ofuv25e1FEIIhnAgygSjC/W51OOzvYXF/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/theme":"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/line-ripple_13.0.0-canary.e8c598d1e.0_1632172279344_0.9970609283463561","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/line-ripple","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"24468534e924ac990447a2f67d0dd675a864ecb0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.1340ee9f7.0.tgz","fileCount":33,"integrity":"sha512-/YArWK9ool3mfT/wFgkQ13UfOmr2yu2HtmIxRZsAO5IMu5BvdmpvylU/YLYs9tK/atCnmQoPh7wtwbompyL1Ew==","signatures":[{"sig":"MEUCIFZPh2YIzul3lhwOxcZIbVpmuxWtow+UV9b1gg6Mmb99AiEApiBwVrzQGuJTn4xLAlOzUqdLuZXIRhYExHMbIqmtvhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/theme":"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/line-ripple_13.0.0-canary.1340ee9f7.0_1632333439698_0.4333643680053718","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/line-ripple","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"99f482905d4db3e30762cec0df57660f0f246543","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.65084baff.0.tgz","fileCount":33,"integrity":"sha512-QQl0eMG5o9SNKqFJ3qkFfCBJ2KaMZ3y0/O0masge0w+dnMj9sze48w7b2Don94FernN0hVCMb3GFC2ATLlxAYQ==","signatures":[{"sig":"MEQCIHAPW/2CRSSYvyJ8UpooDSan3IHA/9SrMhkNCUemBVu7AiAiiKszUUy6cfy7ObTwoeqvCeVp6pIHH4j6eG73Xsfr/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.65084baff.0","@material/theme":"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/line-ripple_13.0.0-canary.65084baff.0_1632432291076_0.55604710056508","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/line-ripple","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ee85d632407c51f01077f8adaf7464a125038572","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":33,"integrity":"sha512-pvDvw8E6F0D19J0GJnfMDE6qtqAUUtQ4T/XJU2Z+FH8j2BIkNBTnN6wpUPkC9KfG9gcdyOQzSxhCY8+n2Wd9Zw==","signatures":[{"sig":"MEUCICs6SW9AOujiw/tAqaXk53vtHep0FJohK8zP9eLK+0vzAiEA74fqvH8ktJjy+uq8FD4l1Qbg+OTyjvVeGPSU/lXCgdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/theme":"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/line-ripple_13.0.0-canary.c79aa0cdd.0_1632490869603_0.4117169807387091","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/line-ripple","version":"13.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9754af8f80eac582d6a9b2ec704852d394266c31","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-13.0.0.tgz","fileCount":32,"integrity":"sha512-5djBRXrd1+SiMVUTWr4rD6xv+/qTaGGmgUS5GytBE5mczvnEwcPmM4PzF+HNj2TS+wvNvIfRjRmUzWO2Z6w2lA==","signatures":[{"sig":"MEUCIQD6z00VC/nLYJHsgtKgG0rX0hzBpnPfIB9sx8cg0BFr1wIgXKdQSCDkYdBI4zvQ6CV3dooJP0O9K4t7+/wkeONBtKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":121960},"main":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"^13.0.0","@material/theme":"^13.0.0","@material/animation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_13.0.0_1632512716613_0.2387424736578958","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/line-ripple","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3eb9110e9be129d51609aaec3863c2423218017d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.198431fcd.0.tgz","fileCount":33,"integrity":"sha512-CiPhmNL5w2qcif1Lg56C0I8D7RUSJG/t29o4gk6q/cy67jSln3qJDdUlMYVK9ubBDZiCYNcC0eL1g/nuQ50CMQ==","signatures":[{"sig":"MEUCIQD137JjcIOC2F/ftuhoxkB24F/JWyZgFySpGTgBqhG1iAIgALmtFBFPGNKPakGN21sFmnf3dvvCjJjXhjPy99Scids=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.198431fcd.0","@material/theme":"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/line-ripple_14.0.0-canary.198431fcd.0_1632512761763_0.14584141008569595","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/line-ripple","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"718d784a9c6647ee7e81057c3d3031fdf0f6ec64","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":33,"integrity":"sha512-dFfGyWrw5zxDe9jD4jvqSztvJJYUo+VoFAWmdftbCtIfYlnPO56uFjUaDQ0kDXj1VEnrxX51pv3Xv+KABrS3qA==","signatures":[{"sig":"MEYCIQDEMvlex/xXP4FvUtfjuTD0lHmCa1DZ+CxGvjx7z/uSwAIhAPFxhkmpNB6V19beM5oTmEo0/8OhC2+YTy1ZTYWaLtHh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/theme":"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/line-ripple_14.0.0-canary.9a02b6ef8.0_1632575428019_0.5274892135401268","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/line-ripple","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"acd6b18692132518bfdf74a026e9e56c6cad4a41","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.758ce31d9.0.tgz","fileCount":33,"integrity":"sha512-+G8XSL/fd+71Ai1qg8FSpNOb6fp8HSP2F3qhxecYMRr24OrL4sw0hYPwIdHaUeupCeAdlRhRNTM4I0G0ZJd/Zg==","signatures":[{"sig":"MEQCIF/TgnVbWAr2rx/zcNv+Tbg2e3AewEK+I9MA6ndtuG6WAiBez5JcvDnKggE7f59YQRXhlGEmEqI8wGYQay9IeG32sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/theme":"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/line-ripple_14.0.0-canary.758ce31d9.0_1632763721383_0.5645081834272989","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/line-ripple","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aa3f3e56f9cba5516c8ca7bbb2928bfcb6c48ca6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.86b50ef74.0.tgz","fileCount":33,"integrity":"sha512-Z0x4hgV857eG/Tk9s5l3sZGRfeIXGTWvehUCjtpg4AKVNkTpIm6ah1Vtf82bPilVl9rhAromoeRVZ00Dx/BjwA==","signatures":[{"sig":"MEUCIDL99g0Ysy47ok+F9ec0OCJfBlmn7gIRh3DutWMf3tmrAiEA/71W1Hl/CJ/2Dnjuj0wmVD86SU5UuLUZ0VRbApZgKow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/theme":"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/line-ripple_14.0.0-canary.86b50ef74.0_1632850944644_0.14376108724194725","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/line-ripple","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a961b8644e738ac2a6c435ae33f2221038bca2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.b2fe3528b.0.tgz","fileCount":33,"integrity":"sha512-fqO5g6z/uiMQ05ug2ISWrE/F3SnopCUZGCBvXIQBc195sS8XcvF/MZ5nOmFgqMv+Ano+5nKOi/yQGyxQdesAzA==","signatures":[{"sig":"MEUCIGoRCw7KhsEE9f0ghfY56F/IwdN03IauJBwJ7lAeVtBoAiEAtt9h/Q13w0RK1tn2KVYyt2AGR65rUoNufnzuMkeB0+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/theme":"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/line-ripple_14.0.0-canary.b2fe3528b.0_1632956178336_0.33264947394749655","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/line-ripple","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"00bacddd022410af5e5cc68d3c121611fa9bacfb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.586e740dd.0.tgz","fileCount":33,"integrity":"sha512-XzWb2SO1dU/aO5xbv2dcqauYeABsODeRbpaYFKEcjOS83cEfiEepyetdusJqyAABQNQ1Ct6C1B+tP0RMUFFZpg==","signatures":[{"sig":"MEQCIDd5bb+MyUU1tCagIVjvOtEmLO2O2GoicKimm0Ugtmu/AiAL0QcPI0areUvCyxZpypdcmqOYWYfmqGT4wk6Et+4u6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.586e740dd.0","@material/theme":"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/line-ripple_14.0.0-canary.586e740dd.0_1633019440693_0.8823907695525588","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/line-ripple","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"179ed59962751012dd134d5e05cf29c966e0d11e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.2ac92d766.0.tgz","fileCount":33,"integrity":"sha512-R4Awy9BUarp40T3TglZ4VMhgWup1C3Cf6kMhEHmMUXfhR40WaqDLQ8pq6KbUfxr6apeozWjzavnP26RgOzCZsA==","signatures":[{"sig":"MEUCIQDA2NHxGagxag+adFWAu+EUfP1dOKv7YaSDgIK+UD8w/wIgT8A6ZIvVlj964H2IVy0q5HnSt7ZYcqHpbyB7tgibcaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/theme":"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/line-ripple_14.0.0-canary.2ac92d766.0_1633462077852_0.037401895695281295","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/line-ripple","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a866216b586504a6362d8b9fedff3a973e80b6ea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.353ca7e9f.0.tgz","fileCount":33,"integrity":"sha512-wIqJQkdhnPySy76o7khss6iRth8B4kxNQOXvZ1CX9liCGTf4z/ZbMbG9wJeF6VPZerJvyy22oNKmzOQOFzEaTg==","signatures":[{"sig":"MEQCIG85xjKwQK2KYFFi2npOyypbliKEx+NFEKkapAWQbO3AAiA04kHMFj2axRGqbPSa22gs4SGlP326PF5fsq4F5WWfwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/theme":"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/line-ripple_14.0.0-canary.353ca7e9f.0_1633718780740_0.7124394158594949","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/line-ripple","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ca2ab6e3bf05d274d0195b26a24a587fbb67062b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.c78ff0429.0.tgz","fileCount":33,"integrity":"sha512-1XqroaCU7a9JZokvqXLP7q6RQIUdazXFf9rfEVK48ZXgUGhrC6h6y9Jf2FzZjYpzkxb6Oe9cdcU4Z15rpbcwYg==","signatures":[{"sig":"MEQCIHRVGSwgG+ip5HLjj2YR7aa2clx84i9GnI+uQIfqzhzwAiAFipiesKqXwR+d+einUhE7trKAUe0yCmi9tw4Kyyfuog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/theme":"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/line-ripple_14.0.0-canary.c78ff0429.0_1633972888897_0.5590690117736601","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/line-ripple","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fc7d46bbb6dd77a1321a3d00979265202d3eb479","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.261f2db59.0.tgz","fileCount":33,"integrity":"sha512-LlyiyxpHNlFt0PZ8Q2tvOPbjNcgm3L7tUebXsM7iGyoKXfj0HwyDI31S0KgtU3Vs5DIK4U4mnRWtoAxtBW6Jfg==","signatures":[{"sig":"MEQCIG6e7MA81DQyj7ArI2NlpLZJCoOCwcDvkD3i3fDL9/urAiAZa1CaHUURmN2QUIah7DmeQq4B/6bSyQwK0G2oO7bGRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.261f2db59.0","@material/theme":"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/line-ripple_14.0.0-canary.261f2db59.0_1634749143999_0.9177964822256721","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/line-ripple","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f05c50185537eeda77dd72be6bfc1cf9f6ca4388","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.9803d2dc1.0.tgz","fileCount":33,"integrity":"sha512-TnAV1jbws0mWF9G4z00nWrgF/GK2qi0SoZZDeD0ELzf2ZK0lFO/ahix6isaDwjZQI7EhdN+ugs46M5ykpuVZXQ==","signatures":[{"sig":"MEUCICir/cYr6MRQtTkUVIM55Faf9ckwcSfxYoKPmkEmvo6fAiEAnG2tKQ8efdg0AK2Y+5hHqQyg91GwLpCkRssHZ8MijsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/theme":"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/line-ripple_14.0.0-canary.9803d2dc1.0_1634757677547_0.7342262184839368","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/line-ripple","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8458824c75fb7573a4de0e6e2448bf7e23f948fc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.348665978.0.tgz","fileCount":33,"integrity":"sha512-SIxn/cZ4MOsF2jcgB14RSDCvjNPO9z1u44/2q6TbpxOmhlcneUG7/zvgTOP/nokQUAMkeWljQf/DvGskq5uQ0w==","signatures":[{"sig":"MEYCIQDBaCEBOOu6rTci7vgGTDWAu788IVf8MfcJx6rnCL4mOQIhAOhN+Bff568/NaCdb1STFIWB/3qXsxAoN6CCp6TWXNXb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.348665978.0","@material/theme":"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/line-ripple_14.0.0-canary.348665978.0_1634827802705_0.9398952348542711","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"abd73a0941aceafd0f51a55d35bad660538564b1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.b2b979a8a.0.tgz","fileCount":33,"integrity":"sha512-Chq0yeo2hTXY19s7uuvh7u3qeMp7WnMfYE5NvERL7NipOG/9q5w5ElFXQU92fwaEKnAy36nBp2DND70W6HIoAA==","signatures":[{"sig":"MEYCIQC7MlvHkdV1NHQ5dzQYh0Vd1BwRvP4wyBi7Dk0LZgE6ogIhALNpt6Vi23fKDg0ZFypDh9S8CqCG+LRmHw9dsTdPe/hB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/theme":"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/line-ripple_14.0.0-canary.b2b979a8a.0_1635433896496_0.562268344555368","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"656927d2fb8e06e5b80517a4e43b72a851c9c01c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":33,"integrity":"sha512-2lY77ibaCsQGLvndXpaLSy7DbsmC2uE5GHA5GPPwif72cyE1QkM8haZWpBoyGh4I6vZUGzicN7qtqA7s+W+vUg==","signatures":[{"sig":"MEQCIGepeXw0MZuwdTG/1/2ogHbBr8RF8qO/pknRKtOP0GpDAiAsU4feDPrg2eVu1dOxuR48ETlpvWjVA4mDUogg4rRNUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/theme":"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/line-ripple_14.0.0-canary.1af7c1c4a.0_1635443533790_0.686996407240626","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/line-ripple","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5652f55d922ea34ea113c4b3f167e54b8b91a13c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.4afd353cd.0.tgz","fileCount":33,"integrity":"sha512-V6/7+tn+6VIKNlfAtvROYFmuy7ea+ObMd1mf/lGxRT//fnxFbmVEtc7ctI+0BIcE4/KIsmEbu5eIBW2zBneTQw==","signatures":[{"sig":"MEUCIQCH6q1THXCPYsupI/LxHvv0LyYIEObEBKZi15t07sw/6AIgGUHj+vjs3fITlZmfP4RlnI37Cd/bjsFrUJHuvvNyRUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/theme":"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/line-ripple_14.0.0-canary.4afd353cd.0_1635519660309_0.8988778731518041","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/line-ripple","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b9e37cd3344e39990a8269ddae26779679b74f21","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.a986df922.0.tgz","fileCount":33,"integrity":"sha512-OwdoGEvQ8uBwORlwtURP3vtGcHR0zJctSLbRRMjkcvbWY6seR5JjC2EHERCkPSO5rsiYsFFNKKDn2YXbE7fDeg==","signatures":[{"sig":"MEQCIGJjKckpTUrK/nI4TBjOAlqzaSfksYMPDcY6Lr39zvJCAiBKs9QM1DP0KWKq09iLMszTjcZUhtNIfhOPtJabj7Tybg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a986df922.0","@material/theme":"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/line-ripple_14.0.0-canary.a986df922.0_1635543269280_0.5456620105790841","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/line-ripple","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4634b7d2ae22588aad088777506ba1983336b326","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.c3cdff07b.0.tgz","fileCount":33,"integrity":"sha512-XOZy2lYI+hcyipJkfH+6Ohh4jbObZCsX1YQkJjRvwLD/hpM2UCOq8DGSRF1loNA8Rc2onRBN7EWLsQQJMn2M9w==","signatures":[{"sig":"MEUCIHlwCeSpHuiZCUgtiSbKGXSQBLqtYQspbZAGp3CxUcphAiEAsQQndQdWNzq/ZICEgKHJHZUl+6X/e1CaSWRXhTsItmc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/theme":"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/line-ripple_14.0.0-canary.c3cdff07b.0_1636484720561_0.462472321421759","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/line-ripple","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c9869461aff4280242ec4da1854b6310c3f8316","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.468392606.0.tgz","fileCount":33,"integrity":"sha512-I9L91tE0tToEXE7JzptWoBfQbLVPTz+F3nKPcghkrkqPvctIVnGc/krHkLi57WV7Y9exmpNaVjmkH/Bgmm2wzg==","signatures":[{"sig":"MEYCIQDZJx6pTW5goTE1Je6YsyDBFKs3F7KzHsAKVsAYCQwQHwIhAKCwWWfndVwBT4t09O9NwZUSW7gjbDHHZ8cYcrWggO5V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.468392606.0","@material/theme":"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/line-ripple_14.0.0-canary.468392606.0_1636659574001_0.231775398104759","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/line-ripple","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6dda4f2336703a70cce4fee94e4240f7b03f47c1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.828f9803b.0.tgz","fileCount":33,"integrity":"sha512-1EVDdlG+SG0IIJyLpM1ej8V3Ri63UnPrpbCM1Nrw1zrjlCACJjUkOwyIDl53j2ZAZGw+9z0vydeaQ3eWN7snDQ==","signatures":[{"sig":"MEYCIQDx+onmUhjVJ87ERW0grHkl/FsAEL7SlXf2zEsSLTGvFgIhANn355Szc+gnw7frnlEFew55WgRkNGqhdZdcqZxv3Ujl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.828f9803b.0","@material/theme":"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/line-ripple_14.0.0-canary.828f9803b.0_1636660217157_0.8460327004533044","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/line-ripple","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0082c4bedf642621e25cd28eee9b125f2145f886","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.8795cba87.0.tgz","fileCount":33,"integrity":"sha512-Vdbl87CCqNf/HrOrqeV8oQ1NPOxu38z3hKBQESQzEsoK+143u5pP5x4S+Y57av5+u0Os5RZFR64usVZwdZGuvQ==","signatures":[{"sig":"MEYCIQCQ4GUWk4K+lR2A4y45S0IBSCLVsrfqAD2LJfOqhsOjzgIhAM/8vuA4GCu+oz91p3UjKkT0XpXV7n8wwukENHJYZv3+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8795cba87.0","@material/theme":"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/line-ripple_14.0.0-canary.8795cba87.0_1636660573469_0.9729707307797404","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/line-ripple","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"11fd42b1f05ead77b82d784387e187c47296cfdd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.cd7f8cace.0.tgz","fileCount":33,"integrity":"sha512-aOSbQ3BFYMWcGKSXEJ9oMEy6z5LI5fuFaT8jTE4wrIwtyoCsOA3Q/iLrRJEE6Cly6xi++H4zaosejWiyhBC5iA==","signatures":[{"sig":"MEUCIQDPU80wC1AsnfitBZaZVWArJHmq7Ze9y3OnVlqRKWL5RQIgc/HW90P3LN3qpPthpc1Y3kKsEVemZgFzxD5oEG5FcQI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/theme":"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/line-ripple_14.0.0-canary.cd7f8cace.0_1636660672947_0.7556213185908875","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/line-ripple","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d445c148c506af19cb25e3ab5ee23d5e86f9ade8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.207230eb8.0.tgz","fileCount":33,"integrity":"sha512-rJluS1rjceNQZCCxpY/N4X9P+aawcQbhuECbIlHRD9o5HVGfnAOw/FphnbuIOskEDW2SkeXl7l/KGKj2vbLgfw==","signatures":[{"sig":"MEUCIDtrmzauSwPDsJ5bHMl3INo9MAwVs7sDFwYCMwleOFHLAiEAzpKqEGAsqePv/L+91BiOptnKARhCVU2fVYqPEngwouM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.207230eb8.0","@material/theme":"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/line-ripple_14.0.0-canary.207230eb8.0_1636669427429_0.4703701073302766","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/line-ripple","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1c44ef9d81a687b7cd81538ccc0db3b203d2b2c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.991fb99f7.0.tgz","fileCount":33,"integrity":"sha512-ayME3nKkoIRLAFDiiRx5b/VKSTq3OvafS2p/Q2jwUtJPUiZxa+qS2r5f20NaV9hvuJKyc7try7YLUMjgMhcFWA==","signatures":[{"sig":"MEYCIQDblKOYqGN3xPLXknEJnGikDCo703Bs1OwNTpxXw4KY+wIhAL/zia8+cgSHYCf893pSPXz6a2vIAauaI8vj2GWMlVV9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/theme":"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/line-ripple_14.0.0-canary.991fb99f7.0_1636670152388_0.12899794346284033","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/line-ripple","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1bb66ffcca9b8c8c1b85c2d9b8002403b7069ecf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.15db4f164.0.tgz","fileCount":33,"integrity":"sha512-DWefqmP666R6lU4YhEWWXsbXF3U7jq6mhhY7ux/nV8oPcUuW+2ONMIR7DO3IPvX+5tjpBPUT4s/GAZGecWRwTQ==","signatures":[{"sig":"MEQCIHcMl7d4qHyV0NQM0VG7C2WA5aO/giGRaDxdntKrpAIwAiAV4ahJSKu/mcM/7gXByeJ08i8lcBbD/U3cCy3dxKSgng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.15db4f164.0","@material/theme":"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/line-ripple_14.0.0-canary.15db4f164.0_1636738155035_0.6649200541048248","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/line-ripple","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ae097ba861e94a5652b9fd6c50be1637180c7cf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":33,"integrity":"sha512-zJ7NxxfNzx8lBNYMNi4V9Ftta/kIdVh3Mk9pWior1zVF9AAb+FM8WIUaNfpdL3fgxBlG07pCZ27jLIqnRx+CyQ==","signatures":[{"sig":"MEQCIC3io4icMNyC1iPjig2DWnVpHYy5VfvUHwjRPHJbVUzxAiB8fuS8gn5Ygcn9y38bABBIVGlQFaCaV1lUE9rzxi7cVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/theme":"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/line-ripple_14.0.0-canary.8fcad5a3c.0_1636744395583_0.822171483060312","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/line-ripple","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d00504c4714c3094c278a8b4ef0b9ddc50024da6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.f81fb1d23.0.tgz","fileCount":33,"integrity":"sha512-2pNQpglC0YUroy5viUaJw4M5ZPw2c7NvZOQYDSsDFnoLndb+SVmtyDKAiukeIKolDmZgMq91UNJchVTsxjRXqQ==","signatures":[{"sig":"MEUCIFy3v8ki0qXGtNtNubR1EJuCWTcTkpLxMoPeagMmGBRDAiEA8zbXyuajdkBy+Gy0UOUKPxDqj2k76Zw7lUV3vZlRuPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/theme":"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/line-ripple_14.0.0-canary.f81fb1d23.0_1636756782288_0.8727359583088423","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"022b8fa5690146641b273a804f11fd2b445dd83f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.783f6fd5a.0.tgz","fileCount":33,"integrity":"sha512-dURER4yVmztYBAijgutWtk/jtM63PE1DySKjDDVAOD1LO3qy4hx0skSqLfK+GJ0Uits4g27WEFgnK2NffFM+1Q==","signatures":[{"sig":"MEYCIQDE9XqjUAyjrGgjCj8izClpSuGe55Xt7pVTclTWGG62SwIhAO9jWDibix+Nn14GCixHrmldBjos5TgEjn2NwaRPXjJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0ZeCRA9TVsSAnZWagAAyDMP+wQAb1qby8mAfHxxnEHK\nWiJSxFXLCxeWErcUMu6Q1DP+63c7s8gJeo4bOPXebxgkaiCHXT5s4wVjcmjc\n5bPYfpmwo1OEUTHJw+pCEg/Kub0Dhi3hVvWwTOVwxP7x4PAXfziORjLHXPt2\ndW6RoVAwtWKA/njKXuHuvNX0Vw2ZpQKrkHf0SkPoNN3ylrZdjA8xbFS46XjH\neO4SoAA/4LRP5mkfkctCfojnsysBy6Ib0+yctXxwi4wa1btduRvXU0YsJyLh\n0f75Oo6rKGC/3GVmx96i5Vgzb+WJX4YUGTbW6en41dM7rpf6mPkZ9UcaIPZF\n0tXDLr2wSQPm6qkmion3a01pwWiZs9+EEjGTZfc6Ukjl8d2+S4UnlFbh+eYF\n7kdA5Q+kvJAtoAA+Dt6i7y21v9yBrVR+dljcQddSPn2d89z13EUWAzd1bEUV\nLcS8Q88IXs4tDfWsD7EQ8fVNM6NsF0wkoTBVyl+A2uifezCkem+pZrIeemrj\nhy2ox/b3T0bvFVN1V6DsPAW0p+s6scVguugLJ/TKj9jdhojsFy+y+DMY1A5x\nuX+jLSua2TkOWP7WUELGqaiGEbsuuMoYTUFj+3HTi0hI7L/WHnvk147aurar\nWw6IZWIHnjr9L9qlpDelLsO1HVIF1Lrg5W+51Nw/qYtbVmAL/3FwcyvOtiNf\nRx95\r\n=KvHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/theme":"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/line-ripple_14.0.0-canary.783f6fd5a.0_1637041757867_0.051249891644084","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/line-ripple","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2521f753c4f4d63074a92fbc8ca902da3685d996","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.d57ec74c7.0.tgz","fileCount":33,"integrity":"sha512-NSstX0iVyuqOruYXGw6yWQpToJjFyBXez0HyDmfBT1zTGb/OWB3dVOB758DOb5zB6by+bQdxqx1U8KSpbs7M/w==","signatures":[{"sig":"MEQCIFTQRx2fumJjR6y7iSYW+x64ExzVOp5tn1QyCGFWFDUXAiBMHzWiNFCOT3BpWNf4ml7+N+dFAAGWqfHAr7zIypgqEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9krCRA9TVsSAnZWagAA880QAJD2yD0D5NPQ91aDqIWO\noqk0NMRAOk/3S481q4cy1YeYfWM9F3aRbSE5hgBVkqspA/HDYRhzbzDNEd8h\nNv8cN+oqcbP/0o5BzpwIEYku1lPT8AZvNXCPHnMIg7jjO+tFg2UqUSl6f+/H\n001ujKZA9/pEyi9pkbiMrvOwUByYG4JQ+8bQCEIJKw/GnjvR1PPdI1M2d04Z\nc/gnma1aGUASfn8sP5QEf035DwrswyQJxGFEtkvMKg6CktdVEvfHo9oGNd97\n1u4L4AU+d4Exy3vCxVMInbpODwMJJoeD0hztmpmtAGNurKEy29PTu+tSA4jC\nCeLEn80CO12L3gmMBd9SRDjlpLft9zJ0THGHhJNOoqa1scTiAdhOea37ZbUG\nA4iFYh4m+YF4UmYf54f1RzYRk1iGRIAnemOHdp74jz2Jf+9IruYYTE6GhOxK\nBDdBCTWC0TpTDf5x4XFUJGAy5BsLAGlUded/SJddnEv4em7QOsChvsEcTDaq\nws+rpaYrn7wrs1WK/LnTDGSGRC28BCi8SF/icOGQzAFKXIMUfJTnWq77lm+8\ntE9cw+HaUTiru+J3HEoeLmo98/0/r1Bg37B++61F5M7CBm7fNW1BB51uNXul\nuZhN4JCW3lFguXNtqbn4tVA4c3xKwOBlThstkgXED8Fja1iBVSJ0zd0hDoUM\nJTTj\r\n=3ECu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/theme":"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/line-ripple_14.0.0-canary.d57ec74c7.0_1637079339779_0.6427192778624908","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/line-ripple","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"65db7140dabc96d453fe99dd03f76393194b7f91","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.554c71829.0.tgz","fileCount":33,"integrity":"sha512-ecs8WRTyIVVxaOgUxLLfasN7ZdqfUC8Be5d+zbfXZ/WVToPmyeMwl60ayBt362HzZHvwzIWk7EFEf9clocM0TA==","signatures":[{"sig":"MEQCIDUKT2w5MuxUBiwsdUjMuoIAAVw8Gx7MG2BH4mOf+EjHAiBKtp97uXEu+gVsktpHIpsPsonPEKuesn2V8ekI+AvKjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nYCRA9TVsSAnZWagAARMQP/21/cieu2uF4XvbOyChd\nXVUjO/sCtc1hLG7av86D7QWz7/O6hPugLYDX6twOiQGjCMXG7iAox7JnfDjU\nu11zdUg7eZCG3VkFBEx9lASx3RBIuv4tycBCewh438mxocICllhIcb+FzXxR\nILyG3Om1ym6Bj2ddejsXQ4/7Cz88fPjTHLqlZqa+TNVmTKGauaWwrTxev2A4\n/47yGnQGj/kI+hwt9IJ/csXBfMU1DWBMkwfkO+V0ZcyxQc5ek+2ppBIKQIrQ\nBAcYvzroYUYha7fj5DeWaQxR9eoeLkhHwRwg4kYrjPpEaapexwtBI6j9Blqh\n2+s4fSaC88svdJfw+CeAYAeFRFufDxelqpZ/4UXaY/UPPyLALL8LB9xVLzjO\nDJ2OSJ/3xUzcnn1nKFQjII7D8/ul7FphoYFqvZhnQwvtjd9BfzVQDDac6/XO\n9+HFlOa31PCafc7eO2XRO8jF3RZpGamTMLT52KwU4kwnEDeISZzO5EUuqPBe\ntQnhJXd+qHOdrWPUBVJXdkEKoaoUZvuOOx0d23Hk4sxawcA+fxvQ75CHYLgu\nUz/fkCT4xaYoMQ01VclwNF/e90rJPClMPpBROEDXW0ITxtxgzVfmFh0KqSRI\nNvusdpNVlIsareNzZvmn6Stf+GiQQBNpLKqqVnw+Af7//PnC2h6HR0UsWBCj\nNazE\r\n=4MqP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.554c71829.0","@material/theme":"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/line-ripple_14.0.0-canary.554c71829.0_1637079512589_0.03618022369473928","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ee8fdc6d7d499ceca9be7357f3a759d825fb88b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3ef470efe.0.tgz","fileCount":33,"integrity":"sha512-Jja3s3msXdqVz2j9BLjNwPG6XeFB5VdvtGPvweSCz+RhWAnBwW3vQfqxgm++xvyxfzHWJiE0nNlRY6qQ8OrWrA==","signatures":[{"sig":"MEYCIQD6LCYX7Bkq/BhGwPBX8JcqPE0a6rheELsOJPSAiryKbQIhAJLUOjoTTDtxOEQt2Hgnwik5RVsgERIvIahX3GAn1sp7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/theme":"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/line-ripple_14.0.0-canary.3ef470efe.0_1637079805034_0.6515126086251277","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/line-ripple","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"978427d370eadd759fc329f288aa42c6f8b2f431","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.61a28b2b5.0.tgz","fileCount":33,"integrity":"sha512-M2K468ZxXw8X05VprAOf/hamgB0rdA9N483Fryh14/N/rjQ1kVlZgSZRVBGkb0pyQj8XDgP8lthkrFMYlia4/A==","signatures":[{"sig":"MEQCIDc8VkjOG3QmXIpBXkPXnMlqAPL8h9etFa47iXLmdvQ/AiAh1WDXB/v6kIukIa+/6SUgGRwKfxwX0rvvmSQ7PcZcQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVDaCRA9TVsSAnZWagAANAgP/0bERaKLwX2piWyFbJeq\ngoJ3ZjS7xwJRnUt4pk+OAbh+grhsUup/U+5gz9ylhJIAljLwY6ElTdL3ambg\nSlX4Fk0Fw/VBETcNfwkOswX5dKJA4GCAUKoEojFo9pe42++PuNTf4A54dTzh\nE6hk/FPIPFPvz9ENW0qYWDDHMYl0KBWVMINCzZuafs3gGhc3xmgYGxqR5xy/\n4Z9TUX8GOerkDltf3f7fJJVHHe7TNV3TFoPx6wlix8cGQe2vRMr3/3/wlC5Z\nl0/NEsAPA6xHphJ6HngHpQZaMyKqaaXbi9tc38bTNcVvUpvkErjSmhFUfV1A\ntXyhuy/pW9J+120ZShhDSz6S2+ZuX1l/grgt3XVyFOCh10hbrZh1PQSe3IQH\nnUeA+hp9IhziTLF++rTWUA98BPvy557FEovJ9UqCNX2NrWuCL6w1B4J+8Fc/\nse8Ub83h6kEFwr5XpNYcQg8oGl25xnVbx+bVG6yTYsGER6I3nZefgTKrbwj2\nY65c9X+Fs3ps429YC9WuZcBEyjVkY0bMkkaZqvHtgmgqIEPJn5IrGriRvlxy\n3OOmnYDpZ+kY2KusaTU+bf4OE/PIwaAtExCVD/OgPQ8iW708RKgpl/QUUrqI\nJF0vXYVmA55vNKzsXgJ3eVznShscqH0py20woTFK4Czl8Wvr28K410wBdFJl\n9s/n\r\n=hGKM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/theme":"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/line-ripple_14.0.0-canary.61a28b2b5.0_1637175513878_0.1750522388892073","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/line-ripple","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0c4f76b19d6d2d657aa39b8b075fbae2b18d4e56","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.fae6c652d.0.tgz","fileCount":33,"integrity":"sha512-Mi0y9sdH1Pp9eRBCSNM7IUPunUkU/bKCRC4oSGtd/xW7ypYc9KF3cOQK7+hlFwcFeV79n7cfEq6vQtx7GvAk/A==","signatures":[{"sig":"MEQCIFqn4k2X3wXZck9Cp7AllJoiqdY/KuDGDk8Ll1V0qTTCAiBWfLT//XuZtFZGcBl+qkFVZ7VMMIPjtl9T/oNrBFsxSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln4xCRA9TVsSAnZWagAATF4P/16HMXV+uVBZ+q0ZQtSh\nr1FVNJKY/OunTok2DuU8NzFhqzFu6v7tqjYyPP3+jIWjIlYDDYvXDtZDCqMd\ndA1RHL7LlbHamqsyOl5xOOJ8iSOXP5obJQyhQxJROOYyT/uGqWf4KIE+Fd+M\nqWl+mQ8NdRII5BH/btfcrJ91174dThzEveCf+c88c3dMR5NlFha07lbTn2KZ\nixi8+4WxDyf8tebiyaUtV8lZrMCIapgfHtVsq9BQtM6JMk8iy+o/sChhoTgw\n8I47ocgpGYo5HLAlEHL7ctHLjjTUmkHT4EDZtBVo1TbcMF0bSYe1lBIMwzhW\nWRSZGRLEezguv9eLgJhGrZW69JXDi0M7p4lXik9WHTKNcfgu4r/C3qr4vKY0\n1HO3gUiq9eYXn0i1G4JV1Bi0s07s2RsVWTbGM25TNRmXh+6yWJWZv1u60iDv\nTd/AYGqlw+O0vueo/5G1weNzKzU5rK3LVm9cwYh0kvxeoQF1lIfZhCAY4unT\nCisONWvepnTY7qwewiy7zdNIKP+mOoEjPMr2CnAEPj8CwR0vDsdL0P6u9qOF\nHL9filevTQz+/YLCPwvOa9p/NXECpG4wXFIDmOubc4Ct7gAgdoivhvVQkNFE\nlqhWIwXqkPL6gTpfyTfyGcGC8Jzj9GVbtMzS8Q8fzHz1IcDMPYgRPaN0oTQc\nQNCU\r\n=pIJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/theme":"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/line-ripple_14.0.0-canary.fae6c652d.0_1637252657114_0.9378282258065351","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/line-ripple","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b9d5a6f9687f028ff38cbe4a3ac5956dd51438a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.978a3b5bb.0.tgz","fileCount":33,"integrity":"sha512-iEGgeJEw/OpH8AExYi+Df54fPwLHx1BE6Qv+/zIKPKG2PN2y4+Ml0JAYARKeTIuHgv5mB/airE5NscaaSj77IQ==","signatures":[{"sig":"MEUCIHMs6FTCyssmTpgk0foymUClkl0Gjqly1ib8t1ohreK/AiEA/RaZqt2DRrXQ9iTM7rJ+KuqIXLZolz3Ft99unwYE/v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/0yCRA9TVsSAnZWagAA+LUQAJvtvwlW8BNycIGJhCS8\nV5mlPfUVR5cXS+KSkEKOdjAz+MBh1iMQcj/Z334wuvcZv0t6c5TpZsiDyxPb\nuXxOkQw5coUFv570Lo0I240Xb56oOvTBCjwoXQBT41xINx+KrG/WX+frR/u8\nst525uJEvZ2yIvJB35jg1J+ftFNDX7SNdpxOzGOOUKi5TmEa82bP9cXKxwyJ\n5USwUEaRrCU2KuOJWfvYvcheKvk04ejgUWmy9ZwpFVssSgXCIs5mqWRjEv2S\n5Gr0davA5Nj3oGkmP7BotuA3UN1qhZxnCSsM7fk+U+C6jCs9eLvdA9DPBa4i\n85Wq6JVPxv4xRjCFboTh7EUBqOBvlEnQO6VUBSiyaJPOS17G41d6+CxWAxMu\neNdYP3sVSbInMnBOKMjl9Dkp4RencJi8xx7lOBq/Q2mTqSdeFsyLDgO4Hmec\nFjZNQmT/29MdCbbO+ZMhjLsTAO9ch9juyKS7CKZwKC2GROiIULRxXQS5edHN\nqndnZF1pP4FATrTwUz5luIuFtFVfXVq0KISyPxtQa53Hq3be2uFVREM9GsD9\nGOKw2F2LVnIa+S/t/r67pnq0PnWuy3LC7TWQBbHWLf+C1FINJdqwTW1291u5\nQTU47aT0g5k+N0PhisO36pGyP4xLKEkWg7BollUrx2ZuIfaNFmOuR4r8CmSx\nNGmH\r\n=FdCq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/theme":"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/line-ripple_14.0.0-canary.978a3b5bb.0_1637350706400_0.18237243241695422","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff2e7bb8641c4bea6db631cd6b4540bfb36928fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e6f43cf44.0.tgz","fileCount":33,"integrity":"sha512-9SwAkxXeZUBZ4y+JjmHTz8pI0y0Qm1Kw/1o/SRWJk8OU05sk407WG8B4/kTPWWyG4AThG/NgIjo4nk3BpGpE2Q==","signatures":[{"sig":"MEUCIQC9Z9Q2hiw7SM9vmbBwtZITAlx8O32C0aaR+Js5uu0fTgIgc/dXAWFeMhtoxTqLpvEfq1RbMqCmCqrUAzjKyCsJxa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9SjCRA9TVsSAnZWagAAVV8QAJOWY+duQbi3CYzaK9Ki\nx2tn6G9ImuHmYDnre74haR/XZtiJxy23OAgc5aBXYEnP/BaAPwOBSO3o+Imt\ndLpX+Qm/tRtTtA2iA9IWhpuar7rOePxdf8p4n3D45l2y8AwkLYxeuarZ06Ep\nCcabPQ2fkAogp77b9RDVa3BLIMMinn7vWV7UUxSKcKGlAVr3MJ8jJZ4yynsh\nqReKHP03axiSijzLax8s15BKfqaRFuXPdxGKwHkxRLxb1aamnyfQdUq95Fjd\nxmsH2NVSkcbylKfwCInII52a9JCyJEhuCYoNcLq1AT9feJssOIKV80XAiHN2\nv03P06os0iyTgX3HCjdzispjdL0yicQqJwfgGoFTSu57bTzrOsEXG6TYEVLG\n9fOJ7Ws6Cgk9o/dBd1IdxRmrLOTAZt7E6Diyvesv57nsB/K0NX8prcXhO0CG\nHxZsFrMDfSTo01SgJFG3Q07lbn4hPQwhCiGBoxtuqfH42pTUyUx1WPKkXVUW\nTi1sXKJKwX8711Kr4jhSrQIoUL1Ms0ZCvNklAu5E+3QdYv1t/JbWPpEAaIkx\nDJVOgbS7oWoIaP+/XzUAlGY3nrIxqt2mbR+ifmaFwLJYgCak+TpzIMVJ9Y9h\nowGj6NuvO+1LG9B9bV+4DWP3r1eLRXji127DpLCNde7M6dp7R2bNlWetNIA5\nrRT9\r\n=opcP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/theme":"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/line-ripple_14.0.0-canary.e6f43cf44.0_1637602467111_0.5616611503428983","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/line-ripple","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3fb83c0270a586e83616446d2d52461900b93e9a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.39cf14bc3.0.tgz","fileCount":33,"integrity":"sha512-vUtcZ5MDjYKD3sbpTmlHvaRI52ivRKAEDaQ+QMSPbmgdpVfNTC4mF2qg41fwqYm9ATa12vDi6oupR2KVjnmtsA==","signatures":[{"sig":"MEYCIQDktEuKiJJYMdMM5oVnxl1mInDW0GOOnaS1UhL93yuB8wIhAK1m39NCsGlEvf5Xi/6d/Z6kUkrLRYtc7/8Xvnrzwa0s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCHSCRA9TVsSAnZWagAAjjQP+wXd5g1EYx2ka0jCyS/I\nmCC5MxDZfAIkXt089ubrgO3iJ6B2dYSCIHW2oSsG9L6KfqthiYSxH8RRvS8H\nBkK3PSXfqhW5wzv/0BbBqKS1rLPmPvLwiHOJKlSvp+W4LjmlbYk6a3XM4VfZ\nMMO0BJ0VyDU++dtpndBV+XYspmYAVEGrQmXEjKCVaFz0XMcL+2eQsqlNyu72\nL8iqit6xLU4FKsa6eqbv5SgKN0CTPrCFc3Y1oqHy0Wvgfbc7Wi4JC9ggT0y4\n7zJjOAztcNfSRuCePriBvhkIaVy558RnsOh9+CuqCL0UHn5dDlwXenAxFQak\nJ3Ksu6bmrT5Q1fy7hZEl5FS/T84QeKkt/HukR5uN29LqzMfhhJGpBFcBtrjn\n1dSD9H3L0YPAFIVvlX+/DViOkoAngkMZHUCbX7/6o7BLTwNda74F2L9q+LAj\nlEcn16EIYH/4ClLPi0sE68Vkas5VW8BjyIKfKHXcgebM3ETOa8ZgLjpVNXxl\n1GM3FYHlRggPF0kdFav/ay3a2KjUB5rm0RG2VQRO+PDQtXthQ5vWlJKJ9jNn\nzeHoxJFiJqnRWOtts4f4UY2Hr6o/u7d4dR+4Pwnn2+TQ3St4kGEgnvkwHVhD\ngq8066xN7FZik3of3eL1NyKhGZW2lH5Oog1hNfE9/33y+HTeiCro0V4C7izO\nh4eb\r\n=8yeA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/theme":"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/line-ripple_14.0.0-canary.39cf14bc3.0_1637622226324_0.48187808248882136","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/line-ripple","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a15e38cf4f200d65dbb1508089f5469dd7dad512","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.93134d453.0.tgz","fileCount":33,"integrity":"sha512-ZKpShf7OtuAqCfZL3Fv1+9dKLmdVq81WTmRZ84831UVpJ+jphO6qyuIJwt+YikZzY+3tzTCmGmr9Tz1xpEyrCA==","signatures":[{"sig":"MEUCIG2kb4lSZHpDbaVLYiSWAmQMqD/P75ZeTIopcfth5fjDAiEAoK9COP2wabTNCXARaqiUv/NQlCjJdDMjV7s0OEPBBGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQrgCRA9TVsSAnZWagAAIUAP/1WrUd5ro1MkRS7oBWLi\nlIOXk/eOIhSTuTyPyFjjSwomnns+E4fMJeqErh9D6LF1xmbI3/MnT9D82kOz\nwbQiyzQJ2NuxtHsOitNrMZb2wGJdxjk4CiCvNHl6+X6dBOolr1lUcp+JE3MK\nX6mg50qj+AvPDSNJK3gLoumv2fQMlt95QO3P8E/y6wDUr2UkWYPcktP3RfVv\ndVmqRE6IBk4MTxAZ3NwoJqYAHWCV7HfdMh9Dj0IrlsKC39yywN1FE3uZCa7n\neaIzl281irUeOm6S2ZIO08/FonC39xr0NJH+BZFSMIqxwSoFju8+uTQHBETM\nYpD3L5Oto+SphK9BeUHZJj1m+ZZeouu1wy0clcp+marTa2vILy3h8jPtdhHy\nTjW/+0vlFKCAKddokqTmEbWRXGc4OtZ3gtKOFrHJZW8JtNn72Gt6P9zrZm/1\nY24JDmnftU3eDwocS1kLZ8rFvVqJZIDkUzAbZxSWavBmAg0t3OfkA+f2G+i7\nE0fUBjjyppMjyrLnZ3T2BpZAyPihMUQlYpuKqiqoFrJPVp58NsHKdOHm5EY+\ntCWnh7zuhoeCYF5pBccTlxwxMq9Ngs8LMLQ2JpJFwNdJ0MIOEnEnjDPwhWf5\n6FLOQeCasbDiLqvUSheJuSZpOrQeFk9+jjdRJH8/yz2u/MuwJXGwLFCxsvve\nkZp7\r\n=jEyo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.93134d453.0","@material/theme":"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/line-ripple_14.0.0-canary.93134d453.0_1637681887963_0.7028451366667376","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/line-ripple","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"acb6d9f08a33f68be47cf1652457aa1a24cdd96a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.bbd11268f.0.tgz","fileCount":33,"integrity":"sha512-DhYRk0mwMrtQVbxVo95WMWsUokNhn8qKa36jAuqg2niQ0HZRtMSG3CSF8XqT2ps3AXBKq2KzucztFetaR7S3xw==","signatures":[{"sig":"MEUCIB52wAzFMQgXtKUuBRqmc+V8SVtml9dXEANwSdXZH7wjAiEAp6eXN7duGNv/ldqufJKTJDrcH6ydjZnBASQHFOMuiZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWvDCRA9TVsSAnZWagAAUioQAIIxn8J0Her9Dm/AfRuD\nFLuY3kv9b1VquODSAocQRnQERsENLkmNPwN+5DtmwJAxjst3HSMtXLy3+L0H\nt/YKGJdPyJxFcMmQJ1BChU0wN0vTQ2+Gi6voMGYZuqb3EBXH1ZCjs5nftXlV\nri1B5waUvpYxQsjCT+g2GwUyuDWYr0PWUigGRfzHpdGMuW2Qd2CptODcPsk6\nBXh3vnbl3z1HETiDPXWEnrgcNKi07ml46I8wem3uzei3RxNnaRJe55vdm0Zr\ntfBAVGEV0G/8pCSHARaSv4PqA0GnM9M5iRuC3OWI/HMakBpzBWexQ0KpHo4Y\ndIZCydaIjOU11YLpiXMuHaMF0KgYJNRKZFSuYoDStlQInVfb6Ll1BbqiPvYC\nC57gmWKI7BVDVafZYHeupDpW9RGXQcpQwlpiYq+Xp6MeJWKOJ63pW/EQKiC7\nYDKmaLnc0qa63pZYd1o0Jr09cP8QrR5JZlIeK/1woU4tk19p+dzSRdOy3VD2\nojCMLKY5OUNs2LbKuaZxgdNMB2Hq4jzzEQg2oefonPinG9ss6wT5DoIGG8pS\npw8zXt4Hbi3rrwOgm9YHPi0H6EHKV6ve0VroeUyObzaMho4QzpskTjWS3WGH\n+qKtnRwPN6I9FiBvtt6nzd24uxIQnnJKH3cEPO+QQI0fSXjHdmmuxsJ5vYxc\nnl3S\r\n=/bNm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/theme":"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/line-ripple_14.0.0-canary.bbd11268f.0_1637706691746_0.2917871492919655","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"313ac3032db1b1e0b75c7b341014b5ab95d4f4b7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":33,"integrity":"sha512-TE4DKbTnbD7EWtOrh4BQ9X6wUHcZsPdggclqbTi/ejJlZ52Z8yZ6KUFfWJF5YcRszMWgO0l/liDyboRqIksdeA==","signatures":[{"sig":"MEYCIQC9uhfUFRL+kjeooXFxDHlvpHvhMOst0m8KyNEnpU0X0AIhAJ5DJBneQgfbpPQZA2JLzMdTJyXrKcNicwFzMqvsGtB5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlwKCRA9TVsSAnZWagAAYXwP/jmxKhXTaxsvvKe1y8zQ\nPsuqxx+54g/1KGS215rUo8RIyxhfF7Lo13KAlb2u7ZaSAktdQ8lfUSrU686K\nsmx1sd4vInue78gry+4UeHO/qB5RlSrOMOjEcS5TJim2w+Ai2tlX04JJ4//5\nbcW7p3nUu39yi05dlteV84h1MMAixeN1XeQmqjuW/HuvcVU8/g1mGh9ovt9z\n4KpDbHxq1m77RoJCr/+F57VRLwa58RRCoLUbOxru7eNUVWuY8Exi6u2GeOMq\n06KpDyRo+56UGKpnhcE1S8OPoNQMWfQc5Xe9QjKumEk0QIz5smwnVCZxl9v0\n1ROBD3Ub4w7uiWmFTQlL60C4juH+z9473qxCY9D0MIXvpMGLPerJa1qIVV4m\ndChKI9u0MP5qMs8eVnc+Bq0iX1Y6RbVyQ1apXcSkT/QhXa0qObOp86rCDH2N\nwIaawFSlZxN7alj1c3uF3doXDOu/ikfnx4t/mCff256LunT4LKzBkKeZ8Kgo\nfVyIzvqQOjnF/rwGmhXSXLG0lC+Mk2WJn9RppSU5Zx2t+N7Q/R12npME0ecQ\nV/KZtxzn3uvKR13w6UwErHD/MUwKpNxvgYAKhqJQqUXpqM66pCjNMIobjnGU\nkM9PWvjVldPDs7E4v4w8xktBVRHPumORhP5JvKyz54mHU2Wzj+27LvJxqAEq\nn7yD\r\n=Z6ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/theme":"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/line-ripple_14.0.0-canary.3db9c4d3d.0_1637768201989_0.3026818632998811","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/line-ripple","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"56aa9f8507956e50b059337cd7ca23c307b6ee49","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.78305b6d5.0.tgz","fileCount":33,"integrity":"sha512-F1TvoA9Pz7CDCBx1YllgZRpP9NXUcO4kXoRD3XVWqFlGszfXKGgqmlLvHmPeJJSVS0rSNXYlcBWxjk1fYb9+uw==","signatures":[{"sig":"MEQCIFMUWAxD/6qjTzJYj6m7LjSDWsAL3aZIClsfbtRSyy4YAiApYk970uITucuEGKhsKe5A7WjpEgahyOB+pMfCIBEbWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpdlCRA9TVsSAnZWagAAtVQP/jCIIoaqu04UZrVDcdoK\nMI8Eu+XfelpPFxdWF5TEe3Qi7AzfNBe+ADgnyhLUGFCC/8qx2m2GnpK+4Mz0\nXfFe35n9UJ1Aql72T8biGdFUMAVSE8Ik0NOLZCt5OAfxKIuzQuDZm1Fzf9iq\nR63paNj60CGpyS9sO3glC26xS86lvX44l5YKsSdy8eYapVaD9c5ezIJsb3DQ\nPl+32iVd3q++F6LgywPmFV2vr5bKq4vfYbi0HESVETf+S/KofH4Hfa7kOBgE\n1Jv8poNGqETWh01Ley8KjRakXZTabXBXFP+J+Nimzcu9FxEWnWc/JSm51ibN\n7u3AEm7gbR60g8+nzkK7M3t91jEc1zjSkSGHHZY+gN7qXnUhG/or7YLng+6E\ngrJBpDxX2YefmjEvLzphTMU0kz/nuHTPHZVOHuA1TD9v1BJSdmSQYpj42y/k\n2XUwWGsBTOYRptAX0gQyd2xWTkUwaZOJpPqebQBOZJcGVGUNGhkSpVltjP0y\nyh969SSAK0tiZQyEcfpUg+NUDI8umok/2USFBwzV8cnnau1YkBC4EQjld+97\nK1BH2b7gh3PBxLvue2wgw8+QzwpEMpOBn73hfGm84lmelrDOIMp1Nr5dMAwV\nUjwSbuZAHae+Ta7EhRMRornJ+aDC0sQxFxvzKL4/6dlfKBjgYKxY7oO+JKb0\nV1a1\r\n=mKMa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/theme":"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/line-ripple_14.0.0-canary.78305b6d5.0_1637783396851_0.27584565573454856","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/line-ripple","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"276173fa62cf757d7fafe779ed850313627cc412","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.43d08ba77.0.tgz","fileCount":33,"integrity":"sha512-a2NPV416oNc0dGrmfDrB6yxGg6LAhJD3tj0rO+L0eU9EmxDR8J6W1UmB6zFn5DPHV8Dsuaiwc+1+MVLR6sPB6w==","signatures":[{"sig":"MEUCIC++Mnb+4IDlT4OnP8NozxLCW5tO/yPLDdCYF4JU0clHAiEA60vtxGcHBSFOGugoSoRKFddOe5VgQcd9SSSgynjvpxc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqvZCRA9TVsSAnZWagAAoBkP/1X6mZnNCp1eHNAMDxY6\nbC/X1YgKqWB7BFYchSNy0Bwe11b6p+qOsjpbqgfyfTyHGhM5NbUIDzl1w5jp\nKxF0jDnqGHtEFLSrQaxnlhraqlpuDZd5+vUQ2znu4Li+ZHp2C+uAR37eOLfq\ndfuinfYufM/VfrXWYNgqt6XASnSxH3X750TeEh4yCEk3ojsmC1scQR49haPf\naOwB3ON2QQH3kK6CIfaf8V+IDF9jJ6pQBx0qsXcACRFIzCgZTbSlju2GcEnE\nolGUrwA49995fj1mj0eB9Ecr+XMFvggdXr+cvAEhJSAZ2bVSZrS/cpci7yUX\nGn35EL8zDPCKzTdVFo0szekKPLpOMQWOxmBTTjv9Ld44KPjvy25sgf2aSqsb\nA+e6Bayerwl8sHu6PtuX9LlkRGXaJiV75/3YJlTe4okxVg+lrORzm8OpAiOc\ni4mJOq84SSJXWGT53STJW7M1DsixXJKHltIforVOOA6LiOFOuoOEi7VGiYXD\nChNAB+YQdQcG6V/Mr8uGYDeXHmx9LUWscNANfsUNVBF1LktFjfpClwKRLjcr\ncSyA7aixdGtcWPbDkl6gFeDcyoLkYX2iqK9O24E95HnSrXDC5Pnl1xtL1PKA\ny5yOJ8wH2W7EVf3vzLsd2GVMti0A8CVxl3lfPWHLi6l+JndMhvvGmq7FrtBV\noANQ\r\n=cM00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/theme":"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/line-ripple_14.0.0-canary.43d08ba77.0_1638312921831_0.21450784115798438","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/line-ripple","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"678a33576e8f1cf328a0732b3c1505eb7c274e8b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.17a072535.0.tgz","fileCount":33,"integrity":"sha512-Dsqd836yfa9b8fGOGTdOb2ZmOnasNMD5dfXEzUV2TURbTRaiWf+tn1ThjqZhkHIAWY6fsR+OneGcA56H+HQL1Q==","signatures":[{"sig":"MEUCIQD66hFwA96cov/cc+tqIO5GQPlbiDwZ1yZ1JUIidpHc0gIgJszbJn59oScgbEfywV+9rruxdwRcEvK4QX9SQONcpkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQqwCRA9TVsSAnZWagAA4fcQAJGk6e+UYGC5hNPcZfd+\nRlqbbY7H40BArfp7pUqrFyOQWoO9wyCitDQJ7gMjNI05Ws2hBJm+Jl7n0z7D\n3Fame6+MU6t2UvElTvhBMhy5D0+EXQ5FN3IWLt7A3wQFy3WYtgQpl1yRePYm\nnfWMIjWl50RuYIvExuQsC8b+mVM6UxnCNoqhfNTcOdX72nEBUbIkMApbVEu4\n+AYIUFOxZIycIPvyOBQd3WAckIZ9e8tV6j1eJKDvAU59bLTlukLkNOjEgRSF\nNkhDYRxwgeXfDV7rDyNSBwp18P4Nj48K5/rMoiU/4CdU9KqYAM5QNAAh4hWD\nJpion9Z8lB1Ak7m6226WTSaWc3p/FOF7cgF5Nr5YZreDyHvVp0ceHXEUxrZs\nqZU4HT+YMOLFReNwthUa/VhbR+qrKijblst5kvTreoZVEiA3mjrQdlLmwLNY\nkGCDkfuSIuZLSMC233EbNfFCCPAApHGiygcr7bsfpndDC7JgYP9hB8U3dLQV\n56/wkgD4OWWvA5p0TLa1HyVXxZ6HaDavrPFrBtKnHpoM+ntiCRxY2aUlMSrw\nKUdqmRGvr+wvFTOvEby0pAduX1/jlQAWX+87Fy2UjgOxwPfnGrqLbTdC70Dk\nJa9Ox+kMgdxBNhBapUpnNHDeM0ukJhKiogwMZdLNgOjwI96c//PgnFayg/+b\nueE9\r\n=liN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.17a072535.0","@material/theme":"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/line-ripple_14.0.0-canary.17a072535.0_1638468272334_0.4443255809360027","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/line-ripple","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"74dd62e249caf8b62d64d413b53ff3cfc4ecb691","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.5d809696c.0.tgz","fileCount":33,"integrity":"sha512-Mk5XPHuduunAR0MXQWPPZ+HGRurThpVXk6gnAtjYGMeZnFqkbxpbXbUutdDzNbLQ7vgEkx9Vstjgzrgblh0NLQ==","signatures":[{"sig":"MEYCIQDjvWo9o4f0fZzif1X0iHsy7PFR/gkjGEtSVo5jIkKPywIhAIlymjtAEhsUHMq4n9BsNPCyVsdW1cpPPGWHba/y8vIE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO7HCRA9TVsSAnZWagAAsmgP/A54UN3mtuLHJPRvQ+ZR\nLGkcOmLplYv9vQh8LWNZT3cjpKarqddWPg2N5+AE2ROko71+nRQVOpfvl+kU\n2hvwQnDxzRxe+jH3qGBfACsw+ceTpQbnl7PU4XGPSrpVZEARWFHz14lJ+hsg\nZcspAP+US5uvrgCDtvkreC0RAVudfE8nT/UxhTbkQN2LiKtGl1TA+GJ2MIuV\nlsHMBQgqF2WjY0b9I1Re/ggHiBlABVk/yQlx5Ir2It7rXW68WD/oKYnIf3gU\nnWFZeSghiRABF+Ft1DlON336qisnk/QoUq2nq4WjW8cCpu48VwyF8L7+jgDH\ndEVWAljhaxsz18Sh0LC3iJ7ihf6N/kXCyYYnWg7minpJtePT7eQe5Ra6JcYJ\nJ08vju6LKmkVa2aH6Fqpx5OfVVTCBmj5v/jEAJKVzXWmxXxNtANXIFeWijTI\nQpfv9eWtZUryk59YglYULePTjDFAmrJjRXwJiIEmlf8NGSRe9QbuYLnmTZYn\nVqnCDf8h1xMkWNvFEI0NYPl03AWXnK/IXdIvIJZXgxvDoz2iF6Ru1mHWjUkC\nY/Ednr7LfO8cE8GQVzp8NhTZ9bJZB3zsQD1RqPaDofLV9Av2zhMb4XEKP9bY\nQWXewYuja91XMxyd+jYLMrL65K31RhLBVYnBd49xlnpsd9fheBAIKzPjZ2uC\nQzTO\r\n=exPE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.5d809696c.0","@material/theme":"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/line-ripple_14.0.0-canary.5d809696c.0_1638985415805_0.23955796581359845","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/line-ripple","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f116667539c6a07e1b95c078ad5cde40819a6aa2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.b6510c8c1.0.tgz","fileCount":33,"integrity":"sha512-ddUHqJeuKHPLL+4O9h4osrYL3HnW+a4lwaFCs8QIGElFTFGp7agCQFhGiC8unDkXQHHZCVIxLVjroP6WBNjizw==","signatures":[{"sig":"MEQCIFFnWb3jOnEKIjbi5MP5uDfKgfcORb2kHcms5PJdFUQiAiBX9xXlAYvv+Kbf51ZaxPJiJ4mX+n3JIpztwmid2w2xDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPP2CRA9TVsSAnZWagAAR5QP/A6C4a3r+LWJ34Vd822k\nQMBS/xO0XgTuU9zG99rtXHFuBuGdGD6O9e3nTWYy0vW6unl/eA00sCcWAhNb\ns8ZIBj7kcCJxBoClSB6WGazX45FHPfawS7vfL/rxyGjCBI2tao9D8u+jXquI\nWHSFXaG0fiFQIUnaO8gxx9VF4+aKoXYoiX2sYlIL7/cJ9c2Gd48h9LbCLQdN\nkgYEY6z7HdHBSWia29D0w7MC48JPMrJCntM3Ayhsh5YFq3rbeSksLqFzc2RB\net7kabw9yapurjKJBXKh3BR2NabQbfHzFS16Dfkm3c6B868SrQaAcHWYn/Yy\nrepTwIf3V1kGyax5GrTg6etVKoyn16A+b989wZxSQgmXTmcj7S/R22AZ0n+Z\n360AnyEaCEoEZyQxzBjPcX4Vp3tyiZjjSZN86Dy3CftI4AM5WXDMLh4pKKwz\np4bvMxiaA6kRQxHwLr10vcqfMy3amqZRiw/JbeFSNajAAbMNoN3dQz7Os4sp\nloy2Z5GnWmAOHeCgD/MzXaUoaZtiYrHZh65rIybw7eIG8cGED3Qkkj4+8pMC\nq3I3hw4rdWbixcBb1eFcd12Q2jtDvpXLd4qAQu61LlARyR0ELtc8UGGXpdYk\nJ/1D/oYZzKTWSkDjchVBj4NQ1IkOTj743GdryQSyT2Wx45JtXOp4E4jPdh2u\nhiH+\r\n=JAGM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/theme":"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/line-ripple_14.0.0-canary.b6510c8c1.0_1638986741917_0.11494144841510012","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/line-ripple","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"769ff210f778bae0795352449fe506c6bc88da5d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.f460e23da.0.tgz","fileCount":33,"integrity":"sha512-xx58mmFctljrDYgvvdO618G9KRO67NdAzfg5pUee4IeTMQRM1fk4s33rBA28MgI19orAJwe4ZH6SPb/9toe40g==","signatures":[{"sig":"MEUCICG//WBoY67SPYeuI0okammnueWOXydd+qJ9O1DvkbciAiEA50U8deX9e4pHwULIHqY+lcwpdGN8e/+b8imPQGTzi3E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3E0CRA9TVsSAnZWagAAY6YP/12NCDE0gfG0/0DK2bJw\n/RJyFa4aDUouV5Cuw2+YZGTEr0ZA7jxhJVUFacnMxZMK3G4zongDdV+kqxvD\nJw3h++ta0KI0zopoY6jt9S0COsuUKa+nsSmmIStO8gEGCnkpOURLQBuj4N90\nmPe86d+OwN4wNqMtTu3srs/FfKOC1NLP7EN1wzw5J0XshFjPq2JLPdBYdmJX\n+USva4E9He0hQAT6AHD7i2GZlCvDMS3ANtZzJEAzmhmBF4XkIosRrnPwleox\n2AUD0AQ2GnXLi9CCZrA/XklNVivTgALsInaSeclDWxh9jDpHVVvZs1Nt0y+G\nFWrizABo3Hzkl0GEXXuM/IgEV0tIyvhoJtox/wt5msvjEAuRPApOBchFNSqE\n9Jwfu97oH6EYNbgksBGAJBLi3Sa5nBSLJN3NveRSDOSAimrLlNeB9RyHAHT9\n6XshQp5WGxVpqv/IJG5rJCo9/ZjBbfX5jUFPzE9iuSY/UYlP9PfZfshLM+4n\nKQu/l/iqdGE5shjthdejddl5lnpM/IKNzYaX0CpljIkFy1sTynVK+y4S+38x\nfuhKn/ltSixbQ3JpMK5+rm/0j7mIa8WpXGXC3hBbsV/MKZpRyC81C1FY0kcc\nQji7WmUR1CTI4ChngOeQ+QWcuw20LdmLdupqOo3aDI2KDZH3w40cfe7H1Cx8\n2FNx\r\n=0VeN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f460e23da.0","@material/theme":"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/line-ripple_14.0.0-canary.f460e23da.0_1639149875805_0.8877981350391351","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/line-ripple","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"682eb71b23c236a8a955ea4405bace3dcaa7e109","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.7d8ea4624.0.tgz","fileCount":33,"integrity":"sha512-b9nQftcIuJVmhpuTNmKO1cXQUz0uJ90u2gZTm9JcXR0poajQ43P1axcBfMv1+OTopTwRoNwk7Y7kakc/cYSagA==","signatures":[{"sig":"MEUCIDdk0wTBD2tZhMX+nl4ZijNjzEZp+/f+QLYPCFudVcgVAiEAoS/NnLwOsiOYc0+MPzyZ3CML+mV/bIL5mgHX4tJPAPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6phCRA9TVsSAnZWagAA90MP/iPXTFsv2l628L9MoLJn\nvx9zB5V6y/c2HTmY1wOyeh1QSh0r3pdEegynJpBj9wJ6MI0sNjR+5TKb4LX8\nNChoqYecBE7X+5KxJ8lpFsBxuaa0BW5ydutSIgN24pEtKZYGihkZ7a0ThoPV\nFThP4U4vqtvZL/0iQarn7dBn3gRE0S4whDTnGW016Ucwj18empzcn434bzcq\n5ryJ9JimnjnbsJ+KYLcUcDcRlQLlpk0YhkQ/ZeZ7vE/dNycIQYoTw1Vly73F\nkHg3krLLf5sDvfS6qjtfhNsW5MQ7+wQIz0SK22t0ZiD5RnOpKt4XS7zJNzQz\na7FTNXVSGUa1XVPD8sHYeTWbuwk9LarXQO1lpq7UzzyRiBLlto7tW4vIBtRz\nJiLo/O321+i8JaEF8j4Dq74GH3jtTEFZH4NitlU7UpJ42R1DdgFoeOWfael8\nRjCjhysgTYOkuf5Y63NlgL7nd/JzGfwmm7oIcyd+e59oQnrYjyKO6peg/aku\nJvICYhB8jyjjkYpF937yGpJPcG5nI0p0xo1OWYg0Ha6BD3B0GCYPwhO1RGdG\n8W1U4A78c5a59pdhXHdtKf0SPDWILWwnp9a7gIs7zKY3rSbp9jABWOzjmjAU\nNMURrYPvadWYchYaBLgud9Pr7jwGbBp+8SN51KFjQ0LgutgCjcCI/KhS5rTm\nPpU5\r\n=xpgq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/theme":"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/line-ripple_14.0.0-canary.7d8ea4624.0_1639164512659_0.3202481276296463","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/line-ripple","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f3f2c7e810b67936920fea2bdc8370b34a6d9a9d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":33,"integrity":"sha512-iXKrjB1lSERJ4PcBBnqvhR0eDSHCVptNqOXNgClbcpui6vipbNtCzM4yBC7Fmxs+dF94XGXQjH4qLZX86DZ8ig==","signatures":[{"sig":"MEYCIQCr4Cp6rvrOJtt//4qzAmr65yTA4C2WCbT9z7uvHSku0QIhAKTE0AoVRKlVYw+fdJxV7kjEDg5NOCA/CXKLNTmKblQR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFu5CRA9TVsSAnZWagAAXUwP/Rrm+QM+qjOEB4TFHQry\nLm5CNkl9JRPTXeAcaQa2AZ2DWSqEt7H5BX+vQqtYgjMRZV4MQzvmKksEL5gp\nmTzZtrt4DhF1uEoAiEBBwu0+28V2Oz3aKIilMJMlcb8qDHpoEiXySQ19LLvq\nOi4gAwBwFH3MDYuuKhUcvPwYeH3rMnUQch0OdJ+owdO0MwGzZWFnv21dRUe8\naIQMT8RhuzONOKtKMu4sz7KboKZBuY2RBFFmRm41f2to7du8WOu2HQ1zOeQe\n58EA8iL1PPCy4nBgLyWM2wPgJtbc2cLVjLKNyntAY0H7bMzuZqJtNVf1X4Zy\nWb/m92E8nRs1SQl+WQ3ALg4TXlCwMU6zJGwD4fWfgPmhm2M27s7ElCaidKPc\nHp9CFskJ5/WSjK5Vh3lDaw5dIZNbc90RI6xRAvgH2Fx7Y37FY9TujXnrW6Q0\nNfJCKJqzkQkEvN5u8rWz4vunv2eiHdzoM3mNhrFBDGdIRSJbpV4hhUnvFcY/\n3HXF15u4yMMZiub6eGtPGP26A7wypHx0YFK95jg6sVyJJAJmUHSQzBKicg8Z\nMaIpJinvfqflESyj62+wUNqXWItcIaLGog3CKGb4iUads19er9uiGSRla1En\nbFdBiQKAu8SlaSebI68FWs9B+Q0f5tWgZ0UJfg2DXhNgOrNzJypoZ7/jP/LX\nVPzY\r\n=bf6x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/theme":"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/line-ripple_14.0.0-canary.8fffcb5dd.0_1639472056861_0.330777945495617","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/line-ripple","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"69c2f3d199fb998146c03f0865e57e2e7bb5bf19","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.21e1cb9be.0.tgz","fileCount":33,"integrity":"sha512-vwCqa88qVE/prk22Ic3kAB6i4c4rtzjeX6edKiqcJ6E+kP2+k2hlbol0WG3uWIglvk06rtOxCi7DX/z1FB5tyw==","signatures":[{"sig":"MEUCIQDxA8ngSl4nZwMWJLX76rYG5U7B/Qc4dOE6pmpJ9NnimAIgWWbCyKk9yx674n+1JHA3WeIJbVCjHiw+6l9H8KHMgts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPLbCRA9TVsSAnZWagAAuDAP/3af592RU+cZJXeRXsu2\n3oR4yYaoyYihzLA4cdpxaiUezomjMkNoiQB+evVh+2TKDXgZUXb1Ivonbjih\nojOw80y1/a6vNg6LDI0lNymUHVgu9R7cDqCUxSuk6FjAa08H9b60D+NCEmZ4\njcy0QRd3fN3UAb/DeeA/6S1Y1etIdMWe21fCGHTqdJ5kG6WmPdjUPlG77GCP\nrx5tRCYq7R5NzrZOypryUsoTNL2NI7ttMsaYnexPuzSZE6BRLMb0E/hW5ERF\nWUb2vefF0nPnTdDxyh3PXSgsiIv1Cj6GoL58deCA6n/iJSy28QNnPdH+rvxE\nDwsJxn7RsK2W+2jQ+d0UMmNV5hq1QwZki2hZOQVaSN4i8umgqwqi8EdZjEuO\nFVbTh1s/wvoE12JVQt5SlXHSww033w0TCpyEm2ZlLaNBvLVQL7oVXHrfG4Ca\nh2YfdYke1nNa6GFJpLDMYrQAgb8gzZzfplfd9BFR6xe9gt0sd9uNrx33X+nZ\n3WKBCP6EzqVdDyttwIPoQXT8rtPWaYF+lbPY9y6aBdRuxX7hmjUzoNr6ywlI\nZ2mkSFvxdm5SYePxgdZgUXmuTrT9wpVw5hWIXo8IRgcR/HZ0hzlS7bMKQnGL\nJkBm1Amcg9T4m8bnUclnq6xTLBGe0rA/vTLDxDrxeVYuouh5CaQ72Sz16Ohq\nCGDW\r\n=jiMl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/theme":"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/line-ripple_14.0.0-canary.21e1cb9be.0_1639510747598_0.621404339712617","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/line-ripple","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"392b79fcabc1e2d450529b684189ff5e3713ee7c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.ba78e8724.0.tgz","fileCount":33,"integrity":"sha512-YliTp6iaE9U5G/yoGItNPKlWZArK6SfNEPCVqjetmC6ucZRM6lnP3b5jkRCxQXmCQQCbTwIgo2xXp5UACYRWwA==","signatures":[{"sig":"MEQCIAILPQr7bTR5/YV+j3kjM/F/lX1LPf3CEYMH2vkk8YdZAiBdtKALpEV0o/frGAL2qyhdB1y+BZfDcK29MNRDgI79lg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumg9CRA9TVsSAnZWagAA5nUP/0XMn65zM3fCOUKVI0dz\nLhH7dbmk0z4luVu7IRlAooxDFkVyJoxkR4pQk82hAqvpsKkrL/9d+kHpSOjM\nTdhWVZVq+mWt38kIAtq1xJeqk1UGgghmLvmV+32fY5FPrn33I+6KZOfU1v44\n8HBHe7ZDwdERkFJhfaMJ5sYweJNt9QuWRYAvVGJFaClY+O99CnzHWY3rvMDV\nL155VQ/NqJCn3HnTGvacOyPJQpQ/ykEZeM1kh3r08tvsSEO+XUT8JMttgFZU\nL0yJMqXrGR+lC5lv1dKTdmn4O0QCVIdRGq9240aDTtTyHGYtMhoEhs2wsTYj\nGiKn4ZITv2Ol8P+4NTgLlX+44Y1ENtjUjG4ZQ8cFAQ09SEI04i0Dvs5sDqlI\nfaVeKL9lyqDNTFiIr5SgUS+z8pfbO55nILPEBP+v48AjSGba+2+fF6nWg6ul\ntEuFa/eIOC4YILEiJ3acW/F9wK82qjQH1zu6qpYTmDJhfF0/30I3M0GqPndr\nEBNAmrrr/Fr5po6uPi+vr5CXqsGZCeST+SkD9uwGZLXaAE6a7HH7eEo6soTU\nMYbz8wCnUAmvhgv4VlzVSluM64VDhtoADLmYjSgzIpJGPxDcm46YOgnzLEEm\n/GnarLmH7q/c1u5HgKBJYVbz5LavNZbqEN/BpuaWv8Xyvke/IFk9HsD4DpWO\nsYf+\r\n=F3vP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/theme":"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/line-ripple_14.0.0-canary.ba78e8724.0_1639606333755_0.05573225651778424","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3f2dd56d7d5b8a45baf0a4ecde0487434aa29448","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e3e073c00.0.tgz","fileCount":33,"integrity":"sha512-taSIYN0rQGPMo0TUp33+i2Fz/9V8VWWM2xjPK8P8wF6TaweQOWRymIvnO8KlrpgJ/J8kyVrFX6SPap6b3/99iA==","signatures":[{"sig":"MEQCIF8lgJIXqPllUcjLhEU6yL4G3Gn60j74qUjR2H9hJMqMAiAG3ZdKHZtgIKuB3tH8AS9pmsSwNtj0Zkoh+BTSqcxNjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPDtCRA9TVsSAnZWagAASW8P/jNx10XTJb9M6il7sHYS\nD0fxMI8/hGKriLvTxQ4rTPvAnAFLi8Ety8WOObc0Dlqpf2sn0ePxij402eE+\nzIqMeot/SpbFpXk6W+4f5NzjdbDnHDwdHO2L8ImQ2gTKXB+lL8YRS5Ns3S5L\nEYQnyfX4QdPs+NaNZQSuGxcjehiiAOvygKT196eQFWDRyA4MHCZI5zioCz2d\nM8GjQZUb6vv0bT+/ju3ZG5zR4Zirsjx22ICh4WG3QWdcyQX9QFqXlbgvrZVi\nuYuFUB5UtWvDihHhpAr6boVbWxmPsldsreGhAVm14R0DpKafhnxhZlvQnRqg\n5KPXkmqsoNSJ3FxzaWmEySVan6q3VSxk9V/SKvF3N7VRQee/79l1J9GQOGfI\nV1jtfMiJO1Ra/eWuY8k869EQv+v9L08f1q4hwLDYi2x5YAkTJcXS+4gq7/cq\nMpVGi78ABEgluEZqeTE7OjHEEyPnaickzkNFuaHOeAip7hNmnR1Pf2aCq07y\ndjkaxTNNaICSjNYVBveWm+iHAjQTdOQgzewOCUDcsZQjSkiGkakR7ULau9rg\nF5DZDRP41uigwNJcBLw/bxTxMbASgI3ONKhPPjnT2y1VTgz8MqZLksh3LrzJ\nTuRYkicNzCIVnLmQbjn+uMXkLpvrp4fYbn3/00Mo/4uIPm0aTpDplsEOwbof\nvFTn\r\n=r/3j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/theme":"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/line-ripple_14.0.0-canary.e3e073c00.0_1640034540947_0.13231835997718577","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"96b44edec901ea16349170adc61261f66a5fd550","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3366a71d7.0.tgz","fileCount":33,"integrity":"sha512-VPql1ALcu2R1PcqVPjhbHIFSYXqaabAzfXT/Sd9KH3/N3/wnlErZQzXx5+7UEQE5HPnSsJ+qs7vR4RV0WA9DwA==","signatures":[{"sig":"MEUCIBAGkpXNP7asVvxvG3/pbDrTw15F1rZmZPBe927OUg8uAiEAu1bQ1CMtqnUAn4Ac/EGrqEBe4hkt12Tc28b9s/C87YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxqtCRA9TVsSAnZWagAAg90P/jvUzikzPr8gO1qC7F8D\nTUOsKrNAJ7zGChx0hneTBuZJBcx05Znb4p4Y3nRYSWYYJziTo5CGLOf/qr3W\nWAOTiVV9djm11GeaqaQRjbl6/ujOiFR8DzVDWGJWhbMsBsIx3oUq3vHeIf8m\njiLpvGErSS4++uvlfNY6S2ouBiOy5Wz8MUUeaLAknTUIYbrnLrb5EqgtCsa0\n8K6CY9CfrmEmTQyClsKYgx1nKuo20QciRATk025/ayL9YnuSY3pbKgViPcDq\nN7Qj/iJSenwk7M9EMQLtV+qTCEbtKlJYrXu90uxVfuSk7yQrEdKvoalY/ybu\n2nMTHXAdo/i+82x4L9zwt4HJnJTPSA2QAziDNQwRIdbkhhFA84QpzkO/MWfK\nhxIO3OzyuvItWje43pAvhwkv0eyTMIU6rponOxeFxMJo9Tm4aS9p3xNqMvB6\nQTCqvnWjYGjyLmHaURncXby5oPXUvYJ71SyOyV1UYI4rmOlMMxrxID06b/6x\nf0RrE3s7GJY9F8ymExA8qhzVtVCZV78XqQXxl7eLAZ1fliiqQIsuPTSmbF6C\nGQNLSF4TqviSX+SPbY9ewwTGdvo5H989ktUtd5YNL0Pgz06lkhjjw81gOcaX\n9MhhIMF9DUrEXy03yHbBSr9ARP0nacas/3dYxy8bMuNmmIO0dvKiDiavR0Ug\n8Dw2\r\n=OKui\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/theme":"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/line-ripple_14.0.0-canary.3366a71d7.0_1640176301566_0.4948289989318315","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/line-ripple","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fbb58518722c0a4debab9e25648e4f4816225388","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.c047f7c19.0.tgz","fileCount":33,"integrity":"sha512-mwIxWYVo9qJYaNoVmJZ/0Qn7DYJehnaSrNLAYdszGnhFHDVDzbmkfJbVFrE1IvImzsqTNK/4I6HZw18DY545Dg==","signatures":[{"sig":"MEYCIQDS0mWFRuQ3g2YT1uV4Lp5cWK5EwiIw0Vqa3uyqvVHd4gIhAJkFsmdufrSffzYAWtfl8NoqQ0diUvU4yHLxa7W1kzCW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1csPCRA9TVsSAnZWagAAn7sP/jTz4HjWMSpNQVFFiNdM\niavuCH0QtNtLQwC22VBmR4p6e3QuqYbe4efIr1kJUEWYbGn6UQWHzqh7odbZ\n+RAGRzdMIZ8uiXDiycCohOWIE2HjNUaoV+rmy0O4AzaP1Z4BsLPaVSqMYdQ3\nPBKbmlM2tLF02uL/WTze1pcIkr6JkbpFUMopK/toJiRQIdNQ8MWuWG4YX1HW\n1P8tKc96gyTnZIV+WYZBGB8u3opy+clkF0QgzAL/jm6gawh8K/AzixHBTbqg\nt5dXyNaWvAMSKrsO1gzZnQ2A3pL7h70jwS11nVgL0WoYqvsMmGoJif61osiM\nM/mrk3FIw0lNkLH3K3tH3mhGdl5C0eh+mHdrglvyK9qqDFYFff/SkkYxRwwS\nKUPo6/vNUDe/K/pwMQad9G+cBi8ELTR7g+ax/xXoh3W6F6tM4T05M//f+Ewo\nqGSwJ2UUrfkSFgn9Gw9nzJvZWAVb31Da5FCohLpZodH6x+/DYqZVLKFQFk1x\nZF1Xj+ztJXyu++iynV/nYqtrD+8rlmsIFgM9LPMzlU5tcDRUweWPe4o3VAFe\nYVUrp5/fnHjckA62Qizc5M44axLFLhAWZ5hCpQvXRT26LkgPSsUebAij5uAL\nXSNLH3aExllRXaYdB14XwnV1i3SC5bNrhPF9wa2HR2AuPBuhUYStcu1YDaOk\n0wUb\r\n=d2eE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/theme":"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/line-ripple_14.0.0-canary.c047f7c19.0_1641401102794_0.39922178703040134","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/line-ripple","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ac1c884c2939d530dfee66fc449dd3154ec040c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.05db65ec0.0.tgz","fileCount":33,"integrity":"sha512-BvM7dU6FY4tsPMhLu1W4ZfncT9fcLcPJn2VuhEHu87ewYHY6l1fPTkQTTvrqZYyTQDG6uceuN2jrBcthgMS7/Q==","signatures":[{"sig":"MEQCIDyCcMNqkYFH3Oqqplu7j5vSKATT+3/+8avjMP4gIIceAiAjA1yu7k0xI9t4oCpKG0F3Q9RBvsQhZNbVyjaTh94hgw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yM2CRA9TVsSAnZWagAAsgoP/16LI3WHc6XOKNx7eFvK\nwknZVilLtnG3j5ZQ5azhm8wcPALQrL7XrCozJMNLoloTgrbJyL/Tre1+XvSs\n4y/7wM2uEiNikJXPDst/21e1h/oJoD77ZcPOBUnjF9s77q1qBiMTiJwLZFmK\nHlpe7ED16tyEpJ2V6UEGyiU6dMNekDWSf3GWaRNRmI4CaovvYNvMbx2Ji9zD\newg7njlD0tXB+oja5EWupOuo29rmiL6Ki+oB+BQc7kv4TAL8QFXuWN6wK+wA\nUQxI2uGeRzFrYBMVv5hfiUSUjioR8OOUHi7U0033+xx5NUmgTddrvwjBbO7J\nBlPbAgpCNnQcCkiFnPb0SWXAFXuEzYekfASv/Pt2hHcwuZYI3xACsAqtDc+0\nMaXJZ/VeoQ4wn1bgbHsHjprcq2FJYxIaKMJFZdEA8kYekjS+Odn6pyelFG7W\nMaPxKze1vLLxdoXTNcL+J+vb1sBVXa/H6b5p2mdwdGagMH1hDA1YuIqd3Etx\n5WV6yYyUIocmhhDVpGuHfzKcjpoDwEarqGVCh44azZRLE+FCFQYo1FYp2/02\nu76HsvkruXVtEA22075Lf60e2L89qPaEjtvMgf1GzCA4UnEOIVFFoIRHxa24\nDjrTGLmSeGpKloIdyl0zJ9k2+itSI3K5FmE+Vh46XWhTwY8ciFCOrf9pCs5h\njOB2\r\n=lgrM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/theme":"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/line-ripple_14.0.0-canary.05db65ec0.0_1641489206205_0.6758275734766845","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/line-ripple","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3459931676890dd1e61374ff461e3561f72596e4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":33,"integrity":"sha512-vFlXPosaf3W01Q3L+AN94JU37ARanCMxnmlsD/OjApK774T+rhofjbRYkTM5GiQ9VM1jpVc5ng5rcg0Y6/yzPg==","signatures":[{"sig":"MEYCIQCJsW0e2eAu+2KCdZWRnru2tU6gOelUNdEkrx+A7j7UeQIhAOWEg6qUrRYd4ICyd5XEVBQ80b2uzztHP/0Wz/KDK/55","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GONCRA9TVsSAnZWagAArAsP+gJ5xGPA0S2eqv9gtcT1\ni1hE29zAYrJX6hn/1BpwPwB1/ikFzaPN1QZeVQgHlJQ8KnHocHN0F0sj38gQ\ndMIywgkwM5MfNm5KKsuPiiQnkcyd3016018rcvXwGpAtTPH8UAM7yK3ueUHP\n9fNe/S1w34IImhN4aSD5qtU3L4LQBUTEry79thr2w4tRgqhMaIQFa3vVz32T\nIkwnuqVEOAEiz/EtMK3UTvpwSBoVwEqbpY9dNd6Pve9429qwqKXq2jAeh4iM\nZelBldq67KSc0NQBm0swOlEO4VLg/yoOUFFPqOYAeiOBTAysqCYrplcsTt3d\n/ViIK7UAtZxK/uzFGugEEx651yFEL67nWdaGAORSn17lyw+POflovUwv5Tw/\n94PKPOIJXgvWC659NMg7zADTEU8j/N1vT1Vak/KbbYok3MngOo5OjVYc7RHq\nHOGDNnF4O8JaDnyCISPIg9Rb0NNjF/LyvtXrYOx7BvjqVX4fZq97bd7KymZG\neMrDjN8W62D0TZum7ruY4lPCcg9+rxkslgPruMRohKnd3nW+Z7tdK2+NuujQ\n2uRnjINDQOjlzYkYOBglCj7T0l9Nb0ZlWW9o14fyoxK18PDgahhL1eo6wxTX\nKHIpDwmYjl/UYZZC24tl9eY8/OwraJVxraTjSCIFKRLw/eV7rVc9XnhPZH5u\nbsHS\r\n=AXEB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/theme":"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/line-ripple_14.0.0-canary.6ca8b8f85.0_1641571212788_0.8889238637505856","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0f940f5cd2fbfd30f6b5d41327269e37b2fac7a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.173ee7a7a.0.tgz","fileCount":33,"integrity":"sha512-GCMc1E4xoEWBVx4kHCGchIX3ouxsxvAOgGBmZnu7i3ReJWg8Dp06MwrPpIMICtQZAPmmW+HNhj5J64Z22RnEzA==","signatures":[{"sig":"MEQCIFPiDGHgwizz8WneOF46tvBRZEgzUw5aF3x5LT2vnVfZAiBsQQJPAjyQyVS/G8CurnJm0/dg2Zbfq2P6G2rdqRYJNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GSGCRA9TVsSAnZWagAAMiIP/i/Ggh0kA4DvnfriJrI1\n9rFCBi+s5fMrrAbCFUCuM5EOhre2Pr96JL3+2OIAkwa1982sgBIOzxAbHdgC\nEhoaTkPgZZyI8eWEvgfST8qQOoJuqCA9diJ+DYBj//0WK6+/Bqoamk2h5lAs\nFSpV6K/HQggbBWvLbSTT4xvzFenFI6Ng5XNRYGtgiScHvngNEhAKClg/cYe5\nmJtrhvu9xfOx3Dprb5o30Slt/JsDvXFBNMwfj958dWeB7MVH9kemPkfBpG1O\n8BWebqXZtc0Cq9vLrK1EsPqBRwynPAxrmwVil3iPFz86/RaVgJ6ia5i5Yf8S\nztiqKOY99Zn89hCL5N3dvhlec2EboKv7y1od+wOE1E2CN4uxnPuOPE0Xk/kj\nkIJKT/DPP1t3q54Bqcyg0ebHE07ABqFzdWASr0Gl1MiDtMROaH348bhNtoIp\nXdEdd6fwp/V0Nx2Z6126u3pBIiNt4GpWZHqeCN74SQXcYp7V+qbXxavXZahD\nyQ76BBgP9PQ0sz9v/dUWf8ffDOq1fiZayvT0PGVLrrSmGREqjnLJ5hY2W1Nm\nOG2F02OBfTChj8zZHtmkIDN2StahTMwp/AD2iUL4nst+NggfyK4rAsHWNvBn\nyvnTDr3eCVDIrYbIN83mqOT7d4wUkMhkmib0Pzqk5OPAeefmW1FUSCSe5+FS\nRlFP\r\n=5wcv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/theme":"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/line-ripple_14.0.0-canary.173ee7a7a.0_1641833606323_0.6136261098804967","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/line-ripple","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8dbcd78e02328acb830456b90a857e115337a8d2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.b704e4dfc.0.tgz","fileCount":33,"integrity":"sha512-HlrmILrrlIv2faM8NS//ZZ/ifbztZcFBzd/ZpXxOSah4HPmBXmKKIklzV2RqlQa6oDcYvYUqTSvTipvktsZgkg==","signatures":[{"sig":"MEYCIQCCaeY0/YngXxyFTdn5kJcb47Im2+EWHVbbBhSD/i6aoAIhAPTxRLps9J9ZP0KBWNEei/FN7HOzO/7DPGnUxudy4DC9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HuuCRA9TVsSAnZWagAAuWkP/Rz8z2+NaPLWl2YxBNyU\nBKseVrQw+8WbH5kBK9tqt/4NKBYvZLFwFnfegrDkFi9+8Kl5FXQropR2BAEq\n9sPha+nRoPz3U1zpGbQHd3d0Wfj5Y5410oE4zYQ5HzZSA5xsaHtASxTBH8wa\nngu4o4SaFU+WZDKXs08OqTVz81x82vH8lO8DVv6pcfSvmq5W/O8KnmDq4ICz\nwqbzbziLr/+T1z7WVW1wLCgU+D3iVB02jX/LwnLU7cz/mMFtUkaO+FCZCkT3\n//0/1e+dnpL3qeEvhBSF1jJV7LJaZdmUBGeOvrIdVkB0XyJRVS1WMj3Lxi/V\nDtSMTRTQZBWT1y0xKOLhZ+KCFdFflttK1nJgzDLcLdSk+q7DUefKeZxka3oA\nrnmu2+AAkwcch4WIq926wisXDqAzcEb/bND7SXwru6JCz43QLvkuIvxxAUkW\nm1xTZDykwE+j7zor6r+ttQDzlQAKAzNu+YcJVV2db13g7PWAiGTr1pxAoImY\nHTWLPcMjfebEaDAi8uYHr9YxfaG1obRmq+pKR04Z2pfC+kjOqDieFbAG95Ak\npFRYj2C16mFiSt9R3FC5tSXF1nD/yMlFZ7mJ9XTX0ksZ1F/5vO5VypI34453\nFdGUT8fcY+ubME2GEyUke/xtlV1EgE1QU/doObgC1xZ2NbKeDFITz+dVznIK\nvk5a\r\n=MOHa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/theme":"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/line-ripple_14.0.0-canary.b704e4dfc.0_1641839534389_0.19197586665262079","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/line-ripple","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e03288e4a076220fe577f3e45de2941ae041cd9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.c14e977ee.0.tgz","fileCount":33,"integrity":"sha512-KIF/UUrKmShTJ1B6R3Y+HEUXrExyrjtAQz7WuswhLhckgf+u4/zzDs7YQxpncQ/nZQD9MzdUv1yZARMbKKCc/A==","signatures":[{"sig":"MEUCIQD5xQpOQmdGUyw9SplT0L2XvwWl7CcJZ5/ZJG9ZC5i2ZwIgU5rYuiLlrZeNkpSpSV7qnM3+gNeX0AsGLBiz6T/fkeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3abhCRA9TVsSAnZWagAAYRcP/1BevJW8kURrbtM/q7kl\niXpbHOWlj/FHA47gWq/ZC7X8aho/JeoGKN8uwfMsoTRf9LcV7okzULWywM2W\nLoI+Y5c7dJJ8cB1x/mDzUckaptGYJs2/Oc6y9Z1TnlgBI8XeE3UwQko2VPCh\nqVRX8FHz4ch/tzespd+oxmA0B05WKIQ8ruintbUG8izjwhqKAss5MO697RS2\nz6dclAMCljywJf2iuGsrP4SUpaVtj4SWXRIGKI6pv1N8bA5lRFNTialMNMKZ\nwNg78Tyq1BNZmUz6X9EyeyjqZ6RnebDP6aaO1CxJEXFgO2Tz5WL+B3GqswWN\nBCWjF7HAk7YqP6ZQ9r9DbJXUG75As3EoGe3oBLHVz6dHPXxy2riob+GHMDlK\nSx/BDHn7O5QICswQSX7Fd/Wt1V63fWIaGmPrNcYSPiHnOZeb/dnQql7syg0P\nwxn1h6mDhlhfnkYBh1FPQoonvgfdXfQwPm3y6+xTtQAFfOoNus7TkaONi2iC\nFybRR6RDcBNXPf8FvKnaI5fuYp3hO6fK9TuYZQZwIiVeObpAKqgyDcYnJChX\n5fRFCQQkJnebUroR8/O6pLgdu9kQDDLl4h64RPQto+y/5XmNfhfEDEsbqJoO\nZITEjB2gHMWnwF864j+blxQYRASSq9M8nU+KpcMX/6wCF2hNUQWbb0banM1h\nqyXT\r\n=YM9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/theme":"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/line-ripple_14.0.0-canary.c14e977ee.0_1641916129622_0.9280394961283558","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/line-ripple","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a591eed3134d8c47927fc0a76e1fea806dd4defe","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.b094eaa4e.0.tgz","fileCount":33,"integrity":"sha512-yX9twXVQ2OSgiXHG2jRTdrJkcf7KrBbOqILhbv9ZEN67r6dzCay8QzHlwCRLQS6CXO3n8HmDrVRtAMfWAzDkzQ==","signatures":[{"sig":"MEUCIQCbu9OjgKD4BGQhRYcLey9O3e95S3PdPDQCZyUeQ11XLQIgEqbDs3SvZB7gD7U2IORCeCuq8O8dsozjUtoXpo2Cd8A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cPhCRA9TVsSAnZWagAAiKQQAJpRr1+deBhLWC5myR1D\nHNd1DAfmCfyBxaX4yP54bZd4PCGdmDIuixALHYJ+pmhztlusYcdwgUusohi6\nNcWyQAyTGTCsy1bNE637st907cFd91x2CBFgwaHu47W+DUKy6mqDnG6TpwRN\noUOVK3Y5A6zTyH9VaskXfKLsPdnUwJKVsGiIvgoKmLyLPd7yBpbW/te8glFL\nivDsIE1pD7oqRzz3Hl/txoiS++QpIX6JFETjzSBOu76Ry9hMCXuTcO5RfiO1\nDbkIUCciGbjV0NkUNHcTuLysxR5Mer8letUMpW1vBJetip51S02hcwVjvHDX\nL+YpKbo7LVLmnjHNRpAlSe2i9Fe0ZVkWXQqP72Gspwa+/8aVUu4CAjWaHpZq\nFmq0XhPCup0L08g8tz+I9HTLkzqoTHgIfdlGSv+tLb4+tb1KbGJPCxRA3Ivq\ne7Oc2r3gBga4lGo6MsM9BZ8x4++TqECMbKYZ6vqk+M0DxIhu7W/Lusq1AgMD\nWh+pK4CPRbpvMA93hEq5xPB65ZkvZawH57dxQDoWebEd5rtRnxQXChOYnd1Z\nk+RbKPPHnugT102TknkGZYGmoQiSy90fd4WRftcy1/yRcpkjfLlnVFPdbe3B\nQOcbaTsoUM0KFcph0bRE4g8IEwOkCJy21zHjB4aiGJeYtR6OoBeOtFCa9cBJ\npau6\r\n=Rave\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/theme":"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/line-ripple_14.0.0-canary.b094eaa4e.0_1642185697745_0.519315024086876","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/line-ripple","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"53638ccb65ec62095a00d3e0192d2d455408e733","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.390220e42.0.tgz","fileCount":33,"integrity":"sha512-XqVdH79EajsFBcWJRlWRyCXEnz20aJnTo2pLQHCWSF48lZOsmEK8xDXQ75cagkx+Pp5KrU39d5qu7mzr1unzvw==","signatures":[{"sig":"MEUCIQDj/wnLmrs0WURrTbUAv5lj07qYibXs75h6cqWraTzfTAIgR2mJKpbWem9EDWr+5yc1W/+KXuDy+Utgu/HTJY7VDsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z0gCRA9TVsSAnZWagAANMUP+gN+oepkua9XqLe4tixV\nSlMwwf9j9fcNhPnVtnFUfTkJIftxFzX+PaGt2CW+ny/q8hzqX0z+0k7n9vvh\nBQ6VBas+FZQKAKCRXWRG4rCmKa/WzDPDAP+Mnh6YkFc9PC7RXOJ/FF46jCJz\nLORir2zn/WpXHhafBWsZcEyy0LrLS5Olr39b+QpWjhokrsMZe+OI2+PnAesL\nIHKXQueBlw33tG/CO2PquNOa9z6MbWJstQ/c1SMIN1qoDe8lhEFDVm9jBROc\nNX6Zhdxg0eOSD/iyFWJjrY4Qj2iiuBZmttUzqiGpWvJGX0QrXrxmcPZ9eGKT\n79RIwYe2QFnzdk9nxjCgUk/DSJqyKxX3+ZNq4A0sIrlnexnwTwgD9975iaCk\nbEFZ7CjYM1ck/2n4kZHw/F7TKcDTWA1eHOIp7BL9fV5MIfOU/wUQ2nZdSxI7\nuxACdzs0AcyzacFho2nKBhFuYo70aqRxRLIqilFEz3nNtBs2OFGr56obHDLJ\n1U+tf/1AtwQBWCC63yF/OdGdgxChZoCv0SDK/tw0weYcMFEX+RRk/ThWe4n+\nUsVDhN9B+7dRzqsaBHmmhxpoQoQbDHftU67zT5nyyWCEj2lBBvF05t6v5bfZ\njPvsUVT0O/EmkA1+H41agELyFjAV7h2dtd6Hw/EkAQHsyOdNK6raCZSJUjPY\n0nZW\r\n=mLyL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.390220e42.0","@material/theme":"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/line-ripple_14.0.0-canary.390220e42.0_1642437920047_0.08325787140983487","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/line-ripple","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"978739a22b50d0e328e1874d30691f15e9fae444","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.4b5391f8b.0.tgz","fileCount":33,"integrity":"sha512-vbj0/WFGjWiVo66xZh4sYx0Y/Y2NYJtoTwrT57LEnBCGVv8/14kcktfgOpL2kBq2sI9rR4AVlrONIW/6VX5Nxw==","signatures":[{"sig":"MEUCIQC567BvhqATNyEMbIveAL7MUlTkCJuvmt7x4hh9ejBtkgIgK2NeQyE1+wywN2YsfeyTZXe167iXkrOVNzTifJDv40I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KQjCRA9TVsSAnZWagAAHKAQAI/FXs+zIPFtlXwbFcfa\n6jgZ3orZ6McvYqEdUVpnkNZJK2W1hK8lvL3DnmQ8MduZJD2co3L5WTROQbjA\ngee8m/oM0ju26VUnmkDRMS5dDLwfwefESkkR2N2xv8jTKN82XqDRxAoxuCcI\n0NC9yGmEeQV93icSD9grsk/LdJ50hH8gAyN2YSYihtSguG8wGEqvt17056Z/\nDKGX2IoNOVHAoaDNrxZnO8TwyiJe6ylCy6KAq9gt1/NmPkMYZaImfTACe+IT\nCuaQbj0rtk/hdWxLvx10myI7OuIEiRS7aPzdcW2TvfbkaCi9N83SKB4BLKF4\nWNgm3AabnhfoS+xrZJwrloKRC2Fgput9EUZO16rq6vSiaohnyG8C5/NInpel\nEkIcvHUvjTLvCh0WRd9tkhIEkgMJS2D3EPjrPoQ8ryCmsjuWWY8BT7Dca3o9\nmhn3VJU0j0lbqwlgjRpvNLJolMnPXFtCoy3eeORYtcfawmAidcFMnok5z7WB\nm2pseZ7MwD7uitQtC7J4KbdRJh10bw10LfZAggcI+ICw3bKF5lCUsC1eetg2\npqbAFuDRxyltMpi64oEe3VlemDeYD4kqV0RMd0aAzmFd/6S92lFCpOfmfpwI\nVA/ytvfYBiEufZjlg3lJeGgk5KxjcTgEsPVTFdVWskb9XJU0Bx+DUsouQ09Y\nToTY\r\n=LO9t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/theme":"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/line-ripple_14.0.0-canary.4b5391f8b.0_1642636323097_0.9121725160773788","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/line-ripple","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cac115ebb62c58c14ee840f1c1521f4deb975954","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.cef6bc623.0.tgz","fileCount":33,"integrity":"sha512-6+AW5FKeSZ4PinGeqOcV4XZKN4OPivxwvEIVhYhMAP2JcQNlMU46RVD8BttWqaKosBRR8IkWfvTcFZI3pSBTiA==","signatures":[{"sig":"MEQCIBU+mnZ594FidgGRLN6rk/q5jKLqQ07eVFBGs0ywwMqKAiBDXv+qI0devcSaWnTjxUC5R9yUFpb3/WIPvv0Hnte2Gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KnnCRA9TVsSAnZWagAA1L4P/R5Cep/Fqd4wqhEHjEb4\n2c8uhBsKLF6p85VaguoiDX2QmEvPk3GrB/OuzlL10nfkWbGbEsbU4P7Gb17O\n5cqvMK4gtH8ftHv0DIJ0/17bDsLjX6t+PqXfO5iHCEMdRbCsLJ6lYcYRUqUM\nsEZfsbd4jgnRyjv+u08wVBaMyp8SYNSGL0f9cSt61FoAPfgVF7RNfPP/YbJR\nxgXtp7pudvDezsFCPKjCCnNQeT+n8n3IiYPva9/NUGlvw3l4t/VQPH7EqJkG\n6EGC7sR6EzyQ4PV9xkUEaHdowpYBpdjA0HRPIf/QyElzDU4gJaJYiibngNxJ\nWS7Tc+Au+R6WsgwffB9+GY/WRMUY7Q2hlJpmhT4qIrg33KBj7GKLi4Sdnws5\nkhKg6bvBuoizoU6hBB4Xz/b28C7ik57PJxtoVTYYex2hFnYQA5TxaRwYoccv\nCyvgILdUY+/+U1yrY+Iv2F44lBEu3ZQrNdr+EKVse1iMbpfO+hk0zDS29IZE\n7ETRFMP0T23nDqmgItqHIaVtIcBAnjTCQ+1cExLn5kkgFeGg2bDQsIh/sxub\ncvDXwpgAAOrqPDG4rBIy9RAvnkbXoLhvnQwfTd+8xideJKtqHgAP+AP9eVsU\nKh0eWmr5aF5T9IORrSZPyoW5M3b0B7cQ4K1MDU4cvfLFm2R4F2xuy4ZOXEOz\neoLl\r\n=b1O7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/theme":"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/line-ripple_14.0.0-canary.cef6bc623.0_1642637799672_0.8846014771520376","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/line-ripple","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"24070ceee42b162057c956b7b43ebd522c477bfd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.0379179c4.0.tgz","fileCount":33,"integrity":"sha512-PrAgpKPD2WHP5tThI1463ZCCxUrrVB8QfUifFXGHai725vOHgZZ0AQXn+odFk/lj76rTvfS3588mHOxhutWz2g==","signatures":[{"sig":"MEQCIB1SRXAN3JikOBhZ8QsmgFQjm7RtKnGBFGWwhznhL88YAiBIbV9aPzAe1r4T1TUdqAtxCMA3Ot66QnejGe9UVrAJCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6a+0CRA9TVsSAnZWagAAfckP+QByCoF3XTzudsCMFQRH\n6it/XzqyECHRTw0FuF4S1BRkQI1zLpwW1xIJwAjVUZn++vo0bhJfui7CoWft\niv8AqFkP7LUSqE3BmpAayImPMwzUUrLEi1jH7YG0s49k3wXqT4K2+cD0/vtx\nEeViJJOVPx0Pk5gc3BdBTmu0LRMgXM9RoeaTavZlSVckjHPmz49fC7fVSZw+\nHmRFqaPuaOk8DeOAz++Jvwrp15Xx6eOK+ipohWJra9cJJxFd7mEDqh8b4a63\nT4TcTvUn1LhePIRSZVuE+UbJXAnxtJaw9CqE0D1iDChcHZuqd0ycGYGThHOJ\npsEbHykntJmlorbq4AGGjarpxXtg8ifrcSOkcC0+c7dOpA6L2x/9qDlQARXO\n47p/IVXonvy4A3NJSfMZExQu5im8Mp1zh1v00+VW5CiC0SrNKvF8YqHisE6M\nIVxPEmLrHjVikE5pDviPVxzb082pcvUOIkgmb+LjUIEUeNkmK93WsmqcJJQv\npvJ4G7Ug+J4QCKgMK6BpxaDiYmokOHtwqy2d9pguzBc6NK7UAXDRYqKFGs0v\n8Fc1kzmJZIrGkaIpzbSekuAAL+uaHw8dFX9xms3hV5ER/fafJ4XONYh4BmiT\nYW4YCpm7eXfJH9L/dT/7CSva77fPnxL9mj85fFeZ6CGR1APXVfCxUPJBXe0k\nI93a\r\n=asYe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.0379179c4.0","@material/theme":"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/line-ripple_14.0.0-canary.0379179c4.0_1642704820284_0.4339058310919812","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a371d1cee7d2d5e5a5910663001fc8636ce40c08","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e62f3dabf.0.tgz","fileCount":33,"integrity":"sha512-VyAcUgAbtHp47LaoHrdZUbWDVRveFpRrhIMlnEK59AdyfIn/a+ZSaxwxrLOh5mI3eQcyMmLmMqLPY1meluvq7w==","signatures":[{"sig":"MEYCIQDz9I0XVdE0qLFVl6i19aOjPdhHqbTrq+Y87uJX0F9EfQIhAOUAAsgSTQgF/M+fzCgr386EFO5VonLa666n0YRcdesh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zuOCRA9TVsSAnZWagAAmPwP/0afzHjhKb7c8bXuXjfO\nenDEPD+aQwkkNq2SnTEkv8Hf0lu9D3I9fWZztSWH98gi070HdZYFjBUin5ks\ndkgXa6Uqc/g3Og73HxS6dgVQUhXM9gMkGYC4TJBzVS4A1iOyevIjJ0I82FTu\nniRbJhrSgbuaX1Xb0KTMEQ4pRFYtdeLpU3ztkn0LesB1mU3/CX6TIkpAUtxi\novWo6chc36L8drbEFeGcimF+V8K6K5Kml4dOUMhFEB6OUNKqWTMyoQLpzdQC\nXlT4tcWH85X5s+5ltTcbP22oyCUZlVp493ypu84reTCSATzU7IU8ZWklbfHN\nuvLfFFiDs8QxBXczBNmkMrlnVuiEz7w0tZtx4nBs8JMrn8pQRpAM3w9CPREt\nWhcwX8fgeAMw3Yp73t2yAevXfoJPRTCmGVFkcKyl+lL666peMkjAOdzkX6fi\nWQtCPCLud1q8sEUjq6V0FjJUyhmn87CN49L9Zpp9SmLqSbdGW3m95i0Uj8Mq\nq+7oSo6LPa7z+zPEvfqR3y1QULPyKTHBxyk+VCeKTXNFtU5jfJff6ezah36P\nFviXyCU0z/je3Tlhzt4U7v7eXAfOHhOqxQtgu63h6KdCY3ZMtq+eiJAhp8YU\nrKcRfN9KPXuGjv/bycEV5Bjqigni1eLgCdKuL+D6vZ7vWUdOdJSmqwBKdS0e\nIYLy\r\n=AB4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/theme":"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/line-ripple_14.0.0-canary.e62f3dabf.0_1642806158730_0.06020988276910244","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"90d155e9e5ee01da255be1f9bb5c6f891e7dce2f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3e20c1de8.0.tgz","fileCount":33,"integrity":"sha512-H55N8lJ90EhfKP/N+b30jZuJTKoCocDyMKZH+mP7UMzol1v1bC7rGxyawgI4EdgOZ9PlK3MtwzFjAVjzaVzTSQ==","signatures":[{"sig":"MEUCIQC9StLfD+DBJDVULqKefo20BwzZb2jvJndUeXnXNFwuIgIgQZO+SAspsR0EGxTVxHgPo1ff77ifB0koThr8lCkYv9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BewCRA9TVsSAnZWagAAM+EQAJh7ZoF+HOybZhw0k/nA\nlZ2KLD2KfZOMBX5rNU7A2B6NtLBygTYIATfnsFYdL613xkL/ddrGmklpx6Fr\nOEqc3ss1xgVEowGhTkn32AT+LqULsG3q/BowJu1X7VrxySBggu4hziapfSfr\nmG7Y+VO08cCSXnKo0JjO0yHZK7KEqoPSR/kITnu3WhQcVOkSbeXLR1XZ66V9\nY7l1Iky2MMOifqBPGeDuMAVZM5fwko/JKyP9Y6xTHca0ogfnjcEMnL8WktZ+\nLLzjMpWQRBJftyViPRyyDQXVPkhW+7NP1Q7NNFQu8nI/P6DwmJlkFpZCYlJ3\nY3wnWol4KmEbrtf/LnVnfp93v2pR/OvY1GPor+yngFBFPpJ9T/5EdCnSkxYf\n8UpUDk0AhnC1UBpIuxiag0OGelARACMcDM+XuYFuRb+Wy1PEVR6T+kMeMZQk\nQ6NSl38CXIO6U92MeyxjqDtT3EWmMiFUwHzQ559f6NQq0wux/hflChoW0IIW\nofhpiP7eb8Qx0wzqF/Af5xzEclfpMls9hByeqPuLrJzYHvBiQHee7fJAAIzW\nkDlZoNR6can1uQZOQxdzBFrf2+8SM1/21benhTFSGnkVpLmZ6sFWSOTL6UgI\nfpkharCPREKiT0Bt7Pl4l4qS11isvUIq/xDy3eL6jbVIZTOBfn674R+zKV/M\n1dgW\r\n=VFzM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/theme":"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/line-ripple_14.0.0-canary.3e20c1de8.0_1643124656605_0.6049057976390759","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/line-ripple","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ae9b273343c9a9308d64f4888270424805d00920","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.9f9d928b2.0.tgz","fileCount":33,"integrity":"sha512-hFpJn5vpH3qxeIbXL60wRIilvWk5YvE/h5xl2ezbVJUb03fuez+TUdVFXCG5xdUzIqqjXOZtu4CZkFP2ul3kgQ==","signatures":[{"sig":"MEQCIGvpJxkIk0l8qg0s1U5hSkTHIQTGWTFXSFn/C7gOW3TKAiBJqTQvd0GbVaNE4SsL/nOZAuPBWadj/iGh0IbpF5nSWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uCJCRA9TVsSAnZWagAAFKoP/1IQcX01ADnryduzCNJz\nN/1lPuSR5vp/GFqB01+e55YDhUMe4VYD/hAO1mMEdsFMgXiYFtJ5398TouAh\ny8eAuLCF/oLbCvchC0vwNhZYxEyueSbng5jFBA+9B+Cymck7+/ZSrN2tbo3n\nlb31irP1sv32tFJ34TSBd8cRwmlBhQWbA623SvVOyg6u5A8DrVrPA8GZHSau\na/wPrEQRsJW3gnX6KH3lGhKUcb8SV2JHyw3QP4gZ3mEkIJTQCGwZ+156XZXx\n4H8xqR1DtALN6qEtCitcLcVVjn/iB1WPLZudZKXCVv1ffZ3+hIbytXsecbjC\neX67Tmwisu51sng+otKhJz6HF3EkhKSyxZNIr0M8UQcGuUyBQ1Cz88fCFgCX\nDfemuoKHIn0sSz2VWrKuzv9EdGkTzJfuSidiJ0BZ/j4iierV4GZ9sS//iwcS\njtK2z0j6eBsK7gPlgnAjkNSxoRhEdmOF9xkmee/vUgnPKCQmt3CMSv+oSQTH\nv4B8lD105YQ3/F4jcpoHPXvRt9aOhOPeocDgGaAc68cmqkhAqnn9WK2QCKPu\nLED68ivaCdeD+RtP4/Boo+qThj9v26fwck6mMXGR97yrnuIDrzqLoc+rk0md\nvY6XTELhishnqJbaJC/jnMVHbOV1yJEyJMYZ3fCT187eu3idU8x4rZFKaQNp\nKS/5\r\n=5MAG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/theme":"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/line-ripple_14.0.0-canary.9f9d928b2.0_1643307145698_0.2701268997697057","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/line-ripple","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7efb0cc0959b81d66ad1a8dcafdbd8a79c4f16c4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.a2bcb065c.0.tgz","fileCount":33,"integrity":"sha512-Sn0muSXaT7tHopUm6oOPwZsxPUwDATGmUyxvxSRf2SpcdPp+CYLjifxYlpDx20C/KaRPiNmoZsX/LQKt0iwv6g==","signatures":[{"sig":"MEYCIQDnBiIkFNt+EauRUKeErNWWeMZUggTfPsmbTKbyvruxFQIhAPtZdEGuLDnLnZP/7Ou38MEBVw9bQiHxxBItWTuwZs/O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EW3CRA9TVsSAnZWagAAUYAQAITpzb4zMYBGzleb2172\necwMaHzLvV/Iya/I2YEPxxH9WXMvMzG9JBxmznO/XGsM+8smfAxee3bIiUsX\nEfHKYp5rU8XxgxhjX7bISKYrGQ12odRrgbkMSgojfXxh3zkXTAYD20Jh9fLx\nERtOE2G+8aBHet8il7AFPC/Sd2AluajQEGcdjjwU1nWsm/pwW6w4bYMrGupU\nmDzcXqHKMjiRhb/NkJdVa7e4So52HssS16Qv8EktfD9gxsHrsYFts7nvhDC/\n0qQenVRUY5xAiPl5Spxl9W9Q50YIV6UusjNaZnXympp698eh3V3S7Ot7Ahgs\nvOYmK78FBtFi9jpTb3S64ovLz0uQJWk9V7A1VVkifOPPlATaZZvqOwXPwjAv\naUT0axT1mSIGDC84Us/Cw1LNY/4fCsIf2MQ5VINeEekoa6AhRaFATfudeijX\ngAm7GvYKp59AC79HpEHStzsx+uZE73ED0m9yJuiyrlFKRnBOEMp3LTy5lXvR\nw3QwJUTfOmidVHRp/CHoC0esVPj1BYmP0JsoWKZSeMcg2cerqeldhePMAWd8\nEfNrjmEdjpla6pzLgvlvKMBKjMVUn5MthTMaf+A52f56BZgfL7n0T2t+y30H\nXAjEqMXAKUNjFTeEOnaBTrqDRwZwOd7NBm1PewR29wx9PpBBTcURRBCBXGEC\nNYpr\r\n=AJ6e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/theme":"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/line-ripple_14.0.0-canary.a2bcb065c.0_1643398583284_0.7496990485761135","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/line-ripple","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d4d2f35edbbafebf1401c4d79463f9236b06d99f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":33,"integrity":"sha512-kwzknMeOLZi+3aVH/VA/lnX0WnxJaUIE9tBmlO8r7h3cywNewjoGQzr97KOWXLuusWc13AMKY25/DD5j4jasrw==","signatures":[{"sig":"MEYCIQDpT3Hx0ChM3L5pVCjlcE26QuRfT872H3zL15Ll3Oi4nwIhAN65MfKdRFOtQgKZX02CQQR7ewIOvfcX7U7kVBNNE7Ln","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Ea7CRA9TVsSAnZWagAAyVYP/jFSTayMlay/vSvw7mut\nOgmWw35OG2N8Nw+DLeigtd45gO3ac10vuTEFOjoll1Vl9yGgBeMkVWDIyQeg\n7lEG9bf825gDkftnHOexNAihkUJsNsm0+3b2RTE1tns+jh60My8ZAeRRUXaf\nuJGvmD1WuaAGbuejLBVKn3ynky9OjHELS8s8xHu2OvB94k4jcrXQM2Pyzqlo\n+J/TlguTHRSfiJaNSpvQOJk+ZT/XZvqhycDtSSoCFqvJ6PEzNp7sbYUd2yg2\nSkarDIxZpm410IeN+kp5HNhvSGbsYRiTb5+ZhIpc4OMiGl9QWRXIWca7+cc5\ngDiJU4wgMhQ0Rgo4cW/CQXu2bRasPsTZ2HakiD7lq3d0BfuP0yz/fSJCGPXH\njDTbW65yUQ9BOXlvMNQdQP0ksDSqiJKvVA+hPmdoWIQYZ7uKJR88tyPrXPdx\nj4PslZsyuLGihTXZuWoQLX5oS0TvHd70+PKie3doIfTBurW1Vmwzpfq+hseH\nijRj42pOg8FrPTOJIsT/Fx3ccUrS1wmcwIMZ9/A/Im3zP5wBqIoLZthiYwtQ\nCxrF8dMKA53avMpBLjP8lxNVTwFdBG8Jgcj8ElDoif83d8xYdIkL04zvfGt3\nRE29hswJpiAqk91DzDr5SoutivqDi9wikHa/zeFOJUdtTO7TQ4N7p8ViLBvP\n6/SJ\r\n=4QRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/theme":"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/line-ripple_14.0.0-canary.4e66fb2e1.0_1643398843552_0.27598336742741614","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/line-ripple","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d837d533d2cd501f4be9851a96bcc874273ceb44","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.9736ddce9.0.tgz","fileCount":33,"integrity":"sha512-cSPsOZCi/P+ePUCV6RpiUcZouBhlBE7I6xjnMHlnNI8NYsl/naJCYCVnQYr7OOc07vxZo1wUiMXhXoy2tlfsiQ==","signatures":[{"sig":"MEQCIH8s7idxEKelsOJ2NpuiQZMHCKYg8u+AM0LC3DFPbh8eAiAOdg29mfi3WL83VMMvh7zgzZXR7vpj7XYCJ+EEiDBmLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q2WCRA9TVsSAnZWagAAonYP/0g/r7xNV45P8r3jRFVz\nko+rN3i71s3VQelrXIBEhLkBd8/FbRriAFTv//GoB15vdi9W/PZFxjrOWySE\npIQ7mxwQe2eB4eZi5bu/bnc/YpS9U8cxywNUHijiGsoCn2O498BcmyxE2DWO\nS65RyHMPSUYzG20dcvlfqKJUE+90SCViqEP6DuXKMO99t4svsJEZsX/2UArW\n7MjiBiN80GPCXJVWA/xua0BChZ8q3dErAEt2y4EZTA9KlaX1VrVikaOKpvnj\nkuc/lk7R7/z6AFyeDNRV70LER17uZcYoLTMXIkHGPziDjKg2omZbRKBRyD6V\nz/E+pxyImJwQsx+ZLK32NZsAKJ0d+C9D/vIe7HioVZnADr2sXR/LjfaLyP2A\nhRsow9GxI+zmyqX8DwSHxT+ok2QSRLRv0VLsG7ky7ev0Nz9XCrEFWsCclE46\nrSQswH6kCxC29bRTW5rLnc4TWNnl7UuRX+XzQm+F7VFJ099g7wWcFcvlGYP+\nVwYz+k/ROjaBn4fZ/TNmNN3XTrdXfhgSgTobyho//oqkH5JctZ4CnQaTVBKp\nIBKEbR4J/RDWZ0UI3XVpPwevZtQ+uCUxv9gAYtEOckM1AfkkmGzUa2sPSuDd\nh/wuGFR03cDPpK7TjjNwsC5RlevTawv+0ujUPsQU6Eof9iJlv1esavGJQhOZ\nkb/d\r\n=Kr49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/theme":"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/line-ripple_14.0.0-canary.9736ddce9.0_1643449750128_0.5791531208146332","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/line-ripple","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bb8c534918b75ca320b657f58ec101d5fe905d65","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":33,"integrity":"sha512-o1katJaK6R3/juIGn+nbyzTigLDOTUn1EfFpJpgM73LzN1o6+txWn15mznqq0BIdK3+Y5es0IBagGyDwN7HqOg==","signatures":[{"sig":"MEUCIQCO89AIrO1QZhdg+9jFRe4QYzspfdHP8212gbefFCgQmQIgNiRrWD7DG+DUcGxom7ffCeTIyBU3YzfPOOo1Zu33qVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W7HCRA9TVsSAnZWagAAAqQP+QBUt3i3/mzrI/hlnbYa\nFScHkYa1eKaDm+H77VMLZc3uScLI+diGXl2I0nK/wud+y2TYqHlM95zOJb3h\njV9lA4MWiymK8qb3jBx9b57qhIxIt+UTgbisF2h07dehAmaKBVzP8JOrlEDx\nA1aZolRVaHXG3brcCDdmIX/2Cw4bAk8gE+PNB8jZT3OHb4WaBCzvCN6BJvO5\nYpm7rHpf2yy8D6aZzkIQFsYLLRTaSgsH6wLSIlogn48nUrgfNq9PtXJKgMDr\nKwiWaxyKia3n6cQQjEMFRrQD+J3CSwawORlm3vaB9dhtcpECidp5aHj7JGkF\nUvpByH7z5FAamzoBWt0MJNhoRG1HJcBJox2+vFhrvVPznthCuECPvQWN9Qxl\ntR0jFZoqlg8hIfef6h0D8mYlgxQKJ8NQT6/GZo6WqmHxlDFD04SENaDHoBmX\nsO0Zo7mN3SkPLE01oq2slcA3csa135dFKrhLFaa7qP4MoJSWhFOz+wCw81av\nQXqBTsLev/iLyWQGZ3vRxm4wHsDqzfdKLqDrUCUttUj6Im18rDkSltDw+z/l\n8JTnNm9Q4t7vjlgKDkhR9u+luJ1iRALxyO7U2608UYg3B4T1IdcoUK0WGh9J\nSlu/acRTaO2a98Jc4V4g0f5WJ/rawt2w7gX3vTC4iaBuieVMM+FDkW+mVjdd\nNZO/\r\n=2oSS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/theme":"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/line-ripple_14.0.0-canary.cc4ed13cc.0_1643998918859_0.5436180872364904","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/line-ripple","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eec2a3cf30d43c0a43e69cb76cbecc1a73539356","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.dcba26fe1.0.tgz","fileCount":33,"integrity":"sha512-d1bf+XK2nZ+qDY65tTgqxvN7IxS2+51iI5l51tQQGpmA9C1rRPMmbIW/3TcKrj/b0S0AJ9OwncjOMvWmTCT09g==","signatures":[{"sig":"MEYCIQCp72KmU0mVAaidYH78uQgfo/KW4hzsJ+56mOK5s+yWFQIhAPunF5DpmWZILuTQTN2NNakVtuOFsYY0a/R5eIDzsgHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aEKCRA9TVsSAnZWagAAVT4P/RT73iZjX0tfYJWcNVqL\nIDshwhCf588nob4R3oC4uMkCwoeTkj0N3jc4ZP/bHUtFnpM+HHftzvckCtNq\n6im3fwzjaPlegq5q2L/EyxBHd1H+oQ2ptICJ052r554BK9s0N/0fVXxSG8N3\nu8CWdGdSZd+1Zwy/ipoF6wOBp6XNmg2tB76VOQHzDDYSjCUZ0S+6tLDQDiUR\nl09T6viV7gMqvmtbtQXHJCegTQ4eR0b1FKqvElgcKofZ6Q7oayMGi9vptvvT\nXZZvZc98JmtlUetg2LOZPNiq6XAaTNFwof4P+dc4O/9Bp1fLcVsmUf/q/42M\nOtjvItYDxGerC2p/hs0fweZWYuMAvQ+XHLUBWU8SePjlDGrpWzl1cw70cAFb\nof11L4NBEsLyTykGSyzJTQsTn2YlxJdKnK7Sd7M8dyxS7Ft1MzDmPs3H7Pz6\nCJg8lIHQZnDYhLwYxDv2FbjSljYXOaeE2/vrelLm8B7P+p5SWdh697vT0hHO\n8Y8A2eNF5lW334PaNJbO0gPVD5Ni93HlYb942Rvald7oxDXficRvNyq/k6zt\neBfFGcl2QRnAf34w6bLNOJUa90VLOixzEe01Ex7qsisCuDgcwl+5huIStf/t\nmtomUiWQjSC9pvEX5QWY97eBmVIDV38Ijmt3PPKSeGDXD1guQpodk0j7m/TK\nc187\r\n=j6wv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/theme":"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/line-ripple_14.0.0-canary.dcba26fe1.0_1644011786671_0.6487982328612296","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/line-ripple","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d1083b0c9434eb8bf0f32079af14bbc7250c6556","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.ec54d9046.0.tgz","fileCount":33,"integrity":"sha512-nSqhIBnIsSEbTF/NlvPkhS22Z8DXkF0z736HnDli+jPD5VwUZlDzJNLT8cpd2GRGo55lLtbThd0ozD3A5MYJbA==","signatures":[{"sig":"MEQCIFNdRtvBRGitQZXqomHujLihiY0oqfSMbH+ncuQZHzNrAiAz8WYrZBJhum5aOe9HcwbhGz/D/Vb1O/9DfSwCS3hXJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT6qCRA9TVsSAnZWagAAHbAP/1DxkVuMjKWL4QTfjT1R\nsmMx3tBfxzSs1wnP+tkSZo9JdwlooCLhNjIf9yYFB5t6xOJgi3FFXj5Xle2z\nF7VnDoUbm1rKhooWso3jiRqgOoxNh6LREu8YTxzPD+7NWG3OL8rzV26EQhEq\nRU9CTRKXAMr1UyA9DpY1sgZjZWyVCTilqmaV+tJ0LoUqRG2Bik3avPxAToOk\nEt2YbaDSSQebxzfItfxgebJc76aNbsrh1huHK8oPDW/7AY8MHEFg9Dyo84jQ\npxvPvknSrBDwp6ZF+jMZ7PJstXvsNqXmP7naElI4ezkeqtK4qtjGCegDIwxL\nL8LCBbpf819HmgmhxAQeFJ8cwxJSbg8VZ9aiBBW12Kh14S3LNQm0OxSKHmQX\nmy+5OYUUXeK0w8tbheEAWQ8ZWjmv9aVvYuLiXetdWESBsxEXAcMZUg9+/mYx\n/6di4bzpxivtSxcntHSO5Bc9hDrVD781uoYIFIW8n6b0mx+ZEglIZX9kdipj\nufspZfhodf/TcQqffhxSN/jXGmmeGOzNlTgmcS6HDoscXw5y0F3mzaljxNuT\nDqrKNZDRFslQreDqqQfqc4rXRPFbEqS+TsRNofVlelaDBuqIGfMGTrc+gNjO\nyICIlcmFGr9LPaWhGjno+dTXXKo+dlkfaM9tWoKnpEASI/bFYeVtZarT+eE7\n4hHP\r\n=+X/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/theme":"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/line-ripple_14.0.0-canary.ec54d9046.0_1644248746650_0.6760473664524946","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/line-ripple","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"820a3d1f2dc2d6912033b8673895a700c549d6db","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.ea9b5b463.0.tgz","fileCount":33,"integrity":"sha512-XoRhssj9DSMQx5rufpCl/jSBo+w4SRL+dSce2fltIIozuFMu6F2+iR//wdoo8+v20k1hxsBZXKXRmJktnyI4aw==","signatures":[{"sig":"MEYCIQCdZzWgocoQ2QLY7gmMXoFssVh3+8e4k72oy3xR8Oi9YQIhAJO6iPgyskDLZArXbnKmoDR6bZ2iuuWWdhiAQDqJ0ZqI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA/9zCRA9TVsSAnZWagAAW+cP/jFG5K7GjMCqxoTpOh2S\nYtGgPMS2zByfp8YVAe/1LJ+HYOZIst0QZtdlrBpJz4PBUChRC7rShMJMfp/n\nCvIZstU+BKrmnNeTETxLt3Z1jbURufrT7uaqK1YnccoC658mHk5w/OgLGGSZ\nKnOQkUravJM6tQ79b+03XWE4EGtuTXYCWIXyi8pdOPpNMnTF+9S27gnsRxSR\nMs0F8A3kxtmb1/+MjR8S82lTHhqEDApC1f2LOIqjr7h0QZ6413/L11UkcOva\ntAk3R3kWfl8kDUOboVpbjEKAzG37vy4zFHjMQiyHX4cD6+68u3ORaNvZnrhQ\n3IwZZKIOVjV/H2YtMVfKdDuoa3weUlY0XBN/q/he0+YZuJpxbkaLIomZxiEK\nC1G/pNMabzcRvZlZmzfmckn8ZbeuQM87uE5at6Q8cCz5EbhTF+rIIhAE/3Fn\nh3D5T3cYJ8k5ICAdDC7bp7OVy0xH1VbfVo3OWsCH/yrhJXiEFw0FtGILtwQX\nqWeU08DeP9cO3j8NRm0y5VsaTQbQRD83qsMGvettntnIcgg4r0XC7W8XmewR\nBvfRwXawiwdH0wQ7ifDwgqBAB4lVnLzJcpc9KXm8geLFJTAnce7n9V/x9Hep\nZ+VbhVgjBxlcBVRB4Z2s6g1X+uEnKPU/ySoKpLNLhmv5FA9OlwchgAyuMVlO\nhVIS\r\n=6Eok\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/theme":"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/line-ripple_14.0.0-canary.ea9b5b463.0_1644429171690_0.4362510793275449","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/line-ripple","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a3f934e33683a6ef5e66cec8f79f4a8627dfbab0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.96ea061c1.0.tgz","fileCount":33,"integrity":"sha512-j0sCGEx0fde0G2HDJlQZ1Y7IFOmuq59NcdeZ+j7y4ZYk3Ktpvb509015V/W3xP6M4zkiE1ELzmKkF1qUFyYqtg==","signatures":[{"sig":"MEUCIAM+0taxJuIiJMwX9rKNPYcI6OpxXselrV73bvOzxTQIAiEAnQCkbdIbQg8sGTrAefSa8Q9KGNBpsWE63t60w7BZSDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA7YCRA9TVsSAnZWagAA26gQAIIb7wvdXAQhVZDkfI4+\nErH8naD0iShU/KgJ9sPllbZ/Ua8XJTQ/++MHVh8+4/ZGtEPSPg2XOLJj/DMw\nObhmI/pFBoK3kuDigFz3/c72FSIlfZcThXI7H5dpM16E0s+HYnTDihaxAivF\nadbGxZZwmoCk7cz3eumXTn2T115XxgEtI1E3CMiO2mxDD+z4P+zO/OQ+kl1k\nEIzd+GuD1Wo7HU5XN3xbgAnaD/81SYSFtElPZJHr1yNkgQkfe/hD3PENLFQX\nu5eEi8Pb+L5YrBtF/gwWRa/4XnJwoYW8YbTiuoQGDKz3x12bjhlhW5lFYpq4\ndf0dTN9aizsq6XzAwEPk4QC/iMziBWwnBonWtLjuWDYbpXNiwWSiiOZXBDN9\nlRSDVYVt6FLkYgeeRfCVwdvMtAkl5YRz4n2a6zZR5rn+fq3vdX/kH/Hls5Eu\nHghBSKp7bnjaddi4jmi5csazirqElWUFfzCtQYT/9Kw7TtIAd69KXPgOScs8\n162ueINuwCh7WcFGwn1i/HPUB46r3ZR74vCP3TxjcNImm+YATEIq1IsiOC1K\n1+wxTBOT2ldboNPDANs1bvAweTIOXzJvMb9ypNp5LWOPzq5uZdyMtFzesYpu\nVuL+5uPKM5+kkglR4e4ESujEKQPvgmqDHG9H+/emH2TEBZzQsk6PGInR3gO+\nVysW\r\n=FXaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/theme":"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/line-ripple_14.0.0-canary.96ea061c1.0_1644433111844_0.178967715636426","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"63c739461c94685ea629fc341d6511808cb99b38","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e00181e59.0.tgz","fileCount":33,"integrity":"sha512-BPXhqWHCnGPkgactogjUo6BnIvSrrbH2b2AN86PZXPMsSReedhJmg1zpNBkWUSeEfipm9nAl5dPWhbeO2h+YKA==","signatures":[{"sig":"MEUCIQCkAYoRKfULbIivmekE09FHgnBjlkMHZN8AcYEdLL83UwIgNOdtW42X5eBITbOlk0qOKnGXSTOodg51BmBIUhV1BiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXAfCRA9TVsSAnZWagAAtPAP/A+Y3w9pF2B17pNKUh+7\nLHoPfe4o3qWENTakwjbh71PjreIqb/GXm7EnoHYfXLdDTkfNnIGBtBuMy3D5\ncWfaF0odhTyj0CB0BkgclkkW2DongoqxeEW71zi9yy5k8h4/jeM/Xn3tQr1J\nwIMuOE+tXu2LhobywG0lD6MWGdcConV5dDuKSoONuCiiui2MkcZhHl1Xa8A4\nRCTwytsz3J6rugKwVJqu+a3MfcitEA/o9S8bTtX4nj4uH8voiWQhKgcWJrfB\nIuCZMThMBKBOy5WO/d9taf3rd5h++aQZR3xlu2SOyWEyXsx3NO+a7cv1UQn8\n9rU5RoGB8P4HCnRKrEiBAa6Yd9rs3I+1aOEhjpu0p3zEK35d2+LX1ORenFYz\n69oDG1BFRpCf8vYpVh8u8RNVLRcqQ6E+20UFJOwGrN+TNuvY0kvYLf2LcAi0\nDpU7lyCxbc4vv6BU5+8TvkaX4nssjWftXRJLqnBKJxF9VsWIW33G02Y9tT1k\nlHAYI8iFXUNgYh4UZ7CiVjnU8Is7XpiMgM3s+HhsZG6P7AvpFGvdgygmDgXF\nbCbmy3exvbhWtH4H2d1c3BkxXnqG6pDwlyxXohzLwP7lL1CdG/LV+fJxgtH4\nYIlp1lLtYeU8RiRSKNQOC8wR7beMkcWi2QNVKB6EAYmkjJG102jDBFdB55RT\nx465\r\n=35J3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e00181e59.0","@material/theme":"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/line-ripple_14.0.0-canary.e00181e59.0_1644523550975_0.8942139127210293","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/line-ripple","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"51acabcded48817d1af399fbb3f9a59fe5c410f1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.037285f9b.0.tgz","fileCount":33,"integrity":"sha512-qZij2J69iPyY6cMFDo49kOERwQ7MejJRycN/QyEhHHqL5VCrXjRg4Te5bT5tMiixKL3Plk64qml6GEZ4YmeZhA==","signatures":[{"sig":"MEUCIQDwZknYEkAOZKdVtxMb6EkLAq8uEA18P9XZeD5yhOBuqAIgSbDri8IjBiC+xYQaFgHLM/DK2nNu3a3DvNWWCNM11zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqrbCRA9TVsSAnZWagAAZqsQAIzSMJhvcY4nXZcFc7QD\nQE5VkF5/d2A6zfZjTB1ci5ul61T/Nl3O73dTvszNOycUuVJtiIqTMQpVOXsV\nbnuBnCN3hU5oRBPXMRUUTQqUPXbuJ9sUAUPIdkcfsc/vw8+glZg+Rh8SXa6N\nxBeCJB02Aju1xXlQzKsAkk8DCWc74e0P2e0PfFdR0+bNwIvCluFtb/rzWdi1\nPgJibQshgwQ3iR7fR8jX39SMzB7Gxdyq/2P2sHtFa2nhSJOlYVTxvnQRHYYh\njuR7Pfb9P+PCfPQS9wpKqQjJiWMsIqgI3QmnRGQzUYCHfcJ9GRvFepbVOHXq\nGLRvD1rjW+H0pNZ/fkh/q6l2/uX1+q8dgneRefE0pojKi8hQg3e8gzSHvYY4\nA9SIfBnQJLTdcUYno6G3fWvlWOMWH6pZ/PAkqCBjdKgFB97YrI9mjhcHbamm\nWKQDh9/QrHZNogV6beRtNCrZJmDxio8imGqsQa1aJmhpMQnh4TUC5CBQNiMN\nnMqQhH7BRX6vRuHQzcmthy8BzrJFbKI1bYDGfT8Ckq+ZngFuVL0L7Fmvr3Pv\npNfMm8+Z8fujctwvJkDuXJihyyo/P7xcH857SGz6KrdvQj3W68Zarier0MXz\neLqulsGd0Y1WpDHJaJrpTjAAAuMbC00lRfUjaONEKKTzZKkhlPQqMZromBth\ne/tC\r\n=+YEi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.037285f9b.0","@material/theme":"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/line-ripple_14.0.0-canary.037285f9b.0_1644604123688_0.4223637041334203","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/line-ripple","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dbd3ee8a6d3ad7d669d796683ee44084c086053e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.1aaa68dda.0.tgz","fileCount":33,"integrity":"sha512-iPA78on9SmSG0Pc/oyf/faXRMfZdBdEogNpzJ9sqbB5nCoCxzieXSUNQeMEj+QXPrXlt8Q0qlQLz/HQQF11HRw==","signatures":[{"sig":"MEYCIQC6U0Y71QV+npJK/YNpf/br1vQN6DPwvF9PGlp7mMEkOwIhAJtbjvnS3u0BZA8o1J9NfbvvCFWY+Mn5hXcREx/PcVEH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVT/CRA9TVsSAnZWagAAb2AQAKGeBsQQbs0gPD/QaPYu\nSA+8hRJ1LP75Ai8JTnsvBTvkxkPUFhFJibGw1WhJ2a70FojRTH+4Gl0aVQKN\nY5Uqicz0sVvwgIsOtmPGP9d1WJsqemhSXv7pSa4wg9oKjFMXvExI4uxNakik\nNr/r1xBjGNXRpVM8E+u83cCJTCaNeUMDrcQzLWouA8hANa9RW4H8ynSsTYS7\njcZsJEGzo6RynX6GyAyKe3OBI+fG/WCe0Vv8CBJ3loqcFELrLfC6tnGhIHfe\nLgRuAnyw9txF4PDsXWcZm34E7WHxK/uzLtJGjlb+VdMR1ZzCz5gFC9WaiZEA\nu2uGq95eHs0jCeXZsaiC7g5nj2eAP9Eycw4rkO7TBA+drRLoyvYRnpi0funJ\nnclzPizTYn9Q1/CrYTJiIQ3llsY+fKTmIHMjz+BmsTPg62Kve0nS6y4GKk38\nrwvLgToZbENWB4HCVYXfa8WUUmIP19Y7UGAzkONGYnRoAwJ4gfjK4tvZVfKB\ncJX9FHmkEQlFxZAvYzrstuUqUwtsdNXgNjyzK3DJfq1C1+m9WhmkChSrvI91\nsPr0FQPjDh+RmAYgYM82bNlFIyOAlEx9wMxcJ32RPoKBq0dKgMHmrtIBBPmG\nBxGx02dHmxXcJJuGknys1oAeLsoHuHwZ2zq2pxtOpEPg+xBUswgrxqfsi7s2\nZ0XI\r\n=QSGe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/theme":"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/line-ripple_14.0.0-canary.1aaa68dda.0_1645040894952_0.1526920361100903","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/line-ripple","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9e3a45eacf54f3a862d62e6a99f68617c8f1485","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.ab4aba1af.0.tgz","fileCount":33,"integrity":"sha512-biNwKMeL16JOoxmqGuT8s1ZHq+ljjGmf/gOTgi1MhbfqdUwuBdWUO38IKK3PzmYJYgnnz5Wyx26KA0G2BzlJbA==","signatures":[{"sig":"MEUCIQDr4mkTSUA21XwNPNcsH9WYvi1MI+2SxlCBD5ADiV/tLwIgXdnfg5+4OOciEzXukJc9HEcdnMiL0MYV2a+ssJCSehI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpDRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7IQ/9FTVB7NKLG0eiyPCSF09PJYIZTXO8ZFrvHoDyu60USVxu2KZE\r\nVZR5uxYM3dWeAFZMhFJ8Ij2KHqfKjco271GbgnqlW689c6VVXUw1QIJCxKPl\r\nTbPkvxc5jeY6EXfCgSEF1/RzB1ZAS/SQQMfWBaHm8jRqcMMt7LxFykJ1HYr4\r\nAyTIP4Zd2sSWLaKWjPqNB0uB3MzR1bT7/o8U1Y1SqjV3jPqqgphd7mJL8Svg\r\n2UdePVCnwLrrazYIuDHa+B30NiQsd3Aq137szuCynz1ERWOV6RCWzgN67Jp+\r\npGer0VuBfT0xn+jqHqC418Rul9h0Ok0PoVOsqvN5QHFLijcR7cekwHanb6EL\r\nZ9Xq/c/cczHqj9PcWt4AG3DSyGcFspVxGpN6MBNwWrHLNCAhbocSlBXNG1jN\r\nyTp3rXln8NBJEUQ9gIYr7RKlOyMkWYH0nkZgBOC4S+tvzf9B7AoZh+wYbKuU\r\nKCeR/EPhhwQviwPYIRESDcrw+W+k6ZlBqtGCr5DeT3JzktBpGfUtS+CGJECB\r\nLNbvPD4jZ0PONCXPcIibQya61n+G+z22FbsxDiD+nWZpteLalJlwbilNjLJc\r\nzniAktidZWpbSmCiOuf5U6Yb7/f1zDYi0VCDujlnrCJNqDuo7ywblBL4lFTb\r\nnD4xiXT8eIqzCIq5nszqsnfTy5C7QcGrevQ=\r\n=Zmdu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/theme":"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/line-ripple_14.0.0-canary.ab4aba1af.0_1645121744950_0.7188316600809712","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b46e18b86361ee3aa1c582a1a0852f9168ac500","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e58552c6e.0.tgz","fileCount":33,"integrity":"sha512-WUMLixjvUkb6WMUku8bMHyAnM3KDNu+ikIWXAtquL3797qLHTFz5h+dLYF4KGc4bOViNuanyaecz+tyPdONh1w==","signatures":[{"sig":"MEUCIA5wgQaILdRz514MS+7DmHa3MjejAHjH7hx092q9MQ8yAiEAubafAxOHvCrYs2xdakmob62eRNv+Uxz5lgTgumtU7/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD99zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ4g/+KgsH0TnPIi/0TTktZ8iYmbMUmcHDK45HlU7EQNty9Ey5U8s5\r\nENGOhgMdJNVSf2Gce/5QFMX069xj2jGO8b5TmVcICH+2GdqG1cKtFGlWhYRO\r\njVRORo/qRV/rr0sOL1ZNcC+Je4V5rxzk9/mfOFH9QPH/3wCqyO3sx99nvff7\r\nThr2JLpWo2SEZsh1Uo6lG3+UI3eMiWwH89iDmFmxmBCjm1KDV1Ofa8sD5+qH\r\nYgNnSY2m41nCctHWdXdxPMIwZvgoq7tV/R3fsXQjyUHgennAdnWiW9YST2lY\r\n5yY29viNPHSDQjpLmD70LCw3yU9DjX4Nkl9O61YOQYw0H6oDyVJQo7qRSEr8\r\nHrz7GVtLk3MGWYbdy6lAh/woWReS/iyfpDDDiKkPYiBubP6xc7uyx7ZtiiLw\r\nbHsDzesciUXHP/t9ZlZfihtd6h3JN3UYfM6QRZ4rKflhwpC9sRg5BA8FfGLt\r\noAWeRHjgAO/96YZlnSOmE9RUpxtis0dDO4UmngACKVDf27M7YXxieBB1A9NE\r\nHmNp4Fe2fTH6zPtbpj7nBz/wG5N4cdGf9LtdwE4MP6FSqLSmfWD+Tx8oii22\r\n1pK4RmQJW7d0udsSM9beF06PqflhvX+AQ/foJQNbFL0rxsHNhShTQ5kXCWe0\r\nOLmLMRHAPT3GT5ovJStnK5E0SPSy3hrzLb8=\r\n=Mz88\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/theme":"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/line-ripple_14.0.0-canary.e58552c6e.0_1645207411772_0.6602081806694546","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/line-ripple","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f7ce2a2b5ebfb52ffdc90633043edc3007e9abb8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.868793776.0.tgz","fileCount":33,"integrity":"sha512-fZqFb9ZO2uMkKY9m94BU1+LLK6UbDe8cfVFbxYeSD1PuvGB8ZPneccTeL6k051Mwo9c8n5IRq5IbdvfLfvn5Yw==","signatures":[{"sig":"MEYCIQDw7WLHXrAL9QlqpR3KNFR6M3Y5nATwuz4Un9epeuThOAIhAMaK+JtmtwcRyGxGARsDG7038fot2AjvsOySKQjSuPro","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTrRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruqQ/+MhTH0kdNpd6b6miV0wSmj27Z03/YAazgz5mEgCb9o5J3/460\r\nzjtFtbW4u4jQup8w1CR6FIWElGurRkZJfOvkc2PgmMfH6JruHGioWPh4Waa/\r\nPHwMrK1rZfthpxSPCaP7Kd9WgorobcpBAkG3RDU59ia/7GDqQOjJ4n8HjI0k\r\ndmQv8UEh1JPOL47AZXL6NnkalDkJnuFrT3e/b/4J6UbuI40Q8vPsCeIVKQ64\r\nrVIRhazCYiLtDYVBcnRlbvCcX1UPpeb2exa6WNT9km4plj6kZ5tJ7NN1M/eq\r\nn1aAqOSjJhZnSL15eO0GYKZ/NzDNOhLTBpUbCtEC0kDu4pHCYEHPDe8eJxC8\r\nYChstm6r/TTsMU9LdMf0Q8pXpNBeABMrFDT1xjX2z15rl+Bs1fpUb4gss2Ke\r\nz9JL93uQ3cIYKAxgh5LLr6dPgqL6bGPzdN/BoOvGrBt3YG0ByOwQLGfSVA3T\r\nLJcTMZBrNYx8XTXjQTofEJuufZpif1VVDcuSXX7J+7ixCS574dOF+nuRfg9v\r\nSrt4ojyV4LgT182rcNt1LkDQkeshGlnL3JspC2FWy+8p3OPAdII0dsoa7Ycr\r\n8DeLvZEaO6irbodTtaqITdkOJvbHegdtN0dfwVuvc+4Mq3Rq+pROGDozx+U1\r\nyT/BZ+YrfvY/uAQBpIOOMBvAwHmlulS+9tQ=\r\n=FG58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.868793776.0","@material/theme":"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/line-ripple_14.0.0-canary.868793776.0_1645558481067_0.19105349547365558","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/line-ripple","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"351870c053ea12651ae9369b378291d7adaba74d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.fdc37a445.0.tgz","fileCount":33,"integrity":"sha512-9de/guFtdqN4MVCA+Odz8jxw+B7iY7SJrA1qrcu86K9hbFQu/65E9qJqbJ/v3i12VCHVuWWvu7dWSDkoC7EfFQ==","signatures":[{"sig":"MEUCIQDZNnB+xb3Y/PKWSE9Pw4VNa+l4MlGiZKw/7CWXrSbtsQIgUyxOkKhJfnHIBvTdxdX3F+STaN3vryjyESr0ghxDics=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRhQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWsQ/8CdUqfhvrsGl2ddigeb20+od3aCPrOQpMNBTDbxK1xKO4lFvD\r\nlCM4MVrYbiCrCF3TonHRjKpZuNryjyuWeAt5/7GpN6O8DmSuFwOPz9tvpy2G\r\n4uLiKlbRugJTlbKQxS+fITbvjXvjfMwdQhn4EZxACC+wSoqeNMCJObmeoPIy\r\nwf9ee5ZIEk7uvepIJ6rpGLj3gEKBnc88YbJ5xu9ydN2oAmVjKXLbV+LWe7LP\r\n7JLSPB4F/ZDXGLwR10VZ8VtOuK/G8zhMIpAVCGd3eAS0gghVItyQ2EStXYBc\r\ngjMR6k5m7GqBzmTciNZsiYloRkBLvkDfVecPjrbrIEXT2m7FoebkAqq/7nMT\r\nQJ3j657r+lEefjWxtOsoMIHbIiLHR27GfQzwZI4aLHK1gl/G+jwNdzguy0XD\r\nElPEx6jZN7xRIqkZOHz/j7u56XlsVEmbr/7a6eO2cMf4LMnttnU283Nr5ZAX\r\nu0rvOisV/k3oXRUWs05oyoM8KhGC31h/ngIgIVOw/nZyArhsvrQtSoLqLE0c\r\n42wH/ErWjt3DrYGK6oVBZeGl+3rFPho/oH1GA9FfvSit3EpzaYlVTj6CoeD7\r\n+zHuEc2kHUBrj63Yh2PskMCn4dni7JWX1Y+Y9cBr9lksttjZC84Bo8BqH3Bk\r\ntqXcQ1geE5dUMnoX1VdB5q/OGtFy1c+cmHc=\r\n=OqdT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/theme":"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/line-ripple_14.0.0-canary.fdc37a445.0_1646073936336_0.19893353649961365","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/line-ripple","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"796eeee90e7aa610b229a8ce86b1d37b1338c495","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.43c7d87dc.0.tgz","fileCount":33,"integrity":"sha512-iOGHOaRDBVLjXN71sCPN/CSP2B/83lIu6T6pH2miF9/klYf9HnadQJ4TmCBJ//RA904MViBBRoQuUe/1GO1FBg==","signatures":[{"sig":"MEQCIDytcwyIxoZMeg8eUTkK6gbn0SMG2zuMgPkJJZkdARW1AiBzHFfGFwTWJqHwCPX6kUrltyY1YRkGdhnwfHIPN2mmRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEsBAAkCV7sJhQ9hBkRDRkJ82yXYTa7ebhzJRASJMvuP7ZKjs+slbr\r\nrw1ZGRVBRUcfnN5sfZxnr9XlmREFZ06i6iF8ioih4sBdeXw/02STGG5hpL9w\r\nblyuoo70p+OB5SqAdJ2YYWfUunPxCahRoEPHwJtY3z5gj7gW9J8As7a73y8S\r\nUNgH1OJ2zeOxtxP+u5yyyRVV4k/kPi3S+ssdMus4V3QvrB7a+cVpOFObcRct\r\nsiS5fj+eLaFNnUlmJyX2IVTL4aoA6t1vssUSBSvZSkITxa6AnZC5b9tU5beG\r\n3OYxDJKLKvWcUfw1HJT3ehNftUmSK50vTCuYH6NE8QB1vQz2GX+UDB4YsSps\r\nLpzg5nHE3b//IJDyFKF3ykCp4dHhY3bD4bbw11Cs0tgXcyODC5uA/m/gG35U\r\n4yle8sbgrQaw52PiAd5YdzeGu0gfmw9thRHcgvi1PCLe5q2y7rEXDn9MyCpr\r\nptsLGOFnskvl6fkgRynFavfmQZBKzjtz8iVIXa/bTPySNXJX+b8d+U9PbxqB\r\nshaiF2eeYe7mPfyeUQUvRxHIIADtnnWKfcf8SUywRD7UVVY10EDleyqp97V1\r\ndiM1zcQnkqfznA5sMvaFDMDiWCJWsg0H/2Pa7OnLowsVFUSafTwg37DIX1U9\r\nXLcA97DefaZlW1L9gVaV0kc1PjI52yTULu8=\r\n=B8fN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/theme":"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/line-ripple_14.0.0-canary.43c7d87dc.0_1646148755154_0.9998476786699755","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/line-ripple","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"516b2c9f51b1ff226ac777681ce6ca80c121b6ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.23043acd0.0.tgz","fileCount":33,"integrity":"sha512-RympINlR/0djvNY7vdSkroMM4oTBI1yPpHnls9xFauGEMfL4dYKU1stleMu+vfMO1x+GpCjzImUWcl5/tg8dpQ==","signatures":[{"sig":"MEUCIQD1Dop8gd/ONvyZufsh+nrf++QVSRvTXbKzuuNpml3vTQIgcrBOLix1CTad2jrgwpgVO3Pivqhd94IS+EjXEzElkZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9MPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9MxAAmd62JlgfDSE9PFIPN2CI0j6LRFC8vtzENimWQywRKWDMcD6e\r\nq4OSMXsIAD9krVir/VE5FErTFlHXgql/oHdf9BmYL2bj5c1riGPmmgCPebIM\r\nAeehh4engBqRT3STB0/mc0IbYHa7n8FOf9O+/nUxXAXyqa9xD1Fmcrqhsa1d\r\nwGnpuYaPVH1rKWjvPViaoCXosvZioTPn2XwXHixABLmaUh1mU5ewQNoDPPqN\r\n3xEVrNX1W9BiBwb7L6riFLPpzIUx2eByDmszshfcDRUQoHUtzTW2mB1e/iRC\r\nEFzz3LxgRs0F83RkzRjMj5TPB2Ja4Aw5ZwgJ6G0l2hqNLQwpTrvLQE2QczBR\r\nCnyKNNTWBk4WcKahYkMs9460Bq2DO1W8vx2y242v0bco+ZTDgy9SKfTBCJL9\r\nlETXcBIWlnmio1Al0UtRDKwO1BRRWnACU6jW6IUWiXHe30moPHKEFUtVVGGZ\r\nQoJblBBCZC0qzPrZs6h6ec8V4syDtYglaOZZ8uruxLO2fiRWSvXF44vX5EWN\r\n/4Lwtld9tGSncKw9UXJMD/kzGsiHlyl129kbf4Jkqi1lJkiLLMBDUuwRtRPk\r\naiRs2eQZX+hw6LSA/7kSypVyGIxolcpUX3HOUUjrNdv15nIWcPPm2iPQ+Ui8\r\njcc3rgYi7HHlBHuPRRsWyZLdMxaFWqvt+k4=\r\n=Bz6o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.23043acd0.0","@material/theme":"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/line-ripple_14.0.0-canary.23043acd0.0_1646252815015_0.5406373312093511","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/line-ripple","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a5688a3a32d37b78ea18b2eaa401e9367d9db942","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.6505e61c5.0.tgz","fileCount":33,"integrity":"sha512-uLUkzG9lNLbRvcjnWu9/4OCBBOqPquVa7QibTxVG/ycphKxopzaS/519QJGQbf45SU5TxNhAyCFLqqDZULdSOQ==","signatures":[{"sig":"MEUCIQCXS9VPP3QTBYMjMW5a8KkW3zyG8znMBVJHpWThhlwVIgIgdn4Fi5Bic7c8BQQTO2PjeoRGO8QDuqfzPz38WHP2ZuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR4xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZQRAAobrmpl1WexfMnWKRhtbP7wrR4zmYaRFON6DyZqr3zuYlPnO3\r\n/5BMdckznHDoI58xwU5vqTG5QAWBMhQ9JFnZuFccqA5+ToNGDF8Bhptw/zrl\r\n08TIsU/B3NdVHIwgbw3zCjfQfwGoJ/2X0Y6DBIkHZEtmakjB/UIhtxvAL0p2\r\nvghMmDiFjJ1v9C5DhYVCfy+VqUfPD+odTBYCUz7qCKURq9w1H+A46udUPCrS\r\ng8HsIHk7DFLwf4HpqOAz/v+B6VDMBtOpoplXVEQaODefk8azDTjIpVZthxu/\r\nYeXfSDY0hblKwM8pDMf+ZrjUWSigHxkWYsX98pKm1TWhUWpBysPUqHmKMD9V\r\n44z8zsg2Mcz1R1+89KKVmbazNf7qV0GylBbFPZuzDY914BhlIrZNbrGCSPF/\r\nBI+Mrwyq44F10I1bWXmnTjGSBRz3A+rk2eWcZ8TbDOChB3o6gUCqNYQDUaNb\r\nH1GMokwZR76cAw12+qCSrZM19qoVxTEJa3cNOMnNpj+zJ4XWDOm5SaVGC0el\r\nXdR0anhn7YFdCPYzs/lXNynWrEgDHFIgd0H+CBGDix5j7FkXJRpEEmQEW/EH\r\n2NobxTnVo5rKYkohBhHTi/X9ZInNXgLjOh3Wzua9J9h8bUPTTiAu+Zf6FTCu\r\nfmUm08r0gB4fpgZO+vG1OUyuDOHr2vryv3I=\r\n=H/88\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/theme":"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/line-ripple_14.0.0-canary.6505e61c5.0_1646337585152_0.8276487916804267","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/line-ripple","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b8465e8ccaede69be889ab0bdd92aa6572f1aa3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.16c166154.0.tgz","fileCount":33,"integrity":"sha512-sxJeD33nfWIoFF7PYdFLgkHcOWtFbsW36pVjLEOzDFyBuclRbVItnZzxt8kJZzpbEHvw4uHefydFp/fF+JSxIA==","signatures":[{"sig":"MEUCICOVqS64zT7SElUa+gOKmO07APacqB1ZI7E89EF6sIDDAiEA/Rap+xrN/3EgX5urij7kp/9p/MotCaWAQVW07wVDre0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+ULACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr+A/9ElbOSf/DgczDgmYpZoAYVkIQzhAeVwBEBFeWqGCltciJsFIP\r\nvI8CUq6m6+vIhXWqfXr+56tK5ZKYSp94N91vcWl3HnA4KOpprIVphngoeGVy\r\nPcf+q1ueFH0Gu9clNJTjr3F7QCiu1aIkVO6RYtctKeisZIEjjBiiDFLEso6f\r\n1iIJDQ4MKFv57MGiX/xhSGmGq17dfWoQUOBNKX7JjB6vA31SqKa8TBx1SG8E\r\n1x705oG2tpyi9o99W6r4s/OxxaGjfqIs64VgYAUVzQuX9d1gv8ovyHe7Bs9/\r\n7EvHdlqWnw4bPg+rLlqYEPiJFRH0kT5xqiInNTw2zyUabn4fd+ZA4PQZRzvb\r\nIlVJncjGUGLTn7ljf0E2PT9YuQ9Zq+KMwqodjNLDFmmXmeXaspIj1515634S\r\n0xHUn4N54DOdSIATm9zFUzBrYNOvmlxPnsST/CQfdVlv3eCB3g+EyD0dvIt1\r\nLUAZPoSSxE0dg6Tkc5dhxnxB29Jj6jyBJ/LgsMwNNxPArd8SC4EyyX0vr+kF\r\nG2z+rPuExwKzB8iZOJVTJYu3Hcs+0BhQEc+KksnfQyh3Fa+8SBSoXhURTQMq\r\nxShQz+/AruXL5Ti774geKrkxAAa/K/rCWMebVfOr7ku8PnbTsIEIGn+j8NGZ\r\nsM6maFXl/gQ+f0XDoKg5oWDm4XMGEXr+ib4=\r\n=uBfl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.16c166154.0","@material/theme":"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/line-ripple_14.0.0-canary.16c166154.0_1646781707380_0.5334086858685751","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/line-ripple","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0dcfca123ebd6fa1945875787e52d7ceb604e7dd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.bdf1d3771.0.tgz","fileCount":33,"integrity":"sha512-cNOOTEiDQDMqyx06hTpb6uiR7rmbTJ1gHIy6lvUZoWm4kao5hrJZtPYM0yWfs9XxHS1tuU4MCXB9hhA0/NkwTg==","signatures":[{"sig":"MEQCIGj1G2SprrlxMSvotM7XJY/pxZt8xQrJjD8tvFSxEUFoAiAdctltelTafmG5FExY4wMStPMU7q7TzCAaSHAEr9Nuhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1DnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWQBAAhf4aopb9oggu1QqCK8jJhMmRmA9JpFwp3eDa9nxeMpgtsplU\r\nIq1c8qj00lMzTTSem2TB9bBY5m6qA/TNAV5sQVXraykuMRsDc/chZl0IQsnx\r\nWImXbxXP8BBuyYQsrtEcGaN49r/SPCC+X2xZbbyKWJ6ae9j8aUpF3rxkJqkd\r\nQGTpKVyC6cbPIL4z3VhdOC4pOQexRX3igKxGcPpETp3btaBT/CuEQ0EHCUMU\r\nrtgJh6G4uuDPgOe3fGViBvpfml1wO8nNlstYolw+dFgkVDXvp0N1xRRZSTox\r\nt8FqOwzgjy/uho+JoY6sgqy81WB1SAO/owXmo5s6UfESuoQpwFhqyzSQyfll\r\nvgeHEe8p7jRLPYyHcR5y0K+NEdi7vc1dp4Ckc2B83AqCQTYbQut3EH57NLyF\r\nQwaml5ctEZ1hQU0CmN45ArQI58msjHZZ9PdIiZF4NHE1mJ+nk8z6H3q4b3U5\r\nZlUuqLDPn2r93qVzRtsSTZnKDQ594BNzo2TeT7xiwzfWwq7D100yKOjZ4GgO\r\nkhfn7zoMyN6qeqbLNdkBl6nPaMKAA6X5LuTatNvS/naKqBMEfgsraxe+Z9qn\r\nejhLW+O83/H9XNTfUaK2zjK5BISpk8vLN4zr/OKRBAPHJFdzoO/6hjDXTYlT\r\nn7hM1j0xbQW5tH4dhFUXUpdvdgKL854Cp1o=\r\n=wPW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/theme":"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/line-ripple_14.0.0-canary.bdf1d3771.0_1647268070885_0.06219050438621565","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/line-ripple","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8e368c5c1e24708e1b6b16f2ad9dc2efba41cae2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.cf4292778.0.tgz","fileCount":33,"integrity":"sha512-w5qNSitP+W0YMdiuL6eqq4hmZh72qGBvtE1NFwn4YOS0UYecGLLaVY9f08OisQRnHdn8YTv85ESFcoQxkZSVEw==","signatures":[{"sig":"MEUCIQDmQ98G9/OlPkUs+60FWK87nrrj+3dJ3R0NJt5d4sfCiQIgJFzpdH9q25Pbj/X6NWVvsNmELIYsuO42xjmmJSK+pU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL93PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqELBAAl9CWd37iGKKjp3Zm8d5TJgJQIYY596KvyF+HMrlc+iEDw5ND\r\nHRb93m4t8lRttZhuaH9uiPl3/pIir+hXA8jSTM/dUxjlW7kMJY0aVqXxAwgw\r\nVumrsMlB1dVBk9TfFmKoWNkEPqvui8uQzdhlbkAOYhdgwqNj99OTZyZHNPp8\r\nYjeA2wtKddSQMuElgE7ZFdA452NRmestn7dF77VgyC0xxTG592x3/W6wb9cd\r\n+wvVJn+0YR1DoHDTQ8wCzQ6YDNuBMrJmu3wV4QjZeCr9G1OiAibfrv6lQ6L5\r\nmL2bHHbR6zXq0eBl7vBF09SywY7I1G9eAVQffxofv4Ghkoi8o3evRwtqZGZS\r\nSwsuv0e1qslp4bELDXnkmho7FQKwW2IcQTDChcxyBA9LZh5qrpqAP0iF8mI4\r\n47E++XpD1zQ8Lby1wSFudCX/PtT6i5MEPin79Ebhd1oFNA4faJZGllNqnfSn\r\n15ExZMMcYuVONwa7a0OZlXo2Gh4mYpeMk4g5Tmptsql8O5Au7zP9Rw6VIyk8\r\nF4epqq0GlJXGVv1kEQfoSbtrDYzJJA7+YkkFIwJlJpWTCGhX398L5ygSvoqW\r\ngvDtI0wBl/txGN96I6BmyQLaKbw1uRbP/QwCVA1dfUJ4dvKPTycAYXmlToNB\r\nia3jgW/aUWUAiAlQKea+jNMu8lsAmmWuljI=\r\n=Bgfs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cf4292778.0","@material/theme":"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/line-ripple_14.0.0-canary.cf4292778.0_1647304143163_0.5037114885429526","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/line-ripple","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fae6fa7e38cd82c0b2f53ef80bb3f530f8f09de5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":33,"integrity":"sha512-xu1/Hz28ZIFE1S+6RU4wvbI+AVJZUfoStjD3jYw8Xax7FNuYQzaptLyzVJZTkQkZwkMPblVl6dnnmvfhavuCVg==","signatures":[{"sig":"MEUCIAovikfjcsFOx2ONiKYV+poTYekLw7n2o9P0ZBl6VAvjAiEAxe4h5faLxuITbmR5pB5Dt1qAsSl4EIjfLLPdqSCPvEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk1cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMtxAAkxW3lDLa3OysCGB7TVTocZ6fTU9HDRVzRKJly14xdESmRVvE\r\nZTYP8YEHJq2z0z1Trc0wSoXAShLiCZ2T1HELkD9luQTJp+XCrDyHJfsmBBWo\r\nZ9HwYNI07oKL+3SHb51iLqOOKLzRsP6cUnTlSGXASmhnhYnanW3YvxbRRvxv\r\nuaACPN4Ex7L+mSS+h/y6Sne4FU7AZEIk87eVj+3dm3q+6Ztw/Ur1nw9qmy6B\r\nh7zCoF8uqNAK7accYphbofCC9v2x43yFrhnvyqjcXn5FDCbAe4/Wbh8UVqKf\r\nqppzYB6EFud/higsgZwEnQTt7ED2N+sawaNtcnxBMr9++3j7X6wTRIZPvr7H\r\ncWG8y90uDBw+fq1AnaIHxTR6n5+EUiBslkT3MXMiKzt5HAwTOEjYIDDdN3/e\r\n568yi2bGEV8ruJVIq4JoYpSL4qGDw2jxvJxKJQstSccmNheXBmY7j8rvlYAY\r\nuLPTU+XstcCpc8x6RWulR2TTFCTbn+t7xqY7fCCrDWay6u1WL7PQXOCId9Eg\r\nbw557B0FL4yv1ADar1+1KmBhot1T/RBtVY0ccAxc4X1p5qLzl7PdFJY9O4nH\r\nx78VetlP7ZF/ZsTy72ArRIJruGWbGAvp7z+DSSsHKxUaBxvwgMBISlyyt4Rs\r\nkwL+3Rw9w/bbcgv7itup8+pUonx9vDv1VdE=\r\n=wrb0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/theme":"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/line-ripple_14.0.0-canary.bbd43e0e0.0_1647463772739_0.7084732343347044","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/line-ripple","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7abe96a1a144ae7d1ff69054c5a9586333f1e8d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.1b6afad86.0.tgz","fileCount":33,"integrity":"sha512-yoD3J+TtpaeBouLr1YBn89XAQ1wAHDbr+328hu5KfKTGj/eD8KQvwItValtSJ+9W9yN2KojRiKlFdI6E6xR3vQ==","signatures":[{"sig":"MEYCIQDsOCK1MrWs7wDJQXq6iVVSmaUHue0Nt8JitmHK/vE9vAIhAMgXDxocQbwrM8qCpfhjksPLxMLcH/l+UbwEz4ZnIVVm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlCHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWug/6A3EJj0/odsHo5lW6Xm9KveNHF7NOo0e3d/KsFCfB6ul6dKwt\r\n7GmpntLHkUdxzc+vxIJhvJfVTPSbVG+unyghO0bDbupmMjkYrybaLa2U9tfA\r\nlqNjSOtse/xctZE2mbbx2lsv8AOQFCHAA8dqexNODJlOKR/4dOaWzlo88XeZ\r\nNSychB+Y0y2IrVMATEDflEAGkITZGG97/WAAxRHxXQvc5kPqDWvP1KKbk5+T\r\nvjtTY7YjHfzwbmmMTXnJ2+JkLm0JsSoHixmsstn9qXdRs+LF3aVgGfJDxIqk\r\nbBhP9x8VIUsO3m9lvE/VBf6oefTrShqMYL0wFK7SVhno8eEG7aatB+6Lzs7Q\r\nRSaz6Awk/EcGuPKTiE6Qp+iEpEzI2XWbVWCUVuaNyfCehk2LFiN1XHX934pC\r\nAvgT6bv2dduWTEU2dunKOCBy/lEq+IkeYZYmS4OBWw6NO9qFbrH/xWdKlz4X\r\nHGHBH23QC8czDaEBmAMGVgUktbOYkh+IxzlippiPlBUV+q6qjt5cx0nVgnRd\r\nydxYCYmcYccHHo/RRnUKguQbOAf6AxIF9UHO5LS329oEGDJtpmuEIv6ngRdb\r\nauPzGCjrxYSrXBWwWhNrHOirgnsJr49pdKHxlmB9+GHR3KLmUbZRxgAdMcl1\r\nnszgfZcMWIHBYc8P5GL0P/Gi6eyMobL+fX8=\r\n=vCdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/theme":"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/line-ripple_14.0.0-canary.1b6afad86.0_1647464583361_0.11355597132295037","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/line-ripple","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ec8242fe04ee006140bc15a2ac3328897f304c2c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":33,"integrity":"sha512-D57q8iwSLd2jRc+Z7bQuzDe97dS2n95b2KKbXFevAHI4pHh8LhYJMjrj7BsA5eSS0p5L1S2mom5uBi4lc/a1Tw==","signatures":[{"sig":"MEQCIBxY8lzxTNi89cpX6caGVE0cSpry1WJTLBRzX50J+lxCAiBMjxFW40YaeMddbQ8Sv2ZkphxTo4l0EG2wQpvpzlsZAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlPfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPQQ/+KCqKT2zmS35SI9sq55K/f8FiVgvV+tTdQDcRg8yZTHB/pStK\r\nR2PPgxMx2vT0XMszO035pjqUUuJBf+LkV+0tXaF3vqd/9WLBT7owr2osSisz\r\n0/VYd3H3lhK+x6KU7cnOe9KhflhKC1zUt2fpWlUr+v5J7HwTCq6IhP7CDtbD\r\nH1JcVs9fSU8f0s7Z70u9u6Tij+EjAbEz3XmvflWSpSNdls1C5XLRgBhCcrkD\r\nyEPPR4tkVe1kYVIYNHJqgCDifQZ8gnU8RgLXdGmeGTZ6rzBVFUtvqIsgEd4j\r\n6KGq67HKiczmKpYdz7c1xiYtoYvYYdTbWPScHENTQgfvBRM1qgdpR7chPL/n\r\n7WMIiSdIfdc6egUgu+f0fkGVzDtSWw7YDPPtnOFEl/QvSPIqQIiCRqhL0Mwh\r\nqukaxPlx+mbM1xd3MbNIHrUN5l3H96QBeooVgk+2HWf7H/DEv2nu78Ez2N9g\r\nJTDcA7Won5qYCincC2iCTGu1nLhxElMIdE5PxyCcuRTr0dXNtgB/mBKxCNp9\r\nmuA6+hhlMeHzaVBKqkHYXkpZsu5sYTWNX25y6vshY5FTyN4Z6D8gd+qM4YRI\r\nZdlCDyWVWU517/siSyNJWtkVeHUMbgcB58uzRoWIKWVCVNrgxxIkqwjNSEYt\r\nEfu4Xk0+Mi2aKPq8O5vWCPk1jQuzIpKghag=\r\n=KTr/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/theme":"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/line-ripple_14.0.0-canary.bdf9d4af9.0_1647465439756_0.5270205186899228","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/line-ripple","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0c445b71a5fa40936326807c8149f91137a45f03","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.32b391398.0.tgz","fileCount":33,"integrity":"sha512-gvkKjEkeG2znbJhSKVwxkpmGmv5W3R6ub5U5TRQNrEXLFWovz8fvKVOOwJ1DNNBW1wOWnr6o4GECSp7swAdsoQ==","signatures":[{"sig":"MEUCIQDemqYIPUNjrRM+YQuAI2m7uy+Bz+t7eg/wZuC5T8g1tQIgJRlV6gy3a5p3zn3PHYCPnPjfjmaw4QneyqI6ON7W4Uk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3bNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpO2w//b0apl45yAQob9XS1beqovoK+/ZiXu+UJksi59D+q3YLMAWQV\r\nXBtFjoUmoXcVn81fsK/m5o/Cj8WtOqM5JTEBF6dVsD/+1sX+0AN18EOAlzGw\r\nFVrZdNMYjsjdpNhJgEtejuUMyXBKYmE+JatvQEuTEpk5JzqJYQwe/dvx/SZQ\r\nY926N4TZOea33+ON58iz7QVKe5VeiBFBHn34dyPcCB3gn6cnMuynKOYiVj9X\r\nkvQ0fxRLGDOntJNbVXijH9GFEk1HLknwPlZkyI9UHzYHzbihEVrdHpYuhFEu\r\nQo4LQJp6TRW0d2oeef5HsAdW3GB7MiZrXw6H9Aeiisr0RyGPq0HanLPCN/sk\r\nEhcBR0TRtrkaCI8SQvfu+Oyocw8bZvSPUGRK46Y6W+GKXMpFn0wa5QCOETHY\r\npwAbbcpwCVDfTV0SXvLP7q8Ht6kNUtG9Yq7a5fIAsL6THZM22wQFiJA96wCx\r\n4zecWXXqC3BPjfgi9N6B7gvBy5JAqeJ69mowAz7z/Su+ROiOqCuajjR7vefZ\r\nBR3D2OFQttXS/GppK/MicAsMD2D3IzO9vKBAlS25mnlqaviBiMcpgz++OwDO\r\nthk4z71jG30dh1haC51l5Z1qpxDW5zFJWfae87SObxmxOGSQzu2oPsbOcQeZ\r\nKBfWjnRsGWmO7/zp7P8vMfHwdOOoEhyq+nY=\r\n=lfkm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.32b391398.0","@material/theme":"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/line-ripple_14.0.0-canary.32b391398.0_1647539917693_0.08415958772689791","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/line-ripple","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b94e7ec36fa50379f1d14006f308f9573e09d83c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":33,"integrity":"sha512-U1mqQYoHUPKFmklt5a8Qr7tLV8obfUytHD1ERuy0SXkKJJfMFATpRn6HDeePmSYbr4jCNoSd5rO5cTrhslkFmA==","signatures":[{"sig":"MEQCIHxHY2n6hN+NcFHnUwnmDrrPeLLHZ8EMn4xWX4ob2ThtAiBNKowG2J07odEO8oFIEiseYj0l97hT/AFK9y+ejj1Asw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLWPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQpxAAk9qbAPeyGPBDTmLqE3i/DWamcY+HN72h94Ti4EgpHVexdPm+\r\nxuXFmVmroP0Y5m//OlBopTTfUxtCfPa+GT+ZQT22lS9C6GkJiOw1pbd5oeTp\r\nJ3Xq75Z9IzYZXQSj46ZNB4fEusXBUKbzwgJzzwEIcmROdUMgjC/1LiklZr+J\r\nhR3ZSmocFVLapz4GedVb1qFLX40sKmuoLnlEjJl52ZbabnMsbWrHjG9fcvZF\r\nWS7y5uTqH34wTxYpwpq81KT9Hunbf63799mCO+P44qvNVkti4IDGp/8IvY+f\r\nNg82+Ml97uY8VVpJd/KcFDNcEHLqwsyLU65D+Tp+FSfeVp3P2k+RLrYLuL+S\r\nRerPPQfKXE+bqLP9JNEI4xU/IUX4ufnfS67clKWxHimh9gMwERAmIuBoVuH7\r\nm8CpeqWtkTNr8gwELxObi0PwugcQqbpa8M59RJdYoSIlPSu+D6RueCOeEIiG\r\nygYVx+GoMZbO3BLkvct/oKL4Pca4GsrEozf7MsCN127a+XiIkGdodxAtvI4S\r\nKgCbsQF4bXO2Sfzs7XJjLVGXYBc7N4Y4/IP7DXMQ0lR46nnxeeyOPgj1VK0F\r\nPzVcjBRiwsl0K0oPQWvbF67baXJqSQy1bEtqu0BxIzGc9sVwIOIbofuw7Fci\r\nvpoEWt9Kwr+Fg/bJNmDdJqISNJoWXntfbHM=\r\n=GP1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"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/line-ripple_14.0.0-canary.ae8a6a3a3.0_1647621519331_0.6095108193190226","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/line-ripple","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"438132b5da70e9db560970c3bf9e3cbbce7c49b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.cbd9358a6.0.tgz","fileCount":33,"integrity":"sha512-Owj4AlRaUekJuw51MG5zY3bTsxccXoB2jqQ0WJDOZh4h4OfFTgM0S2uBXEy01zfy1NeC+wo78Ru1pWzVoQ+Cmw==","signatures":[{"sig":"MEQCICb2sLzSZv4QxCOjT/1RhjeBz98rFghsbtk+K/wJWBYQAiAgJAhpPhxDPYHEHd9d8U/Daox+uv97IoDXUI0BbteOCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQzvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpKw/+LjQivvm5h9hf3/+6WXZdeBbctn4Z/h5HABUoTZ35Bv5cNEOx\r\nZcb70g5UKH3fI0+PAnOc6zGMESbW/F8pXQraqcw/1+p+NeB77m5Zz5Ba3s8+\r\nZW5/1KPpjHaAOmyBiM3f9tY9sIbblONEVoK0lII2AQeViv6c6t0/1vP8PrDu\r\nJDAyrJR9jngl1VwEquDX2I7KkwILnuVOWCpwp3mZ8klLCSl9CKrEi6NJ+YOb\r\n2liBWetW7mwpuYfJ3cUjAJackl3ZH8TSaGU6jjA4kTqqzgYHEQD0pb/vinJf\r\nQGUIwj4mN8ziNeAsofinl5ulr+hHfYz0TnfoetFBE/exumK714IXJElswbV5\r\nor3TWN67mHVPMAJ/dX2sQU1wLTtgjoi384yoAdyUY5CH87vlfYEc7rAZwD7H\r\nTh1ZKPH9oXKcLPX46OGfpekaWsBSQyLINQrBee4t4l/i1ZV2wS8k05K+0odi\r\nOAvMhSaDJtNcaDgk+TwrLy43O6TRKXSVR8wk3ZZFJHikVWWBy6slw9e+BMo0\r\n0t4yUaOZosRa9TZnl1lczrGv86hAs4A1ehrmP3I6HD+7CtJJJbUoWjrpwkl3\r\nMie/13o4CpgapEnpRapqDOYZvw/zFggVi9cXFw2tQKrFixUGEtULEO6m7xQT\r\nYMqAM8XfiaW7RSpUOypXbLoTbWniKABTS8M=\r\n=AhQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/theme":"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/line-ripple_14.0.0-canary.cbd9358a6.0_1647643887020_0.7532215099105166","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/line-ripple","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"383f1a9ec94618fd3749c4b2df9bb6988690d7b2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.dcfe49c98.0.tgz","fileCount":33,"integrity":"sha512-CeAg02Nf8Tlt3EygyovYFdxO2oINFgrjz39gURhC0snAJJfgyHXMQAJean2aZ9vb4EosbSNh8jFTZ/v7mrONog==","signatures":[{"sig":"MEYCIQDW+JRUWIwJlws3bLZFCctefqyjU600hxa8yWgx9ROTxgIhAOMqN+yjiIy0qAq/Z2xQpO8kdLzlaVJfV9QV26FtbHQ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMdTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqbJQ/5ANzhbXtKqTphExst5FTYJerj71mu7l/GpgCmpn/ITU/tzGNs\r\na+bkWks8M9lqNpqrlsLuDEIh20rP5C3txKsgArQ0ETo98a+cvytm4ZCOrDn+\r\nry23HW0XZ9eE9Vm68O8ZFTgDuMeOmkMnEQSVHfhdZlklgvS1bfNU+Dm+ZDbu\r\nmqz+231M5JFjauRh/5yRREfwL2XpC28Qzm9eFKFMWLkibtEsyOp7THNtBmDD\r\no/wE2W/22gLseHQ1FM9l//vV7r9NFynIDu+L15FaW3BM/47sHr5m6ova/f/k\r\niXxX37xDEIaJcAzhOTOtC6Yk5ly+cU6yU8AluIB6AEdq+m1ul9SSnZOurdeG\r\n/CVg00BExtazCOvfRCuMQ8qwzg+C0HAkxclnU9CVH/WSZd8386Mqfghklq8j\r\ntUgtQwBc49HiXxsYIkdE/ZmVSNsEPfE9GN3J+KVxbcXHN1BP6sImk7DyUtD4\r\nshImuEDrwH/cIcAx+igFBqA1+EbjZtAJ0iY5IuhnnpyDV0JKW4K7x5ArH569\r\nEwBPRhsKs3tKlo7ETdwumwIYJ4k5kaXwspKfozgQ0qLro7LklaeWf9/pYWUx\r\nvLlKhAEZ+L5JCrpbnDHrTjN5+yaaEkf+bZlLOn6JD9lbhBkmIuXp8CH+jllZ\r\nQZQ+5Mk2n7p1NEGSd/OZZnXuyEvj+3gPJJ8=\r\n=RLO7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/theme":"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/line-ripple_14.0.0-canary.dcfe49c98.0_1647888211210_0.41572748328781484","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/line-ripple","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9603174744bdd82267017ac22a1ac160b92ea8f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.f31a833fa.0.tgz","fileCount":33,"integrity":"sha512-C+G2afKnWU0PDSMNDSJ93ZCEkm9kKiukKcVdVduHlzQB3gO8ngemKNFrmKc48qtRS0oPIeb6Xfk+Z+4ta0pSyQ==","signatures":[{"sig":"MEUCIFuWWf+11UYDqI5773B8GIFUfNhyYEahcMsW9YX1mDQeAiEAvuS5vw81frQ9BwFPZa7hoZjI2G2ndLlO6ZipJfoBJtA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm7AACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHBg/6Agr/3ozPRZuiJIZwA2pl9EPAveEMZmwsw4rDCMgW3XSVIuDi\r\ns1Fw2IePdrkok6u8N1jRxkIffXGhOljXrJlnSFhlCOL2I9Yf9Jwf4HZYpLPl\r\nUUKvMxx/ZSxd+hP/rFXN85bGMgmzWifkUvL9FC7MTQSe9Qr4Bc+pLy63mBaO\r\nNkdkLk4S26eMywky4e9XtDWyTaXsx0FZ9kQ7Zlrs0A+HIQnpb8RAvXNgv3KU\r\nuANvy7sE7/wX4d3t4uTRCQ+awDc4eK2vpnikL66JRPs9GPp2abciRS6ZBrZN\r\ndqDea7JQZJgTWMt2CQasN7l4heZy5vpMm0LhsHEfow+dDPHpMOrgv7HSq79R\r\nDbUPp85wy7Mx3wJ2x5aN297MdKHXqL7iZHUSJy8PKfOA7uo/5a3+as+yT1It\r\nEW6iYwB+BLax13mo88xp9Pk6MPhOwjxUGHrxEWQkM/S8ZIvNiCqSk/wZ9/jN\r\nr7ZF5/YV8wmA/AfGKvyTP+pMlIJf1X7jRs7dIeAdVsTt3siiMBeQhwb3n6RY\r\nHQdi5/tB/1miwMhHb5HMWhNtH253zgyGPGRbteT5CWriqHcYXINCSi2D0kYx\r\nAn5UKbdJgFGDGmQBxk+iLuXegVwi9NI5lexbEONYI7xnBaVQj2Wf1AkzN84X\r\nFMmk2ZpdlhQIlQYppdmltlPVZCMISpty624=\r\n=ZrJW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/theme":"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/line-ripple_14.0.0-canary.f31a833fa.0_1647996608504_0.33145139708103266","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2c79aff823b2b2711f1ffe0bab1f944f8e6a6a17","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.4b92e210a.0.tgz","fileCount":33,"integrity":"sha512-Iqsq+1yu3/HC+yVRm375UgFYVx+Aw0dA0F+TU3xZea7dgZ7QnB6lS7WZJqlRsAD14G7wd45P/4Xsxg5Sw8UXGg==","signatures":[{"sig":"MEUCIHgClx4uxMmqVrKxtVkgQNdxp15KLPlM9ph5yXwCR+N7AiEAlQ/SfZ0iI1nMwlzVL4r9rq8ucb/8ipUvfZ8oOjz+jhE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNH5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwIhAAiB0a79cfDVAgSW9QiQ4wUeVscjGD5fqRpLJw2TK96oerZqpy\r\nDUW2iWHH8molXYjjM4Yt8uMCLGoOT69ad2Lo2bPodCEFGDV23WpHkL93s+o7\r\nL2LDOFRZ/9orwKaQcUpq0AerEtepdbxEVqxys5rrSmkwejughxDRV3xQbw9S\r\n0+k+zrOUr7KguYxShsGANk4Kah1Nd7KELimrSK0Im28wZpinQCNL6OBxrPsW\r\n7Rta8Y1qjW4hNfDYvKuzM4bIJtcY7ZbetI6WKrr8DUeRav6jiGGv+xZzQ03X\r\n5TYdcK1XknEBqMkHQZU28UFixQrWi0NApDUO3ZLX48st/HKl6aH/gX0NoPCg\r\n2IsTQYaQgWxU7fWm99y2snHaLlhNYUs7cauHL/H1ze60AHXJfZb42kuVKja8\r\nsWIIfL4ESfi1vPZIEPsj79VQoiuLxTD7SuCis/KR88OP+VTkUaYNCzXr2L2G\r\nmZfVk04m5r3sSeUWf3T8hjayZbr0XLMdljZ14/4mC+WnOQ6hJFb41bRCERYh\r\nl+iZsL1i3K8yJOW1j2dsFqnKXd9bur14uT06vOFShdV8fGRUhx9f+bUBxweE\r\nRiyt3jo8IIKY5HAopere5yIzYVdNdbtfbW79QVbfr3jECb1zpVtQ7md6QPNA\r\nZbTI6HI6tvwB+b/acoWpXUR/vhIVNCTMlRI=\r\n=D2fT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/theme":"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/line-ripple_14.0.0-canary.4b92e210a.0_1648153081348_0.7194955707398034","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/line-ripple","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ce3acdb4e87e68d70c3b8aaf3932401c45127118","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.a657abb61.0.tgz","fileCount":33,"integrity":"sha512-3bO4dPv+Y1DHds1g4FR2TvH3G//ACh4NHJlhOOxemSpGuEVyLPTURxod+nGy1j3T2fb959N6b032h7baixI6mg==","signatures":[{"sig":"MEQCIFfykD3B5drx+BEDYGVWRt4LZnlRDTqISKU8MR+OvUcJAiBqV7dQNq2YSssYhIQSf8KeZSnJF8QL67tG20XkLP3ALA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNb8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEdQ/8DcNPb/h/HUFmfERby52+EJT67imxO1zmPc1VvM+VvEbdUA/t\r\nBYcESnAtJYKqsHTIl/66hM/m/PQ+oGN4xUIpjh/EiepcdCFgSiNXZeuDQLz6\r\nFtPp+ydYnuKVozIueYSdEQ1NL6rQ/2LXmISzV3CqM5FkCan3WB4V72r7S0YQ\r\nTBnyi3bAr2g07bay9uUqIyQZClHfmReLEc6eLYqx3QAGHXya+W0HcWs4vH/C\r\nZAgq3kkn6aC/Qtyk8QM4iFgBd3NMlAEFJWqI1y2sbuOU8SWE6FpputgEcJsZ\r\npH+uYaWycMDbd4DoZSm2SC/mgRaQYmSJLHKNDter/cTla/lmU1DYPX5beHMG\r\nKzKuhw6KDIFpXtkJs91l71Cz+mn0ntxsyKMt07D9B8mX1btdnip5fc1x7Vqi\r\nnfBByPrcQ1dFUepZkicaeSn3Q6Q9DMpwpelQkRTRWqiK8QgWh8W+KB1IeT2w\r\nqwxWsjFMxSaKs9sKMuegDpTKeKqA1nA19vGlyDD0CSl3+Xq4I63U0YUNVLXu\r\nbhB5TqjGd3yixrDPx+Wiv105hXdq/W9AkLyaqM37DsJfRmod72S1dycGmdBO\r\nBm6uThPhBfa3Na+1L1bvfNo5Fl6H0zcHCOCfhT1q3z+biAuvqMR4Aze/CqR0\r\nBjsNsjlg0T21clxAWAbSma+7VRdYKX+Fk0w=\r\n=DSsg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.a657abb61.0","@material/theme":"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/line-ripple_14.0.0-canary.a657abb61.0_1648154364298_0.552483884470558","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/line-ripple","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"80586947e78c40df3cbdacdbf2c7578ceb22f769","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.443f63f50.0.tgz","fileCount":33,"integrity":"sha512-yODf2XemzewfKjXT6jlhbwsfx5gt8j04wwUr3RH4UTGGqwA2ok1lArKEEpzO7YVqFRSZE5lOWoZCiSQMdND9Hw==","signatures":[{"sig":"MEYCIQCxO5SV/vFiYC2LNsdNg6zSqfphREug/ocEYi2tAeHYRwIhAKEIOHHZh4mXHXk+Kz76Amg57mbilckOWOvJwwTecE74","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkpjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbcBAAoJZrdn9gTK0ifc9T76epEMcskfYL2BfQpXc83hrPmL3Ci2oE\r\nuWxQTBGxOMURzPYzJmWG6yfzWR8I+olyJJ1ceqw5pCP8RRQT2IslvElFyqsD\r\ncDod9sqrW4rVYRlJ4UUBlAQawBRPaMWTFOrQ5qP//op1awvy5EE3AYEvBveG\r\ntQEOADb/UKJCr/by8bfOLONIJFv/MDD4IuuKmNwEjHHUnDS9IaZU39o4wRgK\r\nU3HSHcS0YZAhLFatf6izKv9DtbKxjmTojtfzjI3U0f5wBJkZBjzf/WzNmlWQ\r\n+vHycvLnyVYNd1PSePSqHeocg1CbCtzTJ6DzDAj/8GSeIRgd4O7hoTCzaoWa\r\nmLjWEcXGm8oNoVAU6Vu02lHS2DQ3WKUYqdo/bmmkytbN2dVZziYsZSL/Di6M\r\nWXvoylqpC5dt9bDsy6rySs5YbAIWvInTEw5RzwaBc8C40S9XFTekyIRmJap9\r\nVHN9ysio544VFQ1kNeD5ZiA6rAgr8XF+PB3rKXj32SQ9GFgRuPjkjnA0ZZBn\r\nZBKjJk/Ce+GuARSqhWxvyAF9VL9ujVUGnakvUjuLjxfixok6f8RF/BzwaN+y\r\nv/+FJopII6QXlYQBbcMrcasVSK6Pp3cz2AR8xznjeas6C1Byb21D/bNQIlM6\r\nDLze6yaqvb29XBUvx4OUhQ2XyeNUtqHyNYk=\r\n=D3IY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.443f63f50.0","@material/theme":"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/line-ripple_14.0.0-canary.443f63f50.0_1648249442832_0.2106509976793023","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/line-ripple","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4bce614e8dc0495a4c01f8845b29a7e6e8f6cdf8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.eb382f318.0.tgz","fileCount":33,"integrity":"sha512-gkAZ1cUd9xL+LQBvECw5TM5m9FFEhTukQMQknYqZs0tGfY096zawfSt2mA1/5vPaTrJNQ2PFXo4D7VfdJf0MsQ==","signatures":[{"sig":"MEYCIQCcmtjr6me5lW04UpFb2kRRMKrJjVtzFUOpyWqcArscQQIhAOOLZfnzrbZqEN8PtkEuo1SNA9AvB5xlkFEwHp+4vFtm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0MfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZJBAAlqZlXrc56vV6kR1+0Hl5QBF/mggWUhmWjvoKnSshSFvmQ6MA\r\nqC/fd0gtkbI+YrA3Cgf0HMW0Us21hvRxWWGPxUD1tK6YDP1yWmvcOupeLNf2\r\no8EPnalOCgoBybEWEmQe890TRzPpZgCz/lqXpXJy6r33RBSxS6rxt+Uhz48G\r\noHbPpYixCZEajdEVqUweFK7uTCqeldJ5/29OZ1k/ExDWsxrsB4y/woP1LquN\r\nUM+YWUcQOsVuRAQmHi+HbD+LpOvzNIZhKidNm+VW1ER1V1B0JiIUAKz7Mr8c\r\nVLY9KEcAyhPWjtk9wO6c7RQpzI23O+fBCWeK2KjyJwNncpZH+WGYjauLEJO9\r\nBtCtnpsGYD5vb3TuNkRhVlKBWtj43KaKLl1XFB/4j+ADDxzrIm2R6Ae3kVoJ\r\nQUn/kz6Q2Q54f3KILnj2WxFyN9080kIeedqKk3xVtpC/xavVL4IPuKugmymA\r\nTyEN2a7KfHcQPKyMNf5CLMdy9sj2wi0wj8EpEnRj01Nw+1X/H4yhhg/KFPHh\r\n4FBHZFIhxkEhQgXKEqB9EivwCi4Jhe/ptzxA02uSlW5IO8MySx4zfmzRxtgq\r\nTyR55aTFnsTaRKS6kylRiISSiVe294ud9U/g8K0NYx586jGlTOK92FMwItjo\r\nhAiM86ozEtR7Mrja2NlpNCs2vk7px22SVKA=\r\n=SuVp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.eb382f318.0","@material/theme":"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/line-ripple_14.0.0-canary.eb382f318.0_1648575262974_0.6207201065422168","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/line-ripple","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe75f5bcbd11d24b001c0231771d007bd86a870c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.344d52823.0.tgz","fileCount":33,"integrity":"sha512-+w/Db4RulzQv0D3OiRtLiIZExr0L/PArwJAq2u3EL7PN3P6nzpIPJ8YgAtlrnBefj2k5yDwyY2Zg8cWMjOOK5g==","signatures":[{"sig":"MEYCIQDPNUONu0ptYwGqlrCnAMyLdKicsc8cGxtlGVR2Zqc0CQIhAMLty9cr/c1YiQ3hU7fXs3TFoh5uevIJRcwWJSil9SiA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1MiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolSRAApC8xlvq1VHiD8F2kayGJzzwd4SxHi5lkKoCGYfbGcug3+VBp\r\nFrpx6h6vPUgMGSe3vewkf5EOEks99Qu2S7+eHGGbfM1XqMECotQ19+S4+5aO\r\n8dKjflwSwRwCTpN5wb/VNjSYDUv96FiXwV6oZm+JQk6zwvjQv32d+dzzGCyp\r\nYRwSQTBkJPlf8pHo+H2CHEo4AkrdWg/VZo01hH0I/N+GSPQjBfCPX+HLD6wg\r\norqcuTPxIUSIaYt+yA9rC5ZOq/I11D9wKax5m4IgyS9yp0BXKM9MPY2WVz7a\r\nqaOBZ0FYB7vvBlgyE3ezLZXIutiKUwE8LSKZzTYM8Ov8wKXVAUFV+h5S75kW\r\nJn3TTpFKRBVLDybPaFq/GqcybPwf6kv/EosVGoqBgEhKRkyADZP17oxtF6LU\r\nsOxYFQDNZSI+5U+KbovxhdtI4ZVXhb6gD/Orxm8FxvYtG3P7hHfTs9FhOOqH\r\nzcMlGohUdvNZjBN1q4F9GqakQc7+GDuB7R7V1CrXDUVLRIqPK900i68QEtoW\r\nlF8Nk8JmssAjOV7+mwYbme7uKuLV4zYImojlETpJqAf/Lc6NRKjbXeYWvMkA\r\n7vfaiGl4cnVQz1apFYfifqt29M2re+plMFvmtoGZRRBRNBVfLhkfUvdr0UG4\r\nqo5xdd/qQdDQNT6PDIq9Luwu6TYTwU02eAk=\r\n=rwfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.344d52823.0","@material/theme":"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/line-ripple_14.0.0-canary.344d52823.0_1648579362167_0.28529416222915915","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/line-ripple","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b156bbce52b72f270419e968dcd9091763ad20b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.4e372fb49.0.tgz","fileCount":33,"integrity":"sha512-jktKErrLmauRj/blEsk/HsdaqKh+sUJ3B2ieafW/ptJHdOGoDIFk49nQLwRY4UtGVqFu07rwmv2qI4IKuPuWhw==","signatures":[{"sig":"MEYCIQCmL2aceu7WdFnRQVPn6l82e5tPniTW48LYyx0+r7DAFAIhAMsEXn1dERGNmd2aVaqjW7vrw9HnULc+get/9iYJp+rC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0pUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbSA/+MMgNeN9X0GF0HaG2OkJEyIN6X53I1uJLXjp0PPDvmsBcKI/Y\r\nweknUplH7qn/T90SZTTM5xRMxQ6/wpTBzFMMtG09XdqnXJeH3mZBdSX7UDMm\r\neAezULa1z/0kuu9wmTyW6c3cJtJ/hsR0qgGxnRKqGY+MQ0Xz0iJUaGcU965Y\r\nXYXnttv1SV+XWmJ8crdqNnXLAx6LG1Zj34llsHjqdBVAWjuweXb7bv+049no\r\nHsxXZGdrnB8ZdmHJhH/ZRUAO0Ga5fnb+h4u+R0qPqUmpRZQ8qDygYWv48kvN\r\n38fCh420kGUQ6bq/E2XKWEbM0hv7NT94nHaAGOUTNrPTTMToEDAw9mzktPrB\r\nMJGDny9FOos5EFhyIbOCphIDqa49ldexMlgHSkz2yFEc9H8plLoJDe/01pQ/\r\n9WTSmfjY58Xinu4m8N0BwPZaq7bUMBIG8LQWLS+/N8zKFRx/Wa5V8SNwaPTL\r\nVs37RKXC8aXaYPMrzOzKcjWFWrGYdI1CiENkF4Hj3TJLB1JTn9C0R8EN3ewn\r\n3pzUzyDMImqDUtRBPJiaV1TlE5zQryc/ny5IKiZtofdpGJMlIreIpXtY3iqV\r\n2Yeo2glD6Ry7Q3+l/z8HwfjDMipGsPsvUQ1CIyWxO4qDalwlUuZCO62VJQNc\r\nBEDfGRpCcgyuynb/EDgVc8Ue85BpEtj1/tU=\r\n=rWIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/theme":"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/line-ripple_14.0.0-canary.4e372fb49.0_1649363540718_0.722814888122463","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"deb0a0374cbdb0927230112d63a5ffd566eb44b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3e30054fb.0.tgz","fileCount":33,"integrity":"sha512-kcwL/IJ0IfzoC1th7XihUn15iW6yoDB2oYRvdBgBE8m1Pxsbv1DdKRgeTLuOcfduBFWz+ISUaY/LOHIfKveVtA==","signatures":[{"sig":"MEUCIGogZBPd55fBKQMJIws+EgXfTg+WrOBB2S/5WxbD2iLzAiEAphVWca0XfpkyDQKYnSpgIWVSq2Ge34zQNoFh+cM0JNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0sSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoy5g//UXD5xYVmeuf5UeJ4MDiGnxMmL5piIhjwqZ2N1kLqNufIr4/R\r\njFlwvnaDcjTzIEZY0VWq+aLKwDXiM9cXAoeGHzL91g5TN8cFW862MsOcqrO+\r\nBAjThB48kIVbLr/sO9wA60Yyk8S7jrPa0Y9pGjosiAeuhE8gmq7DDt+je+Iw\r\n3BBbGW+0MKzR0wsN4BdHfrRSP6O6slnoOoMAVEiQjk3PNnhjzVG2x8+Salfc\r\nOtJkzIZy6RU8RBbZy1aGzbtoPPJYG5QVnN8R7qUreJn+J6q3gVHyL3sJEcJ4\r\nAuDKd4qfRv0rj+De0KL0iz6ORFqIAo2TTdshVi/EYwQdN/mkka3NTk5e+n5B\r\n4UPypkZKf7o45nNsw2e0cKg5XBY4fHcstBL21v03DanuaVLbyzCz43Jw7NNJ\r\nEanmYbJFyRcCOb3x9tMEfVDBNogz8FdqYWZ+ouJ95Q3QLB057Cy0AYa0EkWq\r\nSvX3n9jVTD4Bx1XYqKBpU3I9l+iRHMQhGi719wwYwL4UptypKOgssFnowOIM\r\nNTKKWAguxfesMgMf912daCk6oJN/Ic52Bl9UZ6tHJlSD0saNR9djXAzyJEJS\r\nqO02aqICw3MJ4znyTga/mDsxToBvb+Fy7nVK6QnjFUxEp0FRZFM016i2TuX9\r\nR38uFui2BhX+scvVS46HrhePyKnCde7nTRU=\r\n=BTle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/theme":"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/line-ripple_14.0.0-canary.3e30054fb.0_1649888017867_0.0673901906836405","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/line-ripple","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6bb4c3bca6a48ce4a7995ce5e9e6e3fa88c6405a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.8c4da223a.0.tgz","fileCount":33,"integrity":"sha512-808/TOzLLxT6fTaGfvdeh/7u3uJuwtpU/ay++9eVO76LM9/AHMMUlmMmYhmUqQ6aIcXrfrJ3+JSLe/GiStj+Rg==","signatures":[{"sig":"MEYCIQD4qspWkqlNzl+JyYFN8qtFpzY2G1qLjGDcu5fI7GxM4AIhALUONTg07AP5g+qGuG+V2VIsP4xa4emVNux5CSjWB2Cz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtP5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqvmg/8CFMI8k4fO/eew+wICw/WAkNO6Vp9T1NYmC6HBDm7202XVYeC\r\nakG5/svENFtnV6zGiKMqlIClmqTxZc1Fni7LG40XERryRfu/y1iWl89jWr9e\r\nBB8ghWwNtqUiUqEUjj3LNKM2aMpoVMdZSrgN81sZnxCAJPapcrDr8vMzMNvx\r\nNXUkxsdmRa6xVS1jwEE64VlZI8aX1WqBWeD+evyToByKwwo8zBVOu5aEYBBi\r\nQ37V7wauq9xWWlUWd4f5LgghqaZ/NJnUtEghRJKa6rplu200fsG6esqZVDrm\r\n/Robz1u7O/kJNUz3RcEpZDBir+0w3X5WWfpkTtxjtfl+Xc0ddrz2EkntgkZC\r\nJbIpPd5ocFGU/NrTvULpnj9uDxomNmMXPLiXLuIw8wQUhLHV5xPcUgx834f3\r\nwyW0uZYQQKYPgP3AslwfEOtIYcKijA2iZoj/DRGDP2FnzubKB2JdxSWcZkLH\r\nq0QdOkIOp7PqgmxLz0DJslMyUroGkCamxQBtEhNZhW1Nqc0tr6JHY2itK3+D\r\nYqlIM17dduytyD8Oilj1XOGCuP1CA9ujOwx1mYBczFizpBu7NQ1Lgm6ZQbcy\r\nDwI4BKCCwvw1E+/kSEn6CN0INYufSzHHTgLT+Knrm//7YjDil5n93ohH7uNS\r\n34N9GWrOKBEXt8B45mbYxwj/kVCZuBRcPIk=\r\n=1XXS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/theme":"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/line-ripple_14.0.0-canary.8c4da223a.0_1650381817355_0.5693311627595612","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/line-ripple","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"675e74d86a54793b0e9b0bf83e90222f8b559a09","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.7de8965cc.0.tgz","fileCount":33,"integrity":"sha512-ZqKm4p0rpWaanyRMsHVAz+Zphd0PnQMhUQay5qtNsRSxUD7JFKK4HySZ+5g9ZoiKhlz3fkkGHRMrKL7lLrF4PQ==","signatures":[{"sig":"MEUCIQCRP/qGqC2yVSHas5sHRAS5+G07+UkpR5z6vh9as2t6ZgIgYBjNmIyIhg6VfBkVkYnZqM5r0VlqDjX1decMVoHlo/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxoaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvdQ//aVDQ/XEw2qTYrN7Fpvr1GnyOci4hlsCVBNzkijib0BewESyo\r\nKtSKLkligjvbWNO8Peveg9rSgZ70QM9tbxPp/PQlb0ryBX6k4duOCYe9z+di\r\njg/yEkDHpj8oj0NbfjtuhhpQzvt5i0aQBF4jd523ALOesbHrGstg2nO73hru\r\nMloCpF4PLLpJJJik4yJpIBb70kwZ9royzAEsDitOMzgcU7S9wln/dVRdVo/d\r\nDVpz0DQKnhTAA5ahHqS3UvbxdGzUPaX9LLPpoauPyyIgJwUM81M85cBtK/fE\r\nUjGg6Y8UsASYdA6ARmaG8KifD4XEt1ssT3FYNbB99bUV20yiTqxhBxzb9sLr\r\nTEu/Rn5rNUPDO/l+ndEx5I6VNdWDID7U3vL1OZpUUpTW9HoQzw5uq3XjYn+d\r\n2C/04B0jgjm8m12yDdB7Jvuht00cBHZnNgV9oALsfoM9kq+oHiMcp3QSV2Ig\r\nHTPu5H4VuajpSYK6wUX450S49XWSAySM9vEcHIIBubXsDO7D3Q7uMxAJTElF\r\nPqyMtCSjrbSYKEbzUGBr8nRZhEwKe8dp9DQzJ37X/XQCaNzpOKXRUvfPwEs/\r\nBr766YFB1abU+BOBjrE2myCtI8GkVoCJ63YH7xSlrHGO6gavPXm0K1aa6dZ4\r\nSvqX/3S5jnV10SLuG5jNBrcC8aBp7ix+dj4=\r\n=WNYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/theme":"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/line-ripple_14.0.0-canary.7de8965cc.0_1650399770247_0.2822816958654264","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/line-ripple","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2af553f40f629259abf7b121069c25a3e38ad031","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.641ed0851.0.tgz","fileCount":33,"integrity":"sha512-t6fs+ufeGbrPuOpBrL5ewX3q0p4d2eeK3/zFHub7e5Mvqt2jiwNQh64o8TZowsfwx5bYBUp+S90rGNDDr87C/A==","signatures":[{"sig":"MEQCIFJv6YCaSWEUasNwuW3FbTxNxVGD130z1tySptVdk8Q2AiApjImoBIY8zuwkl/vKXszFOT4nuuLsK2KTlkSy0JuIww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC8uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFoA/9HUbJvZyW9BN4CZ9Cby6kl9hxwzaAyZs2yB+2stG8Dua6serm\r\nKud8ogXMOyXNxAz+KINqjtnxhIJN0kP1aJ/ek5war+DC/hrjikmzO1FxBOry\r\nga4950L3Zl6cSOwedJodYuOJOfVCoNizCfvEYjY6bGyhYYG6ZwJYAOJcoV40\r\nc3AsIXNcx75FM4WSGZjXU8eEbos4Jr6TUSH+PaqJWNIZKi+3Z7hEMm/UkN2u\r\nVyD96asHcxAIeifcnvfUwi7NlmsK/9N2lgJo60AuYi4KHFS/+IsTLgme3bPy\r\nDN3U6jTQjTmfD152xd34hyYh1SkQ8J6+XZYCHJkCnQR4gO4rhRQAdofFS6X3\r\nnlRmFZ3aRAaSkCsOJ8y0qLXkv9PIgMKo9eKkRJ6Np1qUymcDZfayeoZCALPG\r\nPW9ltSBLBJX6lOuL1IfVesLHH2uYFHB58O4Igmv+iinuALBmcXYRjGVAeoFZ\r\n5JAZREHDaVLcdVkefaiqxxe8slvgqvlmxQjkVsGJunqpMc9Ru3kXWKowM76w\r\nXbv8UUmiO28MtpEaJOv+iGzPvWzfnUllRm92/4/5RW7Ap3xAFGqqQhXEU+Iw\r\nq5gm9k0/adEXV492vfBbRwi3tDS2KzIWy4jVgFcdAzneu1X9ulXJJUBVFjbb\r\nZn5swmviqEIw28WnF/795JRHreJLXsD7hIo=\r\n=m/u4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.641ed0851.0","@material/theme":"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/line-ripple_14.0.0-canary.641ed0851.0_1650470702136_0.9163156125170031","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/line-ripple","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4170227b91bca797e3b710595ab3171d62b07ecb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.e88f83024.0.tgz","fileCount":33,"integrity":"sha512-uPJD7MhpAmFtXX0zMOMJ/3Hdf77VdzGgFwwnsxIpzvvdf48trPCSvL1WKoQG2uTdXqVGj52IMqThuWaLjhHdGQ==","signatures":[{"sig":"MEQCIDBCckeqhbe+ov3KGjRwmjyWTW1cYIGhZzlRsLuMlUEGAiApDx6WOcgmNK426CcESarf0moVDCEzRgql0tO4988lEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEcaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptBA//XqKLuk1HwLP3HxgOb+vafL+uTzhtP1SZBfHn4X58GjTfOSsa\r\n2XSgqGtK7SRuAQunev3/JTIvZb9YFXY67KUmv0PrtqPvHSrswlLJr7l2hk9+\r\nZMkpMhJg4yPhi1vrF4t8Tt0oeLTx+kdJBtWAnK/lV9xqyqHy5IOSc+dnd4hZ\r\nz4VNLAJhI/+P68txN2P5QuIeMwUXR1iOMXoXjG8jcHxVhdW90h+IVysK9dM3\r\nzIFXYsLdU8M0qRMaOMpXpaRmUYOsToG9aXeR4WdlB2ducIJlVhhRBVkJxEVj\r\n8zgoLJcmWAL7yoRRZPCHGaKoMbcu8Hga1nHT/0BOuSwNqaJlhgTYuzzAHE22\r\nxFa0Oq0lvSIIP+6liTB1OiuoRDWOwaYLZ5dRceJ/8KrTkWqGa2C6Qr2yWAXR\r\n7Ok4IdkOcmP4UcqW+TCpjOjkpeLPwkj6vT5Y1+q6iqXJZzXp4v/B8K6sQa+3\r\n5TjmJ6Nt8/OuiMfNUTtqrPtdFKacyN/HjceRPIIjEvxB+n+FzivNOR52Hz+i\r\nNARJUi/b1CXBTaO9isTe/hhOMOB2g2lfiR4jxMCkBQPXlib8/10DLirnzhH+\r\niGpNdEf116SOYcHT4Uph2MdWc0XHbiy8HILjLB1rXaSeXAyCYkrR/X06w5Nu\r\n9vByiiEe3JaN/jsLaf14HtQZttNjeWKVL/4=\r\n=eSlr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.e88f83024.0","@material/theme":"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/line-ripple_14.0.0-canary.e88f83024.0_1650476825837_0.1995733921156233","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/line-ripple","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7df0f71244b6d5fe5789a357e21e313e00635cde","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.7321d6254.0.tgz","fileCount":33,"integrity":"sha512-kTqXP3VQa6uVhbB2749ru7SykvZdd64zPjMgGYXdqDgKF9HMrqv+0btWctg9RkgTZfWLgW6xAAavLBwlmy+Q+A==","signatures":[{"sig":"MEYCIQD0wmEb79VxK02g2U9qi2Wo4cXHsE9smhuqTN9xvvyvMwIhAKkww8kSWuEXrlJ3iNB8kBJcSlOI7VTv6h+rWlj8GIMP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGi+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreiRAAoOAdRzyCp+oboPzd0V3YLpclADf8oqgKFFMFDm2PBxgdVust\r\ntqwfRnCV1dIJrCtimtyI5hJ36L5rirTxUACbXHNRSXiV61tTmglOsB1mZ0T3\r\n9TRonBODWYc36i/PAbgTGsQnJoG+BT+2XffDBdLbnbiNeTSDIpXpmF00Qy3K\r\ngCTBIcLF2Xkep2C6kR11H8wYoh3PZXczpWbgKNug7l32TjaCC74dJNVFPZBc\r\n9xj+nQU5/3lTKYzYDECw+SyVOtUBGuNWN1oRMw6drMWDSZKieMbkomG9gG77\r\nNYWExBXa2ZcEKJjGAEgl5+xF/ABGMzip9MLZJy5u531Fp07sQKzDWCwRiCZe\r\nbbpbv0nqmCyw6OpnLooKFfVlR8sjdL+94y2XXyZmFzOvP7/RENEdrzAESLdZ\r\nj+EJ46wT1boeVJT2Y3XftL7TKGcD2zuGk70rMujDQFTPVYPPDECbsiOP7KxU\r\nYMbp9R41PDBxYDRQkZZ29EQQY57RxPAwe65X57++qOwH+9MOto58A8Z90P6H\r\ngH70znfBjq5WY46nq6C8CSpQkNeeRAWEFAXic++eCtZPMf/KAg8C8pD74mWd\r\nfmQKB5I8nAnUBjHvr0ofFTIhjYoO5iJzL7eRpCmit+ipjXuL9M4/EYIZ0m6S\r\njveqMlmw5R97KwbpOaGpYhVaHoAzPNvbFWI=\r\n=GiQL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.7321d6254.0","@material/theme":"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/line-ripple_14.0.0-canary.7321d6254.0_1650485438506_0.38355472304138183","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/line-ripple","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cc877df657f8764dd32f7c751f6c8b388f11f5a6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.3ab956515.0.tgz","fileCount":33,"integrity":"sha512-vqBjtjVqnsda9gUhBDXpyEH3hllvcKuAvAlsj4vtOI/1opjVhJrE9YBlxn+nB1Pakp75BTqpDsZKEGhcgun4WA==","signatures":[{"sig":"MEUCIE/QInK0BtzUGiWOqDv3m92yASiTrGOsyYMZkv0gy/FHAiEAx1FOQekjYK7vR2X5l4djjXqm7v9wcpmDcz7p8zGFrrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZre9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDwg//R75+QD3/RuAk62wvMCeT38lnZO4p2KzdMPHXHRqR3jSs2IwN\r\nBZD7/VJkMzx18H4vjIjNbhrl3vDa7wa7p6Nj1Qbw2/MZ+HGOlkAJlja2nHC7\r\n/9xtwb/EJxAnekoZZ7AE11aebnLkZGjwKKK345pi0KGbVYMDri5cScxIqgml\r\n/8upqYO9TOjwxUiqbM3Fv1Dv6gjgH5j5WwjWeQSzfA7yl2P0xvrVplg8zV21\r\ngBO88h5NiVDLApYsG0WEH9BkItb5NjGJaxp3z9xzOKqdB28ns/IngWCsC1sC\r\nq4vJzkccNajG9W6/JUksCswNW/skURp8u/bu7jfvQjRyAibsS5SfPC4k94I3\r\nKm2zVGFHg+LW51rAYOMG97e/3PK3o1X6ZNU0zCueMt4ftmoI124cHpDppH38\r\nR9oWExPyTg3IwAREodTXiZW4gAmjiQ8L6ujtwx0pN6qYA/ys0T0lSnI0zj+c\r\nZ3fP5PPdwlYv8RPxUNZ2r9QVCL4WsSnSMaW/+HWu95EVwF3DPmZvXcE4LDc3\r\n1cfai+e26Aq/yX+iLCB5NNT26xO4UbVR5Ys8yFxlf6Noddy7XSxC/53JuQmq\r\nKj/wqDobP8Kp6e5sztjIGsPGUeM8HUXF4SHhhWw3DS0B2ImxKzi15gKcko8p\r\nPdecV3I0S/P29C05mzluR/wsQpM+1UFAxfo=\r\n=yYwn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.3ab956515.0","@material/theme":"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/line-ripple_14.0.0-canary.3ab956515.0_1650898877080_0.2797250567191025","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/line-ripple","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eb86f5a596b0f36e12a8a09492e074c25919ffe8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0-canary.53b3cad2f.0.tgz","fileCount":33,"integrity":"sha512-k8f8uuDwnSqZZ98CzbYtQVtxlp1ryUup9nd2uobo3kiqQNlQfXdGkVjuCXcla0OPiKFizNn7dS6Kl/j6L09XUA==","signatures":[{"sig":"MEUCIAOnfvYWukXicT/DMUFXWMHgurdke3G/AGpoCat/dXecAiEAsHtvC1s4HPuE9hGaxfeK3p4m5FdqjGLS21uA6x6F1qU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTq5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM/A/+OqXaHWp2G1y/z3BK3R73zmxQvxDMjo5YYXOVDi6trlSLxpoC\r\nnczwXz22+zBa45mCTJ46yjYltr959UCV4fYlWXgJCgsUOTI54OkoU6xN9dUE\r\nYb5p8EqIFGj+URARPz7P8IhuVGiJk+OSuyNPnrpBn1tbz0OITtQXEl9iI5gc\r\nb6QhX0jxJ1Sd1y6lNoNYeiSJgajNUw6FciLzGPvNGRi2sGR7G1q1B7r2QOPC\r\nUtCN71Q2coHPVUAElD8eVyuSphuWC91TrAM2VJr0qWc8tEd9tbxnYjBSGlr8\r\nbvPSbndgcxE2myQu4i424iWY/DOzENxwoORhjW6fS13YBL3Oon9x6pIMGhzf\r\nEG3VXfea4g17kN1pFIksemo/jwshgj2eCpBrBGO0BCPaM3cASseZyhWnoKEu\r\nm36WOvXlKYRKS1gIt4vuR2N96/Nn2HpJZPj61CXlrEk5lYBBZwX9Bod4iALy\r\nNruC9hcCVpYhBzplx5Gs4ReF79stAwylHbS8sECLrbh/uyxezt3T5cqsKAKv\r\nAxxIbWCw2TGuLq2ohqEzclJXIiJPVckMWm1W1xkkKRuf5PJ7gcQGuTcmpReZ\r\n+r2hGR8i9AEEAtwx0t0btUV/DqtuLs5kvjVgJfUfghDcybE/9+u/4hm0Ev2L\r\nqHlVIHjXHerVGNt7oewalPtI0R9CwAF3SK4=\r\n=Yh0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/theme":"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/line-ripple_14.0.0-canary.53b3cad2f.0_1651063481796_0.44329339659702094","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/line-ripple","version":"14.0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"460e972dd99d119b97d3ee4b7a73bc1d199abfad","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-14.0.0.tgz","fileCount":32,"integrity":"sha512-Rx9eSnfp3FcsNz4O+fobNNq2PSm5tYHC3hRpY2ZK3ghTvgp3Y40/soaGEi/Vdg0F7jJXRaBSNOe6p5t9CVfy8Q==","signatures":[{"sig":"MEQCIARKHmUhxMYlY5TmXHOKnTnUdEA9O4v6WOPOPlPsfiYgAiAYgwjN24H/ri6Z5KpgFaix10KCdWTm0BNb/2GXjRGz9Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasbzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgkRAAotI/Dt2Ro1I5cgjDn5v6gVWF9VwNMD9I8Z4/4j3Eej149Gc8\r\nREc2uO9O6fFTZSm0yHq8nRohwwKhjrH5iOEJqXd0RDCbVwF3twfDK9wHqM36\r\nxL92GofCuziPHyI8M1lQn2OQFDEE9WGu4i6jr8qoAcCiGTWXZeavB9nCS4kQ\r\nOLdmqFkEzMq8Ej5JlFecgJwD2oqEP5/qeIKqDBU6BrP7HUh51r6Rfue9q6rh\r\nLnfiScVmxHoWFEtYJWhcEUG6v1Sp0ZG/+INNj4Wh1q9Y+7Dnd211aZkb8c3g\r\nt9+OIu6pmlQUIr2e/pOpwvbxJH+yMEMoEhtuPdaEHrd+DXeEOktn/wg+1EET\r\nlresKKBXrMlwuaLAUmCNxHflh27PeiC7UVFPxQaJSumwCBmOfss5sltPHSVO\r\nyjX7lR1iEOv37Sm5aEt8X/3dBT7c96Q5yP453J4rl3xiYsS95XlOisgHuwiZ\r\nboy+sCgrfU0qJpae3wyXTwozUdE7ppJwzoyvuqGG/cwel/Mbp1b2XX6w5oEL\r\nXhCuH8DMsO7gWCLfzVg1zM/u0PZB5ypE7f2zWe1VlsCcNAvQLCgRfeLTGN8p\r\nMobqL/4Dvh3xeWzl571GByOm0dBzv5AP2vXTQWTrxBKGobJpq/IK3QOPpM2Z\r\nSUGco6a5I5DEfnWe05n57py+tVm4uVmXT1s=\r\n=YZid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"^14.0.0","@material/theme":"^14.0.0","@material/animation":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/line-ripple_14.0.0_1651164915018_0.6130852954338213","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b0051bf7e94ef4c79e2c014f7a5b5714f9dd9213","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.432c815e5.0.tgz","fileCount":33,"integrity":"sha512-wnZNxFqWUJyV0OIqs9xv61Fqh+q7rXlMcCK280lcL0z83qpxN8k+34tcvEVvTT/p+XPJ6UUDERP9cxpMM+49ng==","signatures":[{"sig":"MEYCIQDKZ3UasxZvny1tGjpEFhvaVLAzb20oB1PT8Rb4G5jsFAIhAJlX+4Y8OjPmb7n+a7qocoLjRylBgQROjZf++YjP0J8Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122926,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasc2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJDw/9Fp1/j57nxSBfrb3C6UGAQJUNkvJgkIK51891gnfX49jfp2KG\r\nlB/FRrAD8Nyn3bdfTMPzX5jEiMpAu0SnmdWFAAeBhsLoQHEfz6mzYzi/RGCT\r\n35y5OBBvL0krfMUH6yjkz9aYVATxXDwVWAc1no1HpVpdlImcn4eny5MXVwTc\r\nOwrujQ1hObIBG/cEhXHQStmNYWFCaz5AzEAMaQgdqk1z8DcALjmifYIYn/jg\r\nw8qftCMHRhu3UIGd6Xm+M7S5ZuWwZZvHAe/yEMM52OH+i6Cam8uelcYBPn+v\r\nLfvusK2Ndtf/3Xoekj1zSICfyb9p/GSgf13xnuk7cMGHayRuJboFRkBuaxA8\r\nVC5AuYlIaLnrW+RgpiAuGxluL6wr2XzB/Di9qdLJ9sJG99vDIMsS3R/5dcDG\r\nigf0NdRvGLoKC6X5F53wmfVIEnbJpELpivmHvM79GDfGFdIZQyIx6fyvUAen\r\nh1Dwc13Y0m3oGPo2GJ+yTM4Hgq8ECUj26TD1A8ZStiRc0t3bJw3ukFryLcgs\r\nlea8aKcOV2ZaylhxfsEDVRuQ2EhHW4kF2E1V0GKyCrxp1rdw1E8bEiZI0DPv\r\nTNQDxRomnavPu/2zSgmtRTrAwmsxUtbNpCHEbsXgK4Sn9ML2N79CBcUk7Ms7\r\nPdPBWMrnDHR1bDEqp+ZXvvKK/mMyjBDgRN4=\r\n=aIlx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.432c815e5.0","@material/theme":"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/line-ripple_15.0.0-canary.432c815e5.0_1651164982412_0.12975387214462453","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5ec86cc640933a5cfe583fe0513aee22eec5548","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a0f01f669.0.tgz","fileCount":33,"integrity":"sha512-IhpEg/PwHtAG1QWewFwWgaYgxjgeOq4btExInej9wSISFaC+ftomsA0UAbf/dShIlcHRtx3JhgZdGbPZYRKrJw==","signatures":[{"sig":"MEYCIQD5tADdfm1YEw5gQ0ERZz7nqxK6e4EklBezPC4QALX5LAIhAKn3VzhplNE7AFufU5SRJzaXX4nTy4xZA7attZwCeFLz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYGMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2pA//eO1yWC4Zk1POjOE2xHRp62Rxx8AHNqS1VrxcmEqKGTf5KyHI\r\nQhrATNiKsDz237CxqktbtqQiC9CXGq18emTRij/FnBVgguJLCwoHaduqpbJm\r\nK/SCZ9I6wrm687mPghZjSKi/6tH/5oN8YZ6ZLhm7+0BhnEpTtmKy5TloRVlH\r\nHJNbWmbbH2P9/2+nX97i3uWEkq29zpbb8t07WsCwztKOgkYByMrmZ+KFyJIg\r\ndvKX4bXupfbQs/y11Gsr/d7M1ANFzRKSEvKEtxfDtMwqMVPDzb2tgYd8EXfd\r\nPLT6mnd0TIhUa0rbXIarkQYPavQZVklCeUk9UStmqsfXMyZUR21arukhmigh\r\nHDa9rfTiIqw7MoVLAQ/5i3wOl4SIyaWBLuMnedOCEXJG5qkT/MbGitZswMbD\r\nfVCqKcRhsH+Z3FKt6ueTAhI4mg0OK6uD35SLQ52/jEzzNVfuLY0oWhqtw+Qy\r\niTV8wARu3UydutxQiOqRB8TOKk8iwA4dF7krpzJbTpL09Z7mabkPI7MRWl9p\r\n69Sq8dR3QCRqUHNutKH+08M3NRMVqen01R8k9OroP3rTbL4FxvGw7Z5Zkc3T\r\natO+7wJ+PxAqCm4YhzC2xmTcU5ENpKBAa4zgG8APzLxH/cIuzv/oah0FmIa5\r\nKSPZDtZoFOFkjB/Hpqvy669cCeMRJmjMVqI=\r\n=XiXX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/theme":"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/line-ripple_15.0.0-canary.a0f01f669.0_1651868044183_0.8347410066242527","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bd5c8ba3529a1accb1220f4e1d4db68ca5ffb904","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.276cb39a4.0.tgz","fileCount":33,"integrity":"sha512-oArtN/IRjqhD1AuU0De4D745YvlNzGDPyTqaFTuoD8ugsQQZg39v3V5UDG+PhkQUe9BdLd2FwvMJBE/2S74dUA==","signatures":[{"sig":"MEUCIQCkvLRxg0zKO6gPPmUQz6r24S/VUnirfmklAhJo05QKXAIgJ04FSoRCRzHyUeabACtUwkRY9NNWEs3Rf+1OCWAvWoo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZOQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4EBAAjHZJ/w2LU0vkGv5TpVFUg/ha5LRD7xWw69KeieS8kbIByal0\r\nJ37c9p1arG85d9rKldEBjCrVusQGG5GjKM14FPdAWwkHpgNGwOW7q9D7DJfL\r\n8dItrv8GNmBF8luFjxr2tK4ML7a22SXeHlEpPXVuBHyPytF3owFtwi+Fa6ch\r\nhqiJ9OIJASWkGX3BXzN23SwnOFUyOVJpZeJNmpD5Wplndi5QnFctA/LpDghs\r\nlSgBpzVg3eTheedOzH11wEkm07oqLLmOXFh2GvTwFesdJN0DXeJDsI19Q9Zz\r\nRs22ujZRGXC1tFgZODdg5/iEyrLbDokB7UPO6jRYyZCfVvZIDTIzBP39rDMh\r\neM4fRWH8KXKWiaCDdCDSzN0RDAZwMS43z/QAHDyJRMpAFMW+RMhmbF3Dl7vN\r\n/nDc49ySaMi58TEd+tVIiYifusWMyYao9+Efh0py5ttEIGJTHW2Tp0x2SBt0\r\nOpVR7F8PRsbbtjsWkys+6ErAi9YUeeLyOJC4UyY09+1+lk86f344IX7m1qmT\r\ncDPcjL5pwNxeNe0XZW+75IbwrWEJYblk4nfzFfZxRsR4D6ItJDTM9GvoKFyv\r\nmZEE5U2/uQvtXDLwpUZlA9bUhDFhJdGpq2CFeDPC/5W/lwowMJqZfPJmpXU5\r\nob3OxLL/4j98ypb9CmVmrtasojdraLtBZbQ=\r\n=nq0V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/theme":"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/line-ripple_15.0.0-canary.276cb39a4.0_1651872655840_0.04467009838418834","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d83f89ce69a34b39f5899b283cb6251c492815f2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4fe98ed70.0.tgz","fileCount":33,"integrity":"sha512-qHpzSS1ZqzOm/e3ATiSu3CFZKC6tX2OCSfj7rNSduBnZdzuI12K2+7aM8ANGQPwDX+7en1zVQditL/hXHgkwXQ==","signatures":[{"sig":"MEYCIQCe3v1DGFP0MbqU8C45YIwF9sYmbfkMjj2y+yN4Y78C3AIhAJ5/cCV0MmPXHXno3roa9fvK3u8JAsanx28CK+OtFdn9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZlQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpr3w//U/4gfeoOgh7iJYPij0pOD70CEzZzKrCiB755kjIwKZjOWilS\r\nzcUmOvTKfv7TBARNa7SedRLtqzXa0bIPSM09CmJO4m4YrkH0ktuCiJ163ehA\r\nq3EPlqX0jk+eZCnZFSD0SAJ5556MSu6/I70RXRLF0CfstIWdjNvBXKlgW0HE\r\npLbTcZkD1h7li9nmAf3aXWN6muFuPFDGecauNuDpt7pNNLSLGPyngE/JqM2d\r\nwlM+k+lEzkBKnQRKl6neb1DwKCD9B2LjdUuRws9TIN0zuprzlUpSdzORE5A5\r\nYp8Kpucd+I02W5Z81OQfENMABWKuEMmFbIFBihrBXkueS9YqwKWLnL7KpmPI\r\nlg7xuyeZ2H+EOhDIY3llyudmcTaPRvvhOui5Fb9PqkmjB+K8xKUdgeGG1oL/\r\nLMQqgrsybmSlHL27AaUqHL828QZh/adZdJCZkj6/WbR+B5BsucPYJ4ApZ50U\r\nSwPR+qFfo/ygJRwa4n+/XB8hkV27Sqk5LegnbKjortU6ufwOaaJUMdIOaCY2\r\nWrFAf4V4DWGA3HMC+j9kVyDZQz7OWx98tlWVbeMxZPiMmojXKqHuyYBd9MzE\r\n53pkBMMsz6cp33SqUBvB1qDK9dkO2wkg64M86qXREUn4SggYlQvSLHSQ6rOA\r\ny0Z2BvQIVgxCFJ+dWhmCs7Kni9e05tlI3Kg=\r\n=P0jY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/theme":"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/line-ripple_15.0.0-canary.4fe98ed70.0_1651874128129_0.5338327324080074","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"84dc686337e9b5028b406fae3bb87d6e44b0173e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.58b130a3d.0.tgz","fileCount":33,"integrity":"sha512-JC7L8eI3xdPqUmWoJCbNTFB+h2o+eU3Z7fl1HkNmEWwpyF2tBLrcFJKfuzgp/Q1ihoNvHOnbnBeMxYvw8bKAyg==","signatures":[{"sig":"MEUCIBfK3W93oYsuU3HEkze08UZZqIqnmnOl5eRmIlrlDor6AiEA7sbDky+REy62mPWA1GfjK7uMwfWwQPOCvTMJ4yuNUIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCrRAApG4ad/S7DhyNsOWM9z0ASG6571vMI5v8fwDwHi7B04QVDA5d\r\nADgAS/vitIOLjG0Ty2X+WdhOQteWrEh4NxQCMqaup1V8GDriP3hYEt4qexRZ\r\nMUpHFrh8sip5bq+sG0ejoRdd/AkF+YCJu3PdUyesaw9zg1uaJIxsyiTAn3gd\r\nileqsXT+NB+CeQWWY4o8cGyQfHpCdFguauTFt4lriXi/Dn3xAl7Dv0yxoa5R\r\nMQgHIBUZ4YC5oioW/HtldSaDeh+KqUw0K3QR6m9KVKFwT8zJzXF9a78+cnS8\r\nVUQmLPEhhPWCrVs92X5C+QdFlt7FSDnMU1JgpzA7doXlwAOMceFzMKcYUvdI\r\n6iSc+stYSKqkhzDNLshWM7b5nSJOts3LrY1P7QNPEk1fHxLrBfHaYGFieBk2\r\nBlOSAiQvYGiETubvf2gfLeKFBrOBsKzzhubRmfVETTxkM8AA1pDhBRUztBTI\r\nUpKcjRg+bVMzMYuL68abwxBj9z7/k5npJPnHSsrW0ozquymOmye7O74qN/TX\r\n/Ey36VVwQXxRKbFL06nIdK5zx2oHr7+DoWO6qvLxUngl240pWghAGA7k92lJ\r\nTUW6zK5Z5WLhS8VDZCzjpC6V1rAbKiXKwTOzxppcaRof8dRZODmD4qhiVSa+\r\nNcUOzDqb196+bVmVXoKSMGQuxu2G2j56E7o=\r\n=o3R7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/theme":"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/line-ripple_15.0.0-canary.58b130a3d.0_1651874267291_0.1683174568305139","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"08468d2dcb5affb0bf6bfc0c65065fbcb38acd35","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ae278a2fe.0.tgz","fileCount":33,"integrity":"sha512-nKgCI8LwupneA4//p4vwKQ3+mBHY9V4oEXJgz0IKdVezNJPyAevHzMRilMnfrsRmDCz7cmNQ/UMx2rIhxV1YkA==","signatures":[{"sig":"MEYCIQCp6TDJmJ/pMgH9E0gAnhvEhv3yIrlTZtAl7cfqx7zYdwIhAN3cPO/sSryKlQ8bx1Ato4y4QVZ+ZMiwrOGhYIWO+kK9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTIJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL1g/7Bk04G3OF0EN7h6h66UK4HI8P/01fiL8Nh5q57pSybmFFJBPo\r\nUiPntkeH12K0QmLlD7ygJQqETQJEEGMvb4YjF5RcjvUCYjR+YWUN5pAjl2+F\r\nGbpJexCjGUh7Bs3ZzZjewhat4k1+/Dgj2Q+xI9YV0okv8gMDJcN3uFwJh+Lz\r\n3rm32I0GqsycCH9aQQKEBcyUcjjv3+UA5RKCdLZ1WiFHD1NYlbXWyAVlcoKV\r\nsXBFlyakUjYCZq2wepQRpuNaOVRze6J9zUaZ22OP8+LPZMkmjO547+HYcXd6\r\nn5wT+9APSwslwU/nkt+i1vy0wlWfFowK+9d5A4QSD/5h6m0GGS15oIq1bzs0\r\nS3oU0v7oQvGSuxwriKwOS652NDe0e1Pni/jdFmw9DvJufnZlWgWeDWV/1/LS\r\nPLemcKlqdA4fgWhSx+hNZ//IlhH+V++mrMFsJNLHtLJvTKHlBDmPnJv2NyXS\r\nuvheZsotC7NFCJH8pim3UdWaHoaGj8MMGdnUtZ9gzu7wBqlg6Qblxky3QUdj\r\nqZYDIIM8v9cCcWjsWvg3FpDfeTlOMSsxdBF+jIRTivCCcDdiZyTqx/6o+8Rs\r\nHA0PajpjQmXfKS8op2sKWlpNOjYykJGiXKjdSK9jV9HR9dFqFDxCnTAEwysH\r\nk3UOs0c2gzeT/DTFkYMsSCHe9tout1Uu0Hk=\r\n=EVC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/theme":"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/line-ripple_15.0.0-canary.ae278a2fe.0_1652109833754_0.4626577501973195","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b481efdfe60f2e10b6c3ed93232cd1e24cf8ff8b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":33,"integrity":"sha512-DsCRTtHGu1LxatWVZIiP2R/5Y41U++QWEeCgtQdpP6umHdaoKA+zvXYmNXXd2FRbMw983YZP1nJPxJN3kn4FBg==","signatures":[{"sig":"MEUCICCBNUkGW6yhet4iFywyqPHCydZcQ/2BPr88KQRT5eYZAiEA/KEH/vfimhKEAYn/f1YwkEgKADhB6rt3WcIf0OJBiIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyHxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/6RAAmODgpTNrXDc9ZLdIaJktiIek6IMjt7sjrKvq7EPaiM+iFSLP\r\nx2bXuP6YtiY1bOFxNqDjMJopKio8al1QX1JqDg8GySrQRMy/yIlDl1mmIGGB\r\nVSPla17ThW9lAGRbUSoDsg8ywpoHdXjkTBxusTLj7rYzegJi2xKLTXlDOVi+\r\n4mEGPucl4JNEJxsZiJtKr/OV2Lw/rZiP9zkLE/AnFJacuFFGM4uT3avdITXv\r\nkmYOTfSYL7fXU/4aFxS4ugj8VsaFDCva7VI+g5CPNFv671nWjWYAHUAx3p+6\r\n0H9A+q6ZgkYot7WwxDPVKTjCEw2iZZN2m7x7yzS1XmdPt+0UbnuE5ZBkHnYQ\r\nHQqMAX1yR4nna8wOSnhc3TFqUQr5E71IjGCVkIBQlERsnSAnxcZNIvq2usjd\r\n4QQEu9CnDNZu/RLofluE9LgbHwMyYo2RQIoQ6K733rk/XqdVAjmzeGpHFlmu\r\nfiC7lUev5dtAN23pxYXVn8lq/fKQTYp/o//9cyCMg7NxPyn1VFAQtUsq3t0u\r\nmtHbwc/Zb4Eh/+ARD/ETSY3nbfFd1O5QLAGbeLanwwCGr64HEEkUKxW3E2jF\r\ns5yo0R3elkt+Q4BxVAN+6BShUyxayBk5M/79jqjnDy4K54TydKSuGRIci2Cw\r\n17mJGMqxcJNqbgqFJFNpKHycEWUcNKBBzHA=\r\n=ifx6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/theme":"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/line-ripple_15.0.0-canary.bebf5bfdf.0_1652236785315_0.40395350996144996","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ab8547691fcdfef4a3f6dc44e78e164609a30aef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e6072cd6a.0.tgz","fileCount":33,"integrity":"sha512-QJqtxwxknmc6JB5mPQl6tiZ+m4Qi+hsTu7JNDV7qlwMpKOAdQHCzUP0erBNoPxQs5gEcGdfov1IvlxLx5MISLA==","signatures":[{"sig":"MEYCIQCd4nq/MnhlYskuZjWGsdlDIfJ4ZOKs5XY0HzBiV61tjQIhAIvpAQwQP1hW7G6c2bkZN/Dr3kFAMsuVswsmt0HuA+ve","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBnxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoamg/8CGXB6t36GL2+M3BlzsQsobVWLxZm5jsYFItaFtJep92RdvJ9\r\nrjW543nYzqIJmGYdR0IhWkGFbQ/HbeuoCYugeceXBBVnnwKIJ3EoMxLhdzpC\r\nLqVhLuB9NzSLiMmtMG0mBqRA7c6xOEF7axh9htDKxdkYcfyBjpW4tBCOMYkV\r\nblD3hvJvyPn4cTrN++vb5faksKV5j2Vddm/qXQaf0lov6hALLEuk38kQoQhK\r\n/nJH6j4kVm4b7J99fk0ZA4+juShnCT/ZMYoVk7bzFiN+9N/ag7y6FY03RXiE\r\n5XZN97LPk24mQ09ESM1AP3PbmeqD/7bC1vT15vGULDb78bo0OrZkds1bSbQY\r\nUqu1ZvEmA6KHpNo2Ga5CUcGDOKj4P5UP6c3HhDDR0D8BXSo8gIyv52vibRP1\r\nPFSiJGvEnl8Bj3oZ5HQk/J20k6+9DTYBF2pC7592AwKceHcfsJl0E/8xW3cT\r\nPh0pzFVrWtOJTF4pyhD77rBua5bXwcZu6JyRkdRx/W6nhxMkNoYewu0dblv/\r\n9imqXMC1Mt2rypSx+hMkqLQfaU/Vj/nfMNcbPnv4Zd/05ZynJuBkAQLQ6VjJ\r\n1S+hr/tXoFk23n4F4qe9vnv7+0WEfu1DuqbC0/sidhM3o+1XZ9Gjql7R4jlu\r\nxg87xdwEHFU1a/njJtSbwWaaQMw2ryQ1CRY=\r\n=7bae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/theme":"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/line-ripple_15.0.0-canary.e6072cd6a.0_1652300273442_0.7483847772411538","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2506170c6d14ff4439031ca3d2bd79393f4848d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5b40eb988.0.tgz","fileCount":33,"integrity":"sha512-5ss4BUX7X1+484rCoZEKYuJHnU7MLYPbBOj5G2manAsLOIIdQGVTln0gkpx0KRpckKIiEXIyx2GqxsOscoW6vQ==","signatures":[{"sig":"MEQCIDnMMCjmkdOJzDkVCdWXMGZPkfJOmHFKZ4OunxysFZIsAiApYIKe8NTiM8Pfu/Blup17vZdLpCelHCRKQ0wXMqx8CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHRZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzKQ/+PNIWJWOVLccbxUEa3B/F4cM50NVZSLOyYN7n+XBqk3AIXfob\r\nFEY8F91um08ku9PEh65C2BRuIPRHaSImWXWJUnUYUqR+J+fsjOl4YdRzVacz\r\nrvk6aTYUY5Cn0bwKOZi3bOTnLNRIjEfnlZKQh0TY9LaaLQJH+bJSzdCIlW6k\r\nTONqY8BOYsSTNm7T80WOucHZxqZ47NrFcvuLBmvOP/uYCF+wqhJmNNnTA3JJ\r\nL4sCs1cqleXqfn9mG9nnlyRsaeg+qppcwTe0qpN6cOBvF5RJo8Dw9HkhpgTk\r\n1ykp1pP5u54gWWEa5qkm335t8VPxTQHXojV/9H0R87xUEJXdEG0eBpUvIOWp\r\nC+ryiWPwii8gLcmj0nVVO4o0s1G0EJ8LBTSHcCHf6Ot7sB3Y67gvq1Bgb79u\r\nUhj1ECt3KV6k4qT6qOzq1GhAh6PqKHW4G+h3ofWb3LAhFiVjeJzmQ8RzcbQD\r\nOqhwn2quAUwX8EYagXwYDy5Gh8LvTIiKDvjtWURGm1KADSfT+nG9He56YvBo\r\nSAIxwJd8I1YDM1h/56hEa0UW2akFVuwdg5PLbSQm7CVO8Jh4QD1ttmRRhEXT\r\nbXzT8VrKpz6f4MT8f/KH4u20KorjUcUrrP4+OyndSfy1roXtbA/hXogK8swG\r\npxcThUGV5xOsVu7qGTrdeM1laOD8lpbGl+E=\r\n=EcIj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/theme":"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/line-ripple_15.0.0-canary.5b40eb988.0_1652323417097_0.3695082274476478","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5a29d4b7dd6db11e7299986f56d1162e044ab853","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6a61d62f6.0.tgz","fileCount":33,"integrity":"sha512-sXMLm6yIiL0TdvbvxgQIcVyVnrfD2oqJo9UFlpEolR+cbQZ7tTJq6YduYC7BXwK2202VbHC94Jf8ztXTQYC88w==","signatures":[{"sig":"MEUCIE5KhXLhjTwlAASeddfuNUKnI1bLQ3xZDZIhctGe9KqiAiEA65c1vZC9wGO8RXGBFHHIJK2w1XU+4rS223CkFHMczHw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW1kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj5w//Q8my3HNVT8+gcYiCFmnV9gklDbPslcuejYNOzBuyjsqie/np\r\neYUGN6wWc/KSNk3EKre5wR2k1HXpijDoTd3/aHQMAX1ICyMMLFtB0qQGFiph\r\nIT0NAOQATRYTu/M82EnBVLwQMPoq5WdxwH5cwNtFRoySlAi3O1r6fsjKF/13\r\nbhDHmEdBTF946kThEcN9rw3FC//6jCF63Ha5BBNCi5PLpOg3q94R+AV1WWwN\r\nyemb2NJVHDM2FpW/YhtFDAn/4D+7DSgnbt/BOKmBy143Vn6nEpnM1pECSKtQ\r\nrXYVWMZG7a0sAfiHUs9CZxWB0jO7g3tC4gS109TRbXoathbin5mIxde9qBht\r\nZMY0CQwjFavlQyXYJMXOxXv1TVI4EBOln6H16Ym/sJ5IAQothahQMd28Z4Or\r\n/jmVzNNCRSlKASSXBH+5ro6lHS4rSqjS+wMmx5FmQRYwgndL0VfVRNpVHLhc\r\nM/L5z2Re92OrRqBngI0lI1K7P/YmFkmoLMbTSPHHWT4jjWHN1Cl63l4DNeC+\r\nx6GBROGcB3+No+WkeJsT5Gagjk2LtJlFgseONFWBroASM0i2hG0ohU4RSXQc\r\nL+uGj5u3iZ057JLzAfZQ/YA8lOdz9wTT66Z+9tY/ul7os9Nw0jeHq5KfKe6x\r\nt2ee6LpvEJcpFk/ErsvH7US3W8Kt38s3/Xs=\r\n=cDVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/theme":"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/line-ripple_15.0.0-canary.6a61d62f6.0_1652387172675_0.2076310636347296","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/line-ripple","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a7bb7d43c05f8068ef62bc675e74feb20077e1c7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.05930a453.0.tgz","fileCount":33,"integrity":"sha512-Bm6a4rkHOARmjTAat3JtkjMQfyH0C75NNiAA5F105V0d66rgB3rSJ9tatwaDDPyjXEKtXR2bTlVsCj7mfCUEYw==","signatures":[{"sig":"MEQCIDoyhU5r2ATrdg8022zmnBkbx47Wqk70h1rqG690r1slAiBoVCXekxE4pGYPE5gRWYM2Bs8yLVrOiLD2YzmauFKwAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqedACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDew/+ImzOSj75aHceDFMN4EN9svCmFUTkfRVhoT7p36LuNiiX/h39\r\nExYsmkD5goOA6ODoZHBGoeYvmG7ILzQrBuY9qPXQdUeoATrwkY2J2XeebpjB\r\nWoLE5/5tuiZ1ZquPG6AbAoHEfe8CE43isAt4lw3/FnHUEKFPeo+/a3ftnw98\r\n/ntlgfkAj40f3Mgu9RDXra9WOiT7dqsAOvwiNsIpkSeFvT0elVJgsvxA9Ibk\r\n3g417rH2scvK6OsZKt7JGmlXnaoh71cBzmKODEbOo9aoIK7a32395pz9DrXS\r\n/AJptrH3Xfqwtss9x8ILG39e8yv5aHprun3buOWrkGFtfY0NLvJkenSqyamC\r\n85jcpR2ZU3u3J+jQ2J9Uu98ooZheGrlWHMz8xcTGiJNuoFZiZqaNTTkrH/3H\r\naBq+fi6fxfuQTUqjthTCKSTU138wMeL3IjKo2N7ImMeUvbJ1FLfQwbEhB0fs\r\nkE6pRGZAixHJSBIw7pvTSfJS+ZwOXvgU/zNePZqeOyacwztMAzkz7sFl12WM\r\nUzPIMvlGyMY2WVOAuczNs1h9YsqPJ6pGV3KtaUpIZ4vS5TWbe/pY91Mh/ITI\r\nYyFsQ4jQh66pa2KqtaTLjUWnI7lrlsmfkQO2FFqUcGIZbnttzikdUcs+Bl6T\r\njbWa4xoMomeexWWmOLDIV2Bf+XihfqqCRpI=\r\n=7dwR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.05930a453.0","@material/theme":"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/line-ripple_15.0.0-canary.05930a453.0_1652467613787_0.450857164180797","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f7f54d19257a0e015dd55024b22bcd535d7df7c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":33,"integrity":"sha512-276ybPtuFuTzSGDy/vywC7YlTjGFwaOrfPA+0m0efpaYrqaE/tbDYPuLfQIpl2L/xjaFlHhO+F3vPiu+dbyvhQ==","signatures":[{"sig":"MEQCICztaSaJBTxWyuYG7PHEjCAa6BYuufrc1iEf7y3N+U18AiBIhxHwvhhBAZrxTmBSReeuawC+agNUxQ/jmY6UDm9ktA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWx8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplhQ//cLDlvk3gw12rj0vIAFGTW6PCUh23E5JL2QNarBj15M652QOa\r\ndfJI6WIqgoqt+X3WsOhdVc7dw94l/997R9Ph7cfWWBWaFbMZ0P05u+AjhUJN\r\nt5pFczrC7WsfW8KgTmLCo5B2LbfAWQOQjJo42Wi9lTSi/NuX+F/QBbzd8P/3\r\nHIyKugjlauwJM6jg73wnfHqeiYuVKGrhGTlxeyDmc0iiTx4q0k8097k46oB8\r\n+IdTj1bqgGDpNgPJtHE7sS/aDL2nRQo+jXVbODHZHCzLdcPXN3VT8m0OBSHQ\r\nd9nu7PR3rP+Rw5pt1vSB2j3kYqGQrs546o1LXBVZpLESh5LPmnGoPDgzWh4t\r\nZF5hsWDINCnnYn5anTe+HxKCT4a6wJQ4ZpfYGBpN3tu9MGFVNrT91UrUb+yC\r\nePCbb5yhMjvdFuuXQHHL9PYtHaiWMY2zRz8XB8gF6lhftDI92osPOfnjiKMS\r\nQmg1WamsxFM1YcufQrd/yD56Itiw5Xxy0N64nWOJUuxQEw0lKympX48bSuBt\r\n2Z8Jj7xKoZI0KRE6X0PmCgWezFUQ/xGMi2HxaD1IiV61IezF0czMYvs+jfa7\r\ndrX7OxzJGvlmrGuDEtpx0TELy/Mr3oA6IxpBEt0XY3wqRITItr4C6mrx71us\r\nyM3cSa5NrnBnzqAYtyV9tH8k2UvrlmMst0I=\r\n=JFqN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/theme":"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/line-ripple_15.0.0-canary.c0a11ef0d.0_1652911228559_0.365581359324344","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"59cf9ad1f3d11c37bbe7d4945647485839c6c583","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2f9b268c0.0.tgz","fileCount":33,"integrity":"sha512-bTqNAWzJqEN6PTEUxVdq0LpI7firfELdToKzCMbrFLKUw34YoEhag2gz00X7wDJDO5nBW2vbzdkeB76a12C9mg==","signatures":[{"sig":"MEQCIFz+4Gi+2L8fwjQnsZKSjlsb+6nXf1YJYQ//DvltqjY0AiAHLtrMHfoLOAf2dv2ln3OdqsNNOEXjKaDOpcxzFu6CRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+y1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHow/8Ch+PwWOJkO+5yyJ+kg13HBWnVCKu6OYXAHS/7s13+1pTQ+Mm\r\njOOA0cIG8elbqcrluWiuMD5Xka+9LdI6hBspAf0y8WT7G0CSiPUrwJlTZwAC\r\nIL3Rh2bKH0UHyMW2Ltufq/Hglx2hT+tzM6tvsxu5evxDOnh11VeOGcGMeasz\r\n7crRdjpKAUOF1QHNKkbUpOZF+S7WasKv7TDWruUY5iC3dpI8Ol7N63HsNbkd\r\njmhMBexrFqa03BDDHSkFfOiDvsVC92Wr29R4J3xiBCrPwAhr9MVHccGMKvWl\r\nxKKtTL9YTeeSOkvRHluhqvFomJpgCnQv6H+F2M45dspwvhiuwxMHrug1OJMO\r\nyECyQCrtrLkmd3bucGi9haZvmrybsbKSdaZ00/tQ9Pllmo6gKz8yqIUreMbQ\r\nZLckIb2AJ8YzTKiE4mYUZ31SPIEtoe1hcGGV6E0G3E6caY56/FfaRDskrYoM\r\nqaZ70PydVqGn3Lb+jJBYeNiGxyNjoOuMCAulOor73dny725cj7ccUExQCMDP\r\np+ZVZhKjPXa40X/Q390cnK0WS9WTyXNAX0pM7F1iGQjer9HhcVw66lYCGgIt\r\n0zzUbd/U8yvCKO2k9RG2PXbzcWprGjOxOsbywAkfzBe4B44GVa3zbwWmQTXY\r\ng/fpgFBWWLrGrM5oXhDkF0iXtWHPunPdgVw=\r\n=qdzc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/theme":"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/line-ripple_15.0.0-canary.2f9b268c0.0_1653075125353_0.6488518132227457","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"724216982cb2bbbf0647f53b4d681960ba96ebef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7741345b8.0.tgz","fileCount":33,"integrity":"sha512-O3qwYh/JXopj4wWNfpDu00fvID91TUhlIDCa9dO4+MIZ5jQZJWvF8ieLHt4hq4IhShIwgg1bx4WWqvT2/TGC/w==","signatures":[{"sig":"MEUCIQDrbaU2aicB6QPi2SXm5VqK1SOJAFu56Ad9A3wkgpCtZwIgI/juA40sErdwjCA/uKNUehO0/duxG+c43h6X77IH7s8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/PDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAKA//Y64ct2R4Dec15VwEa2beOeDw3Je9EntTBEJ2/7uoqBjzhnQd\r\nV5sNQJ1hSz8IgfwYZA5+jXJ8wbBp4sopo3G/9zNAXOeyMvGnd+ySsc+2zpCb\r\ntRtqEBef9L8G5ytqKDHiHilUAiGBmpxPhy2h7HwEFjmw+o2++kypST3cv2KW\r\nk1R5QhOXrq4WA+83vr4WoGx+lMZRn0VO6rmitfgbuEcuHAJq4LHhAhsqDg73\r\n8EwpLxZ7MlxXcE+eMFD8Ft88QdKyrUQHplg6yKr/eXAX8M8qCd1CWlzF/hm9\r\nrWb6KQGIekXU6fNS5txthQwCsNvToW0N3sbmCwtNCRzvo9mRzus/3A7hNaT9\r\nuax0NmLtSyDbUBq1hfavhR9YhFQK7qpmov4SVluvyTUbLnQxb2gipSH24ZW7\r\nEgFN6+CfZck+brhxSC/ZNENmRSg2GgeW5OpCPYPFzUFLvBujkLGndXTz+FJd\r\ns+GC3h7wfqnXf/evK+2Sk9fXKweg5Lay/Q9VPMG8csIhfpREtwlRS+dgQ935\r\niwtEkjfiXHqNxf0PdJCcCUGvGsrEvbKGOs4+nXSuExm+yuYe4kHjMQVpTH1A\r\ns5dN1O0pj1Vhb2cuO3Bf/rrje/pDxZsTldWdR0nWv+5tygnwFpZdxzv1JvcT\r\n2Z1+6907gQw38lWoWGcoNadfgSF3Dg2ygi0=\r\n=t1C1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7741345b8.0","@material/theme":"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/line-ripple_15.0.0-canary.7741345b8.0_1653076931408_0.025949147581750376","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c10545caf3512171f89d416557f31c2d7a8e596e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f807e793f.0.tgz","fileCount":33,"integrity":"sha512-a6WJDrahIGmvwQJR7NnxXHy+fIUD9PP+aQuIONlrppOW4MdeOoQnOBNgmBPDOg88e6j78QezTpOheNoS/o627g==","signatures":[{"sig":"MEUCIFEtng5jJfv4r+MpI+0aiNgZlWsIH593BkkhHNgIXRllAiEAs+0m3XCHMHvvBS1Stff+tAceEJGajigKHrdzKZPLUT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBRUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNUA/+JIlFIIx46ha8RWVM6eUyCQbDxcjWn5jEo97TdsomkxYtri6C\r\nX0VgD66Pa6bsRVE1ljjpgaaGsJ/7Ptipn9S/d/mBJ6m1C0lagW1BghCCYUyy\r\nLdCUcAQ1zUnZ/DldvYvyH7eqExsHwiHA4RcGWyNvsb4rRr2qNdI+xDFZEjtv\r\nR7ISdcEyiLLRyT2SS0jPUAc15z71Y989DulXeTcdB9+5fR2wcZKeEV54JaDh\r\nNUkC4tpMZz6lvfc58vbtA7Epa9Y2B46KOEjCa76ko+AFaYy3dHlKW5bAlwoM\r\nnYdTxYALXCN579DJzGv4jrNXtebs5AOj5dwFd1ju9sV4DumqSdnsa7Ty7YAy\r\ng2O50iYR1BTQcsOh61pSxF1hE+g7o4Dp+np/PUurm1tpK072OQ5y3QyD3Wmm\r\nFw06ryNyOXEwUmQ1DX+MEXs7RhYKumObK9w8nwIe1BoqppcZ/nBa316PPucf\r\nhyQfp7gHunQVo4h47fdJqMiAUpTilZMxM2B+HFUEswjeFQpLIqjRx9WJayQT\r\nstdroothE2Y/i4YIRTeKIhcE/XHQxwVSRmcyqKsT+TNY7opExrUHP41ay9E0\r\n+eCFYhcDNF3QX4Tjpelc4uvGQEk99t8txHPkINIkca5RlBJa1eVQvyNC0AwJ\r\np73dLbOQokd/gE9/1+1KDNOkJ5+7yOoCi0Y=\r\n=ox9U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f807e793f.0","@material/theme":"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/line-ripple_15.0.0-canary.f807e793f.0_1653085267773_0.31218105641961347","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dcfd9780763ac9d263436cfb3e74a70e5daaf5cc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":33,"integrity":"sha512-3DjCZupkBbmP8rdtNHLHE3PpVc4FkuLqQkHhEbYfi8KNwM9xR0p/YCTU0F0wew71oRV0v9t2+MgaaKW4PKdf5w==","signatures":[{"sig":"MEUCICV1dfjGwTlwWO5Kgp4d6To3NApNUFIMDyCAZhdpDiJCAiEA8GfytgPy/5L6lwCtiYuzLodOjQAbAlik92uPKyLb/SI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6C9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruZA//Ts2awjKAG/Ohcv0B3DEBx4Gy6BUU78hnczvK7op7IOO46MAE\r\nRR1J4czzQVPtCUitbgRInuDsrfv7i/cjzFEeVqGNd3oZ2EXtO9CaZzGVRWp6\r\nMBSlSVOfomUhnonX8Z/tqYsWjUNX/zbM5LF6/6EguXv0Tvcq+Zo4ZqQQ0yQ2\r\nVAG1Kwkr1pIFTYGsby/0TN9+gqFpazFaXCjwsgwViDhrN3/vGDfDvrRdkaIg\r\nNiy9UwAwA0j3SajVawjXcYrQZjQRk2ehBSMrL3/G/qLRkZUWotV53S+Z0JLx\r\n8ALM78NYMvcA1ene8buMfu/N6DK7MgBPpVvCVxJI8t6BRp/2sxXstFO0oJYp\r\nO9g7OgNLgylPwX6yCb3W4zVVmIGgPh4b39XR+h/OyWWzTgbhcE7WzehNtoIZ\r\nsL70ka1AYVi2rquJVV0B5xXS+TBNX4pMiyhnCi514CnwVrfpMGrXguaLmmq1\r\n3iEthhWHkWfs32ZrPhoYXCzKyGD5b1ptsx/nGE1ESkXpVulBglfd0P/LPMlV\r\nqOFjQYVOZFtdP3zRbmG/tQHQ3A4c5nofe5DlzCUYgqDt6N8jTAkaxw/sI06z\r\nofvM7YaJq3qGVbPeazxBomOzHni1aU0y85KslF3JcyZPhbJZ3ZuiK5U5Hp7o\r\nFGeNJcV60JoskDhzm2jGPFhdcRJNw3T9zQA=\r\n=dqlQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/theme":"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/line-ripple_15.0.0-canary.9f53d4a8a.0_1653317821021_0.3926244288414573","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/line-ripple","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"43d69dea685374b3f2491b3fe84a7c2f07e30fb5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.77cf00e37.0.tgz","fileCount":33,"integrity":"sha512-gX8PAfixK3qXzAunO/tR6FJbbwjfTVrPyEo7M5rabzrmX/vrNyZh+RRV4xTIxpFhqFLiiQYn05inWTE8ZgmvNA==","signatures":[{"sig":"MEUCIQDBQY9xAEe29a25CGCLax6/6VhAwWAbOhCZF8KZ6mOrbAIgWEfiRuMQ+fmHoPjRRZoEoDTid9Qs0niktQB3t/1avXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillK2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2+xAAkNu2zpjPddVAxLrczhORxvNIQLUG+NFqXzzZei7ABzm9KVZf\r\nawDKY1ua7Mq3YRAhckF0ANeMLAcGypNDx045+9UmtOOylzbFwim54BGRsHZw\r\nK5ox1slnkc15R7RD6dnljyirtH/I3kXcn7pJuvAgQNy7GT3zEg0XCi1HVr8e\r\n2KSsW2fJc/5Z5FdnETmT6nrww1QzZglmh5O6oGHgZoAobeAoWRz1cN0DNTdj\r\nQdHYrz3PsRvIs9bKTyInyKLJNclNXianCPtpeOvD0ZPcTW85vyT7zeq/xy8i\r\nD+LqQ5QYwZfNPQgIDayDbGovYyD+gJSr//vI3bK2EXxSHkpFxZQ+wVkxTTCZ\r\nq1icxKvCDALfXST9APe9cvxhP6hBkqmI2fg4hPyP1pWi5KBMKT2ywCzYvsoK\r\nTCHy5G4pmVKURTMT/QDeuID7eu+KojuPFVAMQNPNelpmndhEaBcuqhvoXSRs\r\nTCDJKUH3Z4fDyrRww08+xe/Prs7/VSAj89dnYX4ybySJbi3536k/ZeNKUZ2D\r\nb3aZJ+LYoZjVv/yt2hu85EVUub8HfV5nWvD3doqoxOGdV+IJd1a5YLPY4cBv\r\n7Np3gyfy3vmkFuikPqNKbkqD9OXnrQxVxLtS8+erfK3t5fWl9RSWiJTaierw\r\nGIn9WdpWTgvR7AHUHy/PoUHHpgyuHdm5qwE=\r\n=ho+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/theme":"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/line-ripple_15.0.0-canary.77cf00e37.0_1654018742706_0.5587093151011824","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e61511241e69805f8f2631e901027c3f47206fb7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3c7b844c2.0.tgz","fileCount":33,"integrity":"sha512-zQNWFwNSCGZzoB3Xdt17rrlZfEE6PvQeDTVKRIxWdceavmoiz0uFyS8cnYjT9DwD/OTxaXuwE5GNjs4n81f5jQ==","signatures":[{"sig":"MEUCIAYNENoBqiernJlTYf0Gxjsx11NacNrQEUZ1VcarA1XnAiEAuO2x3l+nsho5KpSP5ALdWiI6J66nvzn/p6OUe/9fAeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin88jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGUA//dmWucqhSEjB9BrchU80PlXDCB6q4VR9tBux8ptKVZTchX31Z\r\nmqPZ9N/Ad8q39WH8ngsmg6N9SN+balGXKAboVrLNtCZiXdsHYrLydvUT0kvZ\r\nujKVSw0X3o8q+pm8W833ZlgkrCNkND7tJTfT4Su5Lu7qpNZZgSro45lLrZU1\r\n7QCHq+PaSknOU4GXdMizVERG0qti9aYhn5h67fKoKU/h2smhTL6ZUNtQYbxu\r\nPFtO4ye/1sOP/MEADQYv2n5R24/6dqK6MzV6Z3urHtb1HkdYG0IRi1O54nhD\r\nbsuDxO/GpUkIfD1wJhI13hrHaVOJCwB81LPx71YrZfv5boe3Hcp+zjQ9SiTL\r\n/1T0+ALYCBeGqEMa+hZnfviQQe1Ll4cvZBGrBwBD2t2P06x2tFFp6UwLCJ4u\r\nqO+SEFcN/YJbM0RIP8KrQJuSfqsD2rfz4nOHwjqTTMt+TdaJRGO6OlLCYEW6\r\nbYpWny5mPO7OLkmdxHv5WIZtnsWH1CcS+E5ExOyaAtCuKmtJgktTwMexjDkq\r\nViqZpJ5TyN59SHS/gnkBsJ3lFpqwuycPXqRP4DSjfwJItb1Qg2q986RHqyiR\r\ncr9GB5RttYwFWzaJYPpYI62PXQ4A+Nscwh+wy1q3lFVOlw+ozWfxsPAr4dbW\r\nRFgOJs/WFyBuSH7rJWIILjdgpIZMtyvJxls=\r\n=UvUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/theme":"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/line-ripple_15.0.0-canary.3c7b844c2.0_1654640419440_0.7634778277047685","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/line-ripple","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff7c81511508a58263d1dbf5a254f342c5696c6c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.df47894db.0.tgz","fileCount":33,"integrity":"sha512-k8jYZIN8VF8s+jRjr5Ln4e354C4RrOIl3qilILs42u4CVfX2BYkJYmkbz18e9krOjDUYXqvxIVdnSlxT/qivQQ==","signatures":[{"sig":"MEYCIQCnzkegH7efBN21YF510QwTw65Ow8E2GR3GiX3WzaZNdAIhALRX6ve760S6JF82LPqrvME4td+wCv7eic6f4QZraojz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip27wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTGhAAl1vznqIb+zruCwXhjp1aBWzdlP1/a+f4C9wULooSiQp8Kcb5\r\n6ph+0oEB/1vlnW61RfdMOR3LMXqjM4333gVSkHJQ3eWIJ7JY+JnBdLfGkso7\r\nSWh9SepthdWQ2/TIUuNKbe4fg5wErtpYTmPYS3jOVi9k7vktwXqRz+IZUbsu\r\nex9ME42MCKbQ8Pfk7vJYAi8NZBGkoX6Hpm0jfDkYfb4kl9wPw4xvo9oA8nkR\r\nHKnmWQ71d7uCic2Yz4q6+qMz2CSKAF1+0QYPcSv0jdf/RcFhmxIgMNjEYBuQ\r\noiOW9Jv/ubRGKL6bxChwbZeN/4er9aSX4ID8X2ZIm6y1Sm2Mrp6zamJjX/+x\r\nRxTqYyedo0rXNWahvH2tBW7SajEygcHFeYIOIIqi8ln9WmIZHZ8yxNX2oRWo\r\nLAfnkxyqLIYo3Jbdx65g8xJsD/W4EqvfR3IxyfiY/4Z9NgjxL5FZG3QQzO6L\r\nHqwVzsciv/TPkKy9ocI/NPjutE3CtJ89w/ZLGmM9lP10aHo+ZiDBD8JFPDwt\r\nQc5XLIHDYO4NfZKrZntDpPJFviJqM1Y4LlzjLBaySFe7qvFv1qkAC3uIdKXk\r\nQPrSHT5e0esLS7SWl/nb/2H1PYXyOruSTqd2fxSDjVTH7GG25/mHQpr/hpkd\r\n5GKcLA2CYTeUpC/FvszvOOHGzf1ZYkWC6x4=\r\n=K6zT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.df47894db.0","@material/theme":"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/line-ripple_15.0.0-canary.df47894db.0_1655140080488_0.5080980797942858","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6e2fe434e2919b595a4631a139e341a426ddfbc0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b18a873dc.0.tgz","fileCount":33,"integrity":"sha512-goLcWDQXfABWYBqMiVFjLpj/DKGXqBRT4+HkLvVfeRcB7JRI71lo51phHNWRAnDCu/wi83V844L3EmXfiiqn6g==","signatures":[{"sig":"MEYCIQCkAgm9nGgrI33jko0XEzGUkvY11uUcPmpceHDvkhClqgIhAM0qvOp1T5GB/yfz0pqRAXFRLvLAZxurldDlt+VI0Od4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCq9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMdg/9FxTtgey56bNPW7FpIKKsrNJCjVV7vcd79/C79kWF9hK3Brhp\r\nfkP/Z0TcUThIsAopQ+piBEvjkp5F6SyBBP8TFdRYaBESsFvYeWAQsd4Umckr\r\n8Iv2RCl/WFjKvl3YCgF2tRyEjtGxJWEX7EYeIPllhcF3XoGetWgnzF6kw/zJ\r\nd6CZ35cXwSp2BsJGhONm5/Tc+M2YSiV+MKp3zboMm9oXagm3xUFinD8jn2eB\r\nAr8f86/K4g6isvA6n5BZ6P56Nggk+4mmPtXIbRUNN2Ko4rDUlRT8bks0Pyyi\r\nEiR39HgJ4UaUl7pvpnQxjK15fUjXsW0IpMELnYPHL7+p4So+BCyzFbPAadCw\r\niQ7VbPn2ST0Kwoz82D+lZwbbj0j+jbdWDD79UXOnCb/L8YU+pHOHiQ2+ShVa\r\nAOE9FCpxuJmaf8VNRw1Zl2XOl1/uiubls3shvg3GoIostgYrK+T3ZnZpzNbJ\r\nlIOHKADMl+kk1Ms4brhcAKWUTc2+YS+X63gbSvYCj/knC8ApUXdSZo0AADBC\r\n0CHIFG3sqC+BFOg3DiBs3gfctV96P4mjdM73amydj4O9aCiYu8kKt7WFN76A\r\nNqO6Uf/mRi1eXvatf0M9BZAqeXyvVm9VUs/6aS7qJFGTGoAsK8r8P2PE0LPg\r\nwWzf5ejoQb7GQyI2LM6c5eZU4+O0gJnHd9o=\r\n=1/x9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/theme":"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/line-ripple_15.0.0-canary.b18a873dc.0_1655188157271_0.9933960996201678","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da83e37208e5f590307091d790b82c9ca3ff2457","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ba9c29637.0.tgz","fileCount":33,"integrity":"sha512-1jG0UvHeB7CPr59et51o+ZyMhtVXfs4S6WZqNtFAQBEZ9QsDnJTwHpoqyVrY9qC3cGxkLq7lqO0mFY1oExwq6g==","signatures":[{"sig":"MEQCIGhiDNh0dNGxHWMzlKb+91oTeQPBR0Cn4nOE30smdc0OAiANEbMcyWcmG8Y7moCDK436F4UkFOsjOdrip2ST+bjC+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNn4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUDA//bLs7f/q4jjhVZW498rrAmZ7oxnci733RXU6T9Cv/bE5++3eZ\r\nfZWcVgUa4nEZ8jGgvAdpnF4zrOYhC3k/z88skNEIUmki9ewqmgY3Kt11eF9o\r\nXioH3rewMMfvHxJTCUDRSykGfL6sPNEf93Iqo2PLb/eLm1BRDsLo5Wq3GKXr\r\nDAllJ0XSefnWBnnbd0TR5r7apD3/7wGchPAUi43w4FsSxshYc2SOXsYIT+d4\r\nYfgWioLj6G22sqhsJYDK8QSVAHei2YR14EaYsv5jJdi8cHSEkS2OXwe4Pbwj\r\nrtlDc6H5e95Q0ROrLv4b/LFwnv0l4zmFp98UyEm3tcdgjLkBfP6eQfG7mSa+\r\npKTp0NuYM3lrzLUqegkAwalv+SS5xXWLP5bFh7sLwN1wgXwNxe1Dn8JGVAs9\r\n2uhc0GICaUACY/KSUJKCXDrH8GjN9Gw9S15y1i/GlYNC/cvHhbiMZRaC4Qf1\r\nkYRlDtiLW4SqySaBVaPMzWyDYTjnv53j28hXDkG0Cqepr/9pKhWJzgjpOseA\r\nAt3+Ma7VlxQcC1J3kAZEswnArNySjsBCyP5xNVvnaYNqe1V7mwRxVJlxAWIM\r\nHpZ7vEEaaLL6jU3ymi8vmVyawYuJdzVxaJtfeB8kpq9EWPiLBe81jEVMl/ge\r\nzW8S3rccziqL8rxTx67wgvjxDC56h88b5qY=\r\n=Gr8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/theme":"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/line-ripple_15.0.0-canary.ba9c29637.0_1655233016590_0.36789788130432877","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ebeaa41549d17a1874f5ab42534314b1fe053512","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9bfd12f01.0.tgz","fileCount":33,"integrity":"sha512-DN5lf8exnI++RCFw1LyWRAMiSVw+2um/5rtc2snzckO1eMmNdd50JEuU8ZKB0i2bvhfRvd3kKt2hSBdxepzp+g==","signatures":[{"sig":"MEYCIQDkQKtVmc8WAUGgwXF4R+9bJXNCxgWDAZV2UzVkTTNBEAIhAK+xy6uePOXoQ9f/TGKngORzwqhjGurmsFUWmI6Re8kI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2vYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfEg/6ApX3FVWxIvYDaaIfKfS6vyx3ABs07jA6Kb+HNxdvAXQkDbs6\r\nfX4R3rm7r+d520ws/I7K8rUmYKA0B7vZBLG2ypzaz1yjNS2wCKHfPWRTq7Sz\r\niyrScGRyzqcF4ictXCunhwSXBUciWbr9vPE64Z+SEDncOzNVCvZGHb+ZFPkB\r\ntaZ+/OVyKiq6a3Nryh9W1IMMbJNJAzdMxiLBWIVBLcDIQ02J0viknvQAt0I8\r\nnKGW6f2cc5+4zJ3sw0xsnLEGxcN8ZozWPOhxmyMmEX9OK+QaFpV+sviBpgW5\r\ngxO6kC7v4WXdVNeaafWkJj1OfzPsBbMEnE44ugwJDfhH0UPGPNnmJSt6LmDn\r\nNXHGGuJ0IQDWogK4ZDACTPOSuvJe9YMuFfnkSAflliHxABh1/8HLAWLxe2+q\r\nog20HGRT21Vo2AHAIT0v0i3zM7shihNdEKreNxzNBtwc8cX06y3E6vEvLZ4k\r\nPaNQTq9T+hS+Gu175eDNN8b38c/zi1Mqin6P8A1lJITIiBYNw+q6X6EbXCnP\r\nEjYVcFJz7qx97z4YDeMrUArZthREOpMHi0PhDhCtMnGcZSIv0hOLt4KlnN5r\r\nXxfJMxYVtbWQaQqdmKVaSXE0K3/YX3b/L6GPUDJ/YWog6R1IFcDeSTzdZ0OT\r\nXw1E/Rv0z7M5Qqw5M05138JxJdMThSp5gwo=\r\n=NLPE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/theme":"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/line-ripple_15.0.0-canary.9bfd12f01.0_1655925719815_0.15804065992516647","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"74296f82f7f6cdb4a0de14c5a40bd76366739763","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.764de225d.0.tgz","fileCount":33,"integrity":"sha512-vcNyG/+9zdod0uLyElcqsrVD+X7LePs++WbbMilqseCwqoWq4zwM1mAeca9EMDUUwFbHWH6+uMX1uRQZ87oKmA==","signatures":[{"sig":"MEUCIQCIMlj02n9lusZDVDQaNxwIVFyQtKMG9kjOqNCDB+mE+gIgA2VbmCtAMQW74lTvoAYmCalqc1sdpv9L/ERlJxQrHZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH07ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4TQ/5AVdrG4acoSTIMqJQMIO8fF9Q+gDc4TELmB1sn4yeTx+teTSZ\r\n2CHmusPocShODFK/iPJ2lFEf+F2A3QZy+Jo3GRHIJQNvSb23TRUx1slu2kQY\r\npKFrgP+OYX4KD6FGtbk1CQmgJviV32S+38wwtw8Ux2CsNBq+btfbJu6LVAbn\r\nzBQpSuWWwZNPPwHzhjwjwxyEKBCUuDueORrJLjRUTMuaiRzFA4otIuBlXSym\r\n2K7ZSfSYrDeMZ+wqpSMbigOYATCjcxpmbDDHEbYxYU6073kmJgcLwh3AqBPr\r\n4e2VgdPNFlLIVhB2i5z5FVT2nTfAao/+oxlc7rI+rU5rMGznesPvi+t3fIlL\r\nDjCutPeoDFuSgFM6vo+DIOUGZqN+cD7L+Q8Z4otMpsQyc6rOi3KMglCGgQ9C\r\nIi6dEkj7aOx7QzRmxj0Pt1K6aVMOYJCqr9yx4myOcjdt/dRgRx6fBQiv0vdo\r\nVA+Yfnx8GaBiv4XFIFrwg53mhqiIKsaQi20048LWsQqS55jOnIoLWq5MObI/\r\nfBWPrlX4enoiYygd7KMdcLiAZEe78a7AHSr1LrpKNdggSKmzI0RFfHjkhFkg\r\nSylN37snotOFqmp6cC0hSXt7hSMMm+0QAhWGtS5tH00FlOR66QWdgluXL8VB\r\nOjSefhZRSeOW2lBBh9ESlb50qINT5+Z1P1I=\r\n=rt2O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.764de225d.0","@material/theme":"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/line-ripple_15.0.0-canary.764de225d.0_1656519995618_0.02275425297196554","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/line-ripple","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a26e37604961ddacea45fe4c3b4a4544120a19e5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.31e517cea.0.tgz","fileCount":33,"integrity":"sha512-9Zm96ODnkAz64H9LBiGpFYe31BT1iQXdn1jGBE7c7OzJBRw8ZrBR+UVg+WsWsB0ZZkzRL15UM/X35SC0wT/PDQ==","signatures":[{"sig":"MEYCIQDS2Zimt5eHD1DlM7I6crHqO8UiuqrUcyaw9aMWnw2MPQIhAKTLrQ11aAXKy4OhDDgKFmSkQN/Vjo3SVzg1EEwvfnUR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivzytACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqulg/9FnYV1sCbFuALGWIEpEP9BrMYKuwyy+xSQXBYbwVr9CL8/Ane\r\npwoPbnXCTYjdp/hhoiZLHsxchZQQDbh2q9i/KXvEPSIKE4+mR8RBmqtmn1lR\r\nbVxhKG6JUbF53bNUOvmFd9OW4OJ3LQVSW95pY6Z8XP7IYLRwjXVD80ShN0nb\r\n0q/s4/4h/EN5aY3B0ak09Xs28MZXRzgKJA5Ydd289odr1BYDqkvIZSxYlLBg\r\nuclppc/T9Z4q5RIRaVBpsKHEmjmY4qkD+Q+QVg3Zzj9hWMXlOM/Jm/aOq/RN\r\nmmJn8p/0wLCQ52BOydAhNtYIJFoLQ5BuXPKTUu6CAsR3bf1GRdvARfcfrC/R\r\nQl3BFfV6PQSY5Zk/Z/291ar6jtH9bdZlxxjxWSIqu7LUkGa5HkaFPvR9Xikt\r\ng9fudbwVhOWQ9GFGx/KAts9Eug/YUL1cUEdFHVvO97kZpeChJWJHQ0LQzwOW\r\nE5pHIwpD4a5DrR0i7ZcaLH123Hifu0hjwjgAudv1vLsO3rBjgj0h+b5Yunbq\r\nhr4a+RpuK+SuFC26+wRMEgn54Klv+528txU39Ir5n+jlzAnmOkAwZlZL4Dmc\r\nKPofuN2WzGQtUbVTY7Jn8NdLuPmEkJxalyEl15lXjSGeHty7jWOaNS0T93hI\r\nq19U0flMHFAEK8h5JQVAPRBXe1+hW9b9tcs=\r\n=DXip\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.31e517cea.0","@material/theme":"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/line-ripple_15.0.0-canary.31e517cea.0_1656700076872_0.817314396166148","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f09b10da898acf5a1421d8ab4591618823ce831e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":33,"integrity":"sha512-Lkom+HokHgWwBG+s2JDU03e5XKPvL3GW92xbSA6C15ygvtDluIbsj1vDeLH3dSeueCpZX5tmBYXlINS3ktQt7w==","signatures":[{"sig":"MEUCIQDGPxbiiReORh+W9AMi3zY84lT4XYZ7PmXjbFbRkB6GfwIgcUNYKA9xOt49v8xIjX/SIvIxbEtdEMCHZw4et04jFng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3soACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrdzg/9Eet12Su8A4Mhodtfu1rsP3y/aktXt8buHwtUJbR73MMiQwA3\r\npJVX47NOZceTg+AD36cJ5QdAi6fyUqHOy++mR+AQSNK5ONiK5vJY4UQNW0fI\r\nF7pJy/VxsZm5NWlNns2gvw/7nmKvN7YzqfZkYMFgnp6mAJzp8snllWFIRTOx\r\nqjq7NHs13V99kX4xrd6UtLBIW0mMbEqgChMGvVR+0XbFngxExp1czxjqClmU\r\nbuRgO9PIJFdB9RSOT1Ez0yttYt4A+5pmp3Xc6t5sQuuubDp4lhuZBRVCy6r1\r\neU2EJDoUirx3mwIEp49lStjkVrxbnDZB5lWFZZhTD9J7r1EzALFzPf1r7iNR\r\nMndYKc50MM9Ag2k4WttA5ng9QnKBWqApZlHEVj8PcMLnv24ePt8ambpFCWsB\r\n8mFUSpH97IFpXkTFsKZ56q/TSpiafjBDBgxXQhcR8S6/HS+oAVxD1c6+xlKl\r\nLYZWN/CI/sqxYb/CZOqY88OV9EkhZCcs66SVFjhF69MYSYsd28evTutF01jL\r\nC130qbRkQ1MeFlbgEDQAaB7ryZS55xYQMjh2XhlHk5Dn9gSpjqXr7pF+nG+9\r\nU5wPeyUU3iU6RIF15KUjFFyXR2i4psOOEUto3F2aIUlYkucVnYpBfYclGobC\r\nMJ9M5oL5VA0jGAw7Vmv0SO6cZaF9iuCj2NE=\r\n=em/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"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/line-ripple_15.0.0-canary.9ea4e8e9c.0_1656716072257_0.39658292906705905","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ad8ac0a885f7e2b3270ae874d9c9f11acfa0e861","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cd5bafabb.0.tgz","fileCount":33,"integrity":"sha512-TXpv6tn+QUNI+T1tLKsgDv0HwsIOrkg/wCYFwln16wHNEyjuS5oqnxS3TQAZQ+yEMjA3UsPgoBK5lQwRKufz6Q==","signatures":[{"sig":"MEYCIQDK8Y2t0BKXg0No48NCOIRvHVO3adSgEgzv1QEiyyOxtQIhAI3LW6KpD5kdWWWj6nn5OnePVH0kKS9ZFmBj10LDLJGl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcw0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPZA/7BQR4EO+gIllgvZSy1gX1NzQovMBkuXKFyhrMYcQOD89s5A+v\r\n+dU4r/oNNnupX4zTvQ/uzf47S/xYH7h+lTvu6NdQhu2Ax/ceyI27H7LCfdIy\r\nDlV51CTKkzTKitNSgJYeHqzGgm5SmzN+9fx2hnEfrmeYmNwLJJXc/lnxcfk9\r\nmLxHHY824LGDclzDcj1kW0oQwAiav4M/U81biGY9AC+WWeI8Yf7E/AEuakGF\r\nXXx5TzFYVD4cIbUXTpLBD2mXksS0Lv/wvvH+u7nEwok/gtaBKIJWFWAg9+t7\r\nQXieMrqMVb1krR1ot3bbmoTCrus8i7zql7vp0OHjo4W1mdQSxeV4/z+xCI3E\r\naCz20B8PFTdmKtLmpmJVqqOoH8ofkuthqycqwaaYhDLxtfWb4AS1zzRmoJn8\r\nOr7oZjKp8ursfEFC6viDelCjU1poW69XlwwkrCUoxA2MYVHGORJL2gl/pEzK\r\nsHbL/Nvu9szMn0UdIFkWHsuqPU6RbwEgtsMqOB6TKHA7wgiOPEHEjIWeIpfk\r\n9quWKKzxAAV2K+bMMZd+uHdmS0/OQeikW1KmfaK2mdtRl/jKICpTYI/ez7Te\r\nbGgdxC6Y1rb7jJzctxj5+oN3yd4/p6lfN7u0TUUivSUPlJuiGRpthk3N+aYP\r\nJ7sv/+X42K6GRfwpqbqaFmFWGZ096v7HzbM=\r\n=molO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/theme":"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/line-ripple_15.0.0-canary.cd5bafabb.0_1657130035810_0.24273998571931266","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"be1aa924d6a534ad6cc6897b89cbbdd99b0bf906","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a02fe49d3.0.tgz","fileCount":33,"integrity":"sha512-e9NwfHg/X8t72IUHpRncwrqSrrtD7vttWZ+pgutJ8gyw6sPLQGYrFt8S8GASjG1ZqvurxPjI9m7WI0rU4EjsuA==","signatures":[{"sig":"MEUCIFWiGdoIAJ2nBbn7wy1ccIax9hNk/AUGZPooPYlQPW8sAiEA30OrEGjPSAua/BTGjnFfUskgVFeio1ottUTBLry7JtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdl9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWYA/+Okbc4W2Rz5yZSgiBnt1ubNPVCIczDLs/VmfQL8c+1XXl+cpt\r\nxHtJIIgkdUA4YvZ3ZLJQFVyHjwvdFuB6zhsQ0dh89J5EvwQwPH2lfE6mR7uU\r\nK/omEFVozglave3+JCdeww2i0+eEeaiYfxY+0TSuRGxWfXgNB2lb4fWvE0iQ\r\n7+8dmmI22/MVvyKylpKMFtbF4zE3eedssci1T69WN+iP4QEveQTS98cSjMxV\r\nFS1ZTqrc0idpVTw0nXAtyREB0LJBRvqm33Dtt75HSg28tY15+sug0X0m9g1S\r\nm766MVq2ihJUN7sEjtAkqeOpl2Vs8rEQNx9Thh3jEih9DJYKgiH/ePKi2K3Z\r\nW7zIVQzxqn5GH/fHq4oCOrvW/YU+NBfPkncylC+49FZzPl357CilcXFZISx5\r\nmQUcPKmfB/Fk09oZ+mrUXs4bX6q8Z45Ubp8PN8PSlEcDroVTSlE/hmZfQa/t\r\nT4XiS2FvphzI+HWhyAFT3aQCPY4XQITrfrMason4m0GOj0B3nCTFaWOQabUr\r\njEBXBnRyRozdnGC1cNdVACi+kbvZxN1CgBSFAoU84jZ3Y2F8o4ys5JYNxLhb\r\n51/Imfn8DkeYm75imlfXA9kmLYrVqpV63Q5N4SzFXS26BSBfYIO6DhguK8u3\r\nC7Ue0c8GlCHxklXRxsCyouuMVtFthZBtZN8=\r\n=Q3cA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/theme":"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/line-ripple_15.0.0-canary.a02fe49d3.0_1657133437145_0.4532063880623829","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/line-ripple","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"76d72b7d7a4bc3078dd88a5a271d2e2370096d4e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.826a3d8be.0.tgz","fileCount":33,"integrity":"sha512-1UMg+E96/1hLHA4JZSEf+WkZ015Hbv+uHFfNokTMR2FIOoiX8TT7Z/LJaF+8OA7FI3Vk29uP41TWbkaJP2UmrA==","signatures":[{"sig":"MEYCIQCNP0g8rrVg7uq5TDy8zQzAiCvEPm5YgePFcN6wuzJ6lwIhAM/OE+Gzd2JjLPLGP5E7BClhj4sMwQTlepFDCqlSpWbg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeLbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovSxAApO5C8zj8L39g0b1uC9Wpxbq8evnpawViasbuJ7nO/JSVu0LL\r\neRS7zvdwbybL+1fwhKu6gCDkE66WNzkkOEzwiNRMqgZq8e6m3CabqKaxlxv/\r\ni3+HgpL8EU19qyt1+aCA2C6/GW9aJhv5JXXuC+v/7KonqZY/KSrNrmGfSvTq\r\nhJaqAmVA9tiimSSUGPi01sYZgXKZe0nB3xz62AgDNB79E70nymQ1nFzgKhTg\r\no9ZnMyED+mIdPiy8WJFmNtPMBXAI8SreqCoGl3WP8cVH7KXg7qn4Zk28wcI+\r\nW5kFYrV63ZYtNoz+gG9aHUyf8LL/yHXefW8Ca7o6w1oD3kgym+yrJXiL0pL4\r\nSuIIAhV6bzD51/c7I+RLMh0EYaBnDBN4hDMnkWFWJnET00aeAT8Gw0p2Uusa\r\ncvN6ixtlBqRxfEO6IFOkkKyoFH6OOjrqzIubcJN4JdrzWePtm4PxSD/Lzt8V\r\neZxII8A/xbFm3ls2B7Kwn08C9SYwcS03qF0m/fyNTfMO5JThHmHcvfgj5Ivf\r\nQVKF78fpkykMjd7L0Gzoi/1XF6r0jdKtoOpzjUsmskimc9zL/JDhzr7W1TOb\r\n4aqOJi+gQUn3mnDdAlK1rAD9Z5giiryByAhxTYwer5NxXihDXu0+w2OE9fmz\r\nB5XYgE2s0vdS3zJxfLxMgB10E3WqeRxPUbU=\r\n=J9XB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/theme":"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/line-ripple_15.0.0-canary.826a3d8be.0_1657135835270_0.628832844002982","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c73b43a30248b8446682a4083d513853befde507","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ef276aa93.0.tgz","fileCount":33,"integrity":"sha512-0AT9LOH6sxu797c7Qc0TqdX4aiMjf36Uqg0637VRd5PMiYLcTMU+mfN+0CfCVZ6FuP0gUJwxVviSHYAfn+m0vQ==","signatures":[{"sig":"MEQCIGrWrU8p0i+u3hLo3rXocvvrNgLijugV9TkN954hBtCOAiAiQXn8KAJgjnM2deQP0fwcOHVa2PfTslHiO8tzARdDxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxGSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4Tw/7BxqphZEEpyxdSAKq1zX9zDAC5Pg8IN72uZgWVdVaILj6i0S1\r\nlkNqPrY8LSZfDGAOZYhDFBWn92tRbXVtcPf6UUR3tKOc+tAZDbo5XnZb7cQ+\r\n2zxZKwSR//F9+NDby82WEEzMXtYDFe78eMUIlvrnz5y67/W3dOe56JcUFaO3\r\nAEaLbVJHxGoMSD2hIfYTN/ns/MpolOQADNfT/0iU731ECGvF1zccBjB0woG5\r\nt1Xf2gJvKMaRWfMuVlb17oKf7VeE/+J7U6onvf/kLNWk3TFroTDqCeXSqS9L\r\nnKPBZe3k9JPxfMQmc7txX965B0xXoXa8MIYHLCIOWQy/yZiKTWknzcXMQLko\r\nU1/1mRGakxnsJuKFeTn44HfY8R44oOZl7i3rLJrTUYgthNvOv0eqS9mThamN\r\nTFu3aY0XVIUbxcW74tZE7vLuwFiXM1Az+gpQtNhzS6wntyc5+utnD8CAuqaO\r\ncJbGxArc3I9fRgZtfGTbjoEuy4csX+2oZkP0K6ZQTIV5neFMUrlL06oGL2nc\r\nMJ7Ry3I7U+or5jTltJh8YnmMMnVNxiAfjiVEwoZRT/W4bCCbYDQjuMfP++HZ\r\nUvQPLGiRxMLpP/NHxFZhb3BP2eYmL2bjLGEez/wszK4dCSwbS+BEs+kvXQnj\r\niF+2Cng4X3q4EBnhRadG4ABlSVBPYK7z/dA=\r\n=ZAjh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/theme":"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/line-ripple_15.0.0-canary.ef276aa93.0_1657213330647_0.10078380007679355","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c430b4c8449f0f818c076d0cad4129b4b5178a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.59cf61d6b.0.tgz","fileCount":33,"integrity":"sha512-lzw76pX2pYvvOAw95ET3Qj2R63EdoXRK3zvy20dCc74oMVremUVFLYUZxYTjRi4bHGZBkh2dZAw7+xKR31aWjQ==","signatures":[{"sig":"MEQCIDu2I98vMuQ502aDXMFKhK/JXgHlDe6nP0oH1A/AlYuIAiAB9eYczsKJKgFNcZRKngeROTOBurNmxI/YOqCh7Onw3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxhRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEhQ//ZpqWdPFBnaQ8/5O60ABz3TssIfS9vsfjFGE6SfBxm8bm7fAz\r\n02zppYfV5pXnIZAJAWdA8ZK8+lnuf3y4ii395aZMosmVDqY8uI7GpIdQKVuv\r\nhonu9Hq7AfaNMcqhBp1lZ9mLRXZ75tNL+s7NqrOF3t3/Ld1+2XwtbPNMnbxe\r\nm/zGJTbeuaIKfb84MnqKEeBwZ2MGOpCHYmR6sPgANf3tLoFoy8eovlYfwpXL\r\nVERHj4X+o1d+qG864IoPawJ+nBPBCFAiEtFxvyYJudUnbpVgTUq9SCWEnG9w\r\ncma64705ptJadBW0f1/s08+DMZ6jcQI5IiTObLY0YxeZfJgY/lmH1ONmk4U6\r\nMp4SSJLgj9Okqn1zMT7eyUImcbBwkBFIVS0VKoqa25mSHxW9GRoHAdZujb9e\r\nV6qk7MkXzv++e/Arhmd/z90pNxCZCXKw3vkVIhJ1VRZ7CfiWQFaaCoU5vCm+\r\n4nXmtTDxPyExgrQDrbSenEvlM3ZM+X8FvmnLqt6rtZg3jQNxSypP+9DVWdpp\r\nyTC2SJcyV9RjtRcH17n/4NJwR33R205PWQgeF74/l+PAY9OVOthDoBlsN+go\r\nDRnMI4l5geIqgLFlt8sNk6UR4tH2vi/oY0Zou+it8AxWsBheF1BxgbDvNnxo\r\ntJ6j7npiwhZB+bVXp4a9VTV7m7Tx36iJGa4=\r\n=Qf+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/theme":"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/line-ripple_15.0.0-canary.59cf61d6b.0_1657215057135_0.6595531788118849","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4635fed68a4e15c5d2ed42824d7e56095896f753","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8647092f7.0.tgz","fileCount":33,"integrity":"sha512-GLiLenJAGeLLpkgwykr9Hc4bLki+jMFTzFQ5gpOzaW1H+/C389NxziyezkrCRQ276PYx8wAlB+2WgA1VLezydQ==","signatures":[{"sig":"MEUCIAQW6WKz8rpahZYTMC7lCalfFrSBcrohZ1i+7MpUQVSOAiEA66w2nLUDHH5dHC7vmU6aMOfx2CRyyMLGpHlZ2qZJTQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0Q0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK7g/+Od/JwHdRfzXPQOZHzC+hp4mVLdwN83VWG0zGVbdurHD/bGx4\r\ncIm8yKbRFU0/nRVhPZNvJci/mNi3cHI3CZnMjkpNXWNIWzHpG9okAe9/XPdS\r\nD6qlcoT2xmfqN/NNgAe+mUkXOJuQA69wX+JmH/LcwaQnYFl580wkKy9RccTt\r\nRuHGQDdXSvZ1nlMa13d9HCkIMbNvXW75nt5MKPyPuGG4Ix94gqlCzX8Xt4B/\r\nA66wetcRt7i6NveTUystAKdEkzhoNkcDelHCUexZM2rtI1sofwmS0H/uZvpL\r\nYH+3anNw/vc1WVEGx5jr9UG0BdQrVtGpHyTRZUgsARU/mMeDY/CcyVBoa1gT\r\nXLFo7ObWX3bVS6a68aUhjg1dG20X6KM1ZhBBSbUflAP6s0pfu1pfWAGFavHk\r\nxdWt8D4JoO+HgaCa6k9jV2Nl3/Dj/pm0fkJEnRQqDSioABihjgOEponBqe5H\r\n2pTDZIQ2ABj1ZX2ErAzgtqv+yu3ep06dLx+eK6THzZ/4t03wXkrpm5U8887V\r\nYQNKOQrGX6xYMEp/0zlUNKAwmZwLm5ggLOLhXdAnB/rgnxFhQNiyTlvQmLBK\r\nmY9aOe/orqmSf/QnPk3uyIoN8Ti3N16oOxkxXpcHxcOLX8jzLgakn3/TamH6\r\n+K3FvdTtOx7A9xRqylxKQv56E1SV4Qa1eMU=\r\n=4QnZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8647092f7.0","@material/theme":"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/line-ripple_15.0.0-canary.8647092f7.0_1657226292112_0.9108005047157353","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/line-ripple","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"703a167bb961b5a85faa72114d2330dec1b6ab30","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.02ecd4d85.0.tgz","fileCount":33,"integrity":"sha512-xnxeZWAHZaQm5f+XAHb84Fgf32I2ovGalBoMSFtVIOp6a6Fxc4y9ktrGxtVHLhl4APHjXCgoVYOAhOgOqh87UQ==","signatures":[{"sig":"MEYCIQDK/D5LaFLIIjF6NlnOqkB6MKzefFw+8RYr++pTpu5+BQIhAL9FFVu/WwdEninMvgE+wkK03J+fEIxkVVqaaDXBqMl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFISACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8Bg/+NPFWgZQqS6aAKPqQBvTP6r1EryG0XR+AF21uk6QzNlX8Bmo8\r\n3rJClPRluAuOruxoEzFhM4IsmOHo9of+D7AJO7jHVFvWK77xsU5rJHlNEICZ\r\nRJECh1F9xUjcX4G2Toev4bFY1omhPM3XuraI5anrwlDGiWirZJ8dP+P6miLo\r\nNjYjNRRCMs0o9dIT8TEPYIX4dTXTEBvcARCExSr7mIre5hZGwHumKq34fIk/\r\nCqahitH3hKyR/GZ1F92dbSXWKyOGe+pH280T5OE39kTTb6S6cVjYNkHymXgd\r\n38B5deS4p7P8eggXCQ3lvrHKGIl1QG2PoLnAIeyK/GGQeqf7PORY58WPaegk\r\n6PQjiO9d3DvF5WZSKlns9f8iTjWtJsuXt6UsIUenUaWFqExUsxcjIRZKGTlJ\r\n3uThaTYAzipjFY6jw9AB0ofC94EubYePrsYskfUinvWzV0A5XzWCiGbdZ6WO\r\nQxHH1FNKnwO4NP4XCaCZvJxVPt0j/eHm3S5OtOT4sX+RgkMlJwPuO7/TV9kT\r\n9B3zSTKdGjcF1nF1VgbiicClf8pkzS7DOeMc75T/hk2pGnWIh7geE+ySR8Pg\r\nHEIG9EJn1ZY/rsHlA67UYqynA58rhXbglb/cTJpbgIhS+LzOe0KacJXa+Y2R\r\ndB21+K0BBmSYYL4nAEj5rLkRydmAGZHwV2E=\r\n=Y3uM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/theme":"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/line-ripple_15.0.0-canary.02ecd4d85.0_1657557522328_0.7161089827226395","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a831f808dce19b8ca38f223b6d44825b9e3bdd21","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.63d3a146e.0.tgz","fileCount":33,"integrity":"sha512-zKfdx+jefh+W8cGvch6rKaMGP17on1THf3x/BGKWlMpEyoEpHCitaVlhNrOoidAKRDiGVFU9d3exm6cBJOiOBQ==","signatures":[{"sig":"MEQCIFyZ5BiyPPFsBugOOCzoOPiet1utEhn77WDV6habx0Q/AiARIRYNVBFBL3ZNvib+Q0g4gxoumKwsTChcVuMRgDGTQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizVzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomuQ/+MzehQ+kUBJwvjeVThIMpvyK9cfKVSGvB5J8r9hkQ+EHga0SS\r\nSa0nLkf/J/oiUyGBMCHdvHyqCNoBJgd8z1SkfEGvC5YDoMYyJg6TOqgJeHOm\r\n+hpZXAikxPklt/ViMvFHZ4vreUvd4PE6mzEssmqzaWfnIXn/P0rVFTiPk6Rd\r\nIho20k2iGH3NEtdVKbbHFtts/53xoUor2gWU7XCXR0leom3V51hE4+dBfKFt\r\nS5esKyWxfAaQw9Tkm9341NOMv38895cTXpFAeQ41SnOI0qnp15ITiUnDRcRC\r\nGjUCtEdpB6DH4KNyworHtGBXRPtu3yviw6hva08GwJGR+rznfC0YAsnEhgIy\r\nxd21//l7AYADjU5QxIJyHbD1j3BXBMjI/8kQGNJ2q+ASchEWVwwOIoENVuVi\r\nr4CSqC4QZR+rhJy9WmZnJMArleW+fP0f0B1Pltp7JLbP4ysB57xnq+iF/WSO\r\n6K/NDE/2T5cxcqpF2udT6Ej1oNzC8gMagUKWnrUiq7wSOR+CBrmbhrd//QNY\r\nFjwMzVv23jDwKmfFMRwM4DUO8HuAlo70bV1EXpq+odgpmK7F3eV2FmkbY9+c\r\npiwrgyXC5KESggFo9t/yTvvLA9abL7w1UrwCGDUnEsL/hjAeHN3sxfSCJnfk\r\nfUCZkr30EY/2bo8aVwx1vy+O572g+/ythLo=\r\n=gfL6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/theme":"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/line-ripple_15.0.0-canary.63d3a146e.0_1657625793257_0.04361201086425415","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/line-ripple","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c1a1301a06970c860d0209a035192cd27356dfb3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.88db01990.0.tgz","fileCount":33,"integrity":"sha512-LWbiSSbR+rCqg9Yr2dxKmvOO3aosSxQ0B2DbLknwvdCCns4Htij7qavbPTsXKNmVMVL2C1M7UcpMmP2njhVacw==","signatures":[{"sig":"MEYCIQDEaOUg2B4VUsTQP9Yx3dLicKIPEkiU+LDlW8zOv6K2bQIhAN71SvSCICRtmGqaRJMSkeOK4VMiLzYN1DFJclW9kX2c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV10ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpunw/+NccjgoZ8yCPyUHgVrFXUIXq9xSN0GJSrFYfx1M7gJ6s9tXXm\r\n9cwS2mqDcLI4GBQilkSNWPF3uq7rHe4vZEE0KDtqGocHhSDsolPoiERfzr4Q\r\nvJBOl/aLyxZwFzwuiOd5oJGrNK2JWdg+wnsE0U2HeWfX2NDjSBvr4S9l1fSz\r\ntiDcql+VdH65J5pvuS5qwk3t4gYF55t4anUhTwUtBL1Cz13aKYjaXqK9eLmH\r\nZAaLGK2wZUVlDTJ9Z6XadfsqJdE1ouDUcvE/HEF5M5FPzEPN1GoqaV/aZIZf\r\nwL/Pq8YN2AjLSUpptbWBsyAk0Rd57itKmLbj+PeqQaj/JSb3ogU7/xz21n0L\r\nwcqrD2fX44KrkhLmW7036qboQ8PaPJAHsn6uTNblDWIpA7xjUSCQzz/5Lm2b\r\nApEzJeJ7Ud8HxEUOaLc1rEIaEifMNonps8Qf7sIHVOH4nVSjQTOdTZ+INKvk\r\nxyfHbTsyPrkpBMqmoOyZw+CMwggTqFA+YpGUnez5eEOOI6tMipT97wiQccFn\r\nfyvR4qlGoWvVIukVYR+G86k61vOtXCnCjMpA2YTijm08RNQC6zflgH0OTc8D\r\ny3sqhOqjp2PBxf9izUcBhJG5iSoiUwnRQpGsGU6abak33a7V1eR6mdmkJ2fl\r\nYEzPf96GLClUT0ovnTw/srLlWNJBbWVBi0U=\r\n=hk86\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.88db01990.0","@material/theme":"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/line-ripple_15.0.0-canary.88db01990.0_1657625972379_0.9201850773492382","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2ed19d61035b1f3a7fa757e74c3a9947c5072189","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6432d8fd7.0.tgz","fileCount":33,"integrity":"sha512-RGGtKD9CHkJ93J8PEu2/++g2mjzr1xcK0La9hFwb1kbEGG0hBqiKBoRhO3/zMyTFxESVePBcBWMpY+KwIP40xg==","signatures":[{"sig":"MEYCIQCU+22GpVVIWXN2UCLX/D8v5wdwB5ZbtOOZiftkYxhQxgIhAMEIAave/7RC2aJES1jMABSAry+5dNiMysLY7muvioO4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8WZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpt3RAAiwDAnTTS/FCyFeDZQmwD/lTZgOmEubWur/TAmtBiU9b9N5Gq\r\n/V7fm4d0030IpVmzybMXk2B0XMk3dVOpgQOk4gNd0ZT8t8bPHTc62M7ljOKB\r\n8lDdbJSAt1PbHTgvW/7Mu5z1DwoquOHc75ax3/XDnRHY4GtixC92mpHSzIRB\r\nmPJwzwgkvmAta+QLKJxUnq9iV7RN2eKqLr+Ar98RJURf85zrMsg8O7+9Z2f/\r\n+tdtLT9Ss+iijHepWrc6dJ0EvzZtO1i5TB3c+dAgt68xB6aXppkILkciUpoH\r\nfsfPNC8yV4XKbzQx1xlKfmndFRzMHEAgrUWExCrV8EpnJfuKNw0USgJzuQU8\r\nxK6yVX4G01E3qcgas3AtlMxPtY9PdhOt4KAji2rFIGi+uxumqctUyOZ/FwVU\r\neHB8MUXTCXyIO4yKB7KzLRWs+SbDSJRMfv+R8tOaWSYwnqNl6wmAL9MO4Be+\r\nbKRonmwbA29ww3+JoaUC5GdPjfUWkx5cZzgjY+wOHjD4jzdkCcDtTkgb5LUt\r\nyE2LmVVr1ZtJufDAzXAlWYu7VXseDHtHf1+zRiO2ht7lD5eLSusVgejYxYwS\r\n0mD4Zj3NTa0PaHl3n4Wwr5+nmOfqY7UOAUZlod5zn/bCMvnqBWnqjGyVw85I\r\npwIX1UE6IV0+kQ363guA+BkSjVeXkn7ASq4=\r\n=PFz5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/theme":"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/line-ripple_15.0.0-canary.6432d8fd7.0_1657783705176_0.6657502473869346","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1a1258c49213a136444b7deeb0ac43f3d44becc4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.085f9b25c.0.tgz","fileCount":33,"integrity":"sha512-HJJNkR3E8zWFDwDsnfwNR22oQd4bIsWmlucKCcYg9ZU9vFjtnUfduw9Vk2p5EdVqacLCh0rGxon7po+HgyQ/1A==","signatures":[{"sig":"MEUCIQCrC2/mpeFyVa2C9LiBFlUIr36iTq4tGDgyczCQPKZ+FwIgIhM0C4HHcya4rrApMYu83ielVegk9kk5TrJzu/RKTLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqciQ/8Dwvi1y+QJ5+u+/uim4+pj++UJnFTR9584+JSgThlIfFp/mct\r\nJPQDyamOOwtFTCbx2k6BbUQi5xjmmcL1RTo/a6HcziMXUllHQUAFOfTHV8S/\r\nKqQbQmMc6RqHLl+kcpESFo6f3DgG3hgyHb3Mtmg8e+wJRIZPa2QCvYu87HO7\r\nwEd9hJ2Im2sDJ74d/Ob+qJRJZaavyY0UOXkINwSsRrE6oFrwIYYDVTm8lknY\r\nFf3lvhpBnQvltASCHs3NXR5j0LLe+aw/ci553XxBmppxvsXla+mO9lN69/65\r\nL3n0wjCwFUTPksK5P8KXL4JFI5eloV53KSkE4dmXsQ+Gs1dPgkhFs/VE/wa2\r\nh2PzVXJmoHwYgok7n+xwh/l8DcagDxxbRLDwEbuzot8NpktXTyfSgcLKNct1\r\nHwjqdabvLXG2pxgPXioW68NIlmKSIPssX/RVo5iVTbgQGHwvRRAtbW0zjItq\r\npYu81e/YYbSn2xLo/cmfuLfXcUeCNDI2kfANsPWZ+h9UNm6MF6mlsJZTQwjO\r\nEdw9lYZ4rPzY+cM5Ne6lG6spbeSilR5MZOwOCle0+SA+rmynQmQNLeVEmMGm\r\nhenRr/ATx4ihHHBXvK4N3k4Pjn7gSe63HgIizIX2R7sQzfLXo3z+yzyicQeH\r\nfROvg+VbvA5N9+IExyh8P8rxWw2OhxGfw/g=\r\n=/reZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/theme":"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/line-ripple_15.0.0-canary.085f9b25c.0_1657816470683_0.5366088425091207","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"75447629da57e279070f800d0b592c34b095251f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.39f9424b3.0.tgz","fileCount":33,"integrity":"sha512-ramFlG4xfKFNx+x7yNPXHV62d8OEkLHIf4p5Ku2xuJXYr8r6je94P5vZs6qn0GO+uAhcA8l0jVE6oTWUJsIWEA==","signatures":[{"sig":"MEUCIQCns8XpXj7fheQ6EDUJ82t8LoUw18zCQvp8QbeK/tVPOgIgSt5hoddp+N8yTvi6m8n28BaZDG18i0PO0fmV0EXW4hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EyvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDKQ//UvVOaQ946NxpVjvrKnrqKVgHthioZvY/+HPbauAtwRvzFrqF\r\ns29drscWTduLevy/o+4aMHibLeK8tiWA5jte+iP8QXgwO+0pFfumzdTth4GM\r\ncpA4rE4mtFORIze8A+BraahGUzDE5TBmuniSi7RHTmHtjOV3xBfKivyCSgRl\r\nX9kkWJGUI5TxqVo2RQOTeFA8THEwImkMU8WQtot6FabJ6GNUBdbDVV1ucyFn\r\nNhuA8F0vKpqbbZyMPgGhpi/ga2IDbr1e2HZmy59Xdim4bl4CmGHCmcITGNDA\r\nLkBH8gi4ey1JTUsOkDoou54SAyeoiKH6m8Mudq166rfhrS9wdnQg9o5Lpc4T\r\nnqqDvJy8IklLnQrik0cHn4Mkz5DaXCc0m/TgMSosKAx4EFq77B+JMAyHSFZl\r\nrxCf4fpFshWhD7o872SjmPiM3/0+CPi9K6TJzFHya2GvQCKaZ88zgmjjzBuB\r\nBwQ8n1rgiVejqNY5UHxlkan7tWAPlvYAktaRDdotCij7m4ct1aW4ZY82uF/T\r\nVi2/KYHFLbkxFnREPdcKO7Nxm3CfpjuJn7Uj5c3vvokLVG2P1Jqw4TyG2dZn\r\nTdxQO966jIHDbkl7KirFJZuxrah9x0iDqABBHrxhIricGXVSjb2EM3J3oIoM\r\nbKqEK9h1T2p1GPnHuF+MTePr8XqTzhBfv6I=\r\n=USj0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/theme":"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/line-ripple_15.0.0-canary.39f9424b3.0_1657818287452_0.005977829069214513","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8bb8be7bd9486cb53a323834e29b8288358be41a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ae9fce587.0.tgz","fileCount":33,"integrity":"sha512-3kQyj3mF8pxgiIBPrc//EgNMI5Ccn5sdgTvIZFAhZ6YBIISF9HuVLzPXYms+fyfz9+yP9qtNqknkQG9FbSS7pQ==","signatures":[{"sig":"MEUCIBWkAUzILTaGakuJpbqQvCM3v8TM5tcPoQsZG4+WeacEAiEAnLshMF9j9H+V/iwxDMm9flRznzJ+J6+yeOw27LL9PY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FtvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNNBAAkdEUzgzRFkNE5FdstXybGvDUhIDX+oVtsBQrfeINwxmzreWx\r\ngK7sBNi0IOQsv4ZrSb4uUDuOxzexo1E9O4lzdXQ8ZUGFNpUxx6wnlr1br0AR\r\nBGZq7nhjlv2yONZF22NZlsTM9U2mrYmEzKvvg/03BE3/bSyBlEWRGDkLZHGC\r\n7lVUE6rkjIWs5yOE/4vcN7GJsHn1zPWSWC8qzGdd4RaXoZazAQY/u575jKhq\r\nOC21Mh3jPhxavyj2+CBuwgc8Ue4OekVbFfhF1isWFpailSjRSk3G8BF7obvw\r\nW2UOPfABhEBZvmlmdCXDp22m0GEmG9F+21LRGKjI4q+Vg50++YYSGjxxHvuV\r\nI6qp/fcqCwMjiZ4d9cAfmv8GdlcESfk16obUBk3RxuMTOOb8ZppNVbzz8WBZ\r\nMRNEDROow3ARcspDo81gutEiOvUIKgIRo4uQWR0AZ3pWJ5amM3dUYq2QX1g0\r\nCKttO71RmqP4e9eBSV8KBnoBnhOyr8JG0OUEe76jtWH6Xgf1p3ms0jNcJL7h\r\nZvv5jufNIoIaqG0KkqcV39YL7mU2p4YjhiHPZrg1nWamcOis89qJwF4RtcRT\r\nwNh6W6OOElg2FEkNhlcJj3aHzvOp0rPzYuHgDbt17NgX0v06KY3IA7fE16em\r\nXxN49VKxUCE/+Tw7R9kjviuyIk5AtlyOej8=\r\n=yYD5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/theme":"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/line-ripple_15.0.0-canary.ae9fce587.0_1657822063409_0.13545962334063488","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"03606d73e16dab884f02056d25d290758ae60c75","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1ebddc343.0.tgz","fileCount":33,"integrity":"sha512-epmD+OPSEVPKD8C/M5RmMLFJ0INZmlrzPp/lmodlt0BrC42VGNqV4gn/srXlwzhfxjjKCmtjNRfApD9vBkOkPg==","signatures":[{"sig":"MEUCIQDz/nVlHuF+J0rcVDZrCUkdhd5P4sbAJwfeuE4Pt8nFIwIgDkLAH1RMkCWbyolYTEG0bPq1geWfgX72PKEJerQphVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0Sn2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Ag//UuD1+VUEKBOpTcRey/LNzfsHmxPG4k8dTpJb6nhMacnjjNVE\r\ntPI1B4CjPgDJ60/M9CPDd9RMTrzH734D3nrC5DuTz6xgh7oO7rNu+C4TxdH1\r\nX9e5d7+MFohrq2DBrhLbegs02gg9/a+xbOCUr8Gh1CdabcFgXXQLin1sqWNT\r\nn0/mYfrwzM0LR7YPWdLRFNcWS6yOQkmSBW08reetOlCWCQKCmty/9ZVNtMQo\r\n57i2U52WZYDDWqOEwugk6jKgLYK6uOve/WKgjXfVLBY77PRCsyub1Cxw3gKH\r\nKrw1uQhh/lh2vJgEbwdl/Ld8Sv6pPgiWUjlLKrrnPiFTZlH8j0stYaO3Qemw\r\nUetb7yYahu14fsGa6hsW4d34MMUaGZBGPac4wNmDWslhhYlFhvbQJcPXUuoN\r\no4j8vUNFy36/vbq5KeG1bD6/3XRzBmoOFanRaIUSGicnNCPrQI4+jQscQmEn\r\n0vPyipegQXq/iIyEd79wcx18nF2gG+ffPc4boaXfMUnI6zZ3DeA6nw/yFVKo\r\nl8hyoQgd7UTODqxMxpVOrkSRWRxHY0SNtvANi43VbSway2ERipcvamZap0ou\r\nBTRH4FZLhP9rBUv9iIRk7VDHy30VXzQVZK8stoV9xueSHQmAFaec7KRy8e0e\r\nBD741W/TAhztTswt8EVRtTehYjLlsq+/yJs=\r\n=i5KB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/theme":"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/line-ripple_15.0.0-canary.1ebddc343.0_1657874934747_0.32971553349423055","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fc1b219d242c6902b30bd573a2cba039b4d857a1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c5018840c.0.tgz","fileCount":33,"integrity":"sha512-aeMx24r3b1k3Y3GzZJzzi8BNvs2Z+SYsrOyUGuFMt5F5WxrW8sOo6MJg01Bo7f+tuEWzgv2eiMimanSy0g3Gkw==","signatures":[{"sig":"MEUCIQDTs0xHTp2yHa3Zor0kuFKz6lzn/CVRbJkE2lfnc6rj5QIgJOO2ySH1ExrD+qabYMkaIgA/5blWclJQ0gTHvPGUf3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1SsUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvFw/8DyzUtOqwpOnzndAM9T+rtaYoVaf/wiW29y32/Uoy4BAAezZi\r\n9OX/yyPnyVH/wOwrolBma77P0Ewax739aXo1RPBYLXwy5lS7IyFidnDtqMat\r\nR/nFxeUhl3ljjjLd0xTYW2LiiKpjOHO5XqBZTvweoZnjcEjsbinhN2flkOqP\r\nwoL6sTs+tdZZmzH6HTbEcBa6/IFAUOi7P3x1qUQOyUNHM5umGGx98FtyKpNG\r\nIlXseS3cjmQXm/vzQ6qPvO1WQ0tvf0U9H0rBjwEYIwzneXm+zczeejuNDGTW\r\n+K7G1bA0OvFpj6lzLYskIVCUA9yj2IxHxn1rae+aNK21Y8Z+wWuYlxMENNd6\r\nUDB7R4wlhxsJ3m3Hsj5if8C4wXq50RG9otd0mvW+BhTX0xksHBDBntA1ggKY\r\nGDVccx+w783Zu1w+6Fj2OaWg0PB9hcqM6UJDsGYtHKLlMjL/wswHMioWKD40\r\nm+Vtt6QLlDpsjULr+uRCpHBXW/8nRxG56CCUbmllK5HK18DlF8qZDk+eOQEi\r\n8SHIcnlx3sfv/0YS+FpUhchyS1YvqhB0TCJO9lhSEWVsEReYeItU8cFUEHUr\r\nuRl54bEQJjljPbbVfpvdCXKqfZ0gVsVwuITB7Ynaq3TbxeNqV7HVuvbz/COU\r\nVDovBPmgIwWOOYgqUbZu+Arb6yVuS0XfZ20=\r\n=RqYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c5018840c.0","@material/theme":"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/line-ripple_15.0.0-canary.c5018840c.0_1658137364015_0.7919730147004218","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/line-ripple","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2c72de8d4c4c9cca23ccf416bd2238d96b22f57c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.551b40d18.0.tgz","fileCount":33,"integrity":"sha512-hRfPKaAnVTGen85PFAgE+LCveT+VZugfBnI4Fs9fSb2dOtijmW+ca0x/NN8zdL8aDF/YePzea1tJIiibYcnlqg==","signatures":[{"sig":"MEUCIFTHZg0euNfxzB255rZX7Cuf1BEyw8a1iI8bJ7InN9LKAiEAywy2hI2Bxf7PunoME/cR4Qy92C0GLo4lIouQiODYmm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S8+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp40A/9HOq0O6nuMAam2HxIezMOCMD7QJjT/vGqFDSKsJZEqIp2/BW4\r\nea1ybWyPX4LafnnrMQpCixZGHcMs6p1RUWBRxs8Ngg2f83TpW7WxH4NeleM7\r\nbAyo1EQ7qd4EjS4CuTPIOFEy3Eid3UyTuFeS+iCmSvu5mU8zgYC6AAlcAO4H\r\n4z/zmb3aXZyMZk9fnRQPkpUzbz+adHdriQVzHulUfvWlpMyNIbM/cbPCbJiS\r\n9bEiKsV48GaVoZqggfnHEIX++B9tZvGYJhLY1tiBT++bXRC6+U6W4sEdCpLU\r\nl59VZNMIwON3YGGG1mUpUj47t55q0j0K4qU9To4k1G007N1fYCBv//nYHWfs\r\n6fyS3/fu+IQaG+l+GQ+/Wae7n1kR5bcnGwtsozWEK05o7tmGJ9xaKR2A91Xb\r\n6dg3+ZqMFM3XznQ4gLii4h9RNMFDlG/F2WdG1LxKAep7kCvGy58lHRFM87iA\r\nTadztpdksgrh9Os7q0ofcAUoAZ/C+eGiFi8a+Hd+4dkaINFfympIEV0aUoF3\r\nF1FejxdwEHtemBxFb/eO7dxD847GjC2TXgS8dkbYS/8faX+fihRUW0pv3qnu\r\nLDKsB5cnyF2rjacykbmpjqs6nXzDd4ZCdX9Baa2N3XI4iFyezUQiffevY7A7\r\n4wLgr9NqNA/uBNl0l2TYqitBc+O6DfYXPl4=\r\n=i3Nt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.551b40d18.0","@material/theme":"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/line-ripple_15.0.0-canary.551b40d18.0_1658138430034_0.9354116958465375","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3030aac96154b54f20df3891fc8635bf12bd68d4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cf9f12371.0.tgz","fileCount":33,"integrity":"sha512-rFudOtOXMTANryb5DKKH9tSHntLCwWIZT8VTPy7aMVcM1au0wYGd3Xkl7ve2OBMzEO2sGvBUdXWryYyLwUQ4Bg==","signatures":[{"sig":"MEUCIQCJbpX4e9pvG+Z1bmK4k2qLUv5zNeQ3rMzuhInAkFCbugIgegOatm07s1IysmbV/9RdK4I0TXWuxqNzqfQGzII2E+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TAxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmgA//cCEoNgsvOxmqW1rN54sktMkD9qiFBiWY1W0GUH8vR2GAumTX\r\nab29TcLwotZbXYealTOwXh1VvbXywac0JMvQ3H6X8zXLC3uHsZY/zczfJxSr\r\nZde9yhGqRZisVwrQknaRVdBE24707mPRhfws1iGTasc+xaj/HSNHIfnemQNM\r\na7XlN75hl5Mwpm+6u4v2dPpTjQnCrGnGpPA1Ze/GRBhLYSSg/CihnLeQ478H\r\nxWWyeKiwEMJNjX/u8zTPjgkI2DOQFniM1c6r7aENHkZvtyIuRlrcIGvqshwL\r\nlL+5RNWaF9TOel22VLt67c48q0j8nlrdFph18MWpCJ0KRRB3yv+IzknSqTDW\r\np7+9RUmSEnhyUehcCDNq7mtnKZVrf6Fd6TkYDK4CoBfG0lotHh0ZAXTgQPq3\r\ntBNn9Dosr9Mf4M1ji29RLqelXIk2Remol4f5PcDKk9wNygzXYzcAKY3tT2cN\r\nb7MfT1pJVRStjjoljjU39ECIJ7rhoF6nS+OwaQ1OCu2XxlkitKxFHdIQCdyv\r\njokK7qkWgEJYqlkawvcMocWHPgLc2Z7TZYcXa2yePFpxbjlt2VQPKNrHtgv1\r\nAyh578DPvhwJGQRunKSdDW8LWvEjZz/2XMQlbU1UAwhl1qqsUVHFKX35ydOE\r\nIKJv6z8AqcuNiREFZN6qrfTL7h6H4v38ilY=\r\n=9Vcn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/theme":"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/line-ripple_15.0.0-canary.cf9f12371.0_1658138672979_0.2415179995711907","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"85d84801fc6c7f57de393adc917bf1b8584fc969","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2797ff8b6.0.tgz","fileCount":33,"integrity":"sha512-fkCgS7R2+u6sG8/VgCGygaIEu0MxvB7OwPCwO0HG5eW19aCqlfWvRVnUtmLO1i1RB1WOoIOg1aX4apDJwPF9vA==","signatures":[{"sig":"MEUCIFAIjHcntYSda774/3iz4gYrM3SWUchNYMpkbWQq7SLOAiEA3/Z82Gg0XNaqFQCYPGlINfBPjZc4H4bWla/h2aon72E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fmLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHgg/+IEs6kJ6FZObB2gvyXpAvGtBL3k3jiA30SiX/dfFtIlOhA8o0\r\nreO+T9G32P20410Ku2VqtTXJ0qvGJu1vP8Ycoe/pLnjfDWsonAtMAQaFrQbF\r\nTAIHxVCYLyybirK3tFcrIXyHdDc5/enMSAsOp8ETcTa5R9wUGVE1FFttObY4\r\nMxA9RR/7yavlUuhupK8VZH552Aql4Tj7uQXpHOZmwrnjJCbWbkXoICuWCSYG\r\nBphXNDy8LgmC2ofpGSA/5+IhJdAlpxTT8T8HF2hSLBsA2vIuR/AC6whjCWod\r\n8CQFj7dQC/Y0weGKI0jNUYU8zrRpr3938O/m/ARytmkA/2f0lPMw4xE3sylX\r\npNcnkQ+5wAWpUu8pIkjZIEAXzbkXyA13I7dWnYEKEqWE5BLks2UpidmnsAYM\r\naAVOSRle0fJ6C7sxdyJI++PGtzusWgSPMUkNPJl0+1LqlJ4Rc/jQX9Npkc6B\r\n2rVnOOucKG5Zk51SnDakQ58AQgjk8y3owymuZ674TUvzgeQPgWCtqWMgLU97\r\n/LUOQfkxr3JMJWGeriK0/sPvv/i3CJdOBpmIlACzsu//bqMMfvm37b5Aq/J3\r\n7K6UZPqH6rAV5EUtBC/dZWDmXLcA/BlSotbkkNuG6TMD3NRKBI+ySgjqixoW\r\nPDAXHMWhwIEFY1me13axN3+W2OM/9XzmvFY=\r\n=5V/D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/theme":"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/line-ripple_15.0.0-canary.2797ff8b6.0_1658190218677_0.2683381545670156","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/line-ripple","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"34649791dd3a659af855fb0ca244f7c6d78dedc9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.110fafa17.0.tgz","fileCount":33,"integrity":"sha512-NgctDo3Q2W0A8k36QcEHYsahn1nUZxVuB1tGNVcPyzpJtx74HXaDBoM4kuon/LRQ4rOB5tw5yCzeyTLWUSMSLA==","signatures":[{"sig":"MEUCIQDeEwKfy5/ga2RIb48PMOoPZbdgx2iKHYW+ZhNNBP2mFAIgEFmZdMYmm+xBA7wbGHkcZpIDYaMSY3DTDqiH44t9I0U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17LGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8QQ//VVYg+hvLaqzxMIM5WMXcGotrOQPwJef02MoB44q41F1wQ/Px\r\n5EjnmL159X1PQHKYVWHebaX5BPITvsyygsA4qugutl0D+JyR4FAtSI7FnDWb\r\nQ1Q1yIdOn37aeFV5wxMd7XjkuHfLGXyAGrcr2P9mjIMe8J7LphOBQYwtc/Bj\r\nlt7swNV6dQPA9SUIVqQYluIzRwcLGlECQCo2elud/usqntPs1L/5OgmcNTex\r\nsNyMCof6202ALJddsaEYqIfb4FI4dR7+MpOQxH6gdHnL6zhXU8iFevup89DJ\r\n8mDafu0ewsJVWWME9YWwQp0yL+mU6pL3JtT4NORajKsWoBXEonhK5x31LeTN\r\nC/DyjKgkSkGjjsjHGvTHCc17RUNXXYp12OKpX5jMaPWyrBvdHwAEO35FEV+9\r\nFpvqqtt6miKxmh1AeFyo3Yi12GzuCa+FCI5LhFLDl67Lw7QCbslBYq3n3ewq\r\nFjjhIrQDcCUs9qnN5m6uku1W5+eqSEtEMU2sxuwEdY5FwSMGVFqJwv/j/ZFm\r\nBJpdX7f8wC08z9L9Rl+6+e0hf8PsVdajOOr+yYIg2FwZ9aNZaGNqngUODH18\r\nVxE9MMs3YPnPHpZSxLFy6Cd3SZz2mvQBgkQ6Qcg2AN5FYxfczHk9RY0GuYX9\r\ns4GlD/WRKAqZkDEYtEA0SA2S8NRpTMrjw+Y=\r\n=CVzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.110fafa17.0","@material/theme":"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/line-ripple_15.0.0-canary.110fafa17.0_1658303174586_0.3738312739754879","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9e2e766a3a8c33390b6af43fcaca47f275b7768e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.386ef1d2f.0.tgz","fileCount":33,"integrity":"sha512-pdLuDWvMjPjSuIMPd67yJrGyptMMY2G0z0KOL1u1B9vvvxWzmtSsfwX93bEe/ju9Te9b0x+tkc1Qi8Xg07TQgQ==","signatures":[{"sig":"MEQCIDazUSycAZQBjYxU74+sh3qacNwhRMZlypqgH7c14VFYAiB5N4YkmybpqdH+YbCD7Lmq7uIi9tIzKDYL/lPQg3ijKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EcpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL0BAAkDLYlRhi8e8LZqWwIF5ljP0s3b6wiCDre7nw9OYYIeWwXsgb\r\ndIJboPknxXfs3n/T43UarOJvTwppUKRAyus9uTfFoY8sj2w6RhW0GgwNRUQE\r\nFYBkahrZ7UKuGCsKMSGClc5CmMWMso8XjIRkVhGnXpzIrI9DCT6pNGYgBF4v\r\nUGpE2ZqjKiCJG5aA+6E1LCmlV/MPe6/srL2Q5rslxih3QWfkDla4fomorcpA\r\nYDzffyv53eOJ2rtn8yJZeFJD0P9maxFsf+tup327sHnbbunB45RodnFmaeNH\r\n2VkNIyyP78Rn8/6v2K+AvIUe48Qxb1BsiX00rg24Y2x4mhrMh+VFgz846uIN\r\n+5I8oppZ0cplme8dTT1CabelsWbr/33kMqGtem06pT+1j9U0KD+w+LSo54CO\r\nxmgUOjNbjIEIXQxsSE1TlnlPr5NPu0UGGRmWBpLcB2tdaW8EfvSVAtrCRyul\r\nOVuVwQBP1CToJJi3yU2c+HN6ownoD3f6xddBDfHt7OeWOaJb6AYCBLwrMGh+\r\niGpBL63oKaKpdDW7u05+7jdUJf5U3XoR85OEi2GNd8KDEn9M373CCFqxxBda\r\n5Z19eRxuFv9bX0GaP5bxjkoDCfmnl66Q06PxZ1STe3r2hhMNKunFBWbwwmgF\r\nWcmVRxWboqaFhuRO7YA0PIBiScCSOAk+NqM=\r\n=yoJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/theme":"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/line-ripple_15.0.0-canary.386ef1d2f.0_1658341160888_0.38940495209322945","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"988391635e1d6e705c6fa72f04da241baa90c59a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c3924efef.0.tgz","fileCount":33,"integrity":"sha512-i7r8X/pIMqObu0xYqH51wGKWL7o7ecLqOC2MP44guNIFtQxwHPRmPCRJRsVvn8Jekwgl6Sq4kyNXOrEiWQ3H1Q==","signatures":[{"sig":"MEUCIFNf3sBr1K+Kab/3pPCUF93Mbivbxi0PZreMejKetJRMAiEAoPaeTYbO+oPcxfkronKyK+C9bjSch26GSCKouNwo0iU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2ElgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLhA//c0JJdgzJ9cIMO8Mknkl1wEUVactHl0YFP6v1KtQhJVdfkbOy\r\nKrIH1Tl2REsl+qNJDfFoO98PtDhSReaFhbUo//ZgbysQ274+NuNpyYvVVVc4\r\n0VOYpz4CyujGG6UP3S+LFlpfZ0v3fHiLD2WEveThH0U+UgYq9p+qtT2dKeru\r\nuwQJ2GiDZ1JZV9bovqb9esDr6rmooNKXZyEK4VvRdgAv2TH2P30vl0zTY5hL\r\ni/ed6RKf+upzjlJirQsnSh4y4isCmrEqtL8FFT+xGLSqp3O4Hzm3zbX9fnbD\r\nHk/Jbg8Pg/ptitg/J0ls9RAdg4Gb2sz4mK9q2wVsOE31XVyoicBmMmEc/IlJ\r\nGIIfp4sYRhFvqo6lS/6B4S56NUcdmHkgC2LP70vybjiuhZOT8Rhq9bkMmMja\r\n5LwRt5aWcVBo7u/kkU5WMY4HP3O3pGmyr9uRAuJAwiOSzQfWY4FqtBaMI0c6\r\nDG9fFdcBtoOEzOQGmZOif3OltkDFq8mkRdiiHxks6uazKdfHvzOhwi+epBy1\r\n/84nFUQTTJgydQZ5N3fWpE2j1b79OxbqiN4WHy+zTwAPQU0MgbHY9y/jr2VM\r\njZUI3k9CYfunF/Ws6r4jxodBw+H07vfJ8QX3mcAKxqd1gylS6GmNMHlTcP/g\r\nir2Fvrp3KOmY61x68DqEBfXzULnVPWsd3iI=\r\n=7KVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c3924efef.0","@material/theme":"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/line-ripple_15.0.0-canary.c3924efef.0_1658341728348_0.15812157326102838","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"366ddd82df9e883f86bf6ddafded3bce2151db58","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cf5c5907c.0.tgz","fileCount":33,"integrity":"sha512-FsXgKX7GgRIXYaLygITwN8KA85e/b6XqjWHarDMgBgbHDHNc7SgqXJTXmgZZ/iY+6m5ts+1w4itQ7ujOWpdliA==","signatures":[{"sig":"MEUCIQCGYbqvhe1mhiCrLiIq9YR0KMbcJA18Mj/g4TWhr5XKBQIgX0aQKipoYnhP5fBC83ru/eMBjq+JeUhlkcvtwsyNcG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HHVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolNQ//XToWdrFSomuAscb8HjvZkAeLLr4zd3xHutZ6oSgVXeRgjhNW\r\nbVS7YITHuGWuSMZ/Blm5VKLZGJBltJPN+GIUxcelV+NhNjvaSQZ9+ZS2faxd\r\nFxwr+jSU0XKj6L7Ap4Mzan/BW7V9dc7NdzIKw0c2nJ8t+pXCXf4FNvy6d3xU\r\n/yxS/rrlxfDHR0f4vZIXhGdbt8OaJlRsiZxR9FyNQ853IWei9oJVucAG0cet\r\n0XOCrA4fc0sMdoqGWiQ/ZOs1oApVzNW6Aesf9kGZzk23AyNy1ku3t4LreoIH\r\n2LGoAG3eJleKpd/iAnHcv238VDSud53OycaC6Qv+o2zkiBnKm/p/ArUJ2X8H\r\nVecB5hrSC0byTshPeBLkDVGvqtNw9nhazvpZpWv81ZSErD2iwIlOuMReLYm8\r\n7qN1BYhngG8t2D6AVouS4IAHh9CtwRdcQCbJQUNBVdklureCZAST5+JZwU4p\r\n/zvHIXF51OH1dbZ4a9TxqYpjynX9YAkulcBhYPn+3J4T9x2hsZTpDmFv82yI\r\nT81yakStwzS0Qtsto/8vjMVMrEJDMX9WNaeYobti7xrAYRX/K54PMrW6Sh7v\r\n7sgbNCojI9YX4DLuiixT5bSk968dPh+DkCIJ5FzN12uRyfjzMCbWjXSMWAct\r\nGsyAxnbML3o0PYvbK16lOTspHwqFQllofNE=\r\n=BJGS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/theme":"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/line-ripple_15.0.0-canary.cf5c5907c.0_1658352085535_0.45307328930861646","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f37cc8431cbeafc9429e500269661e3c85c1fd80","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0617e2319.0.tgz","fileCount":33,"integrity":"sha512-NwljZoe1qZN4sAflhKCdQQrN3L7dy/8lluNWJSNaHA4LnoQOHv3aXy8QTMSYIism0wzIRVqBe5iLuENNZTcEew==","signatures":[{"sig":"MEUCIGEHm2jCi6Rq6J7C6S4RnasvkcnYNLUfnxCaHXIFQxchAiEAw74taxbMQI5/+g8Ez+zA9Z/KVBtgL+JKOSqeKbgQu9A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HYXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLCg//YD1msD7g5JV2RSLhbEoFmEdij0wrKMQJLQdPDmgw4YvqgdTZ\r\nUZOeKZ8PrDoa/34NSo+ENT6u8jZld7TO1wbYQ6It8QtPjOaSYipxyDmqIu7l\r\nmWk/2h2+kfibAo4r9WQ/skeDLuKJPumgLPLkq3Col8WBb2VSYlOoRHi74EJ2\r\npZgj1j4TApHtpvRc6lszN2tBsqQDwlL3kY5+cNjSGfM57q9Qr8L3ZaNM8SsA\r\nc1r4Cj/+Dcm8RlGl88cOIS4xfgwEry0+YwHCw32JXUUGrt5cHgVtOIpY4Js0\r\nEch3vGRvb55CG9U6qHMbIJPrpocjzui0qEkhcSjkC9SunvRF1w4zoh8dpqaZ\r\nRS6kf3/8u4cwGTq5CJEoMdscVbOs7cwFDi/x1WG87gORpQtTa7Q/CkSuJL2Y\r\n+38R8iRsnN6OqCeQ4GT29YktzMKEy7FkoW+p7DXz2RJnhNg8FNhijyYOtIyv\r\nnCxjHFAlHirD5zNY/aii50J0nRvy6ote40LWIvHTpyMLJu4qaUmD9SJpcD2x\r\n4DuOsfIEUliNyBJz8yymvP2QGTNOvfX0n1L1AnwuUNJhWt0mE6gq2VN/eBP5\r\neXN5YyHglhXfJxnPHJ+1l/K8nneGk04/tsmFv8x2GN90LOHt3saVgFZbl6aA\r\nbSFw2QOO9INJtEVsKSHcz314y7ekmO3iXsM=\r\n=z/Ov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0617e2319.0","@material/theme":"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/line-ripple_15.0.0-canary.0617e2319.0_1658353174881_0.41839713715439797","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3cd2d6056f8517cd5fc5663f5bfe0e553aebc4cc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a743b7967.0.tgz","fileCount":33,"integrity":"sha512-dmICzjrqQUU7ZYVbECrEBpuAa2uTFOH9rPKuutGfRwX6mnfwo7HgtO40MZDxecI9h9ivz/zyMWGN9PYxnyWLgA==","signatures":[{"sig":"MEUCID4ewJKG9Sz2iUroFGEMsOHjbFv8IbKHOIfnJOJDAVHRAiEAj3dX5YkLPnslqbxYShA2rMcH0RYxBjIUVsQnsQybzjw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HocACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoj/w/9FU5E9MElMvGVhtLRbSsY8FGnmDxmNXkbuTKwRd1Cu0TvF7WC\r\nGDBXzv2I1dX3o001LpyVnNv19xcOPgA9kbenSheSuypI3LNiyyOLVzRpowmI\r\nG+5EhwGIIeIVnywqWIG/hVlMV9MvJSFAaxC8d+++rKD6ynWN/LsJ7aHpVmf5\r\n7mWT51/Jr883M8/6kkqEeo9VDagxM3ghRJPIXUkynfO16b0xQPhlKQkAdgYw\r\nG7P9+gmZ0EQMr6k+Tpjc+iRyE2v4nMqHnHmecKi+u+eASW7fWk/iFJvYaWgM\r\nlZD4B9izDCT6q5ZNU8z7KDRcuwGlssk3Jdf4g+HecS4f11KxYSvhrK+XrEXf\r\nEyUHRC1/dS7sabSJyQnarp16f/GOPXJKngM9mDfEAGA2+oOXXQ2gSS+w00at\r\n56IK08AV2LcXcB7nXB5lRMesHty9QBHUyJ9zLLiGs54TppTsdR8KSyNIb6+W\r\ns06E83AQ6DfRVelvZOOV7tHDKkgWoMAsZ1iCO3g+SfFwPCWCUkSHhLUpOwxb\r\nrfwJTGqkXCfNOpRZQchNLEa/DojKvBQl/5aMj1qj2YRAdmWc0X0brAwARGhN\r\nTxxL5kAbbmEncpisYlWyveDfYNGDVmIaUfgZIUzTJIKaLFDgOyzgs1aaqTtM\r\nTJ2XPjdFZ8e5UEX0Owqp2v2YkRhfPFWzFgI=\r\n=ZjXl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a743b7967.0","@material/theme":"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/line-ripple_15.0.0-canary.a743b7967.0_1658354203810_0.8218399787478297","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ce08f6d8554f10d506e7cbef79471b8283c6108d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.69fd619d0.0.tgz","fileCount":33,"integrity":"sha512-v/pYC7d506Rg0Ozsgt/QRCMKMmFuI5fMIoFgL5UeXQcXFMzBXOtPMdkHCeUyi7dr43JRmrbWgrQpcAboA5UVZw==","signatures":[{"sig":"MEUCIQDahrtDnq3RYqowy71fxP4kwlOsGkszQdYZMOzwyNb5dAIgfwL2bOftOYul/hiKxpW1CoOb/4gExmVF+Fa1QIocYSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HzlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNBA//cNzERNMqoaF5czMHw0HzfUie/PKhZQBDFZohAJQzKmixme+2\r\n1ci7hVUzophqqWe6d+kOFaPs4lDBP2NOgMgIoI/QA4E6OQe1UcmuMKVP4R71\r\nV9OWm7QaK23EOiV+2lLPF75EvQQ3wZyixnmNJeTGJMCNkdxVwnO7KZywIRuJ\r\nLrwkAbyE/6BueFeaO/ly67e8plg5nl+bsXP9FMcwClmO5el4C2jcA5SR2dJ4\r\nMLzZb4M00ANzZYBdWLO0BJWyj542V5jUwZ6C9MIuhVnYD8DYgKQn8uBJWoGY\r\nqpqnIEJ+cQcj00lY6GYXxCmWXN12En3ADP4tUayE7EZrzlYkMqWaJnRbOEn6\r\nfh9BEDhmART6eIQwPe58CugiW376MpHLv4dbLCz27RPVX0XBxv+q1g/1pfHJ\r\ny5WLJzfzY36MFjaNDklHmVvlcBmBX2LImeWeRei6BES8zBGyapRXSZU7r39B\r\ngr8Rm7OMLUSctsYpsY3wdoj57PDVUZeYLZfIXylU3vQ6AAhx4tOYckM/ibe0\r\nNdlRBawrYS7tXKsBeox0BPMDcoBwR/J/o8OVduvvjsZ4NTUrft2BLqlp7xzP\r\nQbI/WI9qtKSudCnWXcWHRQl7+sMDga2aQMvMvX0bzj3AHcnqwfBUoxgRaJSR\r\noap+4bR1s5vjc3TE15MA05kohsrGuYYESqc=\r\n=TUjf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/theme":"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/line-ripple_15.0.0-canary.69fd619d0.0_1658354917569_0.1601606065478831","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5d3caba54c475785913e096735070599ea1f8dee","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":33,"integrity":"sha512-8/LQcVEbAVb2B0TuwLjNkJ8qr1ucSrTWcHjEGVvmt4yWL5qqBBTyonkhDIHDBsu9BEU4g9rTGd86+6/hF45wtw==","signatures":[{"sig":"MEUCIAbON4qLC8L5YHwnDq6Q/yG25Xi9eNM/J+bdo723H/+EAiEAsccaYS6WVBGsT1HtXLEZM6HHwn5wVQ75PLHVvQHTOls=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AT5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7OQ//dPV60vmdjgrpcUWd79qXPv2L45GtONy9XK+QFHeR8NrOsOqC\r\n1W+eABHIT1b+UYNIi5Vs+Z0t34rS2mADP9T5XEv1doh5zr6mNBMIzjhOQgEd\r\naOSxW1qoO78IW3faC8/jiQ2pb0SUpWPClP82/3RO2vG00kzgO5/7wh+OXeIZ\r\nAvMOtIJs/tcGgoq/qqjnFIhVI+alnbrMLCoXLHDb/38nVaw6kZ3dtsMyj08O\r\nEsYhMpB4OJj0J09aD920nG5ZnRaQ0BAGTfRPTB84+i+rGYnxzit0Ej7lbmzL\r\nASbEBo7zmmtrwjyosMipShwELebkyirwj6SnCJREkBjvCgo+EfEfDpEWA9hT\r\nGDgnv5xKhsW+8jS5LnKdU+8WI4Iy6LM6VrfVtTENyee1MNf3jotLMGruRcNm\r\nj334A/6AdqgxVP+lv54TMlXliVC6RoGBNzh9Vetj0m4sUTxxB68ZKsXGwrAj\r\nzlWzkmL7rOrHqctA0FT2nrYRTHIDRqRVu31gUxcn7cDzNxgCIui11b6r064i\r\nhR8HpzzdVtZENraH5uX3Yid2SIQdwOZZfNdneF6DNWNB5QZ9l7rQlU3CgDi1\r\neMkevumoGw47I9TD9sKQJC4vmBiMwwBGO5XM7RIuA24tdQhHGLqjbbjqZ28n\r\n/H8jwggMvRrbF6oymNqHOvf7hBWEMfQt7l4=\r\n=0fXD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"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/line-ripple_15.0.0-canary.2a6ddc1cf.0_1659110648875_0.9213144548115131","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"376a6064822a55d8d667cc3e8a49bc21ea4c0e44","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.86efd56f6.0.tgz","fileCount":33,"integrity":"sha512-J8VuTkgfRv8j/Rs/mUjNfH4hSWTL3i266x0IUvD+suV/o0EDDwIdVysG7xDOS5ngcrKSDw62JFfV8XFpDBoYaQ==","signatures":[{"sig":"MEUCIQCPPh/KjH37jLSfEu3umZ1vQZ6zm5Qqy2CfH2DJrAfzLAIgHjNDgkt72aNTDW0s7+PlOl8XBrPHVaYW45/vcQw91DQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6ThyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtFw/+Jj2m0t6N2REONrfcwaCECiHtkIruTHDiHDG28QmFH9VW24Hn\r\nVaptD3u9PxRw7AG11ko2yH1PumccnsxYFw9JJJwzgmUMa/k9oc6pf8Z2l3ZQ\r\nnjYRs2RbsVbITB7KojoWNEsS4jEVdGtzNMJ2i7rh7OwskFUv6AO7GuUmrgyJ\r\nFGGwGzCPv9LuOhKJN85f39RuXJRH5lmDCE1JPk1wKgN1Jnnh6aF0qExOJQjE\r\nYQgIzHA642wui0Ll7/T8x8BtdwUDoQCCTqsxvOYD5ZpI4qmfzY3/n2ZlQWCA\r\nQK6s1/bkBSoVwXkJ69zllpQJV8qBBmVHCMtr/2vk4k/LZX/ICzEy4CsfIDht\r\nvjKc6u9jZ4ddGIDKZkCwP5phEH/sL3xCOb/MXVElBiwdZ6YmSlnXzRzOBYRK\r\nefaqOQ7A4YIqNtrYOZTAGIGLeMUybxqWwncSyrzeEAFU7XAGDFli8ylKMwJa\r\n7CsR6+PuLaU2rWEKzNnrqhS1ieI9y2LDHI7yXisX/bCQjjyBxbRVpePRzvNx\r\nhvOq++a0UpYP4y2aHP6Ln/recKHVahKwAcKYHCW9VGpAeUHPGN9wAqXIC/Wq\r\nzci+9wTz1jYu03Am5emgG9eEDKEpi55vy1hI5rilGFiCGUJeRoY/nhLTy7m/\r\nSoUKtbSK0nLrcKCXsMCklL75yCVmW+q1PiU=\r\n=e6d2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/theme":"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/line-ripple_15.0.0-canary.86efd56f6.0_1659451506159_0.6818881160054446","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"285d0575d2791ae8540049f92be8a03dfb74cf74","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ccfc24d19.0.tgz","fileCount":33,"integrity":"sha512-hNbvN7zOjtoabyCpTfmsYyd5xCw9JlQt9Kj1GORJfEmv3fQvpyA+YFNRsMjjLTQeu2YIDfNQ8drYICjeJHtgvw==","signatures":[{"sig":"MEUCIAxFOcB0hbGW4m0Y4TitJeStzRgpZWy7gMwUamdqknwOAiEA/9cq571ejQC9af9lEptOepWZminatIDi7exnS/8cWM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rqrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLgg/+KfQl+oHc3xv8+CWHRbgSQvEybz4t3sQFan/f9rGkM03zCFMe\r\nhNbf4hJJT4pG7s2piXFrrPKE9NXQOvzqZhyCDBlw42l4Hw2iPbd9jxDjN8XV\r\nYGsPk3XB+VRjcY9Nt6Grk9rLr7wDkp00on11kNK8N1GZks+KkS0CJI//HJGq\r\npCJhddfVCV3dd3UucS7BYH7js7ri3qoSFe7uFASHkuzdVSnzAhwWWlcJtlJw\r\niQ6S5a7dtouRlmsBgHTx/CMByQ7Bdj87XKxD21X7aGDGuAICQ1H6+VHHA4q9\r\nmIm/yCj1ssQWC2Heih2Eo4Gthyi208yVVGx8/g+OVJ3aABiNxCbYH84xEiIN\r\nxi/XZXI7ir2vsNNn1hAvwCz7ycw8vNaO/yUBIjmuZlRP1yiODTZLpwJFecD8\r\nlJjxYCvMp3Zp1R7FrfMxARWDBMDjGbKAw544/XUgB6mvEoAOJ5YVG0VTm5qt\r\nlON+bRX2MogGyPXgDDVj+Az4/xD/4Mv/a6CFqnFlKyJH77XopXaTNF8r0KG/\r\nVpJbAjfIIjLniixoRu9dn+2rQ9DN8AIPefyRzPXDFYRAgETdfX4reUR9ljJn\r\nn/mlU8k1EWDo0xA86ZhvvwddyVr5zX6rzYN5n1jXKJZEZR6Xtql1jX/g7Pqt\r\nLHaHHHTbrwnO63+aLz/xjCGymvF7/oKMRWk=\r\n=Fowe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/theme":"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/line-ripple_15.0.0-canary.ccfc24d19.0_1659550378729_0.7702921110483674","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9c5d100b5d2c4120fb8976858961f06027006dc3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e4570146f.0.tgz","fileCount":33,"integrity":"sha512-khx+MkfYpO2b3/b79s0TdqUoAAf5Y7F36HR6xrh2S5hIyZ8BkgVMI/5Knx5Il8IoFisEA3Ne/qsHdAbdxFlovw==","signatures":[{"sig":"MEMCHxQlxGUp0uVnCdobIuHgyfj1ehKLoHpoZ/lDrteq0+QCIE2TA3i4FaASwK8hBS8nziptHRvwmrrKl3Cw2VSP9X/i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sEMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrow/+LbylHyitUEzLzCDSm1hVVJK4/8+/vk0WyWQ3xjZ3/M4lDxG4\r\nMFIRgbqFl89fvlq2KhuRiP7VDsZAs3F5cVtysWwflmiHFe7gIVbb0pxM8Uij\r\nxOGfvXGpwQGs+Z68zR8GNiILPCbk1PNYAFFnjRKkNdIk84MmzNwJ1TcynziN\r\nYkIzzlH6Gg8YwEkc78X1n1m+2IUAFLGI7klZyPQaJfCMzQRdXh1HFZOKaEfc\r\nSqBq/emk7nzP1YDDdD2VANycqnis3cBD6p5zqGq/3yHUCz2JiTMbdBocDp71\r\n/ikKCwwYJGn3sU2JFZswGM5qsUKyFvYts6h8OMtQKQ95j2u4zuAXhxcpLNxK\r\nscSdKnlVcCTPJnPVLqom4t0NK5lQS/YOsVxsaCkuhM6wziIcfYOLU+GfwDOo\r\nNrRo+YqEgsWY0WPW3r1DPl2wIJm4aXt4nT3iyQf211Df70oJG2Wr+038BjxP\r\nxvLINzYIwjagh8bTLsMp3Vg6QhQCzhuHZIBX3FXsrCcoy6W4Y4eJq6rw9i44\r\nd2H2hR5DyXz0FP3SzRuIELnwgpgROZmpKrMK2HmJX7lT2/6LFSN7jDaZAKHn\r\nKwA9JN9kK5paE41O61Kj6kujFM56xarfnDg9t4Mgd50qijP8Xgsiyln68J4X\r\n2ymPyOJx2NdOVoIYpSUKRFOueP6wnhdBOjI=\r\n=r1tE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e4570146f.0","@material/theme":"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/line-ripple_15.0.0-canary.e4570146f.0_1659552012317_0.8484121507067455","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3cd728a5b0c78a956490d229b8eba41b007ef5b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6683a36cb.0.tgz","fileCount":33,"integrity":"sha512-V+G1gMB8N8hfXL8VXSq2uqmDX80E5dQAGMWLce5gOk/XTXteRKNx4J9T+lF1XN43B7gryX1w0/ff4vO0aQYcjA==","signatures":[{"sig":"MEUCIH8Xo8V2zT2ISjFVnjUp2jwffuqRAi9dPXQrjKTgtKN9AiEAzDwpW/4uFuAJq/aZEI5VkNh3jc7qhdDDFebahtCDQh0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6spsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqMw//Wv9FtKSCAkFV0ZDE+/hpaa1cmlWZGHgALT7J2evBpoLwKCVK\r\nTV46F9yQaaJXGPnbdUmjdOnbPTSqhIH40YDFVdvXEpbysw6ptXHtuBfVAx6N\r\noNz/lFsOgpxWilTCfP1JfpNcJhJ7xI9MHqYeTxy8gEdZc+40EqiVZNGsbxI2\r\nx2hZDKlDJXW39/2/VkFrLCYLxRqbyBcuvx6vr/1uWD2Qsp7LnbS1KY3lnrPT\r\nZqAB57iZkDN7RLJfpCnfYiEwGFSaiuOXL5rI9Ifb2yuzYZI1bG6GGnRMJJV8\r\n01IXvVHnLl6LyBMLk+uXLwhWNvu3d+NL7OelJr/YqXnG0+orvfMo5CqIxSzZ\r\nTpZUecZRsiXZ7he4RsBFj0qFTXUNBbGprZs6Wxh+ZkZInVbzg3Xe0Iw8P8ID\r\n/dIQxBj1PQtcsVY/y7YtXOzqvtafNk2SaU4DAHtPYe8vBs+lZ9vURtFaZQvT\r\n7xdhcKeMeVqSt5c9lbn4218Mk46HlCaPZlQM/ShPbd96wYjo0jkzC4EwJvwB\r\nqbCWll+Rs7ZcFS256ESKq4EicBCR0Lz8e8qa8xqCd57tWooG7H0m2my9Gz04\r\n2Fx+2Yrw5jP91V6D23BX8/jsyBVKPOjwuk+vUW98lpMBkGG1POXpX7VpGU7P\r\nEh5GMq5p/tGeUJD4HeHVqUwnBCTBQPVACTE=\r\n=oISX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/theme":"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/line-ripple_15.0.0-canary.6683a36cb.0_1659554412682_0.5041120655845366","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"68fcfde98d2301e4c5225f0c9d862f61415f9cf4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.10196647d.0.tgz","fileCount":33,"integrity":"sha512-61OZuW5pEKdSaGnh0MA+mJNtOUCPbl1mQ3ELtTyk5J+sn7JhTeIGphU6Ca9nvtaxFceN0d+50cIdLjTkBwAglg==","signatures":[{"sig":"MEQCIFDdYfP1RarvRF4Xr7dCrF3hKyh+OvKGsncK+reVXVjkAiBIMqZLMNFEvFZnhMj+0k9XFLZhJfShQgbEyZbFc2cG5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u5OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVqw//c8T2cLH08tcUt3lO/MyZYBANMLiImDzPiyN4TNoVXlMCYZaE\r\nYOG0sNfwYXQTQhX1npZyqhjm5E7d/VpYSwdK8PoHTEh0tLIuCwfTQVTv7DKU\r\nxgBU4DlRzxrHA+QsUR10A4DkeiQ9z48XWYa2y2V0HgMrC/v1DwD4mRQmbpwc\r\n3Go7Y6DKN/uvuOdE7c5+LI3kx8rzDGr7OHsTwuZUKAxIuXFRnyftR4d52wPL\r\nwdudFciIL2gLYD78zGZeLzuG1Pd8N1JJnODs2HuaP8DPk1jSslJ36xvS1OKs\r\nV65Lnm6Lnp2nKFwTBukDgfLk6ppfo0IvDZOIgH14qCuMR9fuvb97gpjyLgAu\r\npw3BQljeRjHcgMj3rgpOM605uecapH+9gsSeRQzIS25DL0jg/GVtmVKvbJV7\r\noYEGY8niMOrnebtQbaAH6Kz+lf+zFIV18/rLRgP6D++23s5hjCpvU7Nj9ls4\r\nLBSKBNuGoSPZB2ctxxR1Chjf6KkfEQqx6WrqB8fWypQQHO39KqiyCngheOhL\r\nvVgP3g6Si6TFfhlsXY9Qck1bB1I78KFrOW+TOZf/Vx9PSCMkIDlMC1JkRO3J\r\n/bpLSHvy41z5ZL7WQHtRfOmxOZSdexuph1qb7R83iYkP3+CTYhOtdaIOJ7T7\r\nHGWVwwjlbuQhyDG0jINgR0LHaMle+49HFC4=\r\n=ZtKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.10196647d.0","@material/theme":"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/line-ripple_15.0.0-canary.10196647d.0_1659563598427_0.11679957209914882","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c6115953b0fd20db5f7a1c7db8f566eb71917264","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b20d3d73c.0.tgz","fileCount":33,"integrity":"sha512-NJU1bT2qjH1wMAe08y1VwpCkVyLxPTMZ8dZjtaewkw9mqcfLy9jhZHNKlfIac9zZF77iv8dygWUYVQRGK03Pwg==","signatures":[{"sig":"MEQCIEwPClrL3/4ng/UuqWqey1hxB9YjG66ToMgO8SthjZYMAiAq96nrXvG71Q4rJFOaCAKYstOq8v+tycFTzODV1N4SOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EtPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNfw//bw7nz7LsNsgziJ1eE0zE23tHeG9SOqYMvhforFZjOR8eu3xV\r\nu5B5/fPsrCO8Z0WVnjXRapO4o3vYgWxaJKcNbTrT8iNcFwVY4KbJmq0GdJ4w\r\nS6rZFEVeIdxYvsDan0Mion6/ktLjse2YDorSMaRjxWIDW8JqjBlFGjm+lE1s\r\nSJdLU+26H+5T7H24xu4HFi3iLwa/M08V08YzODJSfRDFUanQy01+WRC8xh4Y\r\nf3N3k7fK5GPw+/KT/hCOwJhYqyHACzhJPdxq2+xl2Y+pbOvEGVEV4o4AcCDH\r\n5FNZED4kthNxtB7O4pKZgM+35z/0Y+3K0xOdeQF2tkg+AMcuhSkggENo4GiO\r\nlU5UWUVCrktUu1t1aIu68GIQ/sY9KqZ8fiZiTFiCydL/DwLEVJO9U4l/inWY\r\nA2SUIssM/ru9m3a8FGRnzD7DcFp09y30Qmmx2rPM03m7eHfJkO4pn5lyUDJC\r\nuRZCdbFYcPz5bh2HzENz7PwnWpOZdkEP2gqqbWfWP+5CLLhcWAMaeaMdNYAK\r\nJTBrgrOnZpAO6f88TXnQbZT9xMgUO24rgY1kOfKHE9ax8ilkK3yLMyC4ZJVU\r\natGUIAgUVHh0g5KwDJletGXxguIrsxu+NuRZPErROR7XW0XeQrpwviZZVCfF\r\n1x8y3bHlSUSAb69++u5qrhQoT4GJLfZscSI=\r\n=9qF5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/theme":"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/line-ripple_15.0.0-canary.b20d3d73c.0_1659652943346_0.7254727778382293","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28735d149ff3c0403de65efd41e243b2fc22b12e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":33,"integrity":"sha512-fyRhXaMKxaj1r2OS9mYhHop9dHHNOs0Z2/SjjrzHdMB9IZ/z0IHlpdPBNiBepB9Ls32esHPvlLsfoh4xgeV8Xg==","signatures":[{"sig":"MEUCIQDOVOpWY0ATreYusklEZT7jWnMtd/Ur4v/7cu65++gJyAIgJAcIJj9M52S5jOXtu5qIWmvT6C8XrFa0V0XDe9E5/zA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nsbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZtxAAknFyoJnsUYXyZExuXsbO6XO6G+odcFtCJT+aMN6YrVxA4Hhk\r\nFOf6rZAHAEK/3UIFUKc4jXErUSQHK90OkWjkptAdsdtxDYrQs94++QCYxuAc\r\nt8pq2KLrCyewxectJCigDKZBRbai3Z/qi59qxhhBOf++7G1ABb0LVYAgBot9\r\n/g9vX+M1284uSbipnl+MnmEorREWKiZ99rcQe0tCTLSc4DHaoYDx7QZGLkDb\r\n8PDwry6tplOVlqyqys/g5MewnYnqgu80Wwnn3B+bx5FN4CnJLQreMKwL/GVV\r\n3Vp1bZY53mfRgv0AJqQfp4tyfA6dERooyAyr1GtJQ79XSsm7DRyxyDxiVzlQ\r\nEHTaEGBEtX8RWDXWN/trLoYBM+RABaLYLlkOQHP7grB1uxv7JvolvBXr1s8w\r\nvRBlJ7wi/nteblk7pbBMmwoS1SZ7wQRnAIRN/bgN4IMWVUe107Ygs2/0Ewqw\r\nIutJFErQMoIW+Jb9tIqZCRGpxTOCeartj2E6tF1imAw4g3tU5P8BwfpenVMH\r\nvxzoJLiOn3tIOQ1BHrbOE1gSDH4VMPhWaT9bsOKX0surKwJoJJk/779Rqr0q\r\nwy+hGjljNjtSrBPbs0/rPsQHfTj8q/R/Ww+gHPnaU9UxqY0IaaPGFOLjZssc\r\nejHKPgYkZGqVfOlPhAd8YX6XTSpsCa3BLsY=\r\n=6uZj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/theme":"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/line-ripple_15.0.0-canary.47c0c6b1e.0_1660058395056_0.07392344840483323","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c22667a1f931717e10a2796f7c72533ffd8a2c43","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":33,"integrity":"sha512-46qs6u7om0jkflgl7Pu/BJfSTkVAq3rVEXGFrRFsbZ4iHwSMVKAXXEch1TK+RzoNMTMMZZ9kYeImQ/I+k4oDTw==","signatures":[{"sig":"MEUCIGD5cqJ7WaNJnCgOzWB9wZ62kQFwna5ZROrjbS8H/tP7AiEA0GLvVbqDgtx5IfR0bZFx1npzZl2qzl27osFdcrK3wqw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U5IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoh4Q/+JyfLrnpoRn9hmneS0ijG03FUNubqijRDYrJayQ6Shv9zIdIK\r\ngaAp2QOvdjbTDxgUcVjBvscyRGCEpbJnV0PCC43+a+FOi+dz14sdQ3V80+sD\r\nabLTHtcvB1HlwLablhjaD+UAcBC6EJ+2kiMbs7OPnixj0fCa1+knjvdjAgls\r\nt0mQp1x2t+m5LINF0lxUjqekXcd3933KEWMQFWQu9OREx3DnSTz7HI32syYX\r\nFIVbpxcYNBHETjJ4JmJUrtW/qK5zJESDkB8RUouO9x82bFhOtwVFy6elxY2V\r\ngEV7yy7enVXOyjxLkCDsdfu8R4lFpQG7QYGxnagcu8JKl4tH2MvYfAssUFEj\r\ngthPZCmGhGR98eCGWawFSWn3ixhdvPOYEmo30gldRit6lWzYjAPGd1VMg5g4\r\nCtC2uP2ZQOor1X5VKi/SF+RfSfhakzqKh+rtBI7tYsnIblAhfJxfZFe+EMho\r\nWlJObAOgl80A6jLQRKHpKpYbfRn9vUglmScQdkzFg6kl5NZ/Jr/5G5OEBBim\r\nAX9dNkQ2uRNedm96zlKbVgqtj1JzQKCP2/6OEcV0EgKHx3Lqwc/5FHRuXUkQ\r\nxyfoMkjqPCTY6viXjZDyMFFZbznAA+XW4IV7c48s2TnQ0SJr6u6oKDAQLdeY\r\nbb9XBbYLpMEcxu86o8MkO3OWhGRI6srnzFU=\r\n=YYkY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/theme":"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/line-ripple_15.0.0-canary.0e3dc8e38.0_1660243527957_0.5409485022871461","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe71ff637435ceb1036facba0758997e7b5c1ef5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":33,"integrity":"sha512-V5f069GfOj/nOkPlujBpfAuGiS4uWxRSr/TjYkfpepj+A2214bN3YI2zZgNClU00D6QeJAqOIPGslXryPGEnMg==","signatures":[{"sig":"MEQCIHoc8n01MafRadLX0zmQadbhDd25KuzMiG4hB+JBuag+AiA2dnyct+hto3FoSd7NaPZUyNqcfFpEH5ynf7up76o7CQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpahACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNNw/+Po+wVCFM628+ICtUUHpISjkrGOit5f1fAdeY+CNIKl3JN+Uc\r\nKu3hx489D56B5FdXO92wETP5Lg2x1XypUtJ4/Ertnmr6P81yaqsrHFeVK1Uq\r\nySdARK2VT21UIb4NmAnTgl/e/j5CGvv813F4+s9wJb34HlKiEGrZPNonqWPU\r\nXNi899kMXmbTO3kYxcGDkZrA9sROeXiH4VB+kA8vf+/fWB5cNjQtq+JngxVK\r\nXJKfB00Zasj+up4qQlLJC98Jd4I6AgJ2UAtAv8LpI7dFKj67cUlU0pKUNZLe\r\nRaP3iQhInyNsQUylTK6cpIPE2RGjFWjEX2SQ71s/npxu80LkI6+Qqg/tv5js\r\nogKGtdo/PQ+F5Q3U9VY3kOdzcscckFPK0Yw8wMC38t4nbC4U/nnybg5/jTpL\r\nh0mPrM6k0SDTYxu9ontDzXOKvYx8BZPBcqrkYebrxZ4Tvqh+02a3jO0b1vAg\r\npS6jdSY5VBMD4ZFG5e+WymvjDb1439ah5tk75u9r8erwogl9yeN5yic2gRhI\r\nbG01pqJTvTKnjm6ZiP7jKJRq57BKyW61n80nDsf9CinyHy3cVpgY6uwo2tiX\r\no1Tvc2Zex6Sysgu8NWuQnKQZFdqQt9Rh6iuvhmqvY6hV8Z+KMQw6C/PAIw1I\r\n/SazAVpLEOn1Y9m6tQRwPAV0a8C/dGt7+bU=\r\n=6XVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/theme":"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/line-ripple_15.0.0-canary.d5a11f1c8.0_1661900449245_0.05869083712410683","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8e0262c764e47d8faa78fa569ac81809e42c45e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bac992a95.0.tgz","fileCount":33,"integrity":"sha512-YDc961lAeFYFWswfoYcNxPCOVXvcTBAAPGnD1P/NxEfcx0qMuxBQfZA36/rslZxDk8kLq5dXvXx+VqHB1krNoA==","signatures":[{"sig":"MEQCIDdwJ/xwbkgmfpynr68o0Zbj5ZW8noZWzsrNqblz0H/BAiBT1cOI4wVVCPNFCEbBV/lDdZfbmV1zgE6D6uazLgGNkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFmlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqM3Q/6Ags4BR/8/x6+3vJulPx1Emm9ExKzqZ3TXd5pc/nXTdJsY1wv\r\niGlu2zDZepY6lWRXixqMTjH+pKFneO2OggVJTSEuEsP36kv89e1+pCjAkv7C\r\nLbCmIA+qtTZGl13GbYsbWQxCgRnvVyQVXXhV4ilUeIKOog4zr8IfiQGd01TA\r\nTwoLRi2i/Xwyse5Bp62s5aB2YrtJ4xRLPdTRd7breGe9Begc5v2Faf9h5+rL\r\n9F0cMmM1LBduiAmr7uHz0SXoc/Pbuv4YCAf9DH8XFHANH2j2r4oKjMaUbJxd\r\nmWoBF9cvKOTbx7F57G5OoWDOymEnN8JF8ph9tM7IdzJ4JOPGG4DzL7lQFRH5\r\nlOzFYZoP0xaqI69JXY+88UxzukMB1pQRFTmro7YCGGUHhTmTWN6A5gCO9xVT\r\nDGQ3fnTbQmJDvKpWBZkABmHMxS7lW/Ops9mLt1CHYCghF/b7LAxlf/uw1/US\r\n0vNDsVsa/7k38OgfBlJxevDdXsmFSPg0QzNVQ16asLbXpDV0oQQr3kILcreZ\r\nvPCEPqDkP6ZQ52VDedMvdick7LuPMkfGz/m9hbtaPQBNpG/3J6Bk2QuZ4LDS\r\n0VlKlMwmeKzD4ThoNUHDAZmW5isJmHqnykuuZU1lOwWyW3Jq1wAWdSxnQPx4\r\n09S2ixdcLvvXe/gygrPluYccJP95t0XPr/o=\r\n=30nR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bac992a95.0","@material/theme":"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/line-ripple_15.0.0-canary.bac992a95.0_1662015908805_0.9122021288409099","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"995d47697256b2fc640a3ab9dfc88a99201ba3a7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d25f3404c.0.tgz","fileCount":33,"integrity":"sha512-GitOW7B7UwLEcjdlQt5IsPH4Y7Z6gna6cSyW47RAKQB7TE5BxYJszwOtN9xeIwFhBRiMkiOO/Don0Nuei+br0w==","signatures":[{"sig":"MEYCIQDdzICgrb47Mda9fbjpiQfm0ERAuhPsG8+ju99QErR9NwIhAMXXydZ+SQQyWWAGFkioNDiK6b48DMkALAXtNO83fZXg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPjBAAicwyDu2k4ypdgPuAfOwoU1qifwn3Ah/qAjeFCIOU93PBzcFS\r\nhBsaeC3l/90BUsbBjGGpKk4d7e8s3ppPQymrtU3eodpZalcTcybNaZu0zFG1\r\nTm5DLQTn8Qjy+eOMI8ezKGTthatAH03h2SU4zsyPhGvhPOB7+wOR5QdWpjjt\r\nx/1OjugfQIJl+xpy36+jOhGCSEx+akbL2qqeSTecn43Emw/C8wScihq7n0i3\r\n2CQDqmhbJ2/MaG2XMklTV/DEILBjG9gm+DYF5FuZaloVLXTxvn5pbIXxGjXc\r\n7C8xfy6Kj2j54TPmBDOO+psxSZGAvRH9KVEhxetiYAdx/ke9dEj3KpEe1Nox\r\npZI21PIpUOrBFukJNSUgjgikFjPanoKCOnyssYEUCfyNLutNxQ9btKI5+Y5q\r\nSszL/PA6xuzK5XqaKBOLHDva+xx+roM4Uz9LWbOlFDqkk3kz+/tYNQZy89Vl\r\n1KgaI0UX+Zb5MDGef/vI2+dVG17MbfPi2/wwKZKfzcY9ESbcHHAL/KCzWeUE\r\nMAX+2p2tm29LPp4YgrV9BeR5exTzfRs44IMrZSN7faKHXEPT762t0LF14t1x\r\nA4IMdw9iFAzPSDXPrE49VqWELZVTBZgSQ8ZtgvQj9gAg4atWkZKrawkXazB9\r\n2tbJ6GfNBgXWb+AROYyDhwFT/xHH6Lu28k0=\r\n=6RAj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/theme":"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/line-ripple_15.0.0-canary.d25f3404c.0_1662025437509_0.5922170223606609","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"abebd18e518aed556427a22671639f6f7f70ac4d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.920d8a79e.0.tgz","fileCount":33,"integrity":"sha512-PCBTlS4LbZu67ktQByx8R4WfEjWDvbnka3f9ZNshjq3KHuQ2SW2XQ/JjboBIuiE4r27gXhu6Ad73hpqPqjOXUA==","signatures":[{"sig":"MEYCIQC+8s9xwcHR2JUqBHEGyc+aTUvmbBaGjvcO+Sk00q/+LgIhAPndx6WMiA1PVyynws+CSK1MEhym9CgwCN36R5wgbjgX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERQKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzUw/9EtRxBtk7rvYFqhjwdNNk72sh704vTBy6nY3jAp3M/z7qetYq\r\nvZnG1U7jJ3b9IE0HNsX59XWKHikkyebr3J1ISP63hXJ5O4YIx2ELroozYpsL\r\naquoh0Y6G6R6EUKgNXLpJNSetx5d3mAdajPlWHifrXrh557vzJOQNfavnsdS\r\n7SF/Xwtprf3INP2AvScVm6mP19JDvwdTG0mXwHaXtOSJDfO085DNhU5uuQSY\r\nbHeuevwXkEfmyXvHO1B5K5WlChyjiFehoc188/7ni52jGV47K+LyIdecQ/aD\r\n20HZqOQR2sAC3FjfIWcOOsTRsagbGp54Vzjbs/pSPZtdHI6VReZjWi2OtrZM\r\n1a1uNuzogvXO/vMvdrqlg3GO6y0PRpuLLb5TRWKaWTFgE1Ij4xpS4nuC120Y\r\nrwuzO4RStT4JMbrem4HtM+m2vF59fjihhUBXft6BKnQ9IzeK9fMN/Mxbbwc2\r\nhD5mdRFS2id4CQOa32AvWHf/Wab7z97U92IzagDFmrrNW8Iy7YDXSLvEAXL8\r\nhx9ApU1DmwqRy1yy292FXsrLvw+ceG3+Bo5KDUr+TIeymM6Umg3pN1liSFU/\r\nsZvYymbR884eCzrkw8xMFWZbFOYEk0M+Ls+II21UVmrJC6ogy3GtlKp7pPya\r\npAEkXMDvUm+e9JsFVpbca69qy0IEacsn4bs=\r\n=kBNG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/theme":"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/line-ripple_15.0.0-canary.920d8a79e.0_1662063626734_0.6004890689461673","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"065030f73cd0b8f454da9403ac895be93ca0a2bd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c363f267b.0.tgz","fileCount":33,"integrity":"sha512-gQ/Rujh6ta3a8sZ7bSV5sCabTsTvcNApXJzDKsh+ShdMSV56denmJS/E5TAH9/TcCvqcl9mIOVhtYyl4bdxmxw==","signatures":[{"sig":"MEUCIBdBoADrsZ6yfDIGP5vSsPUSDzXRP2UP1W4yiGTAnVyEAiEA5X6KmQbevTfXAEa0fJzYM+cBxUi3YzEJ3OWhc20QdoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESF9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6sw//UNadAw2xZeNhLEHQHbo4mgXNBk5jlUMs9h4b1j9725j2jNjZ\r\nW/a2RnFGAjesPjwz2eww5dcjIghBoL4eo0/7Od4MyfrkyZWLCGL7Mw/1sfG4\r\nWmLBXxqWQPHz/sGvM4PBZNjSB4N58KuBQza407ELpQ+WPMtOktCfpfNOfNDV\r\nJh1aAE796lELw+e5DEVluvq3DCxONiGI1JkGQhTMRygWXx4AqruFpSiwFpPV\r\ntLfSbfHSCHk5gnXi+rq3eZa86BAGUe266WrFA5LzepwY7lGWVw8CbrsjCBlB\r\n2lySc7LERclrYPsKtNtyh7rBWs/FZzYlbsLalXU/eBX0irPEClGGxwZiu2hd\r\nOf1q8+AUh6obRwUjkiPMuKQO6iHT5f9OFYOYSyOHd/qS6xIHD4arEE6sjUGz\r\nHTDq2yfIWCztC/YGCEUSOImuDsgsPToVHCpggwabmld++SmonsuVzPsWiV3p\r\nxJ3uFj6arTrIA77csGN3AuQ9OB7lg+Ext2oT4TW3z+LTvBgxBIEioFblbGcG\r\neOGO3GwkMS577NX5Avz5R7N8sxh+1k71DyfSZUu91r/BI1C80XEtfe2cv2/R\r\ntk+P3tSxkMDC+n1T3/918IWwhO0V4XeVEmmbYkhvaWoqWOqPuvrYApKK6R66\r\nRG7o4akWreuULFVRuI3nWVJje9Fes4y1iQ8=\r\n=zWpE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c363f267b.0","@material/theme":"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/line-ripple_15.0.0-canary.c363f267b.0_1662067069170_0.15090498682379172","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b3450d6ab905c3bf14ffc4cda39dedaf79cb8a18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a4eb4937a.0.tgz","fileCount":33,"integrity":"sha512-0mLxJeGQTYZi+Hd7HNDSGGF4NaKbj/Wg+O/h1fXl3Kr3kNfub/22SaN9brRuMzEY+4NJG5R8IEjHXJM9erJjeQ==","signatures":[{"sig":"MEQCIDV5U+EFpdmg0Db0U3G2yUuEMNtZbvwnVrNSYYpEZ8i2AiBGj1n70QFqRuZqoeRpQTPCyq7qq1HIibWFq+sGl/LsEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF48pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMKQ//VSwC5B5P/CNtLvFDTYsFfbRpKeMecbDqnG/NQ4GC34hfVqVi\r\ngVT30h4xiqjTRD29/DIFwwtBESqmRLtEDYOOMObdZZwbe5F5AzlIu93xUGUg\r\nZH2+Lyp6ffcXiIiUR6JJo9LruWF8yHjJENPflh/oZ3UD6cSWs2sxsplrz9TC\r\nkM9TGAsMiat9FN37eFKh7JxkUeKakcYF7nFEvsOcVDK6/bJ23eZM0tJfhNVn\r\niNpCH00oD58Uaks63EG9CWQYa48mihvPlpzwjjnSAMc7HQXPj7bVYSbrjv+c\r\nd0Y7TLQDqFFu39E8Ux2OPXCC9FD94/uiK2yfk+pN7RZVeJqFfiSvUy5kgQ4Q\r\nDV/mtBN2kRCMfwvecXfgxXFniygswBNQuIxJDD90GEYF36AnlwtEuns+GGD9\r\nu2HsDahNsqWn14GtjPyGqnHGs1ZWHcvHfs0dQ4uGHCujxHt/PBI3c7gut94+\r\nN/v/V2JHhDsHuIdxYuFq3mrtz9Zd8Vxwobj36CBCuld38eEVj8+BbQxZ/weB\r\nVH1NMSGBf0nlZg7uhonoXAi16qsdgyySRjLv9PzbJXeHjEO314C9F/KHmC+G\r\n8nf2xdPKkvYSmcKiYtWPrOpeKyjE/a4PYNU0Y57KTiVgkju7MLbgcv2pvvze\r\nbO9Y9Oo1uln2/z/HZ6hfGg2PmuOzqI/hcEs=\r\n=p1js\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/theme":"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/line-ripple_15.0.0-canary.a4eb4937a.0_1662488361072_0.876506868756195","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b12b2b0c4222edd72d947d50923d8d8aff3445f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4299717da.0.tgz","fileCount":33,"integrity":"sha512-bWO7YtjI6rP/ium8cvUPOBFOOLDywYHGm/CP3EnDSd766AiiNHHsIrG1enRx3wm5TjwzYoNqLFwoqOYGL/KE/A==","signatures":[{"sig":"MEUCIQCiH0typBt1CG6Bg9yfIA2KV2Lj+Ly5NYxk/4lbiW3KzAIgEd5eqW0SD4dncOYGRNfZbWX2qNSonviU+BZVUqkleO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMOQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpcjg//doFvZFcXNvQpbPvnjvd2jlLcPLixadP7UEQ0axgAfOLV1WVq\r\nt3bdqeKBx0dmpnr0U+Zz9TKSRyCoLxRErU3EQHOvoB2i1qMkOrIo20ZlWtm2\r\nWTc+z4nhxx65RQANtVoBqmoiOuqFDlFSCXEgJtS9Xo0wkoBSRgY5o82BXq8E\r\nfzlIZrBdsOvLBh5uE7bkw0LCWuc3sfJhjrIR5rOv9KiSUXUE1K5w4GSM9Gwy\r\np4RBg7fX1Eoh/9ngZ2IMyHTFa5xXa9xnUHLBKXrY6e1hk8u/JsYlDqxU1a+L\r\nZfYAiHlHqTlePX/i4Q4bGUpu3TRCactadbIrzqBI3xd2JG4fb4dy+Gav+bqJ\r\nGLsNps/KRzGjRAy67hZJj2qCgovyfQpH5t049lWjs3MUCR3+gmSSTQl5nruZ\r\nq5QFnWc5KAlYEGL87D45Vs+qZtWwNyT41FxFw8ajnn1b4Us3QC0sVZVUHMEC\r\nhHZ5yWjadaLA5q8cIygK9mcGpib/mwPaEtH5QjD6XieySprZHk9sjsk6K6SA\r\n0tCbuZL4MxbOkfZRkaYSY/pqVHxRUXuScSaOIDuqbIdrSIJ/bxWIH/XWPUun\r\nnDeIICd8GtbQIX++75S1lF3fPlHJwd+1UmZKZ6RZSRKNDQ69DFu+CnKLOu/m\r\nJF133fq+aySS8n3bedUfq2oTG2eF1+L6l2Y=\r\n=V3wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4299717da.0","@material/theme":"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/line-ripple_15.0.0-canary.4299717da.0_1662567312499_0.8255278715954335","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5575c7593d86106f8e25aab3138a0055a7d5d1a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":33,"integrity":"sha512-GHt+BmVg9zd6U8lJh80Gq2wl+O99TBy2bIimKwB6JlqdXFGRV+BbVwNE1WZiRX9obwR+v76QfR9bX0QStIpRYw==","signatures":[{"sig":"MEUCIG0URIpyDSd823YTvSnS6ev/GzJz5EzAANY5+a3ZjIjPAiEAgVk5INdy7e3YP2yAwOOCH1Ax9bd3UXZERUM9SieU9DU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO56ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Uw//RN72uOAy1InEN3QxNkKZO8nXzbb/BYXuKpvfM+ApB7Nkf9uL\r\nHbR/Lsftm/cK2G9Ae5vfw5BEE4GEwyppx1ws8k/UNuZbRv+x55lmj9hKxL7J\r\nLrB+ul4cDXak8NIE3Zc1lahhhePVhltx2ranx15/aiUuvg/CGUwWiSe6EyEt\r\nlZHYJ931O4ZFeswskYTIlnO/IEZnbtbDjhKg4auxTUlYexD0JKBZ7pkWEGkN\r\nBYpMJZdmnscH+TJ7Xvnqe+ubOcvVbvbhrFwfeOkvgvWIQz4CrYAxq96hUfK0\r\nj7USPk/svOTqxyMbqQmUcUM49UyGafEdifaE7RcWhuiN0HGBchicHwq2hZk/\r\neMPOBDpMX9si//UhUFUMFKtruomcvkJUNLn9HgEe8iRdxYnAzJZ2HHym7X8p\r\n4eaHWqIHhq0LcKByneKdZKRQ1hUeDafQu/L3SaR/5rwBL1+DV3C02TGVzjYB\r\nhsQEVMtuM4nGCbLnoT5SrRpBpfeM2iHp+3ldCU1aiyDkCF+aaRFrjGOJn8aV\r\niC/emLjUrKAio9rrVHLEB5brcENpNGX6+KupvIsnU6vNQuY1TCm3b32y6RSW\r\nlu6xeyC+gLM42mBqct0Vxl88AX+Gy9K06sV6UGNuyQ52T8Us2Qu7Vi+U0cuK\r\nxAuba9vOQVVsp8WbG53x22Ht6dzdmqqnEac=\r\n=ufQG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/theme":"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/line-ripple_15.0.0-canary.fa7d8d44b.0_1662578298241_0.3289804299342862","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"62e73031b0d04e5666ad60e8097b20c688e6bfa3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a40e3c768.0.tgz","fileCount":33,"integrity":"sha512-Y1vPzqOunku6I8niPZubjQlBQ1zF5L7FZFup3io2lm9gAUQFCJAtcOm/0iLWxRgvkVv+m8Dmzs2LTl0SAvIGqA==","signatures":[{"sig":"MEQCIAv991m5VX6Ihmel/fSNSFoyYxiy4PpZ1HZf9VEuMSqfAiAwFddmHSg5fAaSOQvWcAMH7N+B6V/gz6nd7G2gnePvlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5wRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVcw//UrOa0LHiCo9pf0wQjNZpX7QWOf889kQsoVISIcl5EMLLGqDX\r\nKAxZTGw8WF77WtJBKbszqT1Q0BQHkodt4j41luifYFK0Pqx41apBx243IHta\r\nxlLyKkgl1yJh3o6Ot7jQMNntv4+MxIfExHYMx221MaTOZMx1Mwn5wybqrPfu\r\nq/tCSCenbpsYtZNhTlRcLjqtLCv2Kdu8cOhiUYHoD87A7Kb8cuccQWt/rtIG\r\nZMPfEbS/RDrIrSQDp9A86lBVVUAxcm/p+EdAIRzUItJH+c0Oa7/pctqNWu/T\r\nc/Ms5bPK9+aaiaz3QtkyrxJdH8F4ESfi3VfkTcHjW+KGxixKwJL3d7fkAGnZ\r\nzyZbSN1YZhsQD5qb0pl9nLh0gOweiVo4bjWrQx6Q5hyQFamczRs3e74VT2np\r\nZVPbHATwoCXDcuc9gBrom5s630ScY5Ni76xmJZUt763jmd6KcieYEe7NA5zo\r\n7tKomUxLc7LZmG//KeKNrGdZ967dfj92l9r0TvkEruEoRIQ/JrvzFJUsKAYs\r\nCxtjBu1JCyGzn1hG4eFkOKH6ZZXMvTXEc26zGF2hg7+I58A4PiLtn1iXFOEJ\r\nf+rjnP9GXT9yugEPVl3Nn+2hb//8i5AOPdIP7iXhHJvM5DEAcZWDrZij4SP2\r\nponZUNs4sYRnkbU5zgMHWpHFo4q8C6kvPig=\r\n=jGb2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/theme":"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/line-ripple_15.0.0-canary.a40e3c768.0_1662753809637_0.5857993791691947","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/line-ripple","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3959ae491f125d38b34e982198240cf56161a3df","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.18cdc9a00.0.tgz","fileCount":33,"integrity":"sha512-WeNJoE8ZUQwqJ0gYUvLX19aknZh1rk2owpnnWJeIvgQgT3PzKKxQZzrWGVp2rngDqjZJAVrwsk+sGzRm7ppkJg==","signatures":[{"sig":"MEMCHw2Wl5yPJV2suk5FfhGUW+2dG4Pd8NywLhNBsq5f6WwCIEE+HOkmi3ujW56AL18zML0p5wBkCD61q1oKmZDNtpB7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH55hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxTg//RLiMtEA4ZHFCp1LhZ+grIFyHrYf9EfgUViU1g6z0a078nEgZ\r\nhqmc71bZaeVfvyslK8jDAu6F7D0I3ip7Nqk4UxK1XY9t17trKbjMYJXzGN3z\r\nwbDBxbcC7YCu96utQUQR3wTnE9qfaQ9RlA2cF3qMTGaNA/RHfh8fDb/m+I0K\r\nUDMMLHCdBmm9Q3I2fdSbqupufKGY2B6TRCzF55B/TbXmO1hAYL+Kk2l2Cyn4\r\nU6mgM+XCUDzecLGZRIV9C471k/NxIdsDdylCjT+/hi98kUWLvIw/RHED0Zgv\r\njRqyU/hz1V7fv58X2H9gYZCvgsPvHIKzEfAb2ncUeBDQALCp9Oh1TmJuQsT+\r\nL7e2RbLUxuwoagQFpVindwTVY9xfkJdIGdMHLuMamo0Ee4L0asTnwb9qVbhd\r\n7Nnu/h/P4GVVP2yzscv7I7Z17hOA7bmPCBj759cAhxbyVEucs49OgYd0Xd/d\r\n0QO87WBQqU1lvgHasoG+5rTUr0DwA6LSXpUaXam7zQmZ36jfeuF4Dvds3t3E\r\n4EQNe0VJWCala7/sXuVMOsR0YwxGYrNW0UgdKam9Cq21orWcNy+gmDDakRDC\r\nj/wGhqwBRoNDfR3bodPH8N9JhMtCAMMQNsDgkiQQZUXH8INJjIrh7CMWr2Ul\r\nExNjBNix9ZpFy12tK2aURv3hsFtuk5dlSy4=\r\n=3MKS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/theme":"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/line-ripple_15.0.0-canary.18cdc9a00.0_1663016545528_0.2552455611929543","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4a5cfa81de4dd7177cd3f3a6642b0466a03572cf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":33,"integrity":"sha512-EPmpyo6XvBspFKgojJu312U0dFX3+yMw6KSl7cqmd4A8/0B8zjepprkLDhasCEKHRi+gLxlh3mc+75RKjpGwdA==","signatures":[{"sig":"MEYCIQDsHzNdCJoAs5qoaTYwY2p3jdxFGf3I6BHFH0wMNDAnFAIhAKxWlCKzcBqAjPbLpVqRj4jWtRA2NALWeKv2NesbeFaf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQZyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9ow//Ss8ewGPS0QgW2k6a72akGV2K7gKdxUS0oKW9q1nQcHnplBgZ\r\n2dfnIQzi2VCRQqqZyHucekEnKTEmEqkcngxIyARRNwPmM1DhllsTJ8PoDKxc\r\nMo2q3F6rE422u+iHLb0kXyOOnUieZZ38/ZijmycaLoGJbTFu9Vn6e25Dn3nR\r\nXwgJlOC9GaZLq8jlXRw3xypBLO18QB46gtJA1VCy72ZDQGGZN/O7vNwghmfp\r\nfS7pbyZl7Qph1oU4N+/6Y3Udy12ZBFJMZx1PFef51lGbja+pLHZMTIUpaxwJ\r\n02NQeaOHXBVFN0/qB7YR5K2ds7EdzIYSwi2s6kGBCtCeu2ocIfMR5JQKdysO\r\ndHC7R6DQFULxDp4QkWYOXHFHjw2ikwqFKOuY4szuAtqU+ubJPuQnSnRj5Cb8\r\nUbx+laaRmz924B93rbni3t9u/mJkKREw/rkEVaUG9Rd645CzKeKLs3eHmbOR\r\nHj32YiMoG8sNJ4sd/k12uM+e7o010tbzak+N98mMclm4CwXJrvXsJk0xkDBI\r\nGP8uQPQg391WDn3ASI4PufRbPSwGMC6S/td0ZZ+lQpWrDQBFtW/ArpXmndWB\r\nVW/AnmwKvMoj1q/N2f9TtL1qLPhF2clOegim+aoXTZOEDILcwTkl5ZGp4VIc\r\n2o6AsV6Y8851irp1UYEgC0hJgD9XKZf3GB8=\r\n=WrF9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"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/line-ripple_15.0.0-canary.7ab3cd3c8.0_1663108722648_0.4950582001530335","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"577eacda54b0bbf866215972dc1b42adc81b7e93","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2860d244d.0.tgz","fileCount":33,"integrity":"sha512-AXmNjyjG4l9XQhBWNI1X9qvI4EjKCbdMHF4jETutrEnQpL3V6cpPz3V12U0kee6BqMrnbS+RbSgP16lGtBvRFQ==","signatures":[{"sig":"MEUCIQCgxGBkbe0eOBMdhWu8jyB/eD+y+UFkr6v+bjkRp/2RIgIgSXFtt8DsxNorTrgUqcOZoiPPtwPTOXZM2wDAjjOcqqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP6gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcCBAAiBSoxOeu9LxMnhRsaUmck4FWvgb11tN7DWQ+DXTq78Mh2vV+\r\nl6bpcpLJacyPdfbnOH0CoOh115D+yfg53dFQvwAtc0iBBTVjUA5QqsIKL1xh\r\nSWIyl3QksrigLsNaP/dx0b+FFMjVwlav81HthDlzfD4Y/6MCOp9QTOXrOfC8\r\nQHlo2oRIz6R0My6Yc29nICTILaioQVu3n1jJrTco6eUiKbo6aYNZuTdbI8gr\r\nLyYzPy0S3dcbtDwK/0z2HjNd+TymNoCX9adM+D5GvGsslhCOqA94LetzOH4o\r\naegtQkB/jRHNoTAkrKxnK+hT5OnEX7RZIka+tAduNduErIXIM2ZrUGgaDq7t\r\nvJ4u92vc7pyLmHXLEqxWGpxAgPIJkFlkmzeGdm2aza9vQgCNVXmnfyYxoHyI\r\nVqEOoyi9tK3klxGJWxdyMkGf2OROKN4CGYwwCyN3Fo94Ck5uzIazIB49ZW8e\r\nxZ2ahi0Zyo5h2WIo1TNY9EblnDiw6Yw0ooQO/u95PAYsoswn6cvtdAx/Iy4Y\r\n7STCNmJnC5xSZngFKk6l7WnSkS465z2r3ssYPMVYGhHUffWnomyiHnqEiA4E\r\nRGDtFSzbQ2LGOTCAIEz+Oo8ZarWURW/F3sbboNdVAxn0qFLj54LVjSPqDEFJ\r\nVOc9Ee5zNUbLBevKdDovVIsOdYSNdMAXHbo=\r\n=OqDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2860d244d.0","@material/theme":"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/line-ripple_15.0.0-canary.2860d244d.0_1663368864330_0.16830209837760135","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5085ffa5f050e247771453c9163afe5fd3642459","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e8726533c.0.tgz","fileCount":33,"integrity":"sha512-hmSu2cb59mGd5dhwwxX0iRN9dktsl03ou5T312DAu59QQDk975PryB4kLlMp64+PaoT9DB0Q2xQxS4Jzhw7IVw==","signatures":[{"sig":"MEQCIAhtk06erU45Vd+1jzjVXz3rxSfn28XWNEj9BHdTCQvIAiAUfzLdglQtJkq9PEJ5KhfntsJuwudwzWtxhdQEMIOLLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKh/JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjfw//RMeornBEK3rCCfTf8N0ZhZyjYVm4TF7hMk0tKuZv6e0HIG47\r\nHsWBaGDBPyX3ePitO4eQiQ//Od+RwBZXdEQ3u0WJgtk/R654Ba+KUF3xAy2c\r\n3MV0ZxAoXarRIoXLygcufUdjIWMe74ePiHp7j5xWEfuLHSBPeOD5meOVysW5\r\nPRz3ztXMtjRvQKPx/k2ymXF89TuogJqS5W6PMkv1wKea8rQkeHBb/luDLgmy\r\neEnnZfWJlZsV73+F1l8mDQCfK2g0SLBOJr4JnmmiEAXwZtCbbOXyNrv6Djo0\r\n8afVQuCvtMfWsT4ET/F0KDuEdGTUJzcn280G61IngWVpDGsu6Ky3jAtdBdty\r\nPaV7q3B/IhEO/UwD5eKdVKvS8hmXgP3eO64FKsKHwdqr24M6WEPay1gx2hZt\r\nav3ZM/alBBCfjCSs/UDBv057LCvL2qpNbK9THHDLOGC1r5Bd7MBki/sXw0+N\r\nvCpHgmN7tihln/R77zs53+XZoRFPktAW6bpHSvbPoqK03FBGojK+BdvIVbtb\r\n4cwQc07EjMOgnsGUj2gK/vhVbaF9pMtyGcD4YMM7G7bLxMdGNG00gxsNQB6f\r\nQeQQv28M8DcG0HELLyv7cbb+eHOyYj7F0JMli9+6anXpaE17Qb8a1/Lbvs4w\r\n5IoojqR90xuVP11WIbkCpdSQuImImMQpqmw=\r\n=EWRy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e8726533c.0","@material/theme":"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/line-ripple_15.0.0-canary.e8726533c.0_1663705033536_0.4221522050089592","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/line-ripple","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ffd8e8a1b0b11762e2da8c04ae6205fed802a1be","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.00d8de0aa.0.tgz","fileCount":33,"integrity":"sha512-tldBrBP59iettkuZs1x4lCVi4Te4KYqEX7sSKOOw4CKZrweDr1CZU4TobfWlcCmParl181Vi6v1vZ/Sv23TORQ==","signatures":[{"sig":"MEQCIDd+9Auiqgs6mUodvScFfWNbgai+vCxt2KxoeVr4Rv5rAiAg4bWLpnwmussbv1WSZfx3XFQ5ROCY4NzMm+g/PJfPqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKyuHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGMg//YKT15uJckYKRCnhIq+4CQYDp+Ph8ZSsG4TPVUit33B1yVNmF\r\n79fGQni2lPNK1y65FfjQu2AGPPbwds+ivnNGaMAzvTDvzc/lmsnwEGJDkndF\r\nuVhPs/CVPPUqY2YRKV3B/gajg+1mdopMfPsPyGqaZUhzwwBMfelJ5OeUapzE\r\nt37hCKhJ7NI9/jokhq70mkAkz4RX8+chLbRpeicjphIV+gWVUkumBeKU4G7m\r\nkibn9APRguCVwwKwYcRQkbeVPtYFTtLMAtH95lH9A/GNYQOn5Nfs/dQ9LYjz\r\niW/mlty/daxA3KiRYRVd36ORI0X4CIcehkrcDZ1r1/unRXPhuATDPXbq61qz\r\nVJSCNvDl/osub+B/XZQ9jezpHlllhd76+T0bYUG7mR67LhX/op7/I9+upX4g\r\nfrUk204j8bfnExrky5aZFIpuwr1FoZxPGldo7lvoqUmJAw6Ogp6L25qo4CHp\r\nkV472tDH+Ba2TZJ8mAFDZIgeah6NxL+dFAczg4szUPtfnCxKsLRD9yL4nQ+J\r\nFA0v80JTXSdO/2kBsyuH2/ERDoyazJsVAjSpNXmnCsIPTy0SPhrF0KWRgcFw\r\nuBvPA6CRkO3EcA7DUC6VE3m3Bofx0cJaD2JqzwCErDk1uHJhsMkmjUD8pAsW\r\na6UTF4qEZ+CevejMP95EjiQJZZeRUTiYIZ4=\r\n=Tpjb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/theme":"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/line-ripple_15.0.0-canary.00d8de0aa.0_1663773575510_0.48521450728585425","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/line-ripple","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"df588d67ab8e83a4a7b9f5ad156b98f2299e5464","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.271aedc30.0.tgz","fileCount":33,"integrity":"sha512-G/wSftZFKsPSZ5CDTHhjkULrM9+IZfxU6s6hG3Uzlq7WdDMPmkxzke+omu/axIqMg+ZCoiT3Eq7t2USUsUDeOA==","signatures":[{"sig":"MEYCIQDyvGIvRFNFgIrWFgrGVfFHdvlkmRVya5RFRrGgszdbUgIhAJ273bk9tIGOQ/tAC/GH9rnpvdx2fb9Wkm+qROUZ1rkZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy87ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPJRAAnBtURqG3QgU+6qWCVaq1cCw0Ok3baTZSKZX5mLR/5E3bRKPQ\r\nRX7J+CPb5rimWDv6kYtDEsFRFhGYdEnbsdhq1Xg7HdIFf4WUUuBqCQT71xW1\r\nc5K1xFMgZHUNK3bTtKJHW7fMQDrYAqw458G2+7ugo9fTQEBPQTEp03Mj1wOs\r\nmxZjZIlv0jQiH3aEW9nzjLZt9FQEleL5g/o48WkGM42U9WCpCiSd5fGVUngy\r\nN1hZA6D8WB0o65k5WgKJjYiwrcetRV6E1IE5HvxcH1Tp0t/iLju5yWqQ4KmX\r\nm6xd1EupZ6DfQ0TAmBfxIcH5mnWb9yTd7SHcqX6IOcvO6jCr9zsoAyQCYUvN\r\ngUZaHo6re9IkJPwIFf4NW9D7AwpMS06xOju+4/bWtNjZFa1At/iULdK0U8Py\r\nLugyjySlqCCrU8PkOJmiWXJM8RrvzsJguQfm/Y3i12OzzGac3Peo2jsLkXDJ\r\ntHWZcB0K6fspd5Ne41mNoW3zYc/i0BoAdA+GVN8mtisze609bX8lFzyDyD1t\r\nxkXDwag1PKBTb7P8SB6yd/dyJlT4Hgqy2ekNyKeMqrWmFp6L+CzbsWxQVz4b\r\nup489XQFc0CnIuGJoJI/3fInzhgXr9aPbrqVpvd9d1NvyVPJITcu6B8i9Umg\r\neNeUfTcU+/5hLMnxkoB0g9Wo2cgXZEChVyE=\r\n=fZln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.271aedc30.0","@material/theme":"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/line-ripple_15.0.0-canary.271aedc30.0_1663774523468_0.6965279806632487","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f17ff2cb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9f17ff2cb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.9f17ff2cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee97f76b2055908b1e0b3afbb7d62e09d3b4822","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9f17ff2cb.0.tgz","fileCount":33,"integrity":"sha512-RJwBkcyWLHvxq+Esck2jWfcWA+eSSptRKgC3oqbjQAkE9Cuk5PQl5RqRQaZD7F/MaFzyFtM2dcF/j2yCVKK75A==","signatures":[{"sig":"MEUCIAz1N9OE/DgsQWBqkWb3Sm4GdEEoVyyRjK2RDLqzBpqjAiEA7mqUAQZE7d1+nCdgcY0npqbJR4a7nClOS8L2HeqUV+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjK1LyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2ug//UqviMBWaYHVuLB3JcbGYvcg+utcN9yL7WjykXubfCwEZ9D5u\r\nLrtzHblMO/RVhkJmOVFKiE7Bk9VCTHy7KgFxnowA4xcF/8tutZmj68mktoo1\r\nGZiFYZKws1kpSPe+b7Wce57bZFev7YHxZ1v9WyPT39I5swVeGycfqgxFsow+\r\nrTamfo+2/5JapTtqlQAow1Xs3UM3yhLKKbaMXKTF385TUBkJ195xLy8L6qCK\r\nl2Rh69lS31PgdRuurpv6JkoL3szxsDUvbJtJGNZd7F8Coh71vXEgBa+aXcfc\r\nitOq+DoHirABgtfetSu1+yBe6F2kHL2aY1CYq9CChKK0mHo1GNqaWc/xJ5rA\r\n6j7NEmvImTD3mWIWInduj2INDqmWT9WbDd5DEQfd7yLJ8IvxUFWQ3pkX9yz4\r\nyKeL3J9QBsqsaLwAgOvsf6LjJxyf8MWF0Y7SYCPPZXbftg/CJiHiDdDAjiuq\r\nIpkqxvpgLAgM9y1/vtxmhNj26x7p7nJCVf0CNKNlj2BAlCZYo2Aj1mIqwmyC\r\nL0QpkrfZxf6QL6hCmf+sXnb1BINCg+PJl7OMlXLmji/Tz4FtGmBjEPYnnHM4\r\nJD4pfdpsK0OLsajStvdvJekujCO/Le1FTdmRgmmdC+Ovbq7OCJl9wmnzTKaV\r\n/ceLQmv+XiNLkdz15ESMqxMiGKZ4aFwGjb0=\r\n=0Nbq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"34e73eebdcebc0a0b475c8b2f9fa0dd4a4c3397e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9f17ff2cb.0","@material/theme":"15.0.0-canary.9f17ff2cb.0","@material/animation":"15.0.0-canary.9f17ff2cb.0","@material/feature-targeting":"15.0.0-canary.9f17ff2cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.9f17ff2cb.0_1663783666452_0.8663546830910398","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7e51a397a6cff4ef26a795fdd7256cc6525040b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d3344c16f.0.tgz","fileCount":33,"integrity":"sha512-EROZquA9c9y4qWp/emQi+e9appWv7kgglVcYmQiaF/zY+B8919vrVl37+ZlcLR1ioeIuujtQDF8aHF1O8Qth5A==","signatures":[{"sig":"MEYCIQDOp95swV8dSO0EvJbShbz3oTiHtjSMIbnyI2Dmzvj/dwIhAIz+rHOY92GsGTOGWYiRNXIVtbdnXCM/IiLiAn9qH0p+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCmrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoi7g/9HX3DTa3iHBRubvWqa4Vdovgj48e7ctoKxYPqoPTwojTFS0NC\r\nfoIPbshDXP8fDA/LlneNAT3Q5BCM+lrANP9oACu452H4mrjWW4LxWy7AzetY\r\nuUBcQHZYPwNeCihLUwiklzYKwbR5Yo+E6zTRzJV5qgCZCXHWvKO/2zJuR7te\r\nts/AIXMtxvYNTBkB2OCIKY01c2hQpS6PUEZ6zkp7MvVFohDnqdsyAbUTdXSj\r\nEK3QcNJ/+31qAVTn6zKtlVVowNy2ru2lh0jH0UqtFPyzgWQJY4d3yNj7w17f\r\nBmA7PZQt8rkj7mo5YsO9ziLKPb61oG6aHbvQuhdwG43xX3a+cywJ3vUXAhhV\r\n0VidDDBOvjICu2Wf4G5a1KMNl65FC8T+hwACVllAuU+YXvtcEcd9QoiK1+Gq\r\nZCkXUU9hPz4DOnUyXzWptCdsnOnNz0Z0RV556vKvIuHiYvpz/CtNDcx1DEeB\r\nns/GWyVWBpHANZq0+fSqoLzEWOXc6M/7ulNwSja2tuut0oGLEwQb3nw1WK3r\r\ne3At1tNJ000yxVsiGrCdYuG1NUuV7Qb+766UMh+R2O/um5IvqiAanwOzcCbc\r\nSpD1wpOwcPgDao2mK3zBM9sB/1BxQ8uWKlJRNsonAvFGMWqGaZjDH0qlDL1q\r\nTKe38vISjKGMUNhwpRr5wsP97dytff8CW04=\r\n=75z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/theme":"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/line-ripple_15.0.0-canary.d3344c16f.0_1663838635369_0.6504227570271361","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"00034283de51b2d4bf8f585ff88de25a9c1720c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.94f20ccb8.0.tgz","fileCount":33,"integrity":"sha512-rX/RHfS/XQOYHL8c0CvmT7vPsbzXijCiTZy944P95HAGxzV+IenQAaa3KkrGZrNIQwoVPTf8QUkVhmMUKqvUTg==","signatures":[{"sig":"MEUCIQCKc055NojjjspIurEpkR+sE71y2+XmuE/ogfD4elsNrgIgHbxBec41NfDzRPN1LvjlL3cmsCaoYbPpHzr54wlEwrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMnSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxiQ/+McuQFwPQKq5TTodnkuG5zc4vmuqgLyYdm9s63GUKQFSj+bAs\r\nA6loWpvMaC4N/+0Omv+RD3sgzRX/5DHFIqyIp2BjFKFgqgQRXSAr/h6AB4St\r\nlky2/p7xbHZ8YF2BgfzDR43lwIh6ObcMnPFUWCIPRedOaES5ENZKNPhy5wIC\r\nSuM0OmPzaq9JtvZydIktN1dLDMvI8I5CiHEl80rxX/bWvw2ciSz91DGpOycN\r\nFch4VhcV8mmwX0xv9/limy+A/RC9DsvJak6iQLV7UqK3dla/GjQBJG3SQw4U\r\nXEiySrVM73hEXUivsN80zUknSas4W3sl+69gn+LVGUPh7rAwCNTa1VwClTpF\r\njJCVxy7Hgtle9iCkpZAvRPKlhy9D2DczWUopEn0ncmJU/9Z1xcAkNQ1KWxr5\r\nZ5y156JiD2otGL3YozrhnLa6YsOmi+MAOsXOIV8AEnjCc47Mi6PUmggbm7vQ\r\nF95OO0pRmjNMbHoD12DwUqcheooRHisQrguBMo+8qUgn4JXd7lMy4g67vGsr\r\nTEUEZ8WGYoyiQ7oBA/sBCbLIOSkUcFd0NxgCLvN5yT7vYIA2W7XuFIHKsd9t\r\nGsl/QZlZ34tOKfV0vfhqANCKY15Cp8vCPjUEh4XXEWgzNolERhmrN6eLE6U0\r\nTd03n+YOW330iGYcJRfnXFQGpcXmzfzEoc4=\r\n=wAdQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/theme":"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/line-ripple_15.0.0-canary.94f20ccb8.0_1663879634354_0.25706566717695023","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e7b06daa5815d26a6a4eb525bed214eac9603228","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":33,"integrity":"sha512-683+2PzLk6cPeIoGFQ3Mrdgqtpcjh93e71R4sP1nW0l8eCmdnFffULtrDof/9T3RRRyrqyF75lFFQLDeqtzi+g==","signatures":[{"sig":"MEUCIBOhk1w/iFekUpfW+NLDW7S7a5RZJAPHE49qBbtlp8mPAiEAx6DfssnLEpCMUhrn0/nuj/iC7UHcWfXUl44oZnZcbas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcu3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoxng/8D8FcvTLnxnke1101RwoKzu37vYtUhgwJben2e3VEeMFwLfiP\r\nSAgH7/RFKJQKou/oMAE5cumKKCNNDt+IrLsePT0JnLIo6lX7sPazpPV62ThQ\r\ndvsL6TVN3hO8itWQonlfCGaquYJ8bCytVJ1vfNhb3Z/jT0dQOMMim1Qyw2Qf\r\nenSjvWAMlRJ00kmjIn4jSAhyKV4ML+PwWxDSKjOD33WRxlDJZcXZ2upiAH6Q\r\nHgdLMwTn2l/WS7/KCvMpNh/40Kd5MmwVlxE97dUj3TblsJ216VSvSlfhwyRU\r\nID2tGN8npLmSzYx2mx8bpy2CVrT2ehIGd2KMsDCza1rcyMcL9kWfRBdDdjVT\r\nO4ZV6r0wrk7tgzoxDkgIhFPXNoOG7TiU0dU/y8WT4BaeHi+gJ3ncwMumGOmK\r\n6G/6M5Gzv5meSsZi54TSrek9tQm4vLn37l/6fBfMzixtwpyhLnt31AoOfLOT\r\n0uI9bKbAuNEEuIGUHH82bU5XRkd90CIRaRVidfFJYX2UOgaD9YJHY0sJcYtu\r\nkb/84HHo4J/u1mpV57w857Tb5tk4uuiw5qya6uG6LHIc2OQB1mS/66zJaSwB\r\n02caHmD6364ljT4YuqfSdovT2nU56WkMgEZs9USMAcNM/RbBpqhY1FWGiRMh\r\n9HJeGIJGlUaW31jDJ1wgbW189m7BLuvBgGw=\r\n=WXvl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/theme":"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/line-ripple_15.0.0-canary.81e4cb7b2.0_1663945655780_0.9354844877963655","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/line-ripple","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"213745f1db020136f5b805fcf1b40552334af078","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.aa85f9413.0.tgz","fileCount":33,"integrity":"sha512-tXTn1gja22Vwl9g5NeKIamY7PEXH7eUY3i2hMQTitgI4zfFiiLC+awGhcZetU1wTUZLYlzm1sH/oiIeCWyxKJg==","signatures":[{"sig":"MEQCIGzWQWAi1eme9ivASweiNouaVcu7TiigpzfI34l/KtQ2AiBlIJQ6ky6c4m621VlckIuF+r2PfI03OPjCfh7jTYAevA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":122802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMeerACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqxQ/9FUCpTkzExq/mD9ajsKYE1gZCh8VQQ3+J28m+FC0eetOAj1JY\r\nXHwMCGYg6UUGhpAPdju/PsIKsTbYGfOi+kXIHlnYRC3+ij1uc2kWA8SG4LDN\r\nGxAb75J+fFlksGKzRUmv5axlWhZgY99YUwe5ZJMv+BbG33KzJyuC7JKGPlJO\r\nlyYWZEF2nHExBdFUXotw1n17Q8a6/d6b7vftON/Vm9piX5Lwmh/22yjhO4zR\r\nEo3yL97SZ62QWNaai/TyBPSfKh8EaMeFdJ5PbcnA3J0qlBZHrBhVLRSyvyVP\r\nvEavDj2IRQNQAEoS6mgiqDKJS3CuIUTNivxhqLB4Z5Uk0sWcZRnAr8KW8nb7\r\nfdKP57DtsdKQERoOW2QA5ywJAH4AgQl6HMDUSEXX/Jq7I7eeb2dwWbtBNEPs\r\nj4tZLyAp/bXfGMbJV8cjMBe641ndV4RV3cMwx4UUpDFkuyrYPj/vole5DDgi\r\ncDsrg0IH9U3C5KzPmDg5Yo6MCjAuEinVIUsFn2Jo9KdiT3iXcnpMh2tD8S+S\r\ndGjwtxfOGCZdLXgE5HUcLJfkQXXomBvDadT8zajDJVmntJlkbXZwWzLgeAiE\r\nZe7y9xGu4EigyIDqGwx2JBFz8IE/m6t7C+fUii7BDPzxoK+hqn2K6wZKYz8k\r\nMIvFhR4tqNX/4TLdGFhxYyEoejdexSGUWSQ=\r\n=tqqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/theme":"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/line-ripple_15.0.0-canary.aa85f9413.0_1664214955068_0.7002896198595943","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"542f55c74ea217db330d289f26f069dce1925177","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7134a7752.0.tgz","fileCount":33,"integrity":"sha512-xO6reIBP0T0JLestSFN65IpWUUuuyv1x7tG4gdM1JheiNUAM1e4/Ogz3+aZbn5VkNzcRqRo62sFsem4ihjnThw==","signatures":[{"sig":"MEUCIQD06CVSQuLv72UsH44tG6SfG7gyF4kWcAH0qlTjV7XvUgIgWoVPbuy5u6le+vKLf+Wx5adIzHiWjXoAZt39pLfR8nQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiAyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp4Q//ZYfRLMo2DgD6mZ4Ala+FXQ3zYagSNmfhXjix/Bl+dpE2Zjt+\r\nQGVGSXjs3ri78fq+pJhu4Kwh+AZCbk+32fCGxIDb8+T7CQSz+yeNKesr+kjC\r\niAzZiBN+0JUaJ6szGYEWALKxaaI4ySiSLnT1qnib85dSGRFooBUvkqmK6DFU\r\nAZSd0BIvr/ju3mL2fNSaHEOSDTf8VTA67F+iIhJBwDUHCRNUtoBioyq9Aszv\r\n9tYHU/2dGp4/NDRvZ9GEP0UTnuYY6tHOJwlLLkzhrqpjxqxJwjqVw1xOfA0z\r\nucwKtSkSiveUEbv4/VBvL1i5Lfc6pEFGNoK6+R2wyAUfq4uNOqmq1pkr0bJA\r\naZDoA+g4p01C9Ywsq7Ghi89VJerc6ou92aFRRs9t5hO5TtIU2qP/57fbOewK\r\nE19r0uR803V+iU2LHyq8HjuqFp5ydOj75c7sGhbJpEjqzu9bjr3tVmWTviEZ\r\n7DHZk336cZ0oTwEXV+KLrx8TsjIUvc+KdVcRBT0GvEH4nkRNWDsfslRzX7xx\r\nYPo4ykP+n7V03C4hM8rUL3gcqSJY7gvFncbXIoumgR3fEyOWUxOusuVPTnUM\r\nkSAAbNr4yPJ71KfS4VUuuwrhAKsZs37PF6z11X0VbeVp1yulssRXOy9qQ5bI\r\nK7pNlnbs9jA3W2C3wN1SS9H6ehPmIyFxgP4=\r\n=wCp3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7134a7752.0","@material/theme":"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/line-ripple_15.0.0-canary.7134a7752.0_1664229426131_0.13516678541238747","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"867d9a5028d7a48cced1fa430fc288b264008a90","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.70b8ac16e.0.tgz","fileCount":33,"integrity":"sha512-uYGw3JcxVC25Elprv19XMriIM/ydeQWt14NRj8vBeszhlRhnyrRRbSTKfpesLSw+TJKpLIP3dnEvm1EJJNTdVQ==","signatures":[{"sig":"MEYCIQDCGYmpIJaCaF+rWJTToY/xO++bAXZDjM6PKGI29MOrEwIhAKdM+SGqSp5NkaDySPTnhJsTbuB+xn5goPopyA1MRoBb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM3zGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxxA//WiEppHWPz6bPRe+q77PjhOqikcaHOklN4zM2AKS99ih6RvdB\r\nqoARH1B4pcjOEMvIDTQ+VjZh9iJxhNRm9QretGVOVXhZyOyTQ112Q8I6MNw2\r\nH3Vt+yeWrCpvlK45wIOH6iMVTQ/an+5gXaiVam01ny1TqjnfmMyjfHA22NJ3\r\nx3KVidabVzJUAzF/8Y/O1TevUqFaMmBrFCuhlbNkXT7NlV5CzLoBMMoV55FO\r\notzW+vFYbPrg7YmLcyDntqluhPj4x0N9xhS4Eem3GdAxtCiDiuuRzK5eptfC\r\n6Ld1SzttP9ksUkaC/bGXo1JnR+dufsSZWtxfGPu4PinCT3qE+yuQLk+Yqphq\r\nSG5GjBc70J7RgTD6d857Q7jKBVHqPMgYQV+QifMVxlVwJZlKrY0g9Q+0nHPg\r\nX6rlsX32N9Mk1mXyBhpK/a+N4Ah/h9WbFhqYSrkEJb4TBQWNFyhiYp8iaKy1\r\nxMZmlzBVpHJNuVZJ5u0zXhXZWJwFb38b2j2vVdRYxU/0pqslk52cPIbYmw9X\r\nX0dPyH/4XIzwE0FAbEmJ0uZVnk+mwXXqUiqXTERq6iu5Nxp6Rn0++0GPIqUr\r\najICCTgk6vUC9EvdXGfcYYctOmsQUX6ibYacLCsT4BEoYQZGgGY+PqMhonDq\r\nDDssDf/3QchnByxrHCQCroWjDxLqv0eV5Sw=\r\n=twlW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/theme":"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/line-ripple_15.0.0-canary.70b8ac16e.0_1664318662669_0.6149886675434193","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cc864ade834afbc6506c2fd5ac8c8725593865b0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c20d74405.0.tgz","fileCount":33,"integrity":"sha512-sZAuA+kz4D+fBRjFmlhgRZhVCbO2x5yci2D3Za+io38UtyCmL+DwfadcMlkNFE91b4Jy71OG6di6YNM7/elEvg==","signatures":[{"sig":"MEUCICo0sObGDrxip+jmnqHtsa/A6CRPDbnEt5TRCt/6DzylAiEAuXQGZ/7pSlkCxLW1jnBs5UJ9YMg/6Z+mAxfx8FXHzPg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4ejACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVIQ//eNIADHN79UoWL3clfOTuis5jVpKp6raoDvckhS/cqmFlB4qm\r\nA3sSEmWi6vrgQeupaZeVC8XGnHj4hxWzogykZscpCbHfNFwK8b7kz01jO8Ne\r\ns+oci+fEfxIV52bNLpq6WmyBRxkrHxxkzUhgu6XMRkCwITkOMtGgo3IwbGzR\r\nLh8YkOtLhZUAB9T/7JEGoYHklB3pV0Fzvbj5oaOr3uYLw4mrZiGS2YWbH+8A\r\nYzQ0vIfS6B/PRSxwVHlXiuonPlEMZL2+5hzJUkPk6OLawpmAXwRGT9NXqodZ\r\n8agZQn5m9MRy0rCuA+RRv34HxJ4rfUHNO6r7CW87e1VYuKyK/egdgHWd7U+Q\r\npVvoEqyHi/4NnjkTueoDQ0Oe4XP6p5EElekxeMf2/QhAhbGE50PuYBeLmIcl\r\nTBZt0/mdK0fjnUEwXsru72o4XC36mhZxO4SyyVxxp4G2UlJbr+ed5yB3sjEk\r\nsvEQb6nY9ULGujoci0iYeuGZ+wImr8vowUg9awVEXMIY1EcR8xPnKFyNpvwW\r\nCaOM2pwqQLhkQ0wWFdMyW39Up6Rdx7o9U3OvAB2gzDHpQIiWK/NjdassM5ga\r\nszgYlpIyZHGk/aXZA/wi5VsipJ9xPyj+qX2T2K2NVsq/ajAkp66bMq055XDg\r\nGedIWg1NxA9g5F02K+hwMKEZoEzMANkg1nc=\r\n=H9I6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c20d74405.0","@material/theme":"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/line-ripple_15.0.0-canary.c20d74405.0_1664321443480_0.9123730446779663","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2af165c631cd944d6cf356e22a7135206c3e857c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f033fc8d1.0.tgz","fileCount":33,"integrity":"sha512-v39J1bfdY02yhal7AHti1yUXAU25CPsENaj1Z/P/I1PXerjLCk568VFeHCQyIXHJaICkNNzryE2tybw3GBbtBg==","signatures":[{"sig":"MEUCIAI1PV8jK4UzWI7Wbt8Z+5vf5mexiaYEjcMmNARgMAXQAiEA1ekiX6RAlrYTDb2SYmSnogB3t7rs1goBaoJ19yIJpPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM43BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofhhAAl5liaRPHi9zRcRF3o3zaA+ye/AkNPtuZXO807yG0QyM4tdts\r\n9SWcLEbLMVIO/b4B4T2QiQm+ff66FmpE2rcphqqg3IQXuUaQqS9cPDg7WzYA\r\nV71716hZy8c3/qnqWv0pHFlrtUxHdN0KZgOFslvzkMv4YLl8bqmM1rUyd4Rw\r\no82kwcN1SwvGdOEZE395L/ggbSg/pLmOskatMk7Xs6wdYbxskxPP2EFwymL6\r\nXidfoZYuAcWD3mdgYeh8p8YatfMZvHhauAeP0vkEXcYwzMfK1vxFz8ODyQer\r\n14oJKv1sFCs8TVYJFlNslfAdjcqXOd7LwvYbIlvwokCCW+PACN/bhmGnobfs\r\nivoCHmTwbX5oWZ07Rg5NCnb+czMhNLwPbjAmhx1VwSs8/Upb4VQt9Qpi+odw\r\n1klQju+meQ5LmZDvzoLw4kxnjvPWPRLgaXuUVl7kpWl7eKpVZJrSZN8hxs49\r\nNLeAHruZAJWBAJO1hzTMZN4kIIzr1BstPZuY3oW+t0398EWQf44zCJIQF5z+\r\n1xSA0qkLgeJxjvHH2OqZgciJl7aO61Ct6FCkabR3cfaC7oEMdemS57dbjr0w\r\nXh/WitjwjPiAjjlKgxMXljwK2UoQNB8uy3ex+5GMqdHM9AkOt9XgIN4t5XsZ\r\nqfP+VrTbIOUuPPqTPu5ifvaNjyU74wGmuqg=\r\n=hJRP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/theme":"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/line-ripple_15.0.0-canary.f033fc8d1.0_1664323009543_0.6412345489759934","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"db1d09760ed02ebaff185ba32407b7da4bd7e0ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8d7ae912a.0.tgz","fileCount":33,"integrity":"sha512-qSZjYbedHtsawgTimziFr8XQG+Ado64L038IuJ23YGPdM66m0CfxfpZFRCBRJqu/N4u2xVQ5xkYfSQ8Yy/NS9A==","signatures":[{"sig":"MEUCICw4fodNIs2YdIoJIv3N3orx4xLMDl+dWFSLQZF3pm9qAiEAjdejh/vGpq8+nGTlRUTBFnYIAYgpL/yCejFmDl8f/0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/33ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo36hAAkwt5fwiIss89RUxO5LSV6YUFThL7XwoRoCsoFV/3DVKAv1+3\r\nlaDI9hHbnco5lxak8u/uotk+oEVgt/n+lGo8G2aYz2wSN1XDJ7580Ofvi+uO\r\n4tQIEiUmcoTWA5DpRE8P17Kmk9MyXyXi180x8aXkAP6gFD6jVikqIQdZWqp4\r\nlzd3nUxYfwIG92IIuKFd4iJZslGNFFfmmhdjOgu7dXbqPVOvIcXqq0IJ0+IW\r\nrdms75brFrJrFVmQExjPbhyvx8xnmcMMc4xMWhUVVZm3+wXFSSCj1CF49PVC\r\nUtRaik5glGRGplqL2dcAQlCQmwmKSvzsk1MYx1ADgdfSIMt1VxIqKJR9CQUH\r\n8MtcQhW9h0PHhNqAWpE/r1KMp6dMbh1RapP+d/Opumapm4HSJuECElc7caMt\r\n4cDPIYYXnAnbsdUnMsQw1mj0/J1Ajvry7HUKElDciAr86rtR3oqjlZZQ3O3M\r\nGYLSbMpeNnbfSut+9KGSKeOJpBNJo+nHUTrjgG2ZMSrp30nRc5gDvSFquzbp\r\n4Fo5N67rEbulQne8vgbsMAqgaqxQs01tGYmF8dz/F4D7xmt8BSHvSCTBiN/x\r\nfiHnGMHMlggwrsknTdXeBUpI3/Oceb+pj62p7TMJUbjioULISpmZLyXNz6AM\r\nhPHrBX5W2XSCU+jKJGen65fAOiJk2GUdz1Y=\r\n=lkrQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/theme":"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/line-ripple_15.0.0-canary.8d7ae912a.0_1664351734931_0.8727061890208734","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/line-ripple","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3f59d09c7ddc932c1716e009ef4555ed44915f3d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.db414b864.0.tgz","fileCount":33,"integrity":"sha512-2tC9zsermy8xWxT2ZWwC4esmf7I5HtDrGmQ9JzwH6N44ICNcCEH0gC0xvJj1rO3qpLCObTN2EwPbGd1mhW0ERw==","signatures":[{"sig":"MEUCICwfhgREBCLC8phcj9FZmgHYRYFlF11znm786zIhsRMZAiEArAASDH8QlEDSkQfieb3bMHXH1Iwq18ZRSNI6ZE0XaPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF+SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Gw/+NXyQHESTUHwPbr+7KsJiI63ZDKhLdfzYvo4wQ1TJORpLuhKS\r\n9C5YOgPXn3CZA9SCc8jQBI6NmJcJoV1pHh+m85yMLNnaNgGgw5SA8DMdyJmV\r\nEQFGS63z5R0NeoK+isnVyKJIRWpH24a7itdpIRXlRE8dQ5kqthT5OGBy81Zx\r\n6LSDQ/c2d095jTJ2HpQKhwYeupyqwD+lrVReoCoj7yI3sI50UHcOdQi0o02v\r\nO8Py5o9CYrhc059ME6uOkwdWoIKHHAY0GzQGz8l1/fpuaEYXpXemQjENmLsB\r\nFFXlTdQiQ6WlGLetMa2kjbCEwzD0ksleaIvCqoOLV9tfzSXr9Ps6isj6OU9s\r\nRMt4Yfb2LvWo5lT0sgBeceIqcTUcEJP5Km06CxqRZz9s9y0Z5B5rgGFU0+kt\r\n5ZTkqM6nBMOD07VaBXSVp0wDqMixGFtqo5tKe9zjzgtjqp6rkh0fDKf6SrGp\r\nr7CLR46cpTQL+plLWzhZD70HqMIxyYxKxLPI23Me2TfNNrEDK8TEqbT22CAN\r\n7Y8QDxj+9uNiMBQxTRUGdAQ/bhvB8Is5KkccPTF7QovPYW/8X0xAbfWtl0WA\r\nZnmwbBMOXtU7nFGeTcgNtQdVQJnDVg0Kmb5pbaXW7djhc/umZf6S/LHtzOsI\r\n7hY3GW69r9yEAkMxQdWgz6EGOWfdthc5N88=\r\n=8mqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.db414b864.0","@material/theme":"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/line-ripple_15.0.0-canary.db414b864.0_1664376722799_0.5620638648161489","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0462d134.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c0462d134.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.c0462d134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6318560b4b60752292b339a72f7ba65a615b4521","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c0462d134.0.tgz","fileCount":33,"integrity":"sha512-Eo3SaF7GnQoEaygxkhTXIXNGwnbuOgYvp6vtz5chjOSD4h/Gpb1mKUIVV0fqwUwbASpWGWknwf92NQvk63qh8g==","signatures":[{"sig":"MEUCIF5Urz3vLNwv4pcJ3fszngvyj3bYhbXX/PhkTHHIfHSHAiEA/a/lq1l8nyrB3RMma8ApjGuvGFJcM4alYh4vL5st2UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNImmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpzfg//XV6YlDrUO1Un+o83gq70Ia7wqWC/y4PYjQWp1Z6D3md/fHzw\r\n+y/0G3csfqSTbEBw/p1W/DVfoc81hzWlPDlouWhxXRJwfsLwBmvlA6ZlfpoG\r\nQyQxa8x7ipqtZ821JWIkTCWyYPRa96USKtQugbc7TvIB05v/lxHesYxyCFvn\r\neQbcF3xyS7PVf11SsO/I0mmPgGmLNsGIWeX1PIxcEWg5Z3zWSRhsKebCOPd+\r\nwjprVxJOoU2/ATtm3w+ce8+uJl8gkNzgbVDltlxKa9mwrwLwMtBET9qEBVM5\r\nnQsbx9mpg55bvak+PA+NjEaTb4hqrrn6cRA0LlsHjRCGjh+2g/19bVxo861y\r\nyOKqrgOlBQLKag9X9VsLvPGD7spdBe7Jd8aidaXZHLBdl+Hsyh4aO93/GTyS\r\niHXOZs5jDSbEnTZ00mhoTooIw+HMo4FL45sRqwp6wCXSN6kI6ycTyL9/vAUJ\r\n03V1Zn50+OdjMYsh9xf/U7Mg9viT1vYzMH5TzAOmsnXx+5Hioqj1jR4gqXMG\r\n3arVY1YhagI0Y2aTA8RvC7FRSLfRVLXkf1Oy8Gm4U2R06dMOSzfPanHpdQUL\r\nMU5RD1Ei9511wthoDsvWG1fKHHQz5TpNfrqPQTwzytaXIPWPPkbtejqSCOTN\r\ndUewTwy7f/bjCIecsCl9WWtasWtwK60jCyE=\r\n=0lkX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"ac1e8bf31f6e69539e68b22f40f639cb7eaedca8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0462d134.0","@material/theme":"15.0.0-canary.c0462d134.0","@material/animation":"15.0.0-canary.c0462d134.0","@material/feature-targeting":"15.0.0-canary.c0462d134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.c0462d134.0_1664387494104_0.4710830057215003","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"341eea023b024380ab213a83e409f38f1c41ccf4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.28cc6791f.0.tgz","fileCount":33,"integrity":"sha512-lhanVilH/BHcRcM2H2/mtRwjf8ez1pgHws886WSLbNzBnh7+/qjAhp8HX8jgJQBcOjvQuSp+ai0DH7vN/iIdUQ==","signatures":[{"sig":"MEQCIAhTWwNBOlgbuQh1Md4K6YVrh1QElkOjr6LjA6VhWqsyAiB+8lW+WBL8gwwJAQff9vPIuv51I7wQ8zhKqCeZpUSSsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI0ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm9A//cjGS0StMLQiTOV0MU4MlkGx02LqkwOqe8K1aWRiUKBs+90Dx\r\ns/VLRQ/N4x82MciIzVux28nwYAbXKuw1+HJ+sSxIC6qMqPzvZLk87ba6cV1n\r\nG7W9QXNZeFsWw0W5knEuMZjJl8YR388h/k6eZCE+WkazD82GNZOp3pKYUeiK\r\nssdLFcCUk/1V5Ym0X7i2t3Rmv8OofUohzea2XmArerZndC3xpJ9sV0OD6z85\r\nztcbByBOgkNFTpYZDRSNKtu+GVFVX37IDYPhih64sKP1VWDktbIQF4blrO2Y\r\nJlejC5JdcC6MNV9CVVaxPGAsT08U1y7IjxI+2bK5ORHmDMiqs02b8xi6IIdy\r\nNwthh4KgmiiiM5pRe3xV+ePUVQxGmu+L6Gakv+BzuVZPx2rb7Vf+3rse1woc\r\nwPw9tXcoZTidYdo9O8s9iAV1Xfp8lB/E72a1/3rBGI8FtbJxcf4B0Dzo9rW1\r\nYzYgSXJkADgsHsGuAmvCE1M3awMbuVWIRA+OE2F8CPcmuWQtlq9HVssgz7T3\r\napwFNiUSxYoK4N4N9QExX2cjOs0Oo6TI5BPksLgh7AjDcunAhSBJ6YB+02+Z\r\nStKhydTYE+Fbq9vZAK3r/GQaEDwIRqcg1n2/rT2yLMOL1GRSInC6pabck/04\r\nXBIk7eMuOcbi2cqyCliKAbw/KKecHPKrKuw=\r\n=euCv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/theme":"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/line-ripple_15.0.0-canary.28cc6791f.0_1664388377266_0.0073467437455545515","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"960249787c98172fd1cfc304ea3150cea3d89c48","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a515a2d18.0.tgz","fileCount":33,"integrity":"sha512-gmI3Sla9TfeMnbyjs9QKuUxthTEGuDauxvAbRv0iUbyStegTdHcHKp77FlUuXctYbFxJtw6FWKgtpTaGcrqI1A==","signatures":[{"sig":"MEUCIHEFRXf4j5Cmqj733tNt4hKwh6DcUIeCuUlXt4nUhBgzAiEAloQ6ws+0FF27lAiFPyQDz60vVpaeGbIX6xokFM/FKXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJiPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPKQ//RPrKZuCLD13i774WPA65GAENd2zNcE7FCjYa5UouSU+LnIOU\r\nmiHVPfXdTMQvvdjjXvbgEISIXjOt0Bvd0PWuJRiE4GbjT0aZCMuW2qgrcjMI\r\nHscj/RwZiIlvP+GgrNIMUcAgaEaytpZ2oN0YHEO6zMNEuZse1Rgp5ZYZD8/W\r\nw5vsVMUlFbe4F7SbTEx3kjfa/6wfjT8V5tRbAIwHC9WR64cXFodfAJoy7HfY\r\nN+xhWiWRg5rujxDT+uocK93/EXt7/wIZZ2iuoOh7ULQMEc69f7mFz7apXsKs\r\nstHv/TDNW9FB7svQ2SzBGHzJPdx0n39otDpaPSwPkNkIH8pXdN8klDwyUuWZ\r\nl5kYfbH3F3lbIOH5kLoKsBxX5HdcZ37Nm/avwCj8e/ROI9OoEm+ZtxnKuO5x\r\nOp0ZSca1qL0RBJwD5VDi3KJHwr6jDlu5L5RBLMYC+xXoHIjxLlQZw4NBnHx9\r\nu03ADqqFLfe0o3N7JnYxSMmGFJJC2cmU4FISdmFkLgl4ABAAik1ZPwdQ5s3s\r\n4/LDjZrESc3AP1/jpjraNcE0UTRmR2Q6sONntft46PIb1MJ7TVouLsaqPJzO\r\n2a8f8XTnYPrQCaS0w7O4fsEIvWin2tYNSXTl601qBuvTUR5M+rwy317R/3UC\r\nhZ7HoVxdtytad5i/hKP47cndiwgzIF0HiZg=\r\n=8Xva\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/theme":"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/line-ripple_15.0.0-canary.a515a2d18.0_1664391311747_0.9610322989270508","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2dcf5c9b38d63d2edd6bf344556d3e5c3bab6459","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ce9523167.0.tgz","fileCount":33,"integrity":"sha512-9dlYhSqLfi/HsRtiDWzDVrhAP20QT+t+x8yxDpMX228GuSJjq+PQqDCkANK7wS36KvHMofl/Pnn32O/pNPLrHA==","signatures":[{"sig":"MEQCIGYJGvYE795qIw8TxIAYw0A1IyGFYm4LOzf+b+yd1D2IAiAPUKjl5PgcRfUUJcO+m5FptcClN1h+Ai4bRfwl/RWizQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgBuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmomTw/+P5b/mB1fZcZ0q8AR2yM+9if7rIlxrVRI3MUTqVIp30zDxn5C\r\nsDQu7DcreaWKGd7+m0+0gVli1UCWQ5kafUwV4GzjP365r+K1vFtPwd6D1xyf\r\nvXzaOUM8BAJunqB/1jhXVTmNdjeEjcP58twTJl0hWQ+YxViidbqVUSnezUFC\r\nRBToS96FNmw25JPfDidVuyPSmo8BqTIKidPJMZH4IGqcvGT1f5GWwbEs+JQZ\r\nlUcYpx2kgeFiGN9YcJCoaV0SlY/aoAbLPYIy2SvZsProkXqbdXGPRTbrfUl0\r\nWlAR0pv+RM53nJw/5CPgctwWeHCzVHt2G3FE/vCgpFURHXQyTyKeniD65H4W\r\nlL7vaYn2ASwA9RFHw4V92eSm5YZqaNxAFYaKoE0X3Gnmpi+7fbycgqmEhv75\r\nSihYux8uzKLQi9NrReeSlfhf9+5VG+vEePXR0SOu6agKcqKzh35nvKIXq3Lf\r\nc9fn9LW+d0yzbJ4/tvdz8V0yL8d/yP4LQ+4EZZjaD2tmoETmgRy7cMND17nB\r\npRp1qUbPmyXlIg5f4+JZGK2v9gselqRw7YK/ULnpH4dKzGtT2Y1FREUZQAqB\r\nqdKxUXmzNr/M1nalb61FXKnl1vdAIHpE/HdWt0UpR4XknePXyw6W46bHW/Eu\r\nyZyekvarVSjFU6DZopPgnrvw2Y+8ktaxaWQ=\r\n=67Jf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ce9523167.0","@material/theme":"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/line-ripple_15.0.0-canary.ce9523167.0_1664483438755_0.5463128533399368","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1bf20981c6214ed03a4b0f9030c5dab04a2bca3b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b2310f7dc.0.tgz","fileCount":33,"integrity":"sha512-4lL+oWxkaWAUuPAx2IkkQC1Tn0rtZl6QfKXwnDR7thqQcUU72TpNekwuukzO5lQhFBGoIYoTo3DK6Inj9WEWHw==","signatures":[{"sig":"MEYCIQCIsawbekWrFXuNESeIEdQZLvSpyMpJrEMTzO58IqC2LwIhANvbN18DO5Tp2DaQ8gqb96Lfq9exI5dAD2vvHVsuDSY9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjSfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgDw/9Fthn425Yh0OWZSOi0/UCXLx5vuIY3gp9J1jsZ+EJfLu1W4jF\r\njHZB2h+TApfVGIDSTKQNikyqHHJglWmSB6P4fhPWSJbn8x1vfQfq7+QwYine\r\nx/6zbrLEGppM7EsAFS+KLH1kxk83yFAxKyVBb0+aVwsMCaWmzgWiWnOQ32eQ\r\nBXl19yATCYE1zSjtOPQ2OynrHqaoqvq3I8/DNKtLv7i9aN6IjzFeoL55V/0M\r\nPW3mRmuhrHt/0xRG/ckmzHaRmHAiU3IOOvjJfYYfjxj4FHVczj0lHZ8EKVK/\r\nzubcIcoL6q2RPXGt/mZTFggFb8FX8Zre45CMTInJIwh3E7YOVLupmmWnMHt+\r\nyB4vyheB22dwp6dHi2Tz49QxSM5Pf1+Ls4blP4zzpwSm7YQ02Lyoezrvr22A\r\n9oMaWsJUpBzYQaF33imzjl3f7/tUV5VF7it9E9rBlrDvqwvC+ikWUUazDPCG\r\ncRRZ3O005Za6YP5FQuzSPQAWpMR5MtRX4hj5nT6inyp35v7vFbrgWwqCGMVv\r\n3mGzl1uAv/ut0JAmK1boK4lAyoJd6G4qwK7U4nrcQSLz/GZwloY79oNgd3Bw\r\nCtc4tYN0gnhUsGbZk64VOWbbIMPdFnA5W/t6wfQ51xYCExCvVrOS30UlGt9W\r\nHwhukz1yQLv0n+tzEXkDH3UP91FI1DbzWbA=\r\n=N+p9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/theme":"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/line-ripple_15.0.0-canary.b2310f7dc.0_1664496799255_0.635402298602685","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"10467911e3cece7a4c6cd31bfba3a5a15a26c9c0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a44241e54.0.tgz","fileCount":33,"integrity":"sha512-rEgpNsc7E94CE7rwSNR/Eb9H2aJDsh6gTWFOFX0hvdxf+RQ8BWrqgIu4YmbrJPxdI3UgNH8m5g/Qpg6eC4ValA==","signatures":[{"sig":"MEQCIBMApkSb+7OZBFEujY6JG2AqUgWiU1XajIvSZLUsbyKpAiAVLQFngGqYv+3KOfq9dKadYykdKHTf2q0Ogkr4NW+3Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqbTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2OA/9FF8qGJfcD7YbWSaG7o4JHZRC7BXqDfacb2UkkJFVCpMNRz7J\r\nNjbRQG+00UeiqF5ibDYht+uY3blT1IrlqWSgxbHd5SQll//2zDNj/boepL/m\r\nvH0zWkxuF4q1EvMSK8OxNqIGsUV8pMIANYroSNj2jha0F2Ko0Ti2TF2PTWe1\r\nKvjLDLmM/NkB+k2Pt65g27DwodDYw9I78IPMKTJE0YNrXx7H6RSSKVYiJ5t1\r\nIsM8JgAETn+hOi5vmSg5+D7TU/W+zOI0l3VmpIBYxYiDU3daOCPzrBfDsSvy\r\nOZVJ6F/z03hzQKt+w2RCTw9px+cZeSLTP2D/sVNRD5uTENFxop/WVokFIcsp\r\n+6+O8We80LNjJO+M87xfdfkY38ZB3qU6RrEBmsXU6w133sH5A1NKeLtFPpFL\r\nc7wlBOPffeffYOqnWKqDmcZtBmHDPjzJif26k7g5i0/KsbNT4vI084/YYkPP\r\n+Nj81vjfBYgUNRhjTnfpQHe82U2o2Y36uqcjasADRlRyUtex+NNJW7sAFMDO\r\n9p/QZIjAtoSgICfZiLSTwv/8nV/JuTrsFhkcZMou0JqaJJ/Rix+Wh0qTIaZa\r\nYV+OWKnREKotpLd0SOhI6GzMfeMD6OqNAvqIdaFxwVemtcZpi9HQqP6qZVQ/\r\nnuQo3celVN14j1Lgru36dVbcw16Q6RqJrNQ=\r\n=L84e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a44241e54.0","@material/theme":"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/line-ripple_15.0.0-canary.a44241e54.0_1664526034879_0.4698956114715114","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"692c2540d531f54252919290a81d7622a8300202","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0ce81e115.0.tgz","fileCount":33,"integrity":"sha512-6t0mWtPU1PhVQPX68Z/4ZnZxMUTQ4eurW9mGrX1AgAwiuuAj7zPxc27UmIjCxGf3KiXPWKzkKlfz9r5SQ5OwSQ==","signatures":[{"sig":"MEYCIQDZT9n8Owz0eFPw4O71OgnHIw71/r5vAXiawCNzR70xnAIhAM3F4HtRa29k+5bKegKqQezu17JOEj8MqWABs7k81w7H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzLDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdzhAAgKiUROW0YYm/hDnF7DmIULsmGMwGjXLuiot0238oulY2rWxg\r\nqMX8cHNixk3UnQ34vcy7/A5IDgM3/fZXDtKriK5CDWsla4ctvU0CYpRL7rgN\r\nvaYYgTqf7EtABgymkvu8jrJQYlB+p0PMyHyP+P48EJYEVFas3iiJgrcP1+Op\r\nvrdZM+UuL5YjCUPMUp11IVHKsV7Ans6fZhFv0TwACoDJUL4tbSi7XofgISM9\r\nGuhZCHiJLAp7HSVSPVDl1+wKvcXwVPI0st/z+yWNTlSYCutLqUs6FHLHSRZD\r\nirq1fjbP4/98ZdOLVfiHKEzInsDG8PFD317jGCR576iO1I4K8roML9pyQqP7\r\nwOrsBg/KXFQmt6aF+tCXp52e8HW/5iLGl9nqqw7BT/5S2Hp5YCPmF30gBkCs\r\nHLYVRDmQKf6ZC/0LS3g/CqTmGmbcc/Bkx/aFJSTJ4CKHxeBIpCPJuwpk0R6Y\r\nZ8B+oUBaHpJ3pGJorAaJ/PJsu5JniYC64YzYB6mrIfal1Nj7hpgq+403zYNP\r\nVKWY8X9md4rr203dovM1nG+ttiY5JWJUpv7kO4OoVudYI8+X0RuU4tGwjOzK\r\nm8qg4yE7MQVxrQraU8+oA5XFwx3GFQjIjH2gU0n9K0RoJyrc+eQZ6u3VA3FP\r\nhhHQfuckahdoJ9E2zGS2jsM1Rajbduar7Mo=\r\n=+tpa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/theme":"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/line-ripple_15.0.0-canary.0ce81e115.0_1664561858829_0.32529915777688734","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5ec65b82188db661fc05519b67065dd1885bf3c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":33,"integrity":"sha512-1XuFqfqoVyZkQmni56BSuHNoNxnI4dWltSy4QHegX4KlJwVBw/22NW6rBqPcneWotDz4xuzp391XVrOnKFuISg==","signatures":[{"sig":"MEYCIQCi9kR5YeYYTYsd9Xy6x33MoKJ+VtWFwyYngSjpOuk5FgIhAPnC5r6NG9eqz6Ucv66ad1F6Lj9P9tloRmtfCuLjtXe+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGrvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgFg//ZGjhipTe2HlnAuyIWUc0szvSCRaKlMmOz0nX9CSLeiG1cqAF\r\nCwbH9YsG6rZ+3cYLcAGvlwfLUiSQvK4rIfYWJDV5C8CHB11J3w7YZxEgrnVI\r\np7VjdBL8zxsV8j1pd+XJEuHptEPuZ+jMDPsG6KKn2RxIrSE3CP9pc+/sjj8z\r\njlW9K8Ynkq/BDBqnOUWlx7a7xbk7Px8ERRiMs3WpNi9TFbKPuF9nVgoJQ3pY\r\n3DNBueJbcoTh1C/oy2gjs8qxnXhsZglYdUNqfDaLYeI6kVJ9us9vJIgx4XFw\r\nORhOAgdPkTekiguw8wekpiFiFZvaZWjQ3R/fxGzweF8Kah7+9wrsSby6qs9G\r\n91wzFcRDQTSvwR98rb3gr8WzlVxjWyz5Clvsvf1bPn641RpuJ7aa9mdLYR61\r\n8ShT7blPYL7wYMs3cFuFdlSyW5TPw9DkWUKpH3zmc+logWQX3fAC8NWMwJi0\r\n/7Jp9bG9CgFF2Tsw7Ng/O7pG2cgfcFeic1CFWPFwgl74O9bfIcBl8BxS/WtX\r\nDfi5uuNVV9FNFfSgRibqxWupsksG2cO6VajG7obSwVGGdJI9rOUm364d6Yph\r\nD1N9WtvRvm/0zrmtEguu7RLCzU5nkKl8ovk06L+MSlLV3TWp0ThReTvs43uq\r\n4yqerQ6acDPO9Xzdq7rGSxHGXzGyXEoizqQ=\r\n=G3ky\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/theme":"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/line-ripple_15.0.0-canary.3cc30f6ad.0_1664903919086_0.38329659716839526","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cb269509a2af25be28c723c5e7201b164e223d57","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d9cf98e60.0.tgz","fileCount":33,"integrity":"sha512-CKbN3Ac74JvlCH327XjkiWgIiFpJHS1TQgvqGMDrjFQPFhg9t9y3GTHevcsPvsJ0tzYnQk4jm9MkdTtnCQaQUw==","signatures":[{"sig":"MEUCIQDRGy6EIet+7RhGHmX2OtVZzHScITYa7o3mk4cuVv4pmwIgVtvnlJnNm5Er5OcWBPfowZR1WOGcBhpTdw1qrmTiOqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPINwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHeQ/+PgSfgRju56/xFijfJx8NuD5Qw17ZF4tlP6kYrl3gcsnUIKAA\r\nC4E/+W5cJttU/La7j0KEu9YiJ0wRHm2+y1p/mlITENVuWB4iqdTl7TwqRGOs\r\nXWayhTxxb3PPu0BplX95z+0/xp61D6rLIkpwJIaafpbXvUJvOo2S/8S3G9Oq\r\nwwzBjiIwVifyEC2vtym1lxdO6IZ3EmoLuffLGXcXeJTsR+B0VWwuz1drv1H3\r\nTSgy/IdOIJjoMXybxb4j4rFf/6CFWdJxWf3WVbkf2khWfEU1QiCnvXXUTkZ2\r\nKN3eBiF8YJa3XgvLddXqkuO6ZWNQF+41Zrpa7VyydUulTJICdzjD+60SWN7w\r\nM1CdfpHJ32cEcijkp2vlCj4k7BS+sFjTS2PmPpzz1jUEkltvLRDUEn6MYjNQ\r\nZzhri/ICmbB4FcI3tKovkK8+oi0fLfVN2o6qh/QP/nin2HiP5swK7zPwHdnW\r\nKQPrDM0aTxiu7h70eo6uGYYRSD21mscFDv3JDZy39lGJxxBMcFfd0i1OvqVg\r\nvCs+faGgU2Ectofb+AjIvML9lGmkIVFkNF2QF8KfDslgltOEKB2LiLCixSps\r\n/oYYH6o0n6XjKn3JmHI5uLbiBsAqcv+Ub1JKjLIfhE3LUVyl2X3Fi9Dd/4h+\r\nFcocTCJsz9rSRAQdOS7nlbCXG2f1Q7QqUeA=\r\n=2M+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/theme":"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/line-ripple_15.0.0-canary.d9cf98e60.0_1664910192058_0.6222232626937796","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9ae811265a2643d913e121dd239816a6c8be8d04","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d71935c8b.0.tgz","fileCount":33,"integrity":"sha512-/TAMMBiDv6a+FKQ1hMjFgxz6Gt/4Ksr/TL3HPJcAtaoRlEOY5FQCcU203Ibd0Ixympmh77qsy90JvTiLB6m7kQ==","signatures":[{"sig":"MEUCIG+ZVxJDHXrTVHi/RJ4WeHXXrLE4rSEfH/55ZQZr2KzlAiEAjTR6VWn98UNmrJWFz5PxPLiakhsmvO6Sq0pMDWxV0LY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo5aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMiRAAiLF8kPDa/CbvvsyiXl9oFGw4eesVyd7Yx/Wg1hDlhtmVmGBP\r\nQUHMAzpyngGQrwvgLlDuWGA+JgqnhH+Ac7tz9NbdGIbJUYXUA4yX8LhK7rTQ\r\nIJ4Lvju9IptQE/+yjwJS7bx/30G0HyU4h3Jb7Y+ONz0o4QIJMpzoUPCq9vn7\r\ngv5N3eM0lqT4gokHEGk6S/86IxxGg4Q1h/qkd5uSNiahiPngILZsD38UzWyA\r\nHmnvKg54IwJUqP8v//eA653hMAHGIqTkeFLz/L/5tktToJbxeQv8Qo0yqApK\r\nG/ow+2f62/VaDW92DmJDzaqAotf6ay8NjCEr3evlce8idY78OCqYe8E9jTYR\r\nlrmeHSpfSII2oaEsHRnPAv03lq+3MlPHIc6ZSYBD6OT0ti6aajtasElgVQs8\r\ntbjghPZmtMy0faYOXy9O4nmrlaoZs+cZ2hLfAjtMenJ2GJYjJE4WWcD/44km\r\n6jJLgAdPQzE8WvL5tvr/Wa9dl92LxdnLxsidGRamdtJ7sb7zgxmV54PSWgO+\r\ni88yGqzlSecHPKkttW2iEQXBVt3Rtvc1/syiB5vIsr5eN9r1KOQnG59XsNzk\r\nxzruwQX0HKYuR2JbnCKAt1SALDeQsxQkBOg1+X17hIYVtT3NQgY0f1KsVc+P\r\nf5+BC+jYyVFeb0SORoeeRj7aAXDURJ1vPio=\r\n=5aJz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/theme":"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/line-ripple_15.0.0-canary.d71935c8b.0_1665044058536_0.10001869176604727","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a45e488b46c35e98dfee872a0bab3d0dbf0dadb9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.49c56a25d.0.tgz","fileCount":33,"integrity":"sha512-ohoCAhd5y3chZqb6KPBDdd0HJhA8sjpm8nDoD/ZS/ESjVo0zSiN1kRadUf9pn210LptvbMcrFyWEMdOo0ap0ag==","signatures":[{"sig":"MEUCIG2AS9Ta0ssTuq0sPbkAvjx7h//t0fXrB8CVngV0Ol36AiEAmLe8/iyf1r3XFrcaVjYsMrAUgp3C6Iy4/vmRq8tycyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyNvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZGg//QSWCv3TznNaQKkfc0Dh0t7asc9B/FTdmqsHzZjXJgB3kRSDn\r\nRjcxqjXrrjkGOnWuMkh+bmgWLBL+V0DMiqXHWxLFt+5blAHlVMiXLf++w8HS\r\npbDAHFUo05sTthLTcmkLMcoDbK53LWFbfGfjidfw0jG65rAwXvYtcAbH/FtT\r\nxv+IKOmwDWjH1H4Z7l3tGuVRqqcnPGTL7Wnw06WKz42IH7FpKm2BXZqb7X1O\r\nwB+UHZLdhMOaXirxrUreGPnyQcYe4/1oBqraO44zcU6KPWkI3BhQGcMmF+GA\r\n+dJWSPYhphVMJtqlDY+kO51vCG9v1BEx0wEJvggJJ7oGtff9bdfpqkkJw3rg\r\nslzOUv0NdItBzyVmcoTQQSN1/YLUD4gr5oPRsYfDjc7IboE5S8lhZEJjmMHk\r\nE2fIjKlxLPoA7DyVhdfztV1RmOTgoLpcLwCnW1MbPF91om4pEw3iKirdLq8Q\r\nD57W3jJ69y7goG0u3E+rqjsuMPOliSUVdAGmUEI7gfNvHaydhlBDYgY408gz\r\nITB6ABsIy5Zv02yRLP6mwgP/mw+TpFA1xSX2KtZYWYqGrcPY/OQ/pzT953lH\r\n291iIpzloUivxfH31Zp2yXNCd1g6U1SMQh+p0tdc0GjnoCWrp6bCZVkch6yX\r\nThCFwp0hlCdv58+nMCh1DFtqn3wmDUzZMEU=\r\n=XN1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/theme":"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/line-ripple_15.0.0-canary.49c56a25d.0_1665082222866_0.6686964366466592","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d644dd4fce1462f7026314aaeb9eb4ec3868246d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.07acddef3.0.tgz","fileCount":33,"integrity":"sha512-B2ymNmxdbXf6Sh/FzBO8AhmIqAg85J8w8z9L6w/ENTnlR4kN+3XFq67ToRMu9FVhN9sMOWwDZ0kDNCvEJbtDQw==","signatures":[{"sig":"MEYCIQDxL+iKaeQcTaKkm7GhSPaYGmSkZPJVHKy+NovpuccpJAIhAL+sTGmJw0130WL1X7ruM3prB6qD93+3oZ7Oo+S1iGPd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJv7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp14hAAm624wLy9fRCnuuRegcCS7zPeGyu7RAC8abOyPvliTNqoao+u\r\nV5EmF1IEdFvodxIREO/Z2fNjS+d0gmeY+o4j9C7RgvlbyUrQGj0SzatgObV3\r\nJaBALoaoiAddB/DPk1qkM2REP4sVDr4EwkAqHhHJwtZBjPw9G6qaKF+9+CuW\r\nOFmWZox8geWSLnQxnJKaZRZdTlDJU1Gjp+19rnVU/MkAq33zXANWlCDU4Z/n\r\nQHdyE5s6blXPRhBuQ/3cGkC0MhwTKUOsIk1PeNRUCTj84sL3PBknJK6wBfsZ\r\nmP6+eQTVYoQYY1/Bng3FDmAQV5qhiXHxPqabctqgQa+A55HDyXeY+lzumxyd\r\n+H2GyUrLafh8LVE0kdL0V2Rx2ykLB6eQsa9bNS+bqnxXe7+4oAilS5KfPJpP\r\nR3FdXq+Idq6sJL5AL6L0d4jcq9mU9ZD+WPJ/gHJOOGDlrLzQPjmgrs6SyfYx\r\n9sU12Qys4oa3qvpczV7rd1Kp2eXCjamN34wFJ/FievDnV/UcQKBY+QRPfsJO\r\nJ1GVHzC9UKfQNpYF9q1Ac8bKRydwwQPT72749ivYfWQ/5IEsPynckhSxEfpK\r\nszFbaKsr1t11XGJgQOkfoIOC4dp9yjl/R/0zrTVbXko/hBH1myDfP0tJQrFh\r\n69vrwyCDxWK5xYicFnccClLFsb/Pv1jN+nA=\r\n=e1MP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.07acddef3.0","@material/theme":"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/line-ripple_15.0.0-canary.07acddef3.0_1665178618735_0.8608337968276818","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8312f35dd2575ef7d83f4468b15a393e3d7fd3ed","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":33,"integrity":"sha512-SLfFctc44XJl1vqsearl8zFQR5YcqfPjmXz0xcPeMQRWUaZsAse5hYnwxjub3cyK+zBwO1nxM4C9PcpBHRYljw==","signatures":[{"sig":"MEYCIQDPBffhj7VPu92QR9cEIZoGib/KYx5PTKakXT+u5nLX+QIhAKZaqRAQvLPBRtrB0HoPNPr/+dQ88c7AE8S+s7h18O8V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKAVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOgw//RPCbGya6jteTKOnYW1I7g88BCN8NPqK3cBGCUgsUkzRqSrl1\r\nsKzX985dK2gMo6cAN8/WAdWSMk6L3+sgWJWtiPUAqTadfSfKsTVuPbMwLiJQ\r\nDpV64eC2x3T4p6lBZ5j0Qm3clryaxqEQArRdSx1PZcyb7dmdbnjxSxkx1bKp\r\nfAyFCp2YZYE12CVF5UEpXprHviCHhysS8glM4nOe+30n8KFedoYE1bvfBcus\r\nf/afPiEy1tIA7YDWlbifoSUKnyvNDSf9tcS37LZOdZ3ydLjZiPFMct2+DRms\r\nQfLO6wqXZo+gf/EWQM3tyAuZCoKQrONbRYPiPYPY141KuPhxNv9QwoGu7QU3\r\nNOBbKzS6tLqbGp32mMJni0BCHQvypqcLU1H9TpbwA2rmZ/9V1G8cT35h7FHy\r\nrXU1mxIyXDVPEVk3TWQeeljr/MKSm6+s7Yr9DG1rPUjQjnyhsNROSuEY1UfA\r\n3ZBvWDib0W6me7R8DPCbKnO6PMDn6PFwlX4t4me3H49huYox9tQcOf0T0ox1\r\nJhw9F7Nrd4Vk48ndnC6kmxbSPbOKKLeMBthgmW71EbddVDdGqSbmsI4zlb+c\r\n4O3gr63GXTYnXBUMU7xheLcNy5pn/r3DtZee1mo1nsrl1MfCFUlEEWo4LsZG\r\n76ICX+0B4VtJzADrlzAooLyRNuw00n4dndk=\r\n=JqsZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/theme":"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/line-ripple_15.0.0-canary.1c74eb2c0.0_1665179668697_0.18163364642983515","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"025e0aadb4ebf5d10f651f833450bd037d697477","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.dadfb713e.0.tgz","fileCount":33,"integrity":"sha512-aBefx2/IkBgWDgnwB2psVONgs7h15852Nty6hmmUmFFT4nHaLKSZIQCIsqG5Z4i8BLqqpV+x491IiDu6kAR+Yg==","signatures":[{"sig":"MEQCIG3q/rPlSgnmbLYc10eZIOuC6NROuJzFa36/IGGPRnxjAiAlRWnK9E+VgcXV6km7sYQRYWtNnz3v5Ws8YpzIYd4EPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQULACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiiBAAkfPZrWwqx7VAGAp1RIudfIDAlW/gpI5feybgKKPjymrmp0v+\r\n/ROk3PfcCz9eDBN5e0U6GZue2uoHxIXAEMGyTD/vK5Y2jo9UR1MDQlqksMLM\r\nzJgrTtzJ+c07HFwca0lJozQeMm+774H89ELe9gsgfmQpOkd3SDmwg/nzBfuo\r\nZ3sWeIqq6E2z5T8EGYgqhf8V4uqlWM0dbux3eMbYHdNZRH+UbxwWvCmEF332\r\n0R/ORiCluHQw0DAexZWJQXDpepS8jw26FtkvZc36gGsWrZFlJWcfXxROFgrk\r\n2eQ63s8bO8dzhpp/ZnysBC/s4pR6u6UUNvcK3CZ2PAvMM5KitVVdWvVhLN/U\r\nXm+X8H627fr5a4Wjbr87JinL4xlD6XyiFku7RO7ackd1YdYYsv0jYo3ROHEd\r\nAmdET1vzWEUtMOewhYln9MIqWMWVphMa4pjkQUPMBKYYBcYP2SvM6ogoYq/m\r\n2/UECTCPOtxDPmVdx3yngmqzeGDB4gjeXBmX6dScIpuYlATetGJIrV+OVRHi\r\n8uzNQad3BPifvP4oCff1Xus+wKeacxwsAymlWqwoX+5nkKRC+vl6V5Y2cT1c\r\n5PQYJPoKr3ZRjHcfb99B4gvD4QHIoCd05tFoFRyi/gCSxlfBHtfhklQb96ik\r\nphT9UfQExYQeCWiGlQ5W5cDdNqduHbFrpKk=\r\n=CrSD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/theme":"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/line-ripple_15.0.0-canary.dadfb713e.0_1665205515341_0.30842383444089694","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/line-ripple","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"25efb76ba1b3acd6c2beeeeb12192f8fe070b728","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.395f1ce61.0.tgz","fileCount":33,"integrity":"sha512-QN0cevvFj+989WT29CblOwcCpZlizfBbWPvy18s1l7A5gZ3g5t6gIHz6D7kPfE84zC4diZO5r0ORRruMGx9KrQ==","signatures":[{"sig":"MEUCID7stb0Rx4jDU8TEQabVzSMFeXuEOTqskWNGBvG4h+ncAiEA2qpDg7qcTtmot7WogKgpSpAXuaIZrgAQTmdIsN5QnY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqf6Q//ZTQINBOFYx15O3Op0eoLKHJyqTD8L9n/iKAf25jG0XdzmLsk\r\necQotkw3DXYfSdi/3UpsLXv0icyOnZpROCbAUcg1gK6AsBW9sIRqVCjkT+by\r\najBRyDjbRjYpVA48xqsu/49k+l9Xx/Ba/4thJ4M2zcNb+a7x8QdaMBPCoeUH\r\npvaQ994ELB54vd1pYhMBVIirhn7m3sYsJvmU6abxN0UXX/ERwc4qEBBrZD7T\r\nHqdmyb8/vH7oWU8ON9N6TG0pjFPlwu2aZV5v03WeRzxtQOF4y/cze8UIFPrg\r\nB3gt+H/XULuPIOUiXSm7Bl+dtyV96DylEu+KW+fUIzonPzdIh2TbdlzyJZqb\r\n3imffc+HpJ9X4eyCsEbx/idHP6Ujop8WK8Cumi6dmHN9SZUNGyP4y+oGHwvP\r\nzdZYC6AzspuDbwfyjlaTER9W28LVrFKaAZWb3m2p3occCyBFBgr2y87xgCw4\r\ndNufZS5tBsHi3fGEa3c4IC1HttsagVtQtvfAn1uv84TRqOS39ZJOipzbE19S\r\nnSKdBHokU5upiOScqVeQAyJcNK/LrcJ/pxEueZdFguZlO+9kps3Xt3F+I2U/\r\nhCQ9P7iG0kle2k7d9qwB4zdEcOVLD2lRriuJvw0It9iPEfOmHqp6QHH24Esc\r\nzrLWY4qBgAmNW9FjqfzMBWcGRaElf2iRY+o=\r\n=geht\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/theme":"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/line-ripple_15.0.0-canary.395f1ce61.0_1665205635945_0.6616281171764054","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e3bafe8d66b72666e5bb781b8da4afbf2cbbe6bc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e741b5c82.0.tgz","fileCount":33,"integrity":"sha512-413CI5zBZNq7jPOXikmlAKmIHxVNWbr1fzHcyCI4ARGI/4tyS2T6BKlE/rgj9zHJqQtxlm7ialKPAbM8RfBLtA==","signatures":[{"sig":"MEQCIDN1GC6NzQlaeQvLtG6ps0MtbxeBeCyDNSeko/wafmt4AiB6obb8dZuf03D1uXnZPm2cRHGeAF595ov6jAXaXjzNhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFhVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeWQ//aWY33s9RaKm+MK3obsjBuF3FOhWbPSf8y8VuIn7Skld9n9Oz\r\nI/onCtduNmwhlpszr7Al0Jqt+bW/dgQoMyT9tJdVCu82iGBlLZWk6P/9rq++\r\nLRRU8fRJc4ruGPi92XRNTwEC037d+YmZZT7WsZvt9BLvGmK7IVRJQVUcoQ5q\r\nn9LkWNIG3hjFsxdWVY49y2oSIGU85Vusbr3cvS1CmAGlaaogyZQpKRZa47XX\r\nhtoNqzKhYc++rRIXovKhgG9bsbMWxdMFJHScMEumUkB+NTBG2kWxaxAjuLw+\r\nmR6FiC6R/wS+icOzXeiciWXAUWYLS06Qoz8FYMMukTfNplGMZ+J+jC1j/Jeb\r\nK7+8ZOwFKOHlQT6WHf2Wtyx2kBFk5zw4N8xNhVPSMgnZj69KQqejZ7Av0QSF\r\n8tCFnmU+2tquoQWj/gcBY1bGl/deIlaPrC3GNCV9U2dHPncEGYQXfJUgX1Mg\r\n9PQiuo+EtWFJEqeJ/5/IzBa3gwakzDwJwC/8nCyDFiNF5NWBc+MlX7I9ydAg\r\n1I5VFtQsyz7D14ZCLeraxp1ZqVuV1BSXT+l/oAHNjmh55wuvlyhBhxLzRdET\r\n45GMj9CNbyNwcg3w+GzKpffS0UMX3VGJ/RxpF+CpdDUP+llB2Hdu/RHwjhH0\r\nl+bTyDsKrpYxt5H0jiZhtbSUOF45QFBfzBs=\r\n=X2uw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/theme":"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/line-ripple_15.0.0-canary.e741b5c82.0_1665423445701_0.1807995300087739","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"15a08b60d6d90b431cb376571549c267a805c89a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.582f3cc1c.0.tgz","fileCount":33,"integrity":"sha512-Vb0d2qzUeVvcK+ncCH0jKkztCwSjTGySjgaUcLHO/FKpkFYhTrIQGVEkjzZy5bmu7ugYB1FehwAZKEolaOi7iQ==","signatures":[{"sig":"MEYCIQCwbNpvvIIb52dp14kVtttPxGRG5yUFJR/c+EVuTT0UuAIhAOIQ/1/RqZH208vp4jzRiouXP3/A/rWqGp7JYROb4ya/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPWWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzwQ/7BiT2nnGF8tUixD7Z1vZpCaGdz54SJdlEGcSHwnvS4Bq63heY\r\ncEMK+rvikPb+/TiFx1bxVwfS5srf5wD6QaFBN+ZvvlxnLAANSaFZPxfBHs+G\r\nCK7+E3vJheRLj0vqmMQduYU/ofoa3+Pex8w0qD3zoMjUMRNGKgWB7a/KWgff\r\n/Rtknwp537eik01F5Ro+cZ2yz1vg2CuWiMWz1XRsQ8+G48qC3CW2LEE8khYy\r\nD+Zheba/DZ3CU9Ie8itYWG3bo1NkgKSLxIiC39s7bVQfZu0u/Kf6VfP5E48f\r\n9B9trx3Q2iC4nfMZI6Zg4r17vdpMby3JSb+17nmH02rowEDQ2a1ouY8/Gr7x\r\nktGvxoBR629wCAQmIoTel/nxUx4KbOFEDHZXYu7gY0SNyAGpRTgpeZS4/EN9\r\nHNhZM5hlzAASTarpJ3j7EitdJHzI4eH+MmMPV1aWBK6crC3ADDkVYaiolHjd\r\nDb0dfr5XIAY2e+k9GSIfwRFJwzQxE7R6asEBp8cP4IQatQMPXwtHXUYCHf+m\r\nnZ3mHfMOeUwou1uJfQVh/XOxGt4wVbZ5aWkE+m2/Aa33uN6l+rotpYgZEp4r\r\nTeM1I/8HYoiTzpCOLuuJfspXJZ5XDWzvVoJZyeYvoSvYHjepnpgxpsogzEY3\r\nymu2iQf+taXfH3lwC2LvMPSQY8kMx2CsSJg=\r\n=Nrzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/theme":"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/line-ripple_15.0.0-canary.582f3cc1c.0_1665463702694_0.7140906556817688","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"76a64781eff7e03172017b07c8387e79b1219d11","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":33,"integrity":"sha512-ta/4IovPPKn5LOoOg1ZyLMw2Y18XNdtXwnL2tuLiqZLWFeVtzL06y+dz4qLTR8trNwfT0W6AKeS22OVah2z8mA==","signatures":[{"sig":"MEUCIQDqzAJS0/q4VgHt4Dpu6fo7f3NY7pL5WrGs9dUZ98gjtgIgQhIcWf79KjMvWFynegMNH8TZ5enbiKtD82Qv09SWPu0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRqynACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqckQ//TlQJDTkNHnyiYD7/lR8KJDRBxPa4bUTPexOApPSLPYor547L\r\n4vPbqfkPQYRU3M6e8YfY+1FgGkBmcQr/YC0fivHHPrssNh0wYNrljaMZWl8N\r\ngusFXg0Z5yr7eN0x5G6gnzpn3R8wRMnye6R16KleQO0VjKJbLUX6IJJr/rrd\r\nLYKnAGtZ8B61Xnc0YHXhVMY/tTSM07QjzPeS66BKKaxLFWo9gHmxPYCIu9Oo\r\n8FtJ8+YGugUF1jBu5XBFr9kfdYL5jv5a3D2YraDQHiuacJdcWfo2CABuq617\r\nq9//ZjW+2RrLM89yEMJ6QOuu5RfOx04RUfmci+pNlweC7SvTJKkDs6i6a1WW\r\nv38r+er/tjbMggwQ5kEDeUrNKsQ1dB4DBywKuAtG352OHDOUWPkOPqjuwt6Z\r\nTjTxOLQscDB8q8Krnb/uKD1KKgusc7AHFuDJnV/6M6BUqnvQgk/Fh15HIgOi\r\nTwcP5XFw1nscE6ODAz8F7QE51O1tL6zP4s19FF7uNt5JiyB3TNNP/5MA14kZ\r\ngXw9zt9B0slc2veK3zxWsuOg1GN+UIZsdjORIDa2dkl0C29wxaJBDFBnb/7T\r\ntF/vq+5h4/Jm++oYrDNmakme2C2tMPec9Z2/7z9UGPPIbUPHLLNqU1hA0ysZ\r\nOp0Y/CHMGrL0d/4CzThnYCeYRU13+T14A/U=\r\n=S5Kd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/theme":"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/line-ripple_15.0.0-canary.b1a6e3e88.0_1665576103753_0.16776243415401026","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"76020083f4aab785b2891dc67c517c624f524908","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":33,"integrity":"sha512-hoZp6MyR+kQxYdAHlEpb0q4uet33UWvJVxOC2F+VefkipSB4v3yn72p0it5iL2f3AnijzEGg0cUZ7KtjbhasRg==","signatures":[{"sig":"MEUCICoMFADXKvAGYD1QaDeI74xqAjtNqRKujcD4L5RQrLf2AiEAmb4DEJWV0273KOaHnY7SiKCwp0y8VSqFqCGLX/U2VTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvINACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp07Q/8C55p+duLfkk3qlmv/6XrEV1BfV6gy59YT/hqKhd05zLS0Pkw\r\n1QcSd2A2PSIO/6oWc1CR2V3sJqFY+TUouQwE79qwj9+aLD0AJx67OQuT3dX9\r\ntdzafDoUYTG1a8nVXHEPhP9WWYPkdwegRkcoKW7HJwDsXzP9H/ZDVzTtGNcE\r\nXrCQIiyIrE7Ojvkeg0hQvYJDLtM8WkG8Bfv5NzAx0zYtE03diGpPmxesgV8S\r\nMbwB0JgXPVGd6cePnAwoov9DDk8X72qNH53MTqYx84ef0elhinNKidv7ViQZ\r\nFUTpeAtMiVWJy8RThSstf/r5XVwyOsNldUjuTVGtH230G5dKRC/vN7Ns5+Gi\r\nMl4/oAM6YRVd0wDia1YXKU278n7us4YVeMSfvG7x7Kq0K+CVer3O5ETl6RHj\r\nR6MmpGjRvb6qyUm9dVr8271+JzjGgt0hpKiSpdGG0uCX3Gpb4HhkJiUiPcJ+\r\nsHw79wgRI+1LOehdyJQ7Z4C91KEl3aSxLfCm7mbCMsYkk3fmjxh3MBfK4EmO\r\nIzmCpAQCOdf42f7GBnT7osz6gdkEKQpwBmlFP95KbBYsWzBR6MOWtmqjquhC\r\noAW2vBCo8q1VQxrWRVgfYSlZPPCsQNnkDXmXSmKnm19d7Y5rscwSO3RGk35L\r\nTx0D+mWUyZWljZUL5sjk/lVJCPoLrn6YDNE=\r\n=MV+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/theme":"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/line-ripple_15.0.0-canary.c9b1a31e4.0_1665593869775_0.7848316413749086","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a832878a50d60eb5101404e3fc516a73c1e33b25","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":33,"integrity":"sha512-/Qon714e1il3OMqT6UL34dE0AiMeb9Lp7f/N2lLQk2VfcDhYBQ1u1KJAZcuFcPOk8PbI8bmd0JXTJQYzEhrLQw==","signatures":[{"sig":"MEUCIQCFsAq0v7vtqxB4tz2uk2h4AQ7jSWdP3RZXGzPvhdJtrwIgO42VrDpOK2DcIKk7o1FUOyAfAfjDuj8jRycz665tYO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxNsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpE5g/9GLrqrXCDfatLv5MyaA6oAH+YDHINXIfZmSRwMHSFEeMw/DYz\r\nKaF5QdPXBvoJxDxwB/tKkuQmWptHUEGQZ6AwC1HgL4U+byrRfzER9rc4V4Uv\r\nKyPn9hICDRWrCHnxx5W/8FFmNDzC06WHOffqO/A7I5E+LT+rYoIqC5SqkVr9\r\nhLRV0N8hwLZV4dSc1Ed99OI6ZXaSc8AmPkx7QTf+7ozuXeNK7IljBVxzvvmL\r\npiGvZu+gpbry2ORDk+N1V7QCG2knqCXjlpOdfBMvetf1OmjpvzQB/nnKXwWm\r\n7zQjb9mRiWTGIjkUc3mPVu/ZOWV27Qfi6tidvp+xREKa50uMCy4YVCWKUguN\r\nZUTmyqOwyeu4ggZkcDEMyYMTi3CjFhEJIaJljklrBZQq67LX570KwJYpqEzR\r\n3gvgLKCAwDJ2/cb5RRSwGTXokffUGwNvAan1O9QMvMbUKVJAP7+TOyZ82B6/\r\nox1qR8G7yVpfVS6Eh3DJL/MMsf1yukRstPnox0UqpZTt1LLAdD4JXi3tOhCV\r\nxYDhJV5N5kitouRsYzDsyRuf7INbTfn/83EIi2kEirWfXmFP1bzNi1A5l4ad\r\nVN2hZ4YYh72yQ4pbUXjlelDoxRBNhkUGxl2ltsb5KF6IRwd7Gim9uNWI9I9U\r\nQQjR8O6nf24EEHWT6r14J09kAXX2TyFnTp0=\r\n=8CPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/theme":"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/line-ripple_15.0.0-canary.13e9b0d1f.0_1665602411870_0.7226408252201342","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42fb960589a1f4ce792ac7b9ff6e99d89c2fa83c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1dc797e7f.0.tgz","fileCount":33,"integrity":"sha512-79saDq52Tu7ojBh/BoAjlF5F8IZy2sGi1nA444zcXqwXqyrY8QbycF2JX8yFrFvkDGN6b0VQqVFSTPLJAlCbEg==","signatures":[{"sig":"MEQCIBqgFSFyfe94Uos+DFpuXz7nsZuxaI4JAjiZmjKS2mreAiA/z86TGDZPI6bo67d5ImW4SACAyg1dulWFCx5f7d5suQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS6jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdABAAmnPpPf/UchlmeA5umsH4qxRKU0Bjgt+Zo0ik+RYedOuG/4ki\r\nswWspr0186aFhW+SEphJQqGE+mEzDXiEaJmDFoDgHcSzQARJD7OeT2iaL7qn\r\nwhAtUudkfAfvgJiMPJbDWu5gETMz+hFJU2VUlSUo8mgrXwwHRHdTAybKEQ/1\r\nSYmaM1gDKyivoERo8PUj/03oggjx+VTB83p2Z4lyOSikFEuplTqeTKsp23db\r\nBW/S8/mvFno3yRt/nur/4Xm9QpGb3OsQEDr+A1/wkhE+JE7qbbyjhYAuxQpS\r\nmtHa+cbaCIW0LWt5wZ2OPMa1x6ZKKEBI1NHi89qD2JmfAzyNGvC4SppQUI/J\r\nTPOqfbzyvfnKgmmh+5Eby0ZGfCjYZaIo6TEHBB1EtQAWIQVcVyKYG8zocb8k\r\nsRnV7FUDVjDWfbxzdemNfllEE8v8kcD8D/ojfXCc5DHhYzeknj1yNR1g8Fqu\r\n1qnOqVcfLdUerh6cB4OINW/D3nwTthSfM0AB2sB9wgZcwgeEACihWwap29qE\r\ny9IcMClj/HsQGuEAcjBu54qxOrCa3SY092pVdMyeqe3CmM3Zn83wFWL/SXuh\r\n3gUq6inVa3oreBaCPIEi6UMJZuX3jmgpCMw0Uxd9qAZJgD4lVTkDsXS/hJzQ\r\nTL+YrlEH9r/xEVss5xYh3fWIipCwkQEj8T8=\r\n=NgBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/theme":"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/line-ripple_15.0.0-canary.1dc797e7f.0_1665740450807_0.8621729884799167","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"586a6bdd11714808f6bbb5bbb18df1f1c8618a3f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ed4009397.0.tgz","fileCount":33,"integrity":"sha512-K0o1tUDcbi+1r1NdDBwvb53JRXCMt/bE9pFoB74Xclj9CabiLbMqkkhed7iOv6Rxv12lBL7XDGk7vlfZBjbLxg==","signatures":[{"sig":"MEYCIQC3gTgniOEaa4dusfhDJ9SaxdswXCNyCZcxELkHgJJP4gIhAKjfhYLjD9IhUyamjqnyGy/xsfzLZ7jPIpQqqb1Wc8rM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZNeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8aQ//Tzq6ghRterF6NJxBN4Mlhv16GepDT4DjvytKCXiHhmpP2keP\r\n/n9UF47lO0N1n62VfIchNVM447jDicfCQ+UFFlD9AHGGOkThHzwmVdyknLr0\r\n/zf6SN4rIAmU4pyiT8O0+7xO1LBabXIbsxnsSPwvyg4kd/+e9uJOMHrSJORe\r\nbwd6RLsX8HJyyJV3686arTHcwZMkGd2kyuaypt3eIzJiCd9snnB3EpcB1feC\r\nyAiXkr5wqxPEpV5uVtaP37bghtrOxramnRi5uFgCRo/lq6feDgSupQ09blWx\r\n0FGWbmvwg8DdX9NE9khFfnhtfJmi7X0AqTZYIIkzj7DmpNTQdZRpbl/J7xPI\r\nu+/dE4kTT0YJlOznVhZSJmXXYuJwoxnsFntKkNUJochcY3VNvAsb+fLGbKlK\r\nE35X0qAHBPRoQ8LpZkA6/I/54JIeb89chyoodSLcwzOWBCEjGZmGLsbVMoH/\r\nKa7ta+5IpGwMZaE77hBtG8hbz/Oq5MXTUpaF6Ukou2L3hjWHoe3sspVIBQTT\r\nTf7/tRQ9q/glyMrQdk1VXbQnjZwqeWFN3fCOsWz0STCH2DNRilpAWjX8EMwB\r\nsPPJiP5+VBzRJAziL3LpD/OUr4yuSxNcEpIMY9PutWmLuZsrHdHne9TcG1LD\r\nJLxfgFZfbGlPmNBSk8wlkcDqQmaFi6GYcE8=\r\n=NTeO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ed4009397.0","@material/theme":"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/line-ripple_15.0.0-canary.ed4009397.0_1665766238676_0.8862390334721744","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2186c0551f1f62dd67c602882380a5f3290e54c2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.95ef196bc.0.tgz","fileCount":33,"integrity":"sha512-fgylHp+dNCANuMew90EOmEbf45e6nvaWZbgprVc3c70yJZW3zwV/b69ySPKggmROzmS2qEUWYXPQZz1KujqqNQ==","signatures":[{"sig":"MEQCIB3EL/UWREZvCUZXXzCGR5yftW3CmFY62i0h/aJr0P8SAiAWHzO2oFSQy3RjY4O9ckrDm0LmnzovHhni4l5HsOAO8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmosbg/8DU8/n3q01EuCIc94KjEoXd9t8PopAwLG8lS5leCUWlRSORSj\r\nIR/1YUuYLPvrAC35t4iuYk3piUE3rEpcn6E5mrmwfKjvo/pQxnmjBWpxKHVv\r\nzJwbp0VPGqT6XrZz+XbfEOvoc1zHCMxb+83zFUQHjY0NTLmofC7xLQBLIMim\r\nUT+VUO2e3Qllq9jRP9jiW9RmwjqGGZ27tlxFX9nJ+MPuLYM8wjzuxh2v+fSx\r\nhxoXsVg2MOdQNEjTQSSm1ZPOuEgqzRbV1CfOfRmiUU+BKvpzRNutanVd9U5d\r\n3RAsz+JY/NP04AiJLYSg4m4we1A3mfEkyqIzu+3IE86QCZdrK/i/pwAWmaHG\r\nAej5CYifzev3D6TxiZx2CGHSRe+CXI/nuc16XCHWDUGl26uwzMrXA7So6rfl\r\nP6nlu6yOcw0vCdcxD+YtUi7SgDfB5tb2/Gf3lBg5WBv7NsQIuIdOQeNbeQK0\r\n5HjwD0+01jydvts4Rz6TfLSrx9fwJWI5zQh8jDAYOgm5XJSpg+MYyWP1dTXb\r\nAdNaF0PMYjail+E/RTsbNyoyhBa074t7ZnIsH/NLTZCnKeW/Ra7hcqTkqql2\r\nlvd3ZgeOw3HrdWnXIRB+KK12+7VUcwfl3KywyYrreN051GP9xNnXEiU7N555\r\nEIOS65LjvU9Y9SxAdcxQNo512nlmAyFyQVE=\r\n=ji4M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/theme":"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/line-ripple_15.0.0-canary.95ef196bc.0_1665789198015_0.9953221048511289","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fd4838048ef6633f5ab3fd8def1f042a2c9d4a89","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.13eea1b2d.0.tgz","fileCount":33,"integrity":"sha512-RmcaBmuoqqHXxFMnckFshdcFh9pI1+wrExbqG+VjN9iJk28rHL7wUgCnAwZ9Z+VkAGyhh+ikQvVRGLqT0g6Kxw==","signatures":[{"sig":"MEUCIQDTTxqSPtJh2Gd+448idX0zoVj6UbQonKiK++N9vGhvZgIgV6kHkgU45IlvthUX1GnErh27HFLr4kBJQ2CpYw8MkCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNEgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrf1A/9F69FOQPMaTldLmuuImyX1rJ7TumJkGRcSsn8a791eIYDRSBb\r\n6OLkZzpWObLkdHqDBcG0Sbv4cqdxk7hDiMyiUxCDvmaPlRnN7jQbCtDT2kRH\r\nqYSyURzRpSzNotrea06RTxXXeXhK4hrt//Y3HQcLGfhSdTXkPcn2QJZvsXtq\r\nSPcwPQSCxso7phdTLqwvCa5ZQBXEQF+sIZLCLkAeKZHov/og+AQAvQQDeHzq\r\njqdF3T/P5763v/OmR0/ShBitq1Fel7Qym/SrEoC+QOFuq7FPA/N14rfQQOSY\r\nILQoNNEfcnd4S9gVRHXlz8AZ3CN4zFpU/boe4i7czxJwFM082UYWRT/yZIfy\r\nRgYyBYVm2vqI2gjDoebPhpIZdxhNTeM3JTfr1Kt6YcMBAdQ0ToVYpEU127XO\r\nr3nsaUFR+dOCT8R9BVWV6AaVdVs5foBXVuD0l/QJX3TV9P1wTT2sUfieVmGe\r\nq8819w9geqIFZJ5bz2IRmeeA6HYSxZEDANKfX5bwVZWsVuaGjwbX0wtl0aUn\r\nHFI0rZZlI8LGsMqETI7Eu9p4fIqVtuJp8U5MkSPLhUZuZ0aMjKI9CYmk9WQ0\r\nneSBB32Z0/io1BaxKtxNvAEqPynK6kDJ2JT8LmFedtYPffHLDASNC58+Gwhf\r\nEI+5nVn03gChsmZlhzk1t21qEjLZwP6SSBY=\r\n=A+Q9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/theme":"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/line-ripple_15.0.0-canary.13eea1b2d.0_1665978656514_0.597839364740929","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"625acc77642898edeeb0297d6f6d38eb457c6049","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ef9b2babb.0.tgz","fileCount":33,"integrity":"sha512-s447XmyKro3Wd1YODhrJwLas1zBxceq2kJatc/4447YxiadCQQ9dnxhqkT/EVS8wm6XTs2HVXcxGAzYzA8sswg==","signatures":[{"sig":"MEQCIGJpSlMMJuiLyhz4yCddbwp8Peivc/mCYXkLJk5fnHFxAiA58up4BjmaQGLOa9AQ5yQxjINjUIMUwOV9ojeO/WyUPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR2ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSmg/9HfeeocXopcsf0wbSJW6yX7xvhtAl4vvijwiaohci4kSWqKap\r\nwGFd/SRELOPH5p09AfykJCj6KiAO1CVNDCd4ymR8sqrRvwXHeFck+pfzMv9r\r\nGkWdP+CYKtd8x8NELrTDMxid2A50aLIDu5x9oU+AklIVH9gqLugdsk/TgOeB\r\neu9ZlO4ZByxuz8I2ZkfjTQT7T0JFQrJlZ8gfYvaO6IdnbvJcXRKiSPiWESJF\r\n9vSs5lJdCbbtxUaYel9cKS1JyGtDDBlNssflZkoNU8KXh5P3JquzgkC2UJRe\r\n/L5mQWaErhK3uav1NTHO/iE9BTLkpQtAxw2zPlVhLZIK6UbjchnpYnhsM3G5\r\nSH6jku1FM9E0tUS7ewteUgGaDJknG6uTr03ME6gIFbugwNzUxkkh//seLRcU\r\nFxYSj0g+jRmAiuoGvjY/of6Td2aW9dB9BFhWawTKItUQX8kfWaATYpB79M3s\r\nb5ft6yoIBw9r/jbk7uPKeSf94Z9GrGeLClOq8upb79QR435MHaxZI4bkHqlQ\r\nsOFKI7I4/i6/HNBlgIP/yaj8SwKKvfF/WjW9qUMAj3RC+sKW5wdIWprUw1om\r\nIi1b253BrK5jMgIzoNqlhhkr+xjaQrQSn1ZbB3oXbsrWOWMehwUHOPqMYY6y\r\nBqmiTKbIqg/qRYa1KBnusvS5OTCXgMzwqjA=\r\n=MboF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/theme":"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/line-ripple_15.0.0-canary.ef9b2babb.0_1665998233221_0.26818939628521554","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6b1ceb6553a305e51f66dd20d87bd657e2b93790","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cec7fb987.0.tgz","fileCount":33,"integrity":"sha512-PfXH4JXg9vJ5Vnf9gcuPIOtJcfFvY8rL8Xl+LqZhl4Dfb8USl1oXBfAh5dRr/o/gqTXCmomCMtwxR0dJ2oqK8g==","signatures":[{"sig":"MEYCIQDCVUTNSFzE2+hFGUqKokDuGPPZh+v824hHoiJzhhYldAIhAKi7g8UGKOhOjabh8b2USup3TxL8OG/WrSdlBn8idSGB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTSrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhWQ//a8PonjgxzSD39X5BZwP3lgZqOUDFiOlSDqEGOUqYuPg7poWl\r\nAvdbLOAKVq0iPHmUkA+4B+fHI8plVpWYojkLHxgANaHnLB+9IOx6VVJo/xwd\r\nAaGRgXprngsH1jHKDHkUv+oLHtxPeq1XiF86xXiz/7DZulSwWy8d+oDZXdxb\r\n8/Td+Zgczumdt67OBwEt10mMeOxORlcG771/ET01zkyHozz81/Cqcv9SPAXP\r\nBQRVPdrkPTGVh49GDMJ6G0E5rDs/fFRxbL+kiOY5fdRP2gf7ZysJ+q0Zwwo3\r\nADROShUUCNP5I2xzYl75ZEknMgrLu17wXU6MsCBVYKZeLN+ad8JAstAs/F1j\r\nT4IoBxjXVy6BLIqa688M1LWZ2pEVfOsF6o32YW4ctfloDOYmB7wK13MIeTRL\r\ntVY/fu34rWgKH32oVy3SJGF7mor4hjze08CWPWnxE1QZvtWhGFculh0NooFR\r\n7EUD4TImlZDG+u94bi34SHuQHZZQ90lbtICn2L0tTTzmw7qef4wIBGRKgUar\r\ntk062M7HGkRi5QHK6obV2Dj0XnfubYvwtgkHB9ON1S1Gt8MlZO1RPc7ne2bp\r\n0V28tHZQHIDiIM008OMUKrPT8ZTBG0OYf3jzTE7kWcgIQNk2K6noidWEpEr4\r\nlN2lR2gLn5mOItcnpOTdUv+786gLFvBdJ8o=\r\n=TvtR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/theme":"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/line-ripple_15.0.0-canary.cec7fb987.0_1666004138966_0.8428116123695288","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6fb7867d33443b64d4ace6275db0fb4451f80e62","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4fff58b08.0.tgz","fileCount":33,"integrity":"sha512-kS+YbIBhMiBCv/nR0uxt1q/4XlNKgiQfDD3pNnEjJe0FOtPPA2dQi7UX4KoBONdLKYO7fREx0LjMwvr+W7EpQQ==","signatures":[{"sig":"MEUCIDOcGXfm8pwpczlsHd1l34rQs5GtuxBL770tfCNFHKDcAiEA3IjfJz3zsaoN8xwr2VRj7vp/yO33+XJ4mexJoxFI/SI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXMKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLfhAAghy6rgOcIfqkVC7yXReQNk6VyllGwx6zVw6fOI33qQ++CCGB\r\n5aunOokGU1BcOUKYM04CQJNDEHZZsmSApIXW0HMRmmTPuOqk/QI7FiF+uQnh\r\nrQJnbqAFmIt8ByTTn/oyBhQDjNGkMFWkJktz8HyezERiuzidECkFZ4ZNjZPP\r\ncQnACJkncRzgJKvFrRytoZ+XmpbcjmqtEoawPu3pMG82zjFXdqBBDhl9Gc81\r\noEzjVMWsx+3dxevs2egA0LfJMfUFrZnybc7sx5esnkE2bYuRhJLVXBk8OHO3\r\nOFeck8ESvuvWLwGHDAHUgSuZnZFW+NKqBBuasaJ6F/ZHHsJIpn+LVKN0+Qae\r\nl51TVaus5Ya1gyD0DaGP3s1jno82g+rrMBo5WJJd6QojuL4zYZvItRTRgqLV\r\n9PdSN8Kbo9IMa4R9hw3TsaZQ898Pvu4h/+vRKBT7fLgOp0zWH765bcBAGFzK\r\ndpV+RD5qi9lhyft9h73TtlNRq0yII0qyk/XioxfI45LHUz4hUNS8uKRNetG5\r\n19efxfzIUmQipCSGBNW38214tp/pmCXoTGNfHmCerp9EnMJC8dTr0WJU/Bd+\r\niUFG+sUyhErCqUNkiApLIAuGw5EVvQs3sez8O5kOsUrZqAmfGVDKR99dWOYX\r\nuRYR4lxoyN6+tvLpEa/wuTTB8AYtCQywHTY=\r\n=uqCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/theme":"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/line-ripple_15.0.0-canary.4fff58b08.0_1666020106041_0.6156694522832888","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/line-ripple","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"82527c052a37b5cba6c86089f74529c6b51efc80","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.587d8f871.0.tgz","fileCount":33,"integrity":"sha512-mp97vai+7LpDVPEdGna1thnNLo9yIh9stL2N3sQVF6jDw70U5culZSP7pGf045a8mMOkJAowtgiC4HvrloO+UQ==","signatures":[{"sig":"MEYCIQDYr2zwxL+gayEZ7PpdG1RGHOYCvE1RSjKpwGLJufF4hAIhAOziahzySxH60LB/i0z6VeI5OzdIIaBXP1gHpltzRFCF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXsrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7wxAAnDC7PLMhb85V7keui+cPzntxw+P8u2JLxYapCjYxjSljaEzB\r\nqvWTLsLUdvNeqOlHCRkxIbIn01elUEleXznRxsvQ619iK8ENODh94Ac/r9HJ\r\n2bQsTpLJjzcOstQrb2ZgvNfQ8MdOymV/S3t8AMT+NlBiEIr3q3tr1CsRYCk7\r\nq0n9z30IovOpyb9FlTd4Fd5lTP5B8UUALwgrHpNrhSOeBq11SrkELFM16nC/\r\nw59kIU2kNsXPtPqTfNlr0P+YYbJVUoANyMlgF9VVEbOYuQ75Q+JhJQaTIkYk\r\nrMrlAfwo8zqxA4pJq1J/RnJtoTZwDyDX1aYFkcwbOptlqCFsKEP+3hvJ8P9j\r\n+9FS/dMB9f1LnFyF2Ak28miAPq6GZ29n2OIWHtY+bku6MrlJmKVEyvnygOZ8\r\nRuASue54hckCknj78nYwg6IS0vls3wpo3GPN2N4AmK/u/IlvxkwT2rRHQVaU\r\nTdu+WxpnB06pV2/P3EmcAuneaBV02nK2s6EMj5HFGdrxy9vIZbgzdF7zj4vQ\r\n+RosH05g+9lIbIdz8oJ+RD0cIY2nIgpDwLgoBM38VJmxhVVLyCgBcvNxvdtk\r\ngeXqrRZ1SrbZuLQ6SIr8XoAuTuC5DjDUcewRenUJnsSSjGyaZCMeRgnXgxN2\r\nRXuDN254axzQuJjSjDDyD70VYEN24Zhbpuw=\r\n=0FwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.587d8f871.0","@material/theme":"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/line-ripple_15.0.0-canary.587d8f871.0_1666022187658_0.01231301341559421","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7116264589b4dc39653d513fb78929f28ac8bdf7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.edf4b98d0.0.tgz","fileCount":33,"integrity":"sha512-a8liURhYQXG51PGOKUFzDGzKC9P1gnoUlWtsSEq1tzJLt/0PT8TbFWSLVvcCzI8pXGFp4wVuI0V7P1ARZDnxIg==","signatures":[{"sig":"MEUCIElym59zZEP1fl2lSSZTigxD73kaSCkoXsU3ikokSVa8AiEA6SpRMH6WplN7+x4UsT8aJJJrV94ZK3r2rBoIqw6F0HI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYVVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq70A//fyGXlMICuPG5FZfojmErMbuPse6/kj4rPLVtT6TxE1Qlu+rL\r\nvb2um1MmfzQaG3BfUDq8kIaFaLBANEo2U6xHUT4qrTHmRFTqTFVGofhaBZu0\r\nSx+yKjB/7upkgMAYUBMNbrlxtffmLw5tWmBynnku08PvCTv6WJUjDybBGRcs\r\nSaxdBDGFXktgcVJ+RpBzqUlzsC2zP8WpkzUcq18XuTHd5sphXOZGQafSBTc9\r\n998p0H5E0msImPcLeSDeV8DBvaCLENT0VcZveFEAiX4Jc1jbw6TI9Yywpzlb\r\nlv/cwcoIoDheoiwuqMehrS7qDvPl7lXcWsdeWVXLy5jBHkGV6JTUp+zfMFio\r\n2bma4ge7HWin8svmKUBkrl6UIrRiRO0yHlIjDbbz5Lr3zggmiePBw/svMEIN\r\nRvDB3XeS5xRVJmquzV85txwCokOdfLygJ2/8jCWSFGLFYvBihWsyrdRrnh8u\r\noDIsRQu2unwjB78xY9z95wVMYNmPG+q/dNOCVOR/yFUrL3Bw/7VSPsX+Ye++\r\nKriUwrVwNPE1Jyk2plsB7PcL5pwp0LhpoEESVrmIE2zJKFxz39xpOBthtmjt\r\n61IQCcAWDG4ceJIbaI511ycRTt4okD+SFEjC3y3M6W6BUoVcRDjrTHvlAfiA\r\n6h5or6+dNJrKJ98xpTYo5ZvOJJfF8HP5pPM=\r\n=7asX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/theme":"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/line-ripple_15.0.0-canary.edf4b98d0.0_1666024788797_0.5656825923214672","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/line-ripple","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0b860a53c55baa9877de6c28d4ec4ad05aead5a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.024ac5f16.0.tgz","fileCount":33,"integrity":"sha512-zLc0nkjwlzoFNSphrzbTqKdD5NBJs61SHajcmrVRr35dD9/kJwCauQqycR+cI6DSoVeHPHQyKFLnqt+xtbrZrw==","signatures":[{"sig":"MEYCIQCamnSsxw61VydSfI5jHc9iDKCRmY3p/x/gxqRlcR5E+gIhAPCYFzGJxC4NeYs5l/ct+kUJaf9ZWtR+OpRG6lOuc/25","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdokACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrdcQ//dmlt0da8GXpovpEattK+adzY1LNDtTjM0Nlc/tCmYowEikua\r\nYps44vb+mtrry7LiyTMUJXqx2TqkUQuGsSWcMcqkeHUVe/ocyVou1oUDRqkI\r\nVvB63OWyavyV/IPj0VOpeDaqW7aIc7Sh6PixZkb5WQv9xx3c+Iij0KG0cd+e\r\nsB+BKnwcEfBZbfJt8DjUko6HgLxMfmdDIJTXay1jN9um8pLiYRtEtlTjhkwg\r\nyr2UfvDxbOvMZpwxb/0Lz9Xd6HYbw+z9GDRPkcbN6Rdg8lBhZQIJ1T3jStwX\r\n4wxPOMMFyvUOD01Th61UI9tCd1WYQwiXgf/JJVphY5Fd/1UmvOhBo+upbBgY\r\nKnqwVjyxYmP/gyMFbXBzIdjsLMATzYo9B8+oN+G0/RMTNLkUyc0kr1PV6PlX\r\nq5oMnTpSlayEr/I7UUpOHGjvioyyD8KJnQ0j+T7Uj/2d9i2YGDZy+qCJkuxf\r\n45GpdoaQWeLI1YUk+Z8uCx4AA7sHp5602AA0N6SK2RzRexIGTXD7mk6Cfhz4\r\n0tcPRwjV/OqBKD1BYxWXkiEDL+y0CcV8GSgukYTjcsbRAEvbGtFbaB/3WZPt\r\nL8jnOIhTGx1ORGeo/A07TQ3CiDI7trWiJ005Lyjgm96JI9VMxldPdP3B3TpZ\r\nAtgpYIaALIYzpFX2kSrj/b8cSbjEVjWuS70=\r\n=plNv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/theme":"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/line-ripple_15.0.0-canary.024ac5f16.0_1666046499875_0.8086866886298036","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0b08daf1e7fa9f08ec6722ddba6969066f12dc4a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c8bdf6144.0.tgz","fileCount":33,"integrity":"sha512-Tkcxc+Z4pNvXsMvQbx6Uyq/w4daDdxXpG1+O0ZXRT9lIjTaZiyT2WcRVSr6UNspz02RT2V/eH9O7rPGI3PsAhg==","signatures":[{"sig":"MEQCIECfsI8EvdFsEsWKZLYxfcn449LXfYj/braHENHlMG92AiAZO9HGk5HEWv3u9raKa8GLgGLycuRlaUYbLEVg2pXg6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu70ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq2w/5AF7K0zJfxRM8o8DbLuknpRjAMNaV1NAfASjk+tK6kWu8xkPO\r\n1uyvY7JTIV5Pg3YuiQzNtyQjt+4ge0JdnaVa2N88/Veg3XLejUBb5Kd1NR6U\r\nnyuNi/ks+B89vbuIyv5a6aHcVVzPe/VbLmz1KGsz4hUDagedU8Bqd0R5R3cp\r\njoKbKMM9szL/Es2O2VgI8vtKFvCbG+luAmrrG5alVquVGkzq/cxBlqPQq1Ty\r\nLdv4/5rtRhgOhayBhnHIpehMtVMrGK3vJowBHfq9B6zUgLSdqDjWqyWJS2jJ\r\ngBgf2I8rlCUxjUNQLEU/Dnt/YWRG+ddnBvh4wUZg22FNVYIUZpMwcjFxHxM2\r\nXqO1hPnegY2K+wjlmQ8O5+CZV2WYG4PkCtcdn2tc0h3GHr7yt+B5SUrK1Dcn\r\nAnRhsDfijEoIj8Ae7KDeY0YVA7EEnxnXGN1sky0MJVfZNsDwmORAUmfnKg1d\r\ndZ8W8mhXGx99rPwmOYowCVRomg/wAb+feVJvtwCuAq7WBGBeg58bJBk5SrXa\r\n2M3WEDz4sKslOs0CI3aUOnEmJUA6kGs8AdEGdL35Y5Day24tlzvv1x5JsYzN\r\n2vdiWrbGRVagBLvPtmCIqu76227JBHlEKE6YZAAi0yaAXjCykOOIV8uvXBdM\r\n25+D+FIlvS4GaoaNMxfv4gh7RPai9dhA4bE=\r\n=a4HW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/theme":"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/line-ripple_15.0.0-canary.c8bdf6144.0_1666117364426_0.5395492287486836","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"84c98dbb605636d57b34f58911ba300668de5ac7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bacda4885.0.tgz","fileCount":33,"integrity":"sha512-fD9+F4ZuxTNxdTiRbU+2//EaruJ66cycS7b9UY7N5oVs3UR7aVBAEFlt4VF8j16RcTGNSpxOO6kCZ/UIYpukUg==","signatures":[{"sig":"MEYCIQD0b97bnJrg8FH5kcN+l9tQNsAoF34tHteAj2zT0BJMwAIhAPJ0Lejt082Ub3z/letZ/090E3buvZZW+IrcZ5TaTZJo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLPg//dl9k4G2G68af9uFtlBM1OER4dJqyUPV/6RyQfyQHGX9BJWnY\r\n43VwpSuxonn7vw6UMuVSad+8QfAyQYtCQtVoSG46Ynu61muDpBnOhyWXJSZg\r\nLbLZjpRGigaXfNgk//cpyLAk3cErcrQcUWzLak1yiCKC8fdfRqtvgYuOIkBV\r\nHmnqt0aWHjbhVEdIO/zqh6hwyxJxlqNJ6Y4P8J9hjpCIXTHM9i5jzfHjkNIK\r\nSG74AqeDverDLOYdOMML/zeVy1wasdaVUT66KS1/jTAicbm4J7JjzlZtr0Ry\r\n2+EJMSHFcCK5V0vV7Q0Vp+98c+T9LAMXw5QpGrAAkq6EH0UxF7pH83rzLmLK\r\nqrLnLx9gfM9eYgLMP+huXepPkbC+j82RaFosQbfgiag2qhS85wlemGtoJrL8\r\nCRhzY8kqlQw0gwlnRkKGthWZeNBHZ9ssthAAlyWKbxyRcA2S9fkfHyFNfxRw\r\nAbevnIhQgh0/qnx69f9LXrTDQzhxw0gEVLwV6QewZwZpQML5fqTnDlZ/ChgC\r\n/6OpJPnJZY7MeX3+KLgOzntqC2gzWjH9AA+tMsl9Bks5qx8aaYi6i/Llsx2u\r\nuyacj6w3mLKEtbRfAN7BN0erAIWjnQP9CYex8YUCH0LxTZdAdMiSErSvqaRS\r\nkwW2H43v/TsMB8g5xoIHIbWzDKnABzSNh6Q=\r\n=FyA/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bacda4885.0","@material/theme":"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/line-ripple_15.0.0-canary.bacda4885.0_1666118521975_0.8085852040309056","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/line-ripple","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"85e90382d9315a525d4b3668b1c2c0c00efbc0d7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.92b2556cf.0.tgz","fileCount":33,"integrity":"sha512-d02s99M8ej6AQwwwL+50qEfOdKbuMZ+QM3G+8Xuo+xjZKTM+O6CuC5gAi4nBU3QlAsmGwHVBdvFAAI+ByK2yvA==","signatures":[{"sig":"MEUCIQDDN07eVcSKVjn16UdyPVPyILPVMROgr90NzByeL+oAkwIgML6nUprrZGlH40FS95xRV+76aTyRmEwlcz8kZhZdJyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT08NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGYg/+MWEcevi6i16HziFnFLqflJTcxyxAJE+LbsSijEfeItqYWDqT\r\nwXYkylNS606DqpHBUu4xhwhaPAaQlkfe/+n5DjnVKx3KsRxZWGcMNt1VgGxL\r\nP5/J4A5f9cLOCU0HjUHKJSPOHoGrRIwP08v0+vveTNQ7qq3v31nMD8I2DA7s\r\nKdSvqduqrQ3p9l9wVO2GuBnDCPkN3Ezohd1jdwUFI1INsf0GxdtZf73UDJeW\r\nsRsJcLO2yGfP6nAOtTiS8l9v2/kAPWHTH6RwG6OYRJxWNuX6JAcLLiKqwZBJ\r\nLXqewop44Nf46vLhzxZGmtEUesvGz+YLyx88a+7iuEGdo7wa9oYVVxK4ZZkP\r\nJCO3vNj3lsZUNTyX3OL5P6J1xxvGuL20XZYphFvK4GW7SjJIDxuc+/dOOsRv\r\nYsYvy6FWC6rrDbix1OtwbR+qiPXBx/CPp1pUEQWkltA2xHbr4yhC8/lAZAi0\r\nHBXHZZVsT9t7+fPnELsOLgGRpue7FF6PiYPAdDa0lB6gBBnfLZqujdw1cIIv\r\nr7JVIurME9MBzL/Tgx1FsqifsdabasouBEDIAzVXFV2jlpdRpxtkUkDeCh7s\r\nPM4MAnGl3XP3ClTpd+9j41D0FsJjLIWCa0OYQCo60CDg8MQpNZP91IPHQt2b\r\nJKcblqmvq7WpBtzrXUjyKCAplVO9aUhwROo=\r\n=Kkea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/theme":"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/line-ripple_15.0.0-canary.92b2556cf.0_1666141965339_0.24782063703438362","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"10b48d0b06f253793fd86f4f91291eced5f85121","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cc804509a.0.tgz","fileCount":33,"integrity":"sha512-P+eOfMz20gasuJOPRmiflMBWRBA0GwdvFHJQ6CSlOhO1sNMrHaozXxncd7k+i5EpG9EhAhDtgV6iZI5v7fePNQ==","signatures":[{"sig":"MEQCIAMEKJ+mpOOBL+dFUIv0UwdEjDxVuTj0jQjV99ZvpabQAiB6eyoZoFL3RPia9QghHqN2KhLz2T9AeHyiqCWZL/02Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0/xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdvA//fZJiioSNuIeI8flt0pSJWZTzqU02e0NjtOdX/fZ2gFAAaUY+\r\neEJpHsqbeIGQpMKFAVJi9SGPCxfjsajxqJKGGgYXczC7iPkoGTZzzgFOrU0h\r\njSH1K/suDWlds7+HkTW8iLLoMF9BmOsUYGacVNJFQuIcf3KRQOWHPqAJ5KfX\r\nPmnXmGHMypEkKn8cBdw3lZHtCnnm+RcjBDWg6IOJ3bZAduYx/lKMYt4QQPv3\r\n+GRHmymGZ7Q2QeZJotClnfpFm8deiTIbCbXUFez1QLsV+vVCWI/2/PJYE9fp\r\nELdcYEtL4L8CRirYgJokk8yvHI+Z0Htj7s2F7tS3HUvPhylj54QHOthYNlNM\r\naAkONFaoAui7aNQvj7M98npcQjg9t88kHVjts2xRKgzCrz48d4A9xC3NcwDT\r\noeFIoajq0veMM5UUEcV9S+iNaTxJG/902cqTCUn/jEtKUeJURRyk0GQM0R/M\r\n9/ktswn/3n6Pi4Brdfrw6bK/wDdVcUZ6CGXne6aCSdELgvktPySrluEvAgPI\r\n6Njz95dF0nz8fFhzhoipsqTDFz05xpF5jIyfdpd6gowo0DF5fhIfxB1zgmnO\r\n+Rv9Qe7MKSYaOnHAZzEakvdH9t9cPFQrChN/Bjm/GcN2l+UZOJqrmA5JHMYa\r\niKxhYBZofHqiNM2opyh+6jPdQvNFNdmVVww=\r\n=rP5f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cc804509a.0","@material/theme":"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/line-ripple_15.0.0-canary.cc804509a.0_1666142193001_0.5497887928169061","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cd2aaeab8943f47ce9171cc9138fff397ded0d30","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.982bedae9.0.tgz","fileCount":33,"integrity":"sha512-ifCqqbQ+DVRVZwYH6qbp2ZagoZxIgaK61Oab6s21wFV6GQtt3rMzmMhgWjM4TMgDhwP2FY5lEbuaJwUXWH9RAQ==","signatures":[{"sig":"MEYCIQDFXf8Zak+aYZpl7Tg6LjeWlecC06FpMRFUuP4qhBRk7AIhAJkHV/fhSPZUYMlz89ZDK/9EHONTRjZHGddqrU2wKcHe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1SVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2Hg/8C3ujgsffEJ2XS9ZtjRVHyP3+0dLpspmOVv+GxCcJmFOCHoa6\r\nwtdHVcfcEMUWJxv8t9s3ddpd351i194zV1ibKqwNAtRUqPCazCFInPjuJ9RV\r\nlAfJrzuxpVCoctOktcrFJIrBhfeJWGmhx+J2tGms0accYJNMHO718RDZuncA\r\nS99IGOQX4HDRJtGtGohZhdd+yVolknEwciPOyHHTrkqQFIeVWTS6W4ddxui2\r\nWB1cq4y9x4kr9SVGxiXoZ/wwfuTQwI3hCfUdbZblNtqLH7ogyr+xCyVUZ6UK\r\n2zvrW4Y7IItztj4ntMs5Sh905nVpy3nYF+4k0II/mX2MgIxAchTUavmNmkIs\r\nmEfnqyuF0k3TgzYbQ8fYKtvWPd6Rixk3hIfgXfHxrT6alDzaNi5xI91HYzdk\r\nOpmmcBhuP+9No88xucGwwVT0kqtUJCYcXY9htzfG7sXMSN0sm6Hs9RIpmG1r\r\nxO3GpyRV3sqfAmzSYAjXJHzrX8cp6yT2pcW1HYJqaq3E4GDN0vtmmXseeLhk\r\nx5KDZsFwUHUzAFSVIknv40r9xg4VPdstif4bnACkyErGVzWMj+R8S4ObYDTp\r\nJZk0VtYtR7w3aMRhPLDIRtq8pPB7+rwEmlC9K9Yo/D/UqXF/FEMWFxYg3NpC\r\nzcXb4JHAntfhZYMlkRDmAi0UGfSSxnbYH6o=\r\n=TBzW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.982bedae9.0","@material/theme":"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/line-ripple_15.0.0-canary.982bedae9.0_1666143381029_0.3570984423563095","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"49e642d5a6a1c80701faedd5f68a3f9e9cd88221","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ee40081f4.0.tgz","fileCount":33,"integrity":"sha512-PxyiBhsiZQ1G+U/a79gtHqYk+1kkBtU/zXzAwxChuz+KNDNOcrk8q4mbOf3ZPYr/pLcIzAXrfLVtmhCuCN17HQ==","signatures":[{"sig":"MEQCICqJCs8Lk5MPFIXxoMPPAG+Tidvcq8vuzL8mU8JB/DalAiBlMIRBXKZoPklx/zRiJvDs23h6cIY+Vh06ekv0XoDAYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFnZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpN5g/+Itg9qb3FEoAQpijw3w0OPecg0kjv882n0k+DTVNdeI8h6wXb\r\nZ6Aemo9NKMwTPg50fyIOfNbNBvRuPndVeHCBy/x87vrG9JivR7qDrqsYNLzV\r\neRAMxIFv+uPDX0sYhU3GZyFnXdL2yxb6jjS7QcpmGvSIAzu1hDdJ0/XMs5vc\r\neN7JqHfwkpBA9gk9ClcV/bL5WdE6XQpmItzAWncuVdAUHFeg/8Jtz69SYnH1\r\nyMLRzwdhx8S4uEgdAsU5UDIo5oj/PFPS3ULBN/QD3fWlL1PLRWnROVt3E2te\r\nqtJEe+U7CCHleD5IMG1ccjsUug7WTiUtBKkwLG967bZVnRFE9LPq4A0MWusy\r\n50H3flzbazBb/nTdr4k+QL988C/M9C0VsNKofrKUiA+Tjsla5opUr8z0bWEg\r\nYdEKpS6SUN02Hg+e0/D3NDBsZApjsyG9o1XVmPzA+PrVtaIHvWVAJUSKylUm\r\ncYB9kjvjrz/O0v/06vJcoqCdKl2TwNY1pH89LeraTtK5bOprcGhvZ+sJ3ucB\r\nJp55jbpH4eoTSt/XhnC1qCl/Anm4PUI6aMwfws+lYd2tH7YFt+j5w437wJpa\r\n5+kDXr2kTDf3/PbYeHa7J4ICT53qRcQGtdnXB4V0yB1EP9vUtegKLp7Cr+qX\r\nF9FULECSOoAtUBve7RNcPNdAyZi0/bjZn3A=\r\n=c1fQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/theme":"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/line-ripple_15.0.0-canary.ee40081f4.0_1666210265216_0.8017393925920377","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"684455271f285087adb0639cc94a9ae9031e20ce","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.98f1b54e2.0.tgz","fileCount":33,"integrity":"sha512-9MJYrHeEjbQ0Sea2SVVXlJH/S8gBJmOk02FHT4FotLY4fZBYLQu+H1fjQ1fgviqR++7aQpo/K5IpWtSCSvZdQw==","signatures":[{"sig":"MEQCICah0iEezJB1fbrdDSDsWjmmCqyqUp6NLBv3VoXhig1KAiBnkJnD31DYxJXFU/CCWngA/Xds92CW2XOx9hT2lxNkHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdIFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+Jw//awk3wJQsWD314p8JzXA5JkqF6i6jOt9xwxkqnn0HzdpKUWw5\r\nHFkGQBiHZ1u/K0CVYhVetiZ5HYt+217Xn94OLyQIVoi2O3XqaOKJJdE7cmQJ\r\nV8GsJVz72AW7bAzE8GtjAEdsxPWbn5F0MzaUXaru/QQjPgWUFjPmTzcE+Q52\r\nVCU2TWiPx9nh8LYUPn1WTtM/EI+TiWU2I5GAdmj9EVh8jEBkIWvW0M1r3IWz\r\niWrgkUnXu688dC+b4pSi7XJeLAJxSckI0mZq5ElDsdvlQ26vCcMJtEL45h+w\r\ntSX0lpbhNtBvv7qK+nBjB6wiuQkuiCCSK+BsHUxizVPV8h610iFbupALDTFl\r\n6d0SZm8+E0ocKGhUSU0WffTYA97G5V67UvuJE/UdsueCzcdRwa4gxI1813EI\r\n2NyavKe0JGu9Ts9PhBTVhoHcvuyxRLO4kk9fFvD9AMVt8P3JIPvDZKX+XCB6\r\nTShMfBefHiVHlDPaPXH4+vOrlNpnHuJ/Y1n9TvT5bsUFAj7UCPsrjtBpRP+S\r\nBvGGmNeMCHGMFLK2gorn6zoarsTT+q9Bb74YOUBgcA9p7/3Qk2fzwOe/D8bZ\r\n3GqNJJHOxww5XStW9Iqj5N7hc16XAe3byEaTWnFPMwn7NYJI2nZ3ap4B0P3H\r\ngfrPB/ZZai14AzhtP6hQy3dAILC2/HQknRc=\r\n=Qm59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/theme":"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/line-ripple_15.0.0-canary.98f1b54e2.0_1666306565430_0.30496314930784973","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"97b43db71014582843bc1425b32fc679938f8b32","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":33,"integrity":"sha512-cXW/WX7wask9sRZXnRd3rst39GQgFxvbHuANNzkI+VOVF/o3fx/qaqAu1rJN63eXIzudHY3PGpVeuJJgp0vJQw==","signatures":[{"sig":"MEUCIANtkrTrUnGcw2IerbSIDNOr+8muLIyoRgpYJ481b5a+AiEAhshlJ8ITNLmQqaJUoiIcO3D7bVFcm6CeDnup7dCNjIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtFFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF4g//R8/Y3myhq5FDIX8cRDeJTYsX7flf+kwreUQvG/dRyDt3fr5O\r\nrk4qjT2nUsxdSDeFGL6kI8WMYVX0oh3Yd1X60TQLIXyJq4a0TCqFhXX2VIM7\r\nOE72GX/JpYX9tr8A4gRujMcd0HDzaQJaFQvfijcZmOGiO9rdG6xbK5u6F/mW\r\nPtRMLfZidkcHIbMWpRQJWbOsL9/nuUUPD2c5meTsShHk6TuXDccOftfahBXv\r\nxWS8NghWf0yYbAQoOPYvFxFJWoJGcowanBnb8ysCdwj/nGsy5u8ASGciVCl1\r\nojCZoWtdru6Vo5Rj5zLhEHM0yW+uNc4y0kVCVfhkHXDIiqD8l24qy7nbH/E8\r\nvMRJlbMbYboJbcKSmDYvN9Z8TqLOKM6y9g0WLaX60F4UF+Vsyk4Z5IZaDiIg\r\nmGFp15RH4LWnJTLdl6rE/NeMdQC/s5EuQWSwCAzpU3wO4nquRzv9jdmxxsmX\r\nUWQXRe79VVPzwneiwbVoMaUzRp4mhPAo/j06XvkIbHo5cpnrdt1s8hoRWpz5\r\nI9g2qx5d2c6QzhjqhfyUNOxoaqQrz1dVD+3qWAKXQchkkToHW7QB13VjwlPV\r\nZYS/2S2D16HFURZYtleEiJccr6BWVIyQB4cLgZrQMlxhOAvGx2WHluJZSYvN\r\nRg37ADJt0uzxPRBIV9lMiNQO8cY6LcAmCO8=\r\n=5b3z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/theme":"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/line-ripple_15.0.0-canary.e74b7ba7e.0_1666371909224_0.35202129558946527","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"806264f3a12b1db7ac366219ea05c8a16aeb54ec","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ab55c07d2.0.tgz","fileCount":33,"integrity":"sha512-GTlDJKPPG3B9tRsddJcxuwKmisQTurA42L+7AxbplOTIGRb0T0WxBry77LgQah4xVD2oq2G1E657P6iDmnhnPg==","signatures":[{"sig":"MEQCIGRi4DwAhM2UKJVzO0pYWeOrH7jOyqNQgtve4iILClSOAiAYAyzc9zUJWbTQ5ta9xJz3d1RQz+9ClnICvUZ7s5uoww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDP5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUag//SzyncYKC3d5JM217kKsusug1UrR96cdpWnzsS95u4Uuh8iGI\r\nJ88yw49xh3gOIZdw3ExC4a/IfBmyxnsPmx5nUaxj65QZlyGL5w3b4IUKgavk\r\nqg5d8G0eLG/pCGyMPQlrikmizVAY0K+xLEYz/wPYYT0Fe3VL8741iJOQ00E4\r\n0aEFVVptS057djcN/P0s0CMMTF5LxfuhVho0w3ZwB9C6pm4rG400UAt8q19X\r\nrhiIAdWnFW7FvJuXljXooHuqlZKhjumG1efxFfIXQRiokwkNfw03obI75Zc1\r\nvZ+MCR8rgkEI5oMcbVmaVakVVPgl4oYvVquQfIbm0zygl3vn1U04q/BfpwHL\r\ncI2y+EIqK8g/xrUAwqBfw3VdWLfrLSfH53lCi+EAWfJvTR77pqMfxFV7TbWV\r\nPTWRuIRZga2PPCwniEhcK39v0SngThWSq+KLVSXHoRP724bc+nki2vjn6+4G\r\ncwdYM2LIQniW1iAJjtuwzRGOmwKOBPcBFMH6hijs2NRyvzsrJ0/vs8TU6MCS\r\nZlDEklPs05Mvy//G67yg2HC7gVrrP0Frmmwoq3Qp4SfDfHrNMiUboef41JL1\r\nXBsnsiYKIhIQn2CRKQd1L8hKAxC6EfeZWzT4lwCVAX47P8El4G7avu5DzPKv\r\nFcdX6d1o1Q4zuTglCP6oawGAp3zefrD9844=\r\n=gSqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/theme":"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/line-ripple_15.0.0-canary.ab55c07d2.0_1666462712994_0.7430501432401226","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6c701abfe92ba84b5dfae539d92bc693b49af20f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fc539db34.0.tgz","fileCount":33,"integrity":"sha512-UgPfmMz4aqreip7XacHmQsjDUqhHfXjbotFFGl59ErZcLq9V+i8uQHEf5l9lp6UZRqp4n3SQxItqExENm3Ap0w==","signatures":[{"sig":"MEUCIB4seD1h/DSDofSN82yXav5cjD7ds1oAPgVA21leBHl8AiEAsBgcuiyROFGAwO9VulijjnrZ7kmRDCtSPBHqLz9v9mE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuBWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyaRAAiJbhBxt9UF7CN/T1EpvX1K2JLUfsD+52RSg+sEgJQHxMqe/2\r\nOSEF7dtoTu+MPjanwEbtIQAOoCkI9ryUjr+jLcOO1yn+u/fLI4e5ftfIVVhW\r\ncK/J423/Q8HyPrB7dAu+eAodZdi7N/3piSEHdHellrhFHFTbEvDpXhi6choK\r\n9QEpCm+wgE3TuAYcJEzPPt6X43WTCBekPo/vEyCFiSj+DUJwWbsT5TTp265W\r\nZRmE7Q6FZNLxaR9yH0i23xg7FQ232Q+K2ktmEBXksO7Y9YELQxqUmjkIHnW4\r\n+dY0GIVmesfDqd/b37HY7rqycNr7x0klyL4Z405JOdFGoX3wjbKRSKgyaffv\r\ntoZfCQlJL0+vAlYUOFHDdk+C2dT4Dzo4+bgWZ4Sn/K2F8DE7JELCWCY4PTNp\r\nbmqpYJygrtTSIjgLcEIe8jHqdDyeqhSl3qHdD0Oh/vssMwWaBz3vmW4Bm2cd\r\n+BUbzZpDjWOnZMjv2FR/ctWPA0EefaRaDB+UA9Uyx7jTC4W8a0lwcJrIMmju\r\nVP5XnsGEbBI9/ZmZWTbCXcHkOjizUXEzB/J1Vx2jLbUyAj7CflaBa1gJKKIq\r\njYNQsTmlsuCjhIoG3niEzxQwnXh+mTpiuyj71ErxEdPVlaMNcZVIA4UsexuS\r\n5iVHLnhu/Av9NXLSH0Na/1IiqOFRuq8F7rc=\r\n=0XV+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fc539db34.0","@material/theme":"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/line-ripple_15.0.0-canary.fc539db34.0_1666637910688_0.5376011881480913","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e309c0c7891dfc2055a9a6f0ea572841468737e6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e340b04c5.0.tgz","fileCount":33,"integrity":"sha512-3eQ9NM3pdOyqOqtvpUGBY7V0JuDcN4qjHXgGabxDfF46QKDnifx5uBOBd7fNncqdAVHfiD1YuQE6Qa7KqjCq9A==","signatures":[{"sig":"MEYCIQDtnpvDJm3PskqqRk1IDAR8I2MkGHgRpmDSdCiNE6GqwwIhAODQsaD80fiVgIccC0e9hgb22gL3pvuNo+Fg0Uen9XrP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHTXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQdxAAlScEEo56T2ezi/WISg57FKOy0hrmXwRe4ay1Cy2cwgfFlhH6\r\n5EfOD6f9ApMwF2SuY+/4jDTJJD5jJdshQedNHL7ECmvyMVgw0LbOyA+1ChbX\r\nIjxXhtMjGMSfph0rq4RYqWuUdpcp5GwiQvHLPp2El6gEzqVrbnhvro020CsL\r\nUyf+9baz2M8oPEda+0rWiv9O5NBEVGoQEHTKgTPkPDxyZrXmeq6+Mx9UvuIk\r\nL8Ch9qgbIyHflwkRSsVRWEnxFSw4tdvB3wXG82thLZf62bWh2o8CCe58RNFn\r\nbVa2wvuk+C11PEfAOaQlZYwsTbiDwRWdbAtPmDdE4ds/rYKQZEKd5UJjdGB2\r\nvFMhAaM8Io08Fi/REU6beYdDp6U+j8UHcQb2Jn/BHT0aRyZP3YVsoHKVupTZ\r\nP3e7QyY6pqjSWFUTUuvsorXCt/T0zaEVRIsQVCFF6Qidx2aASZpmYf7WLFZb\r\ny+NQImkR2XgnJbCRV8HMHR9JzqNv+stLfl9Y9LZhVl47i4gcdrl2oaw1QwgM\r\n80+DRkQ6XKLnCChu59BT5gUWLrJmRs1qbSGFtIAy4dBjFWGnJJUDADhxlolE\r\nlvJMSxpGHux6p4dlcFF5XW90GDfCwCY8d8V/gMIFXzPJtPyshf7Gtpv0cPSh\r\nMA6/v3H5UEmYMzvfgxoA0IZxKl4AwXIQj8c=\r\n=knXc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/theme":"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/line-ripple_15.0.0-canary.e340b04c5.0_1666741463024_0.5617220033814374","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e065ab9144158f82732a1989bbb987f7436987f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":33,"integrity":"sha512-K8dtblcL6ucFdQoqCDzHpCmpKCzGk99deupdIxObc00ocY9M1g470o7/dpkQlBSj+rTTpmDyGx68wY7pgNFEYQ==","signatures":[{"sig":"MEYCIQC6zJKDQAzbbUern3OFbiXbOxvW1+LYkLWtcS/aZZU5LgIhAL/gtFMCWfkxguSLfRjadZAvda03ljsDbgjYdeyuWCC/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW6DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpODBAAg5AFmzSJufmQNm5/nd5/bPcHv+pQSq7scUxfHAvaGrDeY/Ku\r\nYTaQve4wV24cxiBUbrv/ktOl2qWlN1+FKzPAIgdrmfcQNyQEKOBKpPn7DfGV\r\noy44yCjJG0X6wV+AxLB93BU74uFI7a9eUO/bAQABAnSRHWi9/xcWW/axkLb4\r\nGydu9AOguxMbv/efCWFlBdnfXewbzr13Lv2DnMUya0Oy5TLwOavcb+F5LPCK\r\n3SleWZlObAazIJdemZrPEe4l6EcWUKq1jneuVzVXw1VSkseCEDOGMSlpDX5X\r\n44y309JsiPShBO2FRplqrFK5aocVddwheaPdsM3ufuoKhS5iJCx7RmDN3XEW\r\nzKpnpcOzTYG+Vn9pYOF6Uyxw3E+oliZdNDqBAnn0STdYmuQ/E7Sp4AdXUtWp\r\nRp3XyjLLJ3qxNJI5HGiDZB2H31HdUwKDNQyxs7JQogM0KCOD2WrjzDJ96sdf\r\n4gpP29kVOwQFjNcPm7YNCekGc4aYx01/6imXSDTRQ90RExGN4Cah4b8KrNuX\r\nnjmH12bpGbfSAPHmOkJk+TarqPta+zv4EaTfLbdQ9hSiAsMKCtPu4fUn2T5o\r\nQP2pSn1eE7+7V1s85zBl524lkid7BLLvaOC7eF2kdNSVzDtz7AOTW1vgBnWz\r\nGkgzWuuWwQBxSWC0+g74aT52AyZ9sTaDPx8=\r\n=Ln+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"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/line-ripple_15.0.0-canary.2c1a8f8fd.0_1666805379021_0.7050548362539131","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"508c47ffbfb171a7878cc10692c3be2f24349087","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ecfee946f.0.tgz","fileCount":33,"integrity":"sha512-ri+4VQDvlJr7nfP9DpCElqJqpXIAt5HQjzNPDpx0Wc7KOZuQ4yK6C2MGZTWV1wRZctV6WXX14bB9QUUr0r2yTg==","signatures":[{"sig":"MEQCIGx6NBWZQ2+FnqvGQevqgG3axRDyvlKcMf+8vZGEoo0JAiBpsDjexDv8twxH05ZNVV5dOHALivmrNWhSijirYYkD4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZUjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0+Q//Q/pArLrOIexxPrj5H1R0penmdfMU57JUnqAL/A037fXkrhhQ\r\n7WgULrlxsdaJOYPxDszsVZmz54MP6Ohl0rlC31YUUpK2QoHpHDG7OpjV87t0\r\n5qqOm0tTqHqsgKFVJ3A7Zzciug3NuFwJkNY4t47E9hzyR1rdjXEuRX6WOKAI\r\n+rDpC4K+7Lljw5RZn8hNZkamQpp3Mo8FMClx2ugCMJHhHumaxKj99YBhuX03\r\nnEoOfOWK6sYfo+o8QMPmWD9MaH4g5RMvRQoFpU/dvK4zNtM5631wHcSEiAwU\r\na+kxhbUVgs8PY3UDLcQI3fbYXJF9F6Njo9uXANfq2FrGfp9hLFo8X8XiwOUr\r\nIoxdheHtltbnH6UAtTKRcdOx1OrYU/8GyBdWhiXiPj0MuxBuEZawO+9koNAT\r\nxmfA8hu1veGPnSFO0rZKVKQtV721CMRnQeN+fx8Rc6GTQ4pd8EvuK0BHXPbX\r\n5tVLHPKfsRR2Ejj1e1uef5f0XczQIqPsycOjBYoZ0XnNvQRBn2IDAsFLXTXB\r\n8VxN5vXFIxe8tuM0oaFT4T1Psj5T/mofyK0nwpAEM2mm9HDQfNWAu6kMP1aT\r\nCknS+ocr36DmdVd59eUViSOJ3YvtZlrMNAYgwrrdGUeWOYkoGHN1URZXLHby\r\nDl72Cx+cXPsCel9w925GR5eUitONL1US3Js=\r\n=PtJn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/theme":"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/line-ripple_15.0.0-canary.ecfee946f.0_1666815267589_0.8826578915362906","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a0df04a5cda4d451e4e172c4655684ba38bc9029","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":33,"integrity":"sha512-oWsRu941MWWyaU9ssJV1HZrS5PymeN8B9XHsC5wos/zFiOI/nmh7wWd/q+4GyGnSFqhMSvNnf88AdH2ipdhy0w==","signatures":[{"sig":"MEUCIQCPEKcUtF8uoY3P3cYonhHWvhjwmHvIGcHXJYDIxQMzAgIgSaIJfWaS/vTXJIF/R0JG4IcQpq8uYCB5cAuD3VZ3J7M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAaAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Zg/+NxSZTc11GReXWcEPbdvU/QK9NLRPdIrrl3CpdQoRNL0VgIun\r\nOGBaZeCRnOPnn3KJlkw5sAO2qwcnAvvOmWohMaZP7weKNLZhVfO9wcVc2g5B\r\njQ2Im469iLnQu7nj9x+poF9H6uj9pSDcxOn8RYmdVg8MfwUWoYvZtr6MXafa\r\nR6DaICt/LezVtro8//63aknhbYZz5bFgonTK0q3Z9TxT0CBX3uN1/FvEywyx\r\nEKFsJWTERSHbZGt9aQrMuJsnJu1I1HqyN7UhNMSM1UnPZyWEkCGsNU825QEI\r\nqYyr7BBVQ1IRm8UwWCTZLUUy12VirYflavM0b296+0gdh+SJfjhxSMkkWKO5\r\nllmV/4YbqYP/uylTH35su6XJSAJVUUI7t1wd6d+O5ExyJKNFdYiZGMPpbp8E\r\nTWbispi5qBxlzZkSqzY/yNkOLQp1VToBpmqn5ctWy24IpzsI3cs6j1502cj0\r\nBuKf1G7zjSEIHVmwJf90nc+fmahjLCG4HAxMJrrq9ZKTSgSI95nFPkMyhfFj\r\nzwmuXwWEBhvteURIjmyikmQOHQi9HVHTLOJmhebNDlEo7tSwMGCC42nCjnDd\r\nlwNPnvrMx7eZNunQNZagdf6EPBC+r66PheJRRe4j7FbvGCXS7k8idCxhEqUq\r\n4vVbMnX5h0OfP2DuuX0uW4vF1lLKUr7agLk=\r\n=J0p0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/theme":"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/line-ripple_15.0.0-canary.73ca9dbb0.0_1667237503898_0.447151738117443","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff1680b45112fc169d5bae1da8d64f64b67ee5e6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.357f2e5f1.0.tgz","fileCount":33,"integrity":"sha512-aUc9TY6ENrCPjWFAUoco74FLduCyxNW+usH6nzGO7svqsSQRQ58AROnh4OEXXGmm1FDUcly3CAlS5zP0Nj35WQ==","signatures":[{"sig":"MEQCIFKd5khhMV8kEQwGSVsbIN1GV3vBjtOL41KHwqzl7sH8AiA1EahvfxMOE/gXjaBvkICInU+jDB6jyNgabeue4OfdTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBiCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmouyg/+LJeWJedeh/8dyqMQYtBcYNPVDRnrFkeTsiwjF+3qBf0Fdl9S\r\nRI0tn5v77weIlygjVjaTJqgcSZFhuOiz6xwhxHdjvAOhZKHJVeAuDKitVt/R\r\npH7NbrXSHeilGgHOl6qagcJky6HLe9eUFTdbkJok/9rUqdVEJv7L1M2GoTnO\r\n9m2VUiJbiHKR+unlF5TtzTkyk3SjpCKw/6dhzmH6hQHpOQtGbfqloAL4EPPd\r\npBMWRSPbIrg9aulWTjt14p0/AKcYkms/KiTavc8UZCMOmmANuP82dUKHB94/\r\nqXtfzndTZ7RfmZZIgdNvqerq60E8QwkpBX8yfw6wUgpET9SwZXnjZCyL0vyF\r\nAAbEdDtEWGsCdpz4W39Bdnx8vfe+2xj+i6XtDX4moJ1M03hMY2tyZt2QgwfP\r\nUWyc61v63BwePmroZsLtBI4d7YFaUitG/9kwl4NncyuBBlAfdAfhyUUrwscE\r\nPTUF2QtHtGG/fQPXxNvCvEEJ4279iBbH8BVWkNiVds5WudlJ9dSQ7SolwqRG\r\nPbw0vJszGdhgzESnDQyICTJ2K4tCGAQJXwoKjtIoaq6hEbOhLqmiFJZCVjGl\r\neqgR6E6W/YowcjRFpYrvIUDnemP/RSPzK0LjvhtxUvNpwQG3n0Gt6F3fOfRS\r\nKXwP5qtR5+YDpmfMKKwTYg10k8nwNk5XRCg=\r\n=XILP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/theme":"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/line-ripple_15.0.0-canary.357f2e5f1.0_1667242114019_0.43268430593015084","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"11598117487052416cd2fa62d6ea019e54073358","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.eb103d4b5.0.tgz","fileCount":33,"integrity":"sha512-EzqizD4Tlsyw95zcz/FUFKvYnV6QHn4YK03Z4vBRAjAZSIMASeiCDwSXCzjqNNNj6wVybaX7D9978dKSD+BSHw==","signatures":[{"sig":"MEQCIHUUq1t7s8JCBwUXRdNSIYt0X5kovNFnURibRfjw63sSAiBMqNksRb5urPQ8SXsR1rjnDcso0pIwhwqU+0XULt0dQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCg9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Sw/9EyL56BVBI46DeU4WM9kL4yrvbn5+Jg+XT7wFYW8p2HbbSMbv\r\neAk49RARZRUeQWbFDKwYSJ1K65SNGWoSdiOX9o8wE/XGt9v2ojKKhh/u2FSD\r\nyaTxlekfr8AK3bO8dbK7dva6IZRgiLkY9gCxsU8mv7qIYhQjHeE4E25kS5qQ\r\nXejQKMeFondfgaFQsobaTDBkm0CfaJKnwUPGICMD6N0ZrNAsCiMwM/xemVVL\r\nBjFLob+sKvS5LplH8mjEOfgPnj35caiP8oqpfAuyxDPCxWjr8Lsx7WjlUwZ6\r\nHFEoWeFnlQSREeWgDKyRmXGIIvk63g+6roATSKrQYUAXf2sYvscFD1ZWTbtt\r\nrIEt+I4kC3xvyizpGpGjdO7XFIWjBjA5/AoPhc53ltoBNk1GFUIgld5xj0Bw\r\nbj8082k+CB+sdLpjg6Y4Qvaf0q1H7LW9Wc7m48u4C0M2vskSVvPc+Qt/AZS3\r\n4SWeppmHa+NsNyC8FtyoTJgalaZJZFB4rZkMKgaF4RrGtJjz6mkpk3SjTKU+\r\nxSDlyj918TXCAiVJwisCP+z+KaJ1xbUFxhgZ5z0UP+MaaKQCXS7y3f0MSEmC\r\nqBiTYiAJ86iol7bHOItKRI1Jg6HiaztExWmz4maPyynhyDwaeq8P9ADeeww6\r\n1WJtWiy++nPD4Zrea1N8elA87SECT098Ums=\r\n=GxRO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/theme":"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/line-ripple_15.0.0-canary.eb103d4b5.0_1667246141340_0.6817036746940417","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/line-ripple","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3ab285a3b35102ce12c7260bd5c24c717bfab496","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.af5f01223.0.tgz","fileCount":33,"integrity":"sha512-xUNcmlebMUzZxIyRltLdRb6rMeC/5ZsXivMkOcaeWcAEPJfXzbU1JGfy3myCimt0u8/dZBQ+hKk35PqhGBDsdQ==","signatures":[{"sig":"MEUCIGMYyvQvfKykUl8xMQgoFvbkjqdVA5IZFkf/Xaebi9RbAiEAxe5kyQPwGVoLsu06DATUn62VS+RTei2rhUpo2Sd57Qw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWcbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDVw/7BkTFE87HyMMAfcNOUdS9VrlmiROEczHsqU9KBt5ilASA6sPA\r\ny0trewp3STWB5phbmd/3ANyo6FPgBigKi8UPe7L+41lN7anbLvsNpXHST27J\r\nJDD5K4OUR1y9mvyl1BRgxFt/e89TYvroYCcuIGqSyj8IavRLDILxyV0J2QP7\r\nl8wQENSGZDgz5qilsskdsE9TJcu4sblutpQWIwL0UhqOfEhhPuNohTGM0DXQ\r\nxWBUiAsv1derzHdfW29FufL8UjXg/bbn5CX4/7cNZtqkuxVsp9lLIKNGF2wm\r\n/DqSPNGKY8zvExC1v10wy6zL4vpNcERgqdLF27HajVF2MyfykAyrwWuHucya\r\nKM2gHrI4fdRk6RTqmGYy1H1mhEuKeMeKnXn2CgazbXzvgwK/GLbuIatz4FDZ\r\nOiKVDAKSNTkUOJmZSvVlf2RbSVuPSf3SxY3WHq7l99XXVvWgpa5o9ZwcSi3E\r\nb3NR9I9h58DpWGz6nJVtPfzgsOxwKddfUMYQn7/OA0qPpKcX0qgVMqkh9+7X\r\n34It9PI/jwoKoauVbvY7ATLRSjM97ERm60/YP3o7x8j13hqYaqXUETwrJ7L4\r\nRdYKHyoPJXc3weBoEkKXGMiGY5PZwECLpmKPZ0W9XcB7/kI/aell80rLwEAB\r\ntiT0ETHZINzP2XR8TsIFpgv4crdg236Mv/M=\r\n=NXXq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.af5f01223.0","@material/theme":"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/line-ripple_15.0.0-canary.af5f01223.0_1667327771513_0.81698299552981","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/line-ripple","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2968090c07447b0af2fd63c41393a0c9307ebf09","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.58733ef41.0.tgz","fileCount":33,"integrity":"sha512-Tr7WeCnNKvtEowskt9ZX5vGZwy2n/tB9JWdirQP91ksuK/DSYicZv7/Dg8hgBDjH/jcnUgUK/NlPw7dWjP15uA==","signatures":[{"sig":"MEQCIA+pyDknG7Th+VpOD2XfDE923AY49desO9PofWNu+ZLOAiBNRCXKD39TQ2bBaynV2a5F/jlYHbY/JpHFqG9QYu+PiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrJ5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrecQ/8C2ioV0zmV3yLvgGtMb9Pov52t6iL3UJsY/o76FtK38ZelBLQ\r\nc9R0b9C1l7q2WOVsytV/D2ZE0o4Q5oAIyfyBayVDOPbRrGEqT27R+l6RQ3Ch\r\nnIRDBuGGcV/bDtDldOQAXhUSO+o/MZnrtS9kwEWQnvpnTEFNgxx62DVusxzi\r\nhwji9FE7dvj3oZ5tB6Q1PUY/9KDd4P3V1cpE3X8u2xb4SLoqhtPzuwtXo+Pu\r\nI6/cvb8pGhuNUj1vnaRY4iBuNf8s6vrWBUJLUlIQAz+Z892gdnJUjHJRO7Ik\r\nLzzQzF+gjpFYMXhxa0Cs9jbsRHH2ap1EDpdeK/FDC48Ze0RtEYMGQKJRH+Vo\r\n+l25Zx6iXczMtj0bGXtRAUAjraBmVWR8oN/JFs6Lv65lstlOzaIb7bQ8M7jy\r\nYCGB/OMREIZsYWRpHS8EuwqjPBx9dSBkf6iEfpSE2FJYhSuppZo7YPKL3/7H\r\n2fbirdzekjjMgwdGNOzXR2mx3MSqXE+DvpI524shjfv1YLnyIXWFygVZx2si\r\nFCaJ7WLr2AnJgf2x6TXpDDYzkFfJRy42Vr7CeRGS9YKyRLOB6r3TWLnvhOyF\r\nIKytzpvjCXcUMeLBSqqKwRG+JQqT4po9LiXjYbwmohgpQQLIr3SWyTxI0d3z\r\nbAu0rJCV66rojjY88RseDxesY4DMFPIUu5k=\r\n=ceSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.58733ef41.0","@material/theme":"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/line-ripple_15.0.0-canary.58733ef41.0_1667412601490_0.3911466056200421","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/line-ripple","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf6496c63d0ef1dd55500b4ec5c65dcec728b013","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.909b48215.0.tgz","fileCount":33,"integrity":"sha512-n5W6k0gAyzwKDPilo0Lupkuv98sY8T2EzfpbaSVTRcoTSRgiQVkqpF6nhydwZ0Qn/b7QO3JbkIrUOFNpdzIyBQ==","signatures":[{"sig":"MEUCIA9erSWl2xgOBMRZx1uy5DSaqT/xfwElOiqAG9pmFV/hAiEA6mD7q73z/D+w9odh+17dW/VzJ9PwhJ9oYJnfJ9Twb/g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz5qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+aw//ctyMOi7RKI/RgdBmoQ9snH48Wsam5CbH4Pqu4g8Rr978pRGT\r\ngfZ1GlEOVTOgYGMM/YBFZY9T7+8tEoqZxfD7tYtM4pZ+cbriUa/hKgVWLgrL\r\nGkRbKCpWEhrl1DTXv0oWJE+pt3Ri5ZhNPqkzqlXUSDdYBpFbv7t7RibS6gi8\r\npvQB+y06pso50QQA5ThdQCTQsFV/S1E2Aw2whLxRVpSPI1SaVDbdBg9oPt0C\r\n2nOqH7Cmcn+Zb/oXE3DUADv2Hg+fb6BR8ixftCp0wzFw27kmWcTVltXpRCHH\r\nSfxUNEk36IyU2T5zNsteaTGjpsWI1NCUE1p3qpYe2TabkJG928R4dMoh/IKm\r\n4FEbYomW0iSuayPwKvq7CX/dRHboAkXVNceo6OAtGrEs8ZXiMO90pZ3HQMTj\r\nW5k+xV7UXW8fi6f6J3nJDEZswkk4RpgAqLboNlzfpdo04roM/dudpsSsyzri\r\nsZZLxqTeYUvsbWAEtFy1bhLMux/nMEwl0gqWwFxUkqRC5FG7PLSgSxFJnwht\r\nHYstcT5VKvDUzOyorTNsiRbB2WdyMjVeiPx3Lxrl8+zfSj1xWxXDWYtWdn6L\r\nTcuvU9uYy1/W2flgrML8Q7YXLJcYoxnBjTEmzz0Thzw5u6WkRpEFD00cv4D3\r\n/gXC+RR6Al/IZ7XBnGxvA2HKihVYWSm9sFY=\r\n=Uofu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.909b48215.0","@material/theme":"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/line-ripple_15.0.0-canary.909b48215.0_1667448426311_0.8218004216752","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cb34fc9f939100d1c0e5a9385fd7d8e3aad11a8c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7f17127d5.0.tgz","fileCount":33,"integrity":"sha512-CXGBIIjadjjBTKc+kBJvv/cwjH5R2UraGC1sh3yrWN80wrZ/KOt81pOETDwjeUGpKkRjTE6+EKEg3AdZNb4CXQ==","signatures":[{"sig":"MEYCIQCNJW6XcUtIhf5mpMlkeNKh+BVcSiILo+FPTp/qMGE/mAIhALCKNHbc8HtfjTUZuWbcIYyV2kGiBmkb7VVtOkNDzFlO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAXuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodYA//WS5x19Vp7An+N8/f6LurC2iJeun+So4RmMhPPk1FTznBisDE\r\nkGD5nuX4/8YyHlOGTux59XvHrWgcIR6am4Iu50ed1J+fiEbWUPgnyjlNRngx\r\nJpy6pC/A2JyDApLmUNZ2zT5DdwC5Dh0EPognlUIwqxjmHj7VCVbW98JweDPM\r\nzJwwdJI6xl5lCrTgOqxSSFhfl4DyRoblLfYzHhbPH1k5R+xyiRP3TtTPX0eE\r\nIdDsjweTrxFqrqHW+i+JlIe8Vil0Bd6gxCI05dMdlzw6jBU7hJXPOlnlqmto\r\nwryH9d9z7DFVtJUGq2LzmSFrR/C0GS6Z/lNyyRVhp23tojF6XlW1QthJrm5h\r\n6SRhEv3TTLrPuSo24eJZQUh2IpgP61g8qrQL9uUWk0fzjawdVGcbPhYshQuY\r\n79OftQBrZrn/7hlQCs+tVHY/VVjWOEbEeZt6KVMX4J3/gM/IYk5Nllfx3e9/\r\ncwIoaibqj9WGiFDpn4gg/h7Pm7ezoxedBZZyD8KhuFOpqPv3oosdlKZqaB5p\r\nAf+H/ZGyDgs+E1jfzGKK1WYdpKw5EfHrSBfMr2Ct+uoZErOZWEvi90cu7Hz0\r\nm9e8dBryuKSH/UHjwxuNc54oHSRjnxEsZb/3oQajoCgmZSIPzKDa7xe8pN1n\r\n66DHiR6YwNFJAeRTxisl429kNW0FzMnTXlM=\r\n=iaXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/theme":"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/line-ripple_15.0.0-canary.7f17127d5.0_1667499501809_0.32952131224789993","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/line-ripple","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1592d8921f9cd3dc6828bed153d905aa9c9f54d0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.da95e2a05.0.tgz","fileCount":33,"integrity":"sha512-ddk0s1qJWFEQ2oI4Tr70kE0/gSbLjPVmC2APNiStx1wFSymS3fw/GBX88MWKsXssTRnftZvehbBIsup4njFSYw==","signatures":[{"sig":"MEUCIQDBfKvAqI0jwePED0E06EgKqp2KFweqr0S79TW5hnrRPAIgUoCDfIIgMGAcwvsXGwHgVcCzxDdgzTQxux9ljP/mp24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUSuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbHg/9EsiW3+Y8rSxOVx/tFxKXeFkIEm3l3XLWOhD8fDTehL36iiDy\r\nKJN8E/jAMHgL8VFdfHT6eSurgxunV4QCTaeLjfGuQZqHdHWAx6fQkY5CWvf+\r\nSApPR2XIb5Df2VsnaICe3Ku8xW3cBwNR8AYN9JZS32qf/OfCtog1H9jxbtJc\r\n9mhfIN366QddB3AFftKaFw7Ou/2/tYYTbwsBSNzmWXTJIKJgEKiMilskCkCk\r\ng46MKa79185adrmOzSCUyzt8cgPJHFv5NEaaVnqfEDkPXOl3O/0qZTpzpHhK\r\nMG5zyQNBEl9wtFMj8BxXUBYqyHjjosS8ACB7yAsD4WnRJatK25rZPYiZP77z\r\nLi1aL+tLgWG3KKtu6eZ8vXkt/J7WiypItBOlxSgpwl4VR5msSPONC6T6sh/L\r\nCyOXwkPIksNROy5S8klvhYR+w1A9dwm0Arl6mQAmmcfU1/KHx9dfeFby0V5Y\r\n1JtVyR3YEv+v/PVKIdARCR9QCz3pJTcbZm2oGAMhoSMRcqIKdD9SbdCAz8S7\r\nwqqEp6o0M531Z048rUlEpEH4ygRIs7PRKlEJ1kwwhuXciUqU2b+NNmZjB/tY\r\nGvd2rAQwQEn+gbP6YidUfrXQ/y0zS6fxmIFLwpapXX23RCXTR7TbglTFkNO1\r\nEsEFQmV0VFjefycCWpI9VXET0K0BZ6rixxw=\r\n=n2Z0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/theme":"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/line-ripple_15.0.0-canary.da95e2a05.0_1667581102341_0.7759721116833438","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2ff904ea98737613dd4fb89d93a3ca91ff039cb9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4832e2750.0.tgz","fileCount":33,"integrity":"sha512-C0Rsh+oboQA7kI9gUhly/FmE/UTOP+5cgBSEoh18oxbkWMdsb3yHwVD9SJohe4aZzTZ8/8MbNdfLfM1KmEI89A==","signatures":[{"sig":"MEQCIH4QnY0LGyBj+u67kLRY86FlHARdghvN9DhcfkqRlScyAiBRjiBeNv/RsA/ybIFrfxA49gGGakrE6vszeSK+UhUjZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXx1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrjGw//bdDFNI1UmW4zgUpiL5IEiD8jKLDcpLNWOqrsuAlCMzH0Z3ma\r\nGFkFHxRpcIOP5NcVAaDsNWxWYbi8JldW8I6sk9DD/LLQyA/iSun2gaV8kxQ0\r\n9YYJ07GAbGEGjikFzyIho4aH8d7mrAU0p+GnRdq8jtMCW6EGL2vgk3NDLt7v\r\n9neNfWnoZEgPGiH9z/G22lF3kZbfAYBY/UFQ6DQ4eYmNHejpwRYg96FPQ252\r\nbx5KeW2R5L+gFlzNL4p3gGDnyJihs6cTP686yb3AA306Mpk04uOQ/R9EEBQF\r\n0LE0aA5r416K5WaMc7cdJx/ibQWFMoavAW0CKH3LtNul6Eqx7VxhaOLhagfh\r\nqPn8IG0w2+J0CZwUsPxyKD9Sv9OCVSAPm7LQeatz4zpNP98tyj6Rq4Vs0063\r\nqjhBVppYGJPpOvi7K0Qkm6i2GAZo1AvVYeTEbaiOKDVFFp1u1tjOPs/EJvXZ\r\ngGqPFZDPyt+5PK3ENpQRr4JiSNSEVBwVepX+XfLxDfE1/25Bt13KDuHLtXTe\r\n8e4ezKD+q05lXwPY5XUjIGKqKpP1HyemTqIciVXtFkjB15AGdCAhI+Z11md/\r\nWhB3QPszMJPfZx6mC9OfS3Go7JFeGqcQu3JKsVdocYWwkqkNt0vD5/aMrBt8\r\nprK4VZJGlRLjzFKTq2HWNDxAuwnLCG4wPyc=\r\n=DSqf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4832e2750.0","@material/theme":"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/line-ripple_15.0.0-canary.4832e2750.0_1667595381369_0.7223429012538394","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/line-ripple","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d182c0d5518727d692328d4549e3841320f61603","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.215506426.0.tgz","fileCount":33,"integrity":"sha512-marVl1cbkl/4ce+fmOsRjRFBzhtNz2lbWpG/QLc8MVSo7Wi1Zdzq9EZzFAQ6FxkHEaYKxvDpoURKAnpX2uWD+w==","signatures":[{"sig":"MEUCIQD7c6MZ0hElxEC/aEhfWAjY/gxBgxDd+TbLE2xl2Zcb/wIgJM7TNBbawvoK41cv/yFSx4HZkkQz8VafJrumGYAS0IA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbbOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZdQ/+NQAcEvVbvHI70ysjOQ05eh0AyUP6+6zruTtzwpkbEbBCVJvK\r\nKwveda2bnhWRrMTgTORK0z1+rGQpGXhy1DaxzNJwb/BEISp7HQh3LPTNgOKa\r\nmxczavS2VpJydORqEX6XWHQbwGs3UlvPE/e4vhIObzslBk0F6oIM1Skb+z2T\r\neG/kEbAYCA6BWjBaYkaX7NM7hezAHrkFz7T6RSOCe/7VN9TnJ41/JvinuT2l\r\ncr8DMzF4T4huH3KaZ2knm8b5G0C31bpcXn8t6ZxakJDjfCdwrs+udPWQp1Rf\r\ne/rDJY8WfPH6WvGjuvmafXLXFxZaEBJJv8DIs0iGq0FdFgXWm0g/vAgAkEa6\r\nuEW2VNeqb8P0O+QH9bgOgaKqSbtitR7d2E5ssX9Y2c3qabfEBjE7mOpHHctQ\r\nW4SW9fsZGk4qMFBFVbTExCXfUya+6Qwayyeo8EGpCboybOIzrUQ0D5okMs5n\r\n7wvlm4wOYkfTVq1Gn6T5FJWCOOt9snCFCW1pKwItpEi5ixS0auMMQooMhbDC\r\nW1ERCn6LxTuTLlc2bmAKP2KlbM4bVIsKHODBWDT0wlPqBsClkBL28EY8XWiU\r\nS9J/52Iv6XKewHyxQX7YRa1hTdb4oQvyJ6seKKWjVMjSR4g4JBHdA2T5w/G6\r\nglrKpmmwJu3ZhjVpwqetJx6j6bnDeHrmy0Q=\r\n=o0nF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.215506426.0","@material/theme":"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/line-ripple_15.0.0-canary.215506426.0_1667610318692_0.29523486961230594","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b4ab0361da98f51c8c6d5ecca55bc92e7fe7a8fa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4cf917476.0.tgz","fileCount":33,"integrity":"sha512-vgM9hStAD6X0/CBlKyQDei1BKGCVL3/wcAXc2JM4Vuil4pit6WiXEemR8Y3Erp4q4+V3PxN4CgL9sISrGN8bxQ==","signatures":[{"sig":"MEQCICnbPZPmhhq5zzqr821WE+W1/1HeLBiWtn/jVxvC7IAkAiB2BZxEpCV/2TNjXLJtpJmzMipix36E2FXDQfM8vENMBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqVrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtBg/9FzcIcy6qB4MoYkqTSZor0GUcgvjeMMb/BIW5Lsne26CKcmwp\r\n2HEhl0JbWyCpveZ1Lx8/i923PxKmPVDRMrwKc+RyuxdBZg4soyUqMw5vHcSc\r\nyxAyECY+Zn6UhgmbJk4j3PKSgZR7TY2y+hTlNvOE1060t4weK4iCsxoS/47T\r\nlMNbRXZnwpUEyDCI8ytPcL7LsIWpDvJ7PRaLth87APPDUndB54F3hQe8ji4O\r\nmM0DT5p5EsFAn8gX+AKaekKQUbn0lgeZDmgB8Y1Prot3fwgGNzgmu4mhzsIf\r\nN5IsiXctTx59pnH/v7PeDr0xcYgJ1obsMFz1+BzuetQPZauT6bstMoOUUUFa\r\nPlyXZF/SvcDeHqQ8wjoxd25cArzTOIEU89CTAsAmvPZvlHdfcW9tP9alnXF7\r\n/y3lPOP9G9mwllo9Vsie5fhE07AUUVussYpNtTeNRsy7g4Jb9jRAaUf4CBgh\r\nsj112WQCWEooxVAeG0SwtpEpyvKGRiJJ7h9WBPkA9OTpVRQo+vS++kSjzZdh\r\ndu5G+eZTQf7yjp3sjPh/EsmbpealsKLDEEfAimN8Quf0BR6U72X6T3U95unK\r\nK11SpBvwnh0QNI0CoMj7uH5PlHQbXUNXd3IWfh/3GIqebBRBd9MFrf+boywz\r\neT3IC+3dhd0hEZQHywSnmTOQC2oCd0LYmkI=\r\n=XTjU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4cf917476.0","@material/theme":"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/line-ripple_15.0.0-canary.4cf917476.0_1667671403657_0.6958889909337365","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/line-ripple","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ea97ce52205dfe5f581466694e528bb655c70e91","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.eef14bd32.0.tgz","fileCount":33,"integrity":"sha512-iwUlNjoXer5geNfa5V+OF91FNc5Kh6LoRigJ0QnLvpJxzbysHcVLpYkxzjK7KqSX8DYClPp3z1DVequtcSG/7g==","signatures":[{"sig":"MEYCIQCqpFXXkidXyVc9Dtw490ciW+2PsuMFSxoLuQsGgEAA9gIhAKGdWxa56tBqxHSOeFrCf2DTpAqIe0IxVDbzXbHQKnle","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+2sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfJhAAhZiBMBqwivV248ObQ/TIlAYZiHwC/yhxYXOWPVsaij7Mr66l\r\nCBS4XoDC3zVZJ6glzrW5RVJmHfzuIkYuSCK4JWpejHozVuoxouehDG5gPsGj\r\nqbwH7siM5xQj4dd8BING3Vx1tP0tnr88LAxGwrBxm8vgdvnaHx+ifNhzEqEs\r\n1GZ+HWZjYgUBUgn1sGT31R9CrIzkCSGrwKcx+Nd5mqkXAJyPlcWeO2ubldjT\r\nFElKK8vSup9tLOF0RIvQHgKkb4nDAC8NpbbOpL/t6b54ltOSlvGAa00Rkq5l\r\nErOckpnRneu+gEUkBELmyGUtpvhpHy40J2UOBZsrjmKR7fN5R+vrb/jA7fRU\r\nVjng5ozOEwCqQ1grc4bi7wjdIJWW39Q+i1EdSLYJPNpQnWwxnyYfinfarKyk\r\nWWhYBba7+EBg74ww8xZIBQAT2mlCFIvUqL3WP15InGpSBDgSb84KmZip9TvN\r\n1Rbr7SOM2WSiHfvK58x1FSm514Ixif6DveSqn0K+MvPrpyaHME4e7kQF4bZW\r\nq4eyCW8OTNstagVqVKvWVypKur74LFU454AR2/caZQtZcG834jGuvwBqMzAg\r\n31JVJkqGPS7iKM5h+8j6cCh7JnxiRVxzBa2jRH+Y/Kq1Qo6Qam4c/2vx4Lyq\r\nQLQoFq8zTAM/QQ/ovA0LmGX1CzK5dBkAz3o=\r\n=Tb9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/theme":"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/line-ripple_15.0.0-canary.eef14bd32.0_1667755435825_0.27762435528104157","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fa9c5aa6c7ea586774becc67f39bb3dfdcf3f08d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6faa29fe9.0.tgz","fileCount":33,"integrity":"sha512-lIWWMrARymfx7MaV7x0vTkt0p9ySTSvnrbk0gdBdTTVkYZk9+BWd3r1XBSRr0CeEOaR64+jsyu0OZzqMOWGRtg==","signatures":[{"sig":"MEUCIQCwBca10vmyBfUpYQ6mlCwSlFR32p6Ckkh50BTVP5J/fAIgc5J8u4c1Xin3KkNhSUqtHAYHiVnVDrB9czxP2aUIWlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHevACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOgBAAkAPn+lpvcb/T+lI+XX30zel+csRmWdBKUETkz6cjleqibeBt\r\nSwXTjaXPYDVMtoTyWz8ehCQyPnEkIk150bKDrHwZZGsgw6g3u7YtfmHsf2Ps\r\nAPLL9R4uuwbdjjJxFQ55QwM9lnKYl77nHWucakXLohrFdjFiwnFEIAgLiDDd\r\nj4JcwqZ58OGettoqh+mzYK31Rc8RO07UMZUkiQ/sJtF2VA3k3WkA7FUTPlCD\r\n7/G7rDdhWyHLNq9ShN+FFIXXFxoA7W930j9XNtNyembAROoO96YBoCG6ohH1\r\n1FtCp5euShHdPgK4pwXaBVPEd2i6y3iYGz+SyW3PRoLh4OKauRAMYFRfl3MF\r\nj0CDOn5+GEik6dsnMnPRJDVpT0VitaWqzTGfGcATApA2muSeh42fFdvnP2gQ\r\nwq5e/qhUh4Er5xyWg3H78psF2zE2g3WGus950xP74gR6si5finN/GnncSYiu\r\neDoToS8UXRoBbpcUm5oJjbBmVvCSg83nyxCIk3iNZ3yyb8rrSC3XA9m3vO8i\r\nHGknaL6V1Zv9WF4nDit3YG5unjtkVVL94as5aNVuSYNuGXyRKuHgcxVX0KFK\r\nJYPvijV1MVL3k8bTNpInNn1lZQjymHYITxhK9Fax0GcXlnS7ugzowUwz35ZV\r\nId2kl9u8eB5tUsF6naopTaqc8IPU44XCbgU=\r\n=GC01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/theme":"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/line-ripple_15.0.0-canary.6faa29fe9.0_1667790767298_0.07011227380083107","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"25a9c808ce88050fccdf0713e89210bfbf9b91aa","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9af09b967.0.tgz","fileCount":33,"integrity":"sha512-CVOyU0Yk5vDBsTlU4WSGvVUVbiU+quYUlMZaMowbTZDUvSOKRMRwTGX2lH6KVLdzWc3dE4jRcQVbcD5u/3oIRA==","signatures":[{"sig":"MEUCIB7rRGEpq16gFFC/FjHsT6Oc+EDRnbUHfRVh65An/YH3AiEA687Fg7MDrLgmlBg9oKM1W32Z3MQIC++T64jtw/eWWqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU3uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhUBAAkH9deyPIoSNP9tcsXaS+CJWO3s0efgXo/rfS+3c2CLdsWAB8\r\nr5Dwd4CT17Xzy3ZTLWlWqiyhZjOTWkqZYlC9Uod7B6vkZ77yRQFYgwEnQLfg\r\nPFEiUjeetIocEnmuvIlh/Z7r1orGijHycoYI7aZ2f24Tdbgw3gtIVMDm73B1\r\n5OImcu9eepm4Q8NNOQmHs+CKyS3d0Fca2mDgrGg3VE5VBycB+QPthm0t/ZgZ\r\npC0lXy/sbC64/IVA2Z0wGY/D5v1vt7rmQOAbjvA/fALzrHutQODHeaXWDdBa\r\nKsJkZk/EbByxk2VgjdbxdWUS3Do5Jv6BpfNk/Ef7BLdsHUJTAB9ASj8V/0Ka\r\nFmoauvJYEIBIj+YqtMy3nxoK61hfKV6wC8z8C7nBy6Gg3+naDwNNbi9335qT\r\nCtDmHbsUvCuW8zasGj3zFE8I0TFrZkRmLpaFYXYPue/nisDTPkSBHWB5zEzB\r\nwHsMPzpu+NHCPUGZhuP+4e6DBMDN+8X8s8SCSEXY4eUnvgF+izHHB2b1cFQy\r\nkPk5bGKN5ZxR5wx9Yp11oFsppzU/5bGWgVof1SyfK9ix+OK0PZ4lawjt61iC\r\n0JBCF7iGf9BF4sCZMG/HYvuWAlJ+39KjsKJTp36H0qFoxVXVxOJtZOcZDiCQ\r\ncc7s/JshqpBuz5dcerJXUmMCQc9fZRzpWiA=\r\n=wTdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9af09b967.0","@material/theme":"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/line-ripple_15.0.0-canary.9af09b967.0_1667845614364_0.13438571035727787","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fd0f782ddcc305e0e6e5d4a9cdacf16da8d95dc6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0f54fbb93.0.tgz","fileCount":33,"integrity":"sha512-yPr95lbh2uzb5HSMaiH1rylaEdxvFAAMMjly5em1tAFLE7hIlWgaE1pPl7B7sgiICWAwG35/7p4dck2TTIFU/Q==","signatures":[{"sig":"MEYCIQCtu/Ky7lrludGqH/B8Rnfn7UnCpXfYeEelzqWMH2sfSAIhAJwWR9SaQoQyV2pF8kiHKZriTMjAxXreKsZGNII+USrl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatBsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmorNA/6A06qtvhUndRu5W4DxEjEeAyBXjfVdgb+WXhPgWGj1YRmQbsv\r\neFpkLsasbyz8vtijtMsYSAy0j+gQ1K1Wxxl9VnVa4d/b/LJrZqVN+Y+lbZd6\r\ngsjnLDGs8/K89uObYqaIBJbuFVyqk9muELwTZj6f4iN0qULZkJE/seJ22Fu4\r\nO0Os5a3OWLE8zcszvaJrBZ3kOlK3fEbGop/vo8hQMl/nB2puzwtmK2bi3zhK\r\nzI2UyQnDKFs2ATTBc+2jaSc58GDf2OohuJ7e7JXjvCPi5Q7Xj9ft0z6sqMwt\r\nPXwN8pyeNvwyAYCG5wrfTJ80it4kGrfBkVvbr+BRbGayK6+XyOgsjZDho1ZO\r\nr2Wk8u2m8HJJ48NKn0GXWU+fLQZlOynrC9Ua6P5QKNvzzzHGuhhitmfGB8ZW\r\n9xCVmr15S4rTk0xLoE/CLN1VanY+X0nSqf+H6QhomRhMXK772L3MAPQ0JWXg\r\nkAKKXbZBOEckW4rpVbzP5wtlt32BhDxwyq2xC+PJdXg6jQm3S63Z/wOxXH4e\r\nz2h/qHfwNSxhorPdjS184AYqYk5yXUyiSymxG/xUtqzNO6aZ5YCha46HHyg7\r\nqo/VvK53TEUN58Be8pYa8TZuA03KwsFPwZiVYL9VmStkuCb9ctF6WKZ2ULJL\r\nbOOVFAGLwvG9ak3OlWpFSl8tiJNSE7m4D24=\r\n=IoqM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/theme":"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/line-ripple_15.0.0-canary.0f54fbb93.0_1667944556567_0.4999681803783975","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87b52dbd24b65bec6460dfcf243a577a8f920e1c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":33,"integrity":"sha512-gsb7Mim0kIhKr4hGUospcNQQ0ZYELGauOA4y0ebOQmqZWb9AKrKecJo24MtXLsqRrXDQKuMx+dFsPOPpkJlYJQ==","signatures":[{"sig":"MEUCIQDo2HrGImGi+sW17RRtG+ANRp3WdTLbvvzhZPkWU0gC5QIgWiRar0AMOCet+9UonGBoNCCzof9XIWY5zRY/z9wRWWw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaym5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGhBAAmRvcB2sG703FlzBWwRPk6GDN+Ns1Om4UvtCm2BYHmjWMUXq1\r\nK24C5ngIfYKKwGPCsmoKmxP5Bu8rBo4P6SHK2XBIpR4tvQzKiyGh6N3Km2gO\r\nAw0qN4WxPPJNUxP0YQ640+PExkgmg2dGdlMwC5r6iNVE+8gXmuj7tmrRSlwi\r\n5ouXIhOwf0ULS6Nexh2PM/cJHcfGP2RoDQKLxJssWHtAWhdVGAyBGNe+O9Fs\r\nQEkUQBpAC9YVvvDBeyh7Y6Bt4LX9OzsjUUakU4whgcjOz6Yo05HesR+ficsW\r\nzHFahJU/oKwaNSZXoZxKzMgzwrq6ztU3zVDKkWPuXly1dnkV+1Ns43y4xPYd\r\niZtnrxpym/Og7ENMpURzLk3CByj5MC7LnUhuBVd0YVBfKujirK6l5WQHcq83\r\n28jRLcxYBhjzmh/O2LhLDMzvQ2iNRkCG2eI8b/ZRGqy8gdBoKgZL0gv7YO/d\r\n+EoL62xzvFYgLc61De6+6C/m16BAKXX2jzkqNos8uYIJ10L/EwsLeixl0VQh\r\nvvxGDmFIzVnZo9D88C1ocqQW7i4zaCUjdJddw8RiqOntEg18bf8VKKzbcZsW\r\nBDOOSfOkenW0XFZ8JYIECwamj/BsbWKkR8cllgHf4pBLE7VvL2G8G3fh5WDm\r\nIJeCxcUgxHk2l8o3Uhk26Htl/p1MIQInjzY=\r\n=a0vc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/theme":"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/line-ripple_15.0.0-canary.a8d47f9fe.0_1667967417021_0.1914600867591123","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"28d4c693e83a2519e55904cc6d4fdf06b1e78ba7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.66a1e75e6.0.tgz","fileCount":33,"integrity":"sha512-ttWD/HPcLJzJi+1qYAQ7XGPDKrzgKf75r7GvacGFAV+kkTWs0OzhN4Tjiaj7WmPIyEgiYJTp7j/ZwuzD5WGwBw==","signatures":[{"sig":"MEQCIBzzFFcXfSRO0mXqN4e3ll/Nb5ASCdshLYlMumv2bbz9AiBxxgs1ZtKRw+RvzQMZImwj7BRhlywXIgybom+z0uDwWg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3Q+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0hQ//ZXY9uz+MGdFcCi9hdibUxQzKIvojXVZMy/TVpoS7OY49+NeO\r\nz1c1YEpXUMZzw0jsjY0ErUi/uD9VTk+tWPZ6XaG2xxn3WsI3oAXRN58Ur/wU\r\nSBPttc1pThE/CRLXP8eedRKcOTJELkElaq4IxRl3S+KUSKu0xczjXYIpIDqJ\r\nG2ekt+rQvAtGvBRK7KPW30Sr15w3jyfAq7HlrDCT7ReeSytEGaaLV+W62v6Y\r\nOghQiYMNHWyfVCrfuTOOz0LuexiXi3iyHub59FY9Snnm8jbRhpw7Dw2bn9HY\r\nsGBAZTG9qvCz6S9Q3rucXxHU2rS9BTgS94donPs41JALmzMO7QFOq4aihhNt\r\n3d2h0EYRIzOV8JizwSUmU/jeiHRcNoiq9jVfUNRuiD/IVwkjSeqcj5Kmnagk\r\n1WoEjhTQXN2/VDkQVmEtwkpnYQ/3P1x8P17Vx846kkdCDfIe3ASNM2JnYLYC\r\niO4Hu6/VKZH3n6F6l8MUry9IDoIQxGWvrIXoPJBWw+8wzaMKgeO3Y2Nf0ioN\r\nko1qAtBopg1O2+xfca5H9HONUlTq7EbckSDyAMUHH0cBIgr4JpQMxqJwmUn8\r\n3P6749OMg8aR1gQjomg61BJyODYjSqZv2D/y+hOFOLKibcPWosMQ0ploXVbl\r\ncPmtH06/oTmsUyVNqle6FbSlbAG/1wtD/HM=\r\n=CP3X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/theme":"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/line-ripple_15.0.0-canary.66a1e75e6.0_1667986494417_0.9703686110327607","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e6b99a2c126371a6adb34a65ce4f3f48594a3e8a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":33,"integrity":"sha512-DmblsesQkMQ7zSCIkIJS5fjWk/XZccUTpUvN/yw/xDuqwxseObVYcSn4at0Lt64lrkPhCuFtChcC7zCi9FEAYg==","signatures":[{"sig":"MEQCIDpPaaD7F/ZM5/Sn7uBT0plOWJXEzNUnmZtY3REtwOVKAiBEUPa44JE/FVPHddAKwsRZ8x4SJ+ZLJ/3zxZmPkHRDBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5SBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTvw/+PXvn7OpnwYdHpyFh5zIXFBdKLvpA8TS/uGvtnA0mVLG2CYXy\r\nedBDGy75A0oKwHwW1GkyJ0i+vSYPwnyjbATtUaIhItLEQrA/ClyTtk039xhN\r\n1as77DcJTjXVW4IxrlEmcwWW5SoCT9/EZiwlgrk+JV6IUJx4o5nu9O9AKoCc\r\ntNRy/Y5kMJdrpP4jhpYYmvaJBiNbnQMueMSu5xl4C+XfnJB5gfNNXautZhyo\r\nVlwj/f8KkHzIOxqqYgu+a4xl2YXJSO9ryCL7jxTBGLC61hKTiHrkXbMVLiLK\r\nXcOjMqVcRU/d+4xq3Rmf2Y7NvhEdTUOXE2OMYj4BvVBcWrid0ABaEBXb5OvZ\r\n7wFktlw+h1PZfygf1PIs9jgf+7/fuss2LAIS3biBKeqMBtV58CqtRt8e6Jn0\r\nLOCkitOPVPtQGsXqZYx/F3GKkG+CfJYo2uStDv+HkfpApvPoF7PB9x6QvVam\r\nAZEKjuT09CyhPJrldZN8o+cCfBlnxW77Abfi1GcbDvyHd7So/jpu1DGc4pMr\r\nkfA18bf0hsR9h2cGXDairyJhxaqyuzN0V1o2SdVBSUCyLryYMrj0mh+QtI2i\r\n4wdShr3TtvcHQQroIRXM2UQCqR/FirOpYEEJ7d0MPx03GFpHqBmW0ARjfQPf\r\nPAQQAUJVJEP2UuVra3XbgrTrsak4q+Awl/g=\r\n=EJLw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/theme":"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/line-ripple_15.0.0-canary.5e5c2afc0.0_1667994753713_0.6751681406675463","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"53eca908ee29a45a1f8819e08e45dd4380dc0569","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3e3f43359.0.tgz","fileCount":33,"integrity":"sha512-FWgM85F8vyDU4oc5Y4ZJZCvJmY0S2cyvFAgYKgkls5qOH7tMGqBVve564QFWXOyeDqouxW5NZKJ08HQkk9SR6g==","signatures":[{"sig":"MEUCIGRuGkcOwJXqs7bal5Tz8EjfJ5lYkhRLqmW9Jk52EA6kAiEA9A5FEBJ6FzgUYpRvjQAY/2nin95CJ/wCdxo8we+/GCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAdCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxThAAgdMk6Ac7fkW4FclhSIcKlWzHpoBMmgb2JFssTwVRR8lKsq6Y\r\nU1rZGUsekeB+nlwBzWPFhhycdebVb+JnAbUu4cx1UCv1Du41WAqfLoSsqAy1\r\n/rQsqI25ukZASsix6NuvenD4aw9qCSbf066D2jh1ASsmx1Ab4h/UBLjMgtsZ\r\naZel9zvZyoFbJx/URMLDVU5TMwbbwVGwPr79VhbtsKZ5JsX42tlsJGKji+QD\r\nHqRZ/W7S9yS3x5kqs+lvYIs+uDCL6IWwHz2OvPz2Xq5EYlSIedndTCioNsHP\r\nvhPQtXe8hu7wWVZjCp91EAlmcy8I4Jy4rUkW6u3z1d87mlXhSnj0poFZulgk\r\n1hi7nVIMT0MQttVLZTuHl/75BG8YZA2wnvEtPji9Jl5BDkzaRd4orClbjMNe\r\nSSlTYCVEL8GM070hQZa+r0gyG4RxPPiaEBepj4JBYmt72SFryOueodAoXtJI\r\nc9m0fxgf0VlMipJ9kw+ntsROfoNoMSlxJBqPU1iTkDrM4oxI8K8dnEkdzT9K\r\n4JkD7VCunz4HMfv8/Aa1io/CcAmfp/JY5oDHx6MbfgyH3gJD/yx/b8jMsX9T\r\nreZn9Rnl0zvvuEzVOk/e49KXlzW57cm6//Ar2Bhfhuqwta0sXOBCm+/T/tjZ\r\nv4CMLm3dXG5rfMlSy7t2IcrzAvCBEey5lk4=\r\n=ZX/X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/theme":"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/line-ripple_15.0.0-canary.3e3f43359.0_1668024130541_0.5482762458840549","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"45fee662e21375ca46bb83c134c7d49b2fed65ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3f667fac6.0.tgz","fileCount":33,"integrity":"sha512-eW81aBJrwZgT0ZIeWgsBBv8F29zeFsgAeDrHlKQq4n0azmgho+BS+hBEODgOgasQ8yQ13bhIbk9pxgU+8FatJw==","signatures":[{"sig":"MEUCIQDb+ovNrVEAJ17ODLhibNx/5TuJghSbb3QMCH7C8ZHYxQIgfqIGAReAXMCShL9bkOs4P8BZM2kxuc05uC63wLnEiNs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCQeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobNQ//YewvmqLXCy32uQlGrdRw2xpj4ZJORLz+oh1OPvCLjmi+XHdW\r\ng4AW71TMm8+8tTXBW6KvlVS1JBeF1ewDOZjI2yOt6DFVJ925J1sZLf1Mj+5U\r\nqtbJTlGT3o/P8CRKaRIwpLYH76OveKGHpWQPQuF3RPpMvbkM0Ii1vc+WrD0o\r\nMKxaSRG7Hrzho2h9FsnvR6KLFRq7xm2Xwah2k84SsdC0zjPapr98Kk5NHpUW\r\nl73N3LUmF5cu04hzYm0NXpGBRQabGDULHlW3Autj3e0AE18bCAhusuxsGgJn\r\nLKyBTfJoHowyUMuLtnSusD3IAa8pOsBXMxRns2VTq9ITf4LWW2MkSmKAbmWX\r\nn8jagj/RsapGD7eMIuuDBoRYU80yf+Y3cBFfxdr7pWXDZyIGxg5UOFQlV0a1\r\nW4kf0A6dnfmT3HJOwkw7rbJi8qK2Yecaz9UhXWY0zP0SYi/qnKTM1KLuzp1O\r\nHSKENNGAIXk39ULCZAwvX47SuZ4QLWXqbcMS6qrXZq047KR4KGt78QjTZygw\r\n3/SgnImEnU8NuDX1Fh4HN66BIoFq1Uq1vVjLJvO6czh8zY1Us1wLTEra/nZN\r\nbXVeRvfwol2EfmvtrihG3oxM63MXU+gE2yL3GO3l6vc//bSx6As8JxqrifTr\r\nZou5HJVhySfKA2I8CPu7kec5OqIh5VjFoUI=\r\n=g/En\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/theme":"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/line-ripple_15.0.0-canary.3f667fac6.0_1668031518285_0.17116517131778108","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"58e406f10afc0c0082caba4c953aa322ae69147b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.faa28c1c5.0.tgz","fileCount":33,"integrity":"sha512-DlmGU2EX85goRBMCZJnF+13vlS8pz+DSsOAjq1Dqj9KPDnzVH8AufIoZJWq8SrvbQrdgRv+dnl9HbuYh6pebPQ==","signatures":[{"sig":"MEUCIQDh0V2GnhTtHPQMadJDBk59pSaOO1uOGEL/l9a+t+grRgIgCADTSNKrEmk+qm8pDOj2WWyYi6B3jlGOmFLikAn3yWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnm4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEKw//TzfhmeoTmVe5flCkPGLEEpvZBzM7Nr316vdJJgBj2XdLhdX2\r\nIVp5MKkTIqzMwdeMpLwjtyW7fDPfGCqVt/VvZWtq+1Sl7P/7ER/bKYxq0fuJ\r\nO2Qd0stR3oC8UKW8G+UraZsr/gmkRwnyUoduCsJPYIIVPa7m2lRdU0/apgjj\r\nLEtp+igH1qvhxTHgTSAySOm5uNkEqHGYDbV9iVK3NvN6onnYILCHxfvlnNM4\r\nRLKG7ATFu3da8Rqdd+CnQnpICo+gWJLsfDjOII1o9hRqy5d5SlBDjNZe7IDe\r\nhRhC8Z2aWqnb0uPUuZr885SPj6b+4ONTn+/4Fne+/ENMGgM17hh7/BE8cEzh\r\nycCBD+uRY2p8Pvh33znrY+2t6RfD/mBOeImqIsuV74RQ6sR9WcKseotg5pLs\r\nIEA9b/VuMR2V6k5kISOXEurq4zalmNZWHn9z1sl9rmDkPvZiGjE/jhouDnlQ\r\nrXe8CxtaOxNg1Fm2tTsaQ91B0kQOIGWTSfAw51KoH4nUs11SxYGBdYNVefTq\r\nNt08SB0XK08Ty/fLpHOTjb/PYcNxQl6fzkOLAfa9pbbq985N4Ldep0EwSVBg\r\nIct9ijNXoQvPyScMUYDJyR56tAEqgTRUyXI79tQ45rIdCsVsb9NlHtNXNJel\r\n3Iwd2GUWDRO8XxkzjDgJZmmVQBXySH5eo6Q=\r\n=OL5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/theme":"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/line-ripple_15.0.0-canary.faa28c1c5.0_1668184504625_0.7530050944703532","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"60b23289d7626316c264e8e6779d35488b4c4199","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a868c7866.0.tgz","fileCount":33,"integrity":"sha512-8jqS07ZZgClb3cTGcAm9blBrPYDVdMwXEIXVavhH7QdIOqGc45Jkk4Jf04RSmDEjfbYKkZ/mh8Glx2pL+hpmcw==","signatures":[{"sig":"MEUCIQCEriJQKAOlZDhyw3BWAmNk+aFWgv1MCMulSgexbN6SLAIgZDDo0Z48Xv9lXdHSnly3cX4+A0IBRpFswXMMSve6TOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnnjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpW8w/9E5iDNRqhxf2YcbLMNTlAxLfw8QxzCZVFp4D5ESpSro9n4tVG\r\nEU3fczqsKuVzpnLbQ89WcOgGaN1jLS6QU4HCoZIe4hCePiCilO6p3uM20GpI\r\nywRJ7A5zO/7mAAOR9y3nA0EHqKfCijYWPMXsLZBA6Ny5InXaxeVxE/iZj+s9\r\n7vtusPva2ih72JK/3eFtQKZIJd5BIPeE4tr4cXdvJJ2iL5qaW3ORXCpgTGou\r\nSxjjlT/y2laq09QSF1e+UJijb9ZZmkRICNHxiZ7lDy/jcOWnPKvo0pAwb6nj\r\nDxHpgmllR0LnI4YqmAg+jhBOUGtq7UeN4OLREOUbmARR+38f6VwiAvV5YWNQ\r\nf3KjMSq6jHf9EbFuVzC7qiH+WqV85ocZY69L1WPXarEyZXcoKVNi5vDwwWH8\r\nZ2aR5CLNA756Pr0CHTcqF4leWMZNi2ZAkw5/uwS8hGsWUBZZZd7CWEMs8IGt\r\nU78TTL7j8LGFBXzbMz7hhEy0CcoJwdojdX74x7enX5q+xDPowX+2kpiDC4e2\r\ni/aM2FL0DRV25CzqqGKRR9TjneFdJmEeX2BbdHB6eHCMqc1KWr/BVy0DIAHo\r\nsZ5pB//FHKB9q9Rw8EvlOZKsw+VlIRKOIOMRcgB7VUDgCCb8Imjy99rz1Bsc\r\ndrVO+lfXLckfq95a53udImcL9uihVJF2wMY=\r\n=km90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a868c7866.0","@material/theme":"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/line-ripple_15.0.0-canary.a868c7866.0_1668184547039_0.5199891790486939","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/line-ripple","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7b3c5b66986866bae796f2e161e4b59be9af24e2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.602fe8efa.0.tgz","fileCount":33,"integrity":"sha512-LI1C/bfI/71Qg/N17Nv1DsA9fAInJSGbqasM8ld+yGZ+huLmGUnRQih4/dSyI3jMk4nVPl/NOKPI4t8Oa2CEpA==","signatures":[{"sig":"MEYCIQC/n+1Qur/YjLv0z9N2ZWaNF13reHFMOjH4Sv4orhs8fAIhAO7hz3dxeJInWuwozuxBLd+zgO3iSsOZKoRmYq9AiKfA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboIsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7Dg//STTehvjPS6iWMuFGEGSBM62mx6p0Jzj82yqlW6XNxj80udxg\r\nPU30W9JA3G5PzC3cHtqFc5FagxU+6fEYX9R7JvuYOx5+Yr5IFHDMfssyuSQn\r\nFzUou5Jx86EJ1P3KIYxJUaEgpbrEIdCEX6W1n2SJBRlc/psLMRHIQ9ftMM9z\r\nc3MeL7HE94pVagxcHfWJyeTWdxSK9QiEuJfxGLlTgXh+A3vlikxo47rZrQfz\r\nQCy+so5TsZGNLtUHx4x50VqFEpYPIGbvdmenJeJnelyJVOIbxIOL+KPwmwX0\r\n1jdeqUIrATNhoN5yWZSIasHH6dKPEeAJOURiq5JS54JMP8kyutv3nrv5sea4\r\nv1g8T0j4XUmI5rWV71Rb1kZucBCIgW2uk+YdnMGOz0OePkE1uJ/wlGDjDjk2\r\nsZ/DgAfqlgS0LV+D28aQUDSghJoJLkgmHJQiET9Qh5BVpOfTNDdfdNxN5oqW\r\n6sTdqJ5mnzaKlI1ljwHSokEFbvySzGF1LWNA94ireYq9LC3JY3qB99aXRXkj\r\n9GEDTLL2/e0dZnCaR66oZAIw1PodG+/plxQUpoFkGPeM17WfaDxM3doMJg/v\r\niDuYhCOjKlq7X+rq7ZyBPMp27VNNkOOTxFfqTI3iZuLjrFHxoltL9xhcJPbW\r\nqFuUilrc3yUXjVGbCrP34L/XubGofDCytLQ=\r\n=evTY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/theme":"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/line-ripple_15.0.0-canary.602fe8efa.0_1668186668720_0.6252266946481821","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/line-ripple","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"43ce59318309310c62be3f2e4775418a9d7ab7fb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.558c2be62.0.tgz","fileCount":33,"integrity":"sha512-RWx/iHg1nf2TeEr1fLuAVV52jWc34mHqzg3a4Gjpn+SyYGesvpYajwe/ca1kHiuCB+okJPYGI3iurqEQnzZS3Q==","signatures":[{"sig":"MEQCIBhqRbShqPeMODvOw4WNbYd1yzniP/8hUMGv2RnC4LlwAiBmWfmP/AxyWscM3tdl+0WH6vBbDz5Gf6aLQtT0Ovy+3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtBVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrarw//cAaxIQYKm4e9QCpIsQK98EwxE7+/2U/5dhqy37e7D+lcWBjj\r\nG8MEqMmIjVOdl9RvZO+NLicv57v4wXgXqCciOIdEsb2q14t3nzrS2XyJmmCz\r\nQGugsx5uC/cSVQD2pQsY1idVjHbhEvsPW1xq7Lt00tHDtLd0rbZXX1HJ70Lv\r\nfK5d/V3fHqLrYMkUlKqUwAb5JFfqCibSYNnOxhq8G/KNg3L08m3Cl6PjQwBQ\r\ntxRhk+twYe+mmEkrrJQD9hL4kBvOd2zPW4OfYM4NIZWzRpDCYuieOonKpfWX\r\nqMfhPMYTZXvvaTVjqzxJ92YtGV2Q8GcX87HJlQX39i/5rR5B4m3FHOaf4RPe\r\nvRuJ//u4oM/XBMncWTsH0NoA02288IafQ4xnAGQWmdVETxKfNy6dxKlE8zXg\r\nfgV5ZPpah5spz3mubsKnFjU/7P0H5XNg5kLH/JIdMlb0xNxr3cJp4a3mgAyq\r\n01k+7qFEIdtZ9vSaK68n0/mQk3zsMZhESmgythHE5cDeu2r+iyTWZGGZbj7f\r\nBAZfid9pCqeVq5kTm9TXLUj4Whfie+ze0OFuPNSVMJaSK9MMsEWApR1QRamI\r\n+psxgebh/h/dh6l7dfpcTFxw51c154hX3w6RppbAeKs0mvm3nxdlx1RLcLNK\r\nqjY8TdvU5W4PAM/8/d+4CmJa/H/m34+k3a4=\r\n=iQb9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.558c2be62.0","@material/theme":"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/line-ripple_15.0.0-canary.558c2be62.0_1668206677288_0.8800381513806808","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"18e1f210153d09ed5ce98d512291109e7013fb27","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":33,"integrity":"sha512-Xj/JfBHlZ3kmP771MTyglDI9LioYjJAKLInTQ1RwnaOE5HlhrzhSn4vqcGmqad3XFL6HtJZyZ/50Psgm+Bsblg==","signatures":[{"sig":"MEUCIBVJ6IAcoqxRytcT0/kATXL9S0mOkS5QDJpTQxYiUzuBAiEAocHtvyIiMa6fytbicb5dNXPNZzGICTeaCHfyI3vEwnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmV8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmUBAAl05Das03Csof5r5I3iTuDUxKXm1L92alq0su983wGyxunCc6\r\nCDzUJvhWT5BeQ2cZeJ47BAjz2K3cItpN3EznhSQ2TiSz+cQLpFZ+JjkRifWg\r\nPGvOgXVgoK9ratJLboAosO8QibJdH2/t6hvhRsGGdiSsuZKFosmQtVz7n1L+\r\nMu2flTm0uHymuJhla5ZfxDF5NROnBdofgPTAB3RmRlonfXIhXfHqAkZjM46q\r\nwmPvlnXUrplVlE7j/ysMdTjvg+a9uEGxnJdMthpAycN0JZvdzxlX8DmQwHMJ\r\n0/KbVinfLnI8NHlJT9AdY/EOyyvm3mFj0CgWulsb46pmYp8Pat+Ukz37XVCv\r\niOW0c4vukRQz9ukyBEcNP2fHwm+yVUErYmqdMi7ZynWL+jTYC/sR0qKs4dzh\r\nZhj1vXwndU/s6VOfazrTM/+qEDmtHSq/VP/rE4sZTQBOiglewNX+JscE1SFZ\r\nxJYP0G55NzwF7oKYmkXyaY47EPSLfqFhwUy1ov1F5Oqp9T5rf/nBnfkYw3tb\r\nGrH8kocbJ76b+sygSVOX5HHHTQ2t5D+QaDWUi1bB7kQgohYyfRVVYXyFVwFk\r\nMUstR8ofDoPY6Wd7kXodhm0PukYcizhT57DuD3xAxEH/OOteVqV2yQii1P+M\r\nU7XZq5snRoARdaiw+bsM/9cx+rRsCBwpzVk=\r\n=rUCY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/theme":"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/line-ripple_15.0.0-canary.b5c13a7a8.0_1668441468038_0.29842663711281325","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1aff1e96dffc7ec5930290534d551cb86550437b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a6e1c0702.0.tgz","fileCount":33,"integrity":"sha512-4CK8KBM6js2VboddcdVQL9k4CDRCK5f8J5TIOVk3tP9+QyM+p0c8CsJMPTi5+phbgUBHzu+O/qV5Vg8FR3Z/UQ==","signatures":[{"sig":"MEUCIQDRgdc9ta4gdW1uQBOsa6MjZOvPz2Xgx1CzwFtLPaoGwQIgOSSkzz1vpaZJ7uQTzgEhbXeBrF4PKVhFzeXXfPAg+rI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcno8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowUQ//UvbWqmjSM/XZ6upP9HXDLHOneiy8sHJ2CCFV3m73RL3meD9h\r\n5v7jSxHVBBYffXE9NMzUSK1Wvf08gBBhVIW5MOix6ZdZepfrLHi8NHemHWXA\r\nPWXotXS8KZTTMfJyh/Idsf47TGuy1L7QPqJI+GG0JH+/Wa2SvsekoLDy1Y51\r\nKM1RSKvjrdlYE3i62NO2gPv4Im4DrzHoy2/PdM9O7ZmO0+rgE8CRLR+CcpY6\r\n3tXYANvyTiryXXf/7rPO7Ai7d9romWr9W3TlRPbEfwbUXFmk0+qumfuV17gf\r\n8LBoPyDHHhovUWNG+WQ2IsVJ2wmDKRIe/40XKGgpZszNSVMQb7bLHWkEdWqA\r\nVYH0HIxSmmplYnZh/M4791kUoOoS23ecz4r4eh8M1xJBbN+ATQdFJhzQHAPR\r\nHyWUVOD37HLhfRZLJUv53OiN+jY0kcXmTFDeJ1FSLBVcjox5n9atlIFzy+hV\r\nXLl2ZmSSQK+KSDe4z8kXOB33NRJ3WEKGvsHVVetxMr1CFz0/qJntTlIQPQOS\r\nxH4VGx1tpKdQa4C1WEhoAr/rRTpu86ztqAb4Ij5NZHmzaNlXNwU6R/KyNSsF\r\nNCisxcIsTceEGJoUXPpQkrn10h3ibEO4KrfOxXefy6XIEhVagiFyyLuNd5N5\r\nB23Q2FsnkmnDZ+qLOg0d6rLnoUI0DQt+C5Y=\r\n=BUoH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/theme":"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/line-ripple_15.0.0-canary.a6e1c0702.0_1668446780105_0.08070226731223729","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b7098e82ff1bfb8a77102eaa746553199b8ec4ac","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b6f8a06de.0.tgz","fileCount":33,"integrity":"sha512-nd0EJ555ol1GONuj/n7FANYHKlVM9lrRJmBQryhaYYCrDWqt5hHdZjcOp/mZnkjemsyjhRFl4qO277oNJdLsQw==","signatures":[{"sig":"MEQCIG1ah1xuKOg32Aj44wfU8BD7ZCvYs1rQFmIr4JgRvQ+hAiBNpH+en2opnLCqdNBWmn/ilHwF2LP7Yp81S54ToHOq0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1uIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD6A/+OJA3XWffEF5SMpmnHrwAfQXL7tAz7bSHIg7MyakY8tlgX9fO\r\nnj6Wa58fTt6H69UnX3vcPQ9cS4ctJhPPHevb8xSBsYWSnjB7xYgBeTJ3Cs47\r\naZMaK600hXTdybc6FVHrzvy8CKFxPKwoisplqeUbb74UkPkaGjZgR4MBCdFh\r\nWGlES4mveQzTZhk0lPCt9rbZJCkkIain0LBEXCFHjfoEHA+talVLcPU1NzDV\r\nGTihr4nmdbEVGqYK7gQGonK6WlKgI19/jWpPI/G2Vt3m8V/67l8/AyGJ1DyD\r\nuW8+dpkzWpWSRBwinq23HuZ9lH8Wuw5ezK8P81lgH9UG83H/TDzEXFxReTWA\r\nfxuSmKC6ywxcz+YeTBXsyvlyv0uuMz5hZeesYTscpV0SOWehplJUaNPAgY8w\r\nkKagRZu7JvqIU6fKJrNg3PHiEALsI8zF/6CCDqCM+KAYxKCHQv+tgKy0QZMJ\r\njw+Jczjq9hOjERMxVXO025yCtqcmAGinsbC3pgt28G21h1DU3AxNncAfj+VM\r\nV4yaBVlfpx9NiWjFBLlEv9es0kw8nxtnBex2ONAOCsRNbHZjYZW4EtX5ACqe\r\nEvxolt1aPpI8vb1BuwTsxIbIBM9ac2WOODs6ab9bsWl/LhS+kdR14WHv7+1P\r\nxbITLWoNQiF1PEwr7zEnOEGSTVEOvyisx5U=\r\n=IM4A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/theme":"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/line-ripple_15.0.0-canary.b6f8a06de.0_1668504455860_0.4382133629528848","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8119d1f0f1f79096daae0614daab11a2b7590708","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0163f3ba5.0.tgz","fileCount":33,"integrity":"sha512-XzCDeU9HwyD9BSXbx99DSrh3FrQG+Ez26gLpsbL1e5JtXYUz6q8YBSJLX9JCtZ9xtHIS7DQ1vUDKa2Gv+QeMBQ==","signatures":[{"sig":"MEUCIQCsOCFnpgVZxRQN+c3kAYeu9ySv5VbHxAOqAGWvzT9l9wIgfne/7bR7NOSAuB6uXGxf/O3kbHo8IMLRlsGtogflNEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9PpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohkQ//Y+KaToMrCMYS7kSY2WkUdclpoKQN3rSSmHF8jKNVyRdYRHYS\r\n/p5Uf5/65sB/gjcUpeX2P2te6A1O+sLjz23Mac7a9zRlhlaM0NDkJi7nETfN\r\nF6cgpMBPCWXQmpQz2yxqITAQi3C3q2j3wMnSkxIfqLzTMfC4PrLG5ymefJYv\r\n7+Q4Ho8dKxcECy4kPWjIBgYq/Jh/7WXbAnTf+oj3wKm8e3rwZ42PlEMvfL7U\r\nS3hGRFPDAI4e7WsL69LH0sHMrNP46Btlg0TZz2xt+1DSy/NsVZH1r6SspJ+t\r\ny0Ylhw18TgPRCkvstYvgi4wZA0hAu8IC7A2a1MKmCa0eY65VVttcUGyDRWxh\r\ndzBINVFt5a3AhlSZ4wI/KvdXxxEYtPT8JK8svWCBiLFgE4dYyA4XDQC8FifD\r\nL23yskrc1xr2hEXzpvMhYGDggu3jviGMJy6RjUivVHVgFMrC0de8TcXy+IAS\r\nTE5E2TaC5H+dh/xytV++Y807LZMYXHbLB5ePKGE1qBD9WtB1elNIfG7iZ6Uk\r\nYb3nVz3E/KmEgc3Ymo5xIrsT6afID/+qoUegMQYbWxV6U7zTgjEjd+941//y\r\n0eseD+noDIWkJEf3kbGBBDTQonf4dCYNSQgZQwjOfh7/AIlIRE880XfEFrWl\r\nLKwdTKQBc9Gdx9helvmLNzKQ3De5QO2/LO4=\r\n=9UFm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/theme":"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/line-ripple_15.0.0-canary.0163f3ba5.0_1668535273623_0.9558910911775369","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/line-ripple","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a976fdd490b12b0c64fe0470d31d67fab8ad9fa4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.66c5cbb94.0.tgz","fileCount":33,"integrity":"sha512-lqHQZvBW8juZ5YbcAP2Ez0RfoLINTY3cICIyXdZoZJ8p9KKENabo6fjLIkFSYxC96/1+fZryEW/oc8Z6l1emdA==","signatures":[{"sig":"MEQCIGf7QhsYkJwwUXUEIuJ/CWqC4ib4tsk2/A0LSlx5KPL9AiAy/jChHo5QORXp7pFQY8fRdfJNbJY+B2YPL0lmT1+CYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+iKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0cw/9Hno66KSv7sb8zVtdvg5FRtA8Jt7DRynVD2Jb0VbMrYlEjtio\r\n5cnIZSnxEiRtF+Uq/x8bmJtzaB1TLeiX5BvXBoupd0IgSavYsJuZ/uBtsRM7\r\nUr97O0fhAZLw2Q9AXha99zZja5cLAXilAZhXuH+S1GaFLr0iQqU2okpHKOtI\r\ne85tlvDDyxsO+qIUb83FRYMms1dIsarXVJMXYRJ6S0EHxIFYyGb+tSzNcgdf\r\nuxVbMYtLwvAnH9fMqxKXsapoI4mxAW5jh5MyRh921HieYXxYgmokW5Vh/yVm\r\n9cvxeqB7W5uJ96Ddbj1yyPzdZxZUFINzg95yiy9yocPwC+acZcsXGgszLNNo\r\nvTzInDtuyimce49nu1fDEFDP16waJIOfngXJ8VQsQTiqlpdJViDX5DFs4BOd\r\npxPNBzkegSmsPXf9IrHWx+Dk9zA/5ARJYuhOkboid74Gz/R4FtM6qgEIbmP5\r\nugoSzRCnI5ENvLVD6o2QTfV/dUUbYnSowSeARVj4gWAU0V2eeorzDIqOwBFS\r\nIGbSgtCZC2JqIXRXcgrFsAqkErbX89xOMUlLIEZdxh682iE+Vu+IkVUis0C+\r\nmBO0yy4P1os3OX4gG4+fnqPbIngsSMWRMpRz1axdgXddY3MpJi56v6tOquz6\r\nd1bU07pLn96hCH/ub6eU4sFiW1rfXiXbrck=\r\n=c1kC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/theme":"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/line-ripple_15.0.0-canary.66c5cbb94.0_1668540554090_0.1859311344549488","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6ef6c792c28470473e6aaea7db92b762092ff85a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b01136063.0.tgz","fileCount":33,"integrity":"sha512-HZkt1TvGDOYYj/B+Njdva1brbGAQkoN2uMaOOiSHtQvtd55jikXA8pIIZya//jqjE+pKxhPh/hii5BiRAmwjbg==","signatures":[{"sig":"MEUCIE7anlWfKcSnN+v7oNB1eRitQ3rmqr0MMzJW2GlauBmEAiEA88dtV3gNc2+kG6BE4n1A/uxCoLXI235Jfy2DfBqbrHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCuDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLAg//Str1KZl39z4rFTsXZqECDpXQywoM4+1FKkhVyVt7WYWC6w7Z\r\nrCaL/kfVIhUn6DbiH/tb67Ssr35nQnXXvuYW+ClCPepV/vvWg1Skt3cRFCdf\r\nafVYP8azWsfAcr0gh5gMDV4d5Z8eFRzSoeG7KgzxSeJ3sZ0ORDrH1xhuGDSO\r\nP8ozuz6N1WISU4MR4L5nHid64lHjU0UdriF1orr+Ibo5NBNEB2dYuMnV1c8a\r\n16Lzwd0TeUb6CsDzPQNl3OiETJ0WHTTwt1a8ecd5KicKyaVyOF9bN7fht54h\r\nvY2Isue39wiY59XA4QexG8WyPAJB4+crkbjzxwziJ6L2jmkUOELI/uJ7VVr7\r\ntaXk2qRbF0SEaREkM6L4etVcRAom/Mb0x3eMfhUki0aXchtVVQm6+kebClse\r\nTbEoxHUInIbBsq0qRzIRlAJzEUnp7uc1cgD19etk1ML9jNU+Vv6+FWZ0Uzyt\r\nQ/H9Ji1bjThcy0O4re6EvD+jYG6jc3XBO5eWRyX3Du3nwS8qgn+oAdind6oM\r\n0giWgzne7MFmBuOmCB5xplXNVz2k4stWuHv5c+LdN/GQdsHgBcI70hqdgIF/\r\ntAt+GN5zsmkISyAatpWb8V5Cu94wpws52cdnJZ5cC8IPmn9OKRQ68pL192zW\r\n/R2r0vk7q/P4VLBwwv0gAu5v17rRBCuqAzM=\r\n=uacO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b01136063.0","@material/theme":"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/line-ripple_15.0.0-canary.b01136063.0_1668557699325_0.835180667966616","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ef340dc9a82907af0af0631685f2941178d93e4b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.01da0cabb.0.tgz","fileCount":33,"integrity":"sha512-cacjP9QVsKeAbsHVjGNLzksULtXPqbcKa6lkyskhMwxB1B8JD3JGRa4rpQ2LWnT0fZL8Yyl+iTURko7k9CvY0w==","signatures":[{"sig":"MEYCIQDgG/YvCkp0tmstWZYAvHNkBBXj2SNzZShdI4VTJXFnagIhALnUlgPVcab+go+ALxgdqJ9B2IO0t+o8Nflgmpgg55KL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKl6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoPA/9E2at70ktjmLW64l1UAJEuP9pI2mmG34GFpb47Pm3/82AVUyy\r\nz/nedX91wTXYtQUrjjiONcxf0TuWRJCd/S0kIvNzZl82Hu8o80sFSvaIZh0o\r\nxvIE62895ubdopH8M7jYL8HrQEk+gzSfL7ifFaL0x6t+gEogedik0ovdN9VB\r\n2QIWRorO2HYSAMpm04c7vhuJuiv6OkxBFpwshX68s2JkeryV81fiumOMbzGC\r\n8FdKLLwMdytl3P0B95PCC1nDzmwQusqBINAhsrMmRmtZYgjaMIqTu7e2SBMa\r\nNIpQJHlQUuainx29e0dH4znSlCfDJ/NLk/npy3C7T/K2PMKH23eD9qID6e3Z\r\n/3VBSTsGhZOqaoanlSs1Dr9E6A3l59l1Pg5qkbnJhUoc3ycYZ9EBYUY2fZXg\r\njQDf8vpuYkqjuDZol+XgleJhPMVXjg2I1iGfi+MwOAVuzXzDRSNoIWr0V96H\r\npIqgq2D+bYNI2PVZkaGuj4Qs4oS07iGjp8Yuf0DF9R4Htyhd97Zk8TWNPHzk\r\nMa4B8uAimLHLB5gUwubzXMpcU1SXQcuTTG1HfnFJ11kg2cTeCAAI/pricjnM\r\ngkMhaM0NdYggoAYR6NtCg90ozamfGrMCx2ViGyeEvshNspLoxm16g+b/ievc\r\n7A3tqTwUm2rPdYmHmhIeAmqyq3CrsNz5ooM=\r\n=y/P6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/theme":"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/line-ripple_15.0.0-canary.01da0cabb.0_1668589946532_0.07209549620197242","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dd4f40a071f353595b8391791b6a23fadc1302b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4ac393164.0.tgz","fileCount":33,"integrity":"sha512-4T7zRjtmh6HpElBMG1IODouF8g9uCoT5am7zGwOqtZXNoGLdwoLIb+plLztezlWRqr7+SI+1GWVxmkEDGbTcZw==","signatures":[{"sig":"MEUCIH+uPBIqQjiZIJY1QbXoZjuLVUtieuYYDb+sBW3Oipa5AiEAna705sCsiUhnuUA7nZD5F/G+A9YWQloOLvrCNI5bG50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQxiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWCg/9Fs7+1dUiB20VhBMnXVJkKGsXjXNUJEs6Opv8pSPaNDrIYCFy\r\nOwXZtrn6E+PfdUUN/GZY1ln2ZzdvP/vX7TzKEgrqJ2NfO3x6+o+/KydMA9EK\r\n373Tjr8x5LMtwCpX5jzO/8ZPNy3Qx9jCLAy2+Uo+0zcWNst5fnl5bnUpP6WO\r\nILhSf3rtQK1ax4I/IYPmyHMJ+G19EdY0ZFMBzK2/S/MDlpjHeStbLZUNuSpR\r\nFNwqgLLFQhYDp7OKNenADprbX+m5KbqDE0cLDSsxHkZJUssGgfcQqjIWzEBA\r\nJKvt5wB1OHp6m74m7Rk3FX8s7Ib38VEj5yVC9F5jYma3n3Ybbtoal6ePmA6F\r\nubXV4C8+4kEVsohWvEzv1qEND02gs5EVm7nY+2GKo+0l7opg533BcJIJp1cU\r\n5zP8U2lGZTKjityIhvAj3RLiZBx/lDV6uUPP97CUGhMUoW1E/5MCO3tIBhjQ\r\nAcDuNjxghvJdzuJw4AqfILOfqxV96zBEidCKwy/lDlFObBOO3CFi8O9Jt9WT\r\ngfygntQH/k0tl3MzcEu5ZH3GWZ637xYusTxRnN3n+SHSGva2Z8qqaaBp6X2d\r\nFbDq6hXI4Jn3xAxddIscuwNSm5GIGoNwWl6mvLRCU0xBp0Q1Pn3IgW+VeCBQ\r\nEOL3qNXRDWPbDREJFAb+iYgaSO+n0pcXb1g=\r\n=17Av\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4ac393164.0","@material/theme":"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/line-ripple_15.0.0-canary.4ac393164.0_1668615265842_0.9125265656805135","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"152cf0d0905bef88ff0e9e660b64bf66354a7d6e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6048fb563.0.tgz","fileCount":33,"integrity":"sha512-7Z9QvhHdp5LERxnO+P/PMHL6exdWbfvmirYkDJSK1PVwhSn7VrYi0UuYV28ggzcpRsE/QHoKi32RpewnBrC+tw==","signatures":[{"sig":"MEQCIFZSuKN9iy7dY4mpPF77TMU3sp0hyIqbmXgv58WyeT2TAiAj5MysoJZZxrBZO5Ky0b310DJC/+sVkj8SmSAwk+sXFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQzwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr79A/8CST9V5xlMpHvfKYbT5d41QE7ANpdk60JqFDpLMJt4++hta2U\r\na0rqNPqxr8vC0FNhE/hQAg3B22sfxbd3+2pgvIpIXyVLUh2CflF6wQ14LlV3\r\ntoiw29GRnx6UlFqJCB1atXb2O510qseyX1cm6IRBNlq3lL5bd4XDHLnRdWOH\r\nyLnHWgIe5/3J1xeM9rA9hQGUukAUyglLOqGWdD9oodKS/x6GXLY/uOvD2uoO\r\niGjQvbcuOJuLn8GZtf/M9apGO3Prdkct1ZXP5+8vWs3apIyaTRB+svLvLc8D\r\nAvD148ODyMUBEG9GMAelcrDL+1NDVorykSo3YgEXBEZ82iYV4nRld8KBV16w\r\nm71wvleGJWrlxx2fYTHbra97gCezaN5+SGZwW0bwpO13mwKdB20efeXnKjiP\r\nhLe10SJoXaO8DVXY4Yq/XSX+J1TdbXdF/LX3FpamtfHDWSuGgxzeYCdh8nsy\r\nfhVcMxK82sLpCwQgGvSFyv4cku3Wv4bU8T0VZmQWafHYJqKC/Dnoq6Gs2nB5\r\nB/vNH8GawiR1dFPFrHkr/Cb49tpjNnUC4/1jX455hPxGMHdIrjDYpiecPrkL\r\niiHiPmuQDHU9Fh+VGu3y5vnnTdSJqiTd/TftvyDEI8GzqZ03IByapEd8bwZq\r\n7Kwoc+qPsBqUknwkyrfHFiOOINbrwDTruio=\r\n=c7n7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6048fb563.0","@material/theme":"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/line-ripple_15.0.0-canary.6048fb563.0_1668615408106_0.9183303909262388","host":"s3://npm-registry-packages"}},"15.0.0-canary.3777b03cb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3777b03cb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.3777b03cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e8f73a2c8a10cc508a62fe36bf9583cad77aff2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3777b03cb.0.tgz","fileCount":33,"integrity":"sha512-Rw4zyAMShm+W4zzW03zHvaFaqh5pTko2HpCvUDtZTnDnds5lfXBw4U+DUzYYOmI9F7wVIynX3WG+DRcFOOgIEg==","signatures":[{"sig":"MEQCIEwCqvCSN+k7j9PNx+Zr6AcWddR7MHs9UiEq9rrY5EjwAiBD0p8NllXbB+Fox1TOklwbcloVaZuXFnsURR0LizRcYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdS6hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyCg/+M+JuGUnmibp9BtPAvW1LeylwUhQ5Xudnaxa8o5PI2IHA8d7N\r\nf3WTfI7yCKhOtPRJkcV0dteuY8yESsz47hWuibF8T6iWblLmnMGoXl8WUyjl\r\nhvU0cfFmqWflWmIQiyVY7loEc6xMZ+K+6k0tCGwxBC2eKj/12BMRKs4iuiz6\r\n7HE3k8z4hPnUMGZ3dKFF6ItOtY6Wv1wO5egHXIKCNd2zWyq9w1TUEbZr/Jy0\r\nS3yAFpr5tkrtS/QUz3QXuK7SdrxfR5DW2T+PBr6AKzbKF3/l7sbhdtEMLMyx\r\nZzyO6OWldVXTR9UP+HRuG/f/Yd2c+Ld9D0apULaMRiImhYb+GUWyKa+AMRiG\r\nA4v9Lxk76iTZdPYMirZnKWw5Ne8BSWF19dRjBisPBUi47u6wG9W7jAOZlR9s\r\nNArpMeYFHctV0iWu5nBsQZ9byLwpHlSzSTVPcI0mRLtbtEIsA/pCifiwpog0\r\n0OWBrXmaQOUw5K1gRIXxU6KNEUhstXgycWGrMHw+NsWovbrguok4dXvc2WEh\r\nnR0ZzZALuoXPHxTs2twRiOkcb/dz5s/+Az0vyjdvOHF9xop7FH+gcoTAYsxV\r\nE2MzIYzOvEEAWmaePaJKJY3j3meUmD46BhE0ghSLG4Et2HxRPfzBBShce6Hl\r\nOnheLxYffyAMEGPRwti91xb4Qw2ThdojGZs=\r\n=sREw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"e02f6251b19559b874fd1998a9f0bea7d651e41f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3777b03cb.0","@material/theme":"15.0.0-canary.3777b03cb.0","@material/animation":"15.0.0-canary.3777b03cb.0","@material/feature-targeting":"15.0.0-canary.3777b03cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.3777b03cb.0_1668624033491_0.6147124917539244","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a959b250dab51b4fb92c0872ac75d11c5c2c806d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f7f56fff7.0.tgz","fileCount":33,"integrity":"sha512-DW/Fg4t8lwuAxZ/9PIP1g++IiFGiv/EfSG0+nKhxY2DzGLugMZjZkcyB0ixg9CJycOr7xJROObJHbuusyjWyhw==","signatures":[{"sig":"MEUCIQC4cs4PLrT3NAiwa8FdMeZMJDSlZnY2JXYDYpEMLBU6+wIgeZYv/C/f/GkrsFedlg34nbyZfJlBClL8OJ4npx+siys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUAkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7iw//Q8E1xOnlgpaW73bufncMsvE1Hvf/n5Lw+Rb+bhQl9jFS/rMm\r\nmLCcKzIQ7f2eW7NB6itJMeQn1Qp0VBCFcSv83Fi8ix09yt6LYKgIOm50CXf0\r\nN3jgsa8H3LDWkyGSQ9vM3eFAZNLf4QbqELprcpsevQYXcCbLD2FhGwCID5DE\r\ncKX8W7jq2dAEXlwWV2CfBxboziXqb2lzpy89xEUVByqIRFyBDTXqXsyJmzWU\r\nghlYmzlCJfvzsxXZQfC0H9HVeIyqgk1fUet7B6jGA5GZNKUfwtEm8I0byeYo\r\nIGEBaZV7FEO6iWR6YnWTFlorD8dKiJxUEfZTONS10y11o1qOFLMAk1ddV1To\r\nvId950zJQsfaX7I9Kz0WlR26CO5Ur8WOmuXcfSvMec/0NpsYJQ7mdsEL33va\r\ndeIF0hOGNGAv6aOghcdRwLN5R3UiW7FC8ZdTf+AfK4f/PGi9DSIi1Y9M7Qu2\r\nJ8p6IHbVoggVQcYeoMUqQ/EnU4gdI3RSK6j3VVGzEvFkUDPizDUadEvS4U0E\r\n8mIr2U5JrRPt6ZNztb5b+axibtCqe2rr1NRrFxjWwDvh74NIx+XRP4pjcGWC\r\npFQzzIiD85dsbiTfrtbNy84yjZa9mDRxrMygJnYbbyo6LaWIBw1yTZm5BQlF\r\n/CTBh5cZMAM26F+zsIdZ8GTCyodfbivm+k0=\r\n=tVSA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/theme":"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/line-ripple_15.0.0-canary.f7f56fff7.0_1668628516636_0.13249150013027733","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"badfe274a48136350426e5f6db84a251ac12f0cb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7c73f6134.0.tgz","fileCount":33,"integrity":"sha512-H0QjMxB0udAeDNCg7GVqnnIL3bcbKLtzGPgbDCiZmbTLwgXC9VPo3O/iclYOpZ0UGoB0ObOdlheyeX/4E0MVZA==","signatures":[{"sig":"MEQCIHXrCioaIRNaSaVh8rHWM4ELeyPE/YPV7ccvl5yTegAhAiAmeYGIgyrELoxeOsg8UJJVeHKb5NE9Wo9UT412oWmEmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUD3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGexAAhnj4jPQYt2hdtyXWs+mz037XUr3NBUTYf2JfIy+zjlXUUdhp\r\nYAC5nGrdmH4JX3kqAHa3rAywkYDcIww5HEuG32gqkdsYGpRK9j5CcBHIZKfu\r\nhepg4lJ5ycH6TxJGHmx2L+yaOOw5HNg3f6ThdAw9NSS3JqeYjRls4t4Xg9OP\r\n59xBPS0RRN/CnT5FZxIqxM/iDDH6ESkkaJAYNZfkCdMRHPc/rJq00alSw3VB\r\nGu2EtX1IW4p4AlhqAHrMjPbAsSpD5i7DFSgtBEhFKVs+Hkn/pjej19tVyqkY\r\n9A0QC/wwlY+gCi/un9WwZplQR83EAdK/d5pHttygxIwgh09eDI8RSHqmpw5u\r\nQJJ/chyF1j7m8ocvM290EBTARe7BS7JzXCcvds7OV15122jywDA/KaU2a+sR\r\nC+dJkqMara70TzkRYrMtneJjCk0VdU9FrH7RlWPikDHX3HfO8bnGi7WkbvrJ\r\nf0GxlRHupF7ncRqBhZFRGSoar30QAYxITNTF84f5pfcgqcZJFeBb0Ja+db0P\r\ng0B21Gia3UDUu0ukZ5/Ir6c3gW7Z6laXM1EBCItQM1Uau8qlLGoCQQUtG7Gw\r\nK+RK5bzkU+9kep8CEHoUuC6BJ2/TWCchecKiE4viwSj4WbnVXk5JF26FPN8D\r\nNydE/M+DhVE0FTapykxDaf8rQ6o32uPSDmo=\r\n=/5Dy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/theme":"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/line-ripple_15.0.0-canary.7c73f6134.0_1668628727036_0.4086712640819232","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"34d7baf3e9f91d8a391431c72a6892ec5cd41755","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f1e037150.0.tgz","fileCount":33,"integrity":"sha512-HEPrtY6kJ+9k5wgR81PZzHNNUqRFDK0N/RXJ07SNBVD56oGvtiTSxDkknovWSWtCIvvRkoXSaIHqQqtY76exaQ==","signatures":[{"sig":"MEUCIHSY3zugxsqIt+msrYEGvl6yKqH4PgCrHJfKYIKhaEjgAiEAjHhq/c+cUeMKSBgqIkIFEc/slDI1lQcSnoaLc3ZevyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUJHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqm2g//bskldSlRb1trUYfJTJRw5g+2DcnJ8aYYh7xFCBvNT7Q9J/vK\r\nI/T1jlwbUAQ/+PDzuANf4Drm5LOPrkyuZIGCz8P7lrLKYm9WWFRdpg4PoAOC\r\nnudLkr454M1Ee6rhlZ7oF967bEWKX14D3AYLImDY1jNWxGdCtNnyGl0vY6ou\r\nGxjPQPExoB/Sszyd1T5miul7ULoyXy7JUAf33ZAz6fKrtqLjEKtmvGOaSqF4\r\nkQjF1De2haonAuDaOZJfUbsmhskaNAqkHeWwlddrsC0t+mly281a/QXk1yDG\r\nbkBRCuRw8WgRJ53JBClTRteESGAjgrAOMzx0ssZ1NFFF/um7gPw4SaJLg3cU\r\nazWJsSrwW3KOMSQ7bbbCXZk8u54aRcLyCHpQ3uKsHeMJU6Yc/KZpLeUGeBdg\r\nkqFB57krY9VLtplr6UqsN7x4aiYlAvp5QdF0jzikCeXE59UZI0+QKlgoAxKs\r\nopG/+rWjNCAILGn8R2IvE6xrha7xEpQOUdDH7eK9q6qY1L5rRzEndJ1XX0iX\r\n8iTYCoDo8H3QD4IvT5Aft3v6UtjayoR1KTfhQd/0OcgeUYTmg6A5yHvCrs8b\r\noV4WSDNB22mf1grUK8cISe09axyz6c5O6rOJMIzryYnc5XabU9htO3e638f4\r\nD1m0cOZrWLch0dwv/1A4VzpUh9xlH71kAZs=\r\n=Zui0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f1e037150.0","@material/theme":"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/line-ripple_15.0.0-canary.f1e037150.0_1668629063180_0.7286997392978891","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/line-ripple","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cf1f87c4ebaf0685752c96bc46b191060bd92308","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.40b18d043.0.tgz","fileCount":33,"integrity":"sha512-rOoj+HCZBArC+75avCUVDm6gEFRM8SKckQFgMbusBQt4FnsSlIYer9861HwhYgX41QdSxykw0P1ihsf5vLcC8A==","signatures":[{"sig":"MEYCIQC/Wv/4b98GPn4n3y5pyamQ0fs7lqvCz6g0M55I1iw2agIhAPrZWSIg2bL8VYAXFV4/dTmHYnDkmIrNIQy05s1g1zn9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWr8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoL2g//QX+NDnr8DucOkOREmAqO505nP5oZPB79WTTs9lTrA1WfMJWx\r\nDucYBOU9YSAE4lI8HJgfOhny6CSrNG9NdBt0OlmQPIEjPda6YCqvkEwLjxCj\r\nDym+PWNRdqm6R6DZE1IlEuXkYHmQoqM35qxgS6qcv/C+D7NWVMmF306HZ4e/\r\n0iPg5mx1ZEq7hPUL+30VU09ev0Bic7/Pr6ZX+vwJnIc5GloJbW8FXgd+Kt+D\r\nno/aO1uQ7iK8L5qNX4vTjUD9sChoZE9Y2f+FRYwqF0w5tRIMyF2Y2r8uzXW1\r\ndFlGksFZyQ5j8qWmJveDutNeNEhG9iHX5xF+RH6O9vdgVydyXs1tDk0Vww14\r\nJiGM5wGGzSZEsUx8DZFOBbWYh5n2HTdP+7qaHLMMpro2SVa9ySsvmbSceIvU\r\nmuNrTmArr6+iktTPpQQrsPQGj0vmtw9yiYUCANQX/kZCbX2u23UGgAhHTrse\r\n13VzwXD2w3VajdF5kHLKv47YoDSdTbtikrhAVEXNsGN9dSO/9osDGmQYzUwb\r\n3QNuLwyVSkOG/sl4hz5EiVj6hP4K8YrYjmtFBC3PqB/88JcCNXEAIbyfP7fV\r\n21aV9VVpCr53qVUSAP5VCTvr22kuFhfsmL1qRaO1hJAW+NLp6lnV+Q+Gk2CY\r\nFht9nMr5VvuBjV8/4GgDSWhMsrKscnjFD9w=\r\n=162U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.40b18d043.0","@material/theme":"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/line-ripple_15.0.0-canary.40b18d043.0_1668639484096_0.9408494502833502","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/line-ripple","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"478678abb198fe133ec254100c36c6cae6497dfb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.86bde5c06.0.tgz","fileCount":33,"integrity":"sha512-e9LPdW5kWT/LZrblm9Z8vI+T5hVEa70vF2J7sT5141y/lokTPie2WeU83Hmy9ODbEjD1cL13657lgiNHdPH4yg==","signatures":[{"sig":"MEQCIDvJI9csyZwke106suZycoDwG+6Oj3E5DdT65yLl0nVKAiBhvPPWw0869OxPmS0JvflPfWJUO5FXY4yOOvp0Ab4iWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW1fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuaA/+KisVXoFer6nXn4vWnLevnIrKGVLmD5IWUDYMtitNDAmaae4H\r\njqW7EVR5rOB5Xhx438QkOgghykhaFoiX6UCmtbCaPALk4V2bg2k/YYmrnLN6\r\npG9i8gHddAM9jP6+ynGCGYTSMnCeaSit3LOIThyxCoEV+ohfiJ8wtt5UKYbi\r\n9VDIYKLs146+l6EYYNfhqrh7BpuKL32OTJpgfprwf7Gkvde+/K1T2ELhuy/K\r\nqbHrC7r6XZcvk33nvwm/qxJKE7HHaeIV/VmocgwAETowTEFeEnvRekNSeqgK\r\n5mcKtUBiqfE4ZDa1tpZGk8YcIoIS9PKaGYP9nMl4EbjY+jy/2QOMgy9x2eSZ\r\nIXf4viDenofOUNAg8K7x2zGzGOsjJ1QYysHjHdtL3wiQ+EfcatvPOzwouAje\r\nPUlxdStrO3mBAVdKtxJx3Ttu3XWdw9MepJZjuGW2AfGE6iyUBrsRR5tNtK5Y\r\n0VVLE9gJJgxOSRYggJdRXOr9+E+tBHSI55xAL048ow1ULZI1Ud2nRLwL9Evy\r\napmPHA9hMOdoOS/ngPIqoNOc/taL5NOpe2qi3KLP88hqdsd85hqX4c3Jwh7y\r\nX9dLYR8xFKhHRlgMfYS3ILIQWy4/4aeqQK6GPYv73joy8Ix9TJ5hYhHw/JZ4\r\neijIKSZrjGWB2pCMAAzKijeCy2T8FOQYQ+w=\r\n=zQnP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/theme":"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/line-ripple_15.0.0-canary.86bde5c06.0_1668640095558_0.9214034322707816","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b6417e47d4ec89d6445e9a55642490687128ae5e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bb7751002.0.tgz","fileCount":33,"integrity":"sha512-c/hfG0mGrqTuunG43D8+7bJIY004TQZiHKyppWbNWa9sEz0o1LHI40vDAc+9wEk4cccTZWVZDaDD0eX2UJwWEQ==","signatures":[{"sig":"MEUCIQC43tYExxAu2haz+0g8NtN41HZfMdtVeVmRkOO4SkqUEwIgf6zv/MhP1gX0+io/RBmsUbX5qwR5cxYr4mgz18WWC5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXldACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0jg//bNVRzJt4auBQcFeVqAPlwXY1ywG5FZzKCMVM6w/37Rfx1f1N\r\nTE8mnpBAXDOrgHan3zCl++JP2lfsTVZKVNpUU7ONZw1XrJjgtTWd8nrBvtXo\r\nahHaPhgW3N0WGwHUWl/8rzG4GTCjohbLTaE57/gYNCHx2lmBZjTPdONiGoXn\r\n/Z/r6pS+mFg/ehBFPs9DMPRgaDp9F6OTzxdsySB8yIEGrFNkQ3mDXU+epmeu\r\n0skWs4dXkWSzwEY9Av+Ot/evjNI8jZV/L61MZ+h7F6PIgZ3k1u+PAVNnFuOn\r\nww9fM6MbvnBGN4CiLFi0umzcOefZJCJGl05reGxG/5uqRq2Y0a9ldaaCWFkE\r\nAwBRD1R7iKkjWbSrfoZ900hP0vZ7q4I/h7dlKQYzmBlo7Hh4yvvkgP3o2rxw\r\nVffaqOI8IrkGu8r03r+p8yH7QL9m/OfmwDp8+EPVe8K0g/t1yrvERzV21Inx\r\nDCzPOWOjGo2SuZ2dRmuKaX/tEV+1OmNUzIXtgYEVo/kCBP7QPuZDX9lzfdm9\r\nozpotGFKDy+MQSBpB7oW4ldZzm7V22zST3L73GB4B6/2xrbk9nNwLerkXAOI\r\ndvcy1atY4BRHF6x9qTz1gbIbHIVLAVmc+971pYn6LnXg++6Bz0M0JN7GSfxq\r\nMUscNXwyea15hdgBdyaoW8uYT79PVXrIV0Q=\r\n=ADFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bb7751002.0","@material/theme":"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/line-ripple_15.0.0-canary.bb7751002.0_1668643164841_0.7322361992761646","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"80262c335bdd2d97b670d47cc406816aa5c34eb4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.63aca9af6.0.tgz","fileCount":33,"integrity":"sha512-U2sPEjYK+P0b4aFHZkiIRDolBC6PUMCbtOAk7HM4YjnZfFqhBUvVlt+n0llEWN8NlPxGSfiUBHi3IFQxIPa4kA==","signatures":[{"sig":"MEUCIQCQ6Tuj0g1m+7HCJGroAsjh8MBeSD97wAfnBiEW/i6LAgIgMpzeNVVIjSTA+DzfIo5rUDA3Bd7MxW+dhqCQ1EJSDCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoTMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ0w/6AsOVsmDjLw1w/xK0k4YksYWvVeRqwPkw783gXSDhBoIZSnuX\r\nGyx1rwc2Me71iJVZEiGGkBCehAVcaPaLWI/9whVEOs+6y7yyf0hOnyaJ7pnA\r\noSkJxZDjDHXUrWO7lRCnen9v5MrIkAPs677961T5f5g8z8dxoCWHx5PgR4XS\r\nBj3hpEr+XAWDRtlyAIL3058UlBQXcNqquw/hxvdVXeoN/Wm7u+7TSrch/3cG\r\n6t0568zXNk5iBjx2MIP06O7fSQx+tANYvrkXcW746dPoIv4c3cu63uVUP6na\r\n+7/11Vxbu/l45jDfimenzEiTJqse29IdCkHBqvTfGIZslMhp7HYKEaqRjxo0\r\nMXdogOu82ap2La/PEyBNkXq3CKH6ZYquc7kmbCMT9uDndiPiozgeq07G5GPj\r\nkxsLfvGolo1VF12Smk1Rs7DyavQR/ZiyzqEb7fXid2y/UOmTrNr4DQLO27ZW\r\nAgedyZCpeWHcG0o/Cb34mc52hAcwUqkybfZmbu0avx1dIhprFM1rI1ereqa+\r\nh6k/5gZhLsJZGvupaBwiqwk2AzjfUXfNSB8u/FOp+LXY2cPzVR0c522lKbOu\r\nfOMWGZAvESxH0QheUiws48yj8URBS12wgf1DFX+iqOFn6/anzI8ghiyVbBT9\r\ndYMMlyGYp5cnjnX2fTB+8sr2IEYuhVLUXeQ=\r\n=MW5R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/theme":"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/line-ripple_15.0.0-canary.63aca9af6.0_1668711627837_0.3314058946999907","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"05e5f8417af25181b64bf0858d1aa63e4a28824c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.56482dc2e.0.tgz","fileCount":33,"integrity":"sha512-lROHnNYRwXp0TQMnDsSy8Mkl2pdnKgtAAJfOjoX+2pjJgUPwlKfOmeNS4w7f+mhsrVZxqPIXFMEA310GD+4WBQ==","signatures":[{"sig":"MEUCIH5UCDfYu9mf+FA2M9C06WLyEKrd3gir3RuCmi9VzZPEAiEAyU59hQnyCSLjSUViJXU0umstVdiFKD0gLbWLY/nsV9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJNA//d9H6rDwe7qG/EQAHfczJ47AmvwI+ZA/SyhMMDjpHMapoLCk3\r\nKHXPR580R36WzQXz+EuyyWAJJjvwselrmPMXkTkX8VdHP3A0jVNRdB6zOnW8\r\nlim3A9CfmZXWSoYgSlwNInW1GNJZHJLats/sFehHlyRJ+FV509JPX5wEsJJi\r\nwdYe8hfUhst0dht1xLyUY0ndlFy0XONOhdwxnZVI9sy2NXIo5O0Kk2YMblay\r\noTad+QNwARmILmr4riSjm/A1zk40CuuKLj8fatRh2GQIz0n0eC3Kl6pBdgOA\r\nY5JrRHg0fEqfoYCkOrSHcRQKjKEVgdF2+c9pRPkVnR50HkeivMcdkU+Qdsz+\r\nuQIZr4pVrGyDNLhAk99Z3RZskwL/dQg+8sJ+bnyWv6xSR216eopXVULY1siG\r\nIt7+e6on4VSe+RaJ7I45XgNLIl4gnwVSlVcvcizH8G514GT9o7JUC6lDRZug\r\nSlQyAmO4LG24S0v1YXhCuwLI5HwS9uWfx4RjHKG/Xqnb+mlQ+IDF+iNI4yx2\r\nUhvUPTMdF0FhuBqp7n/2C8l7u69dPxBeiNGA2ka/TeT1G8iUqscZ18SK62rs\r\nQK3RmJeQZ+SipnBj3s9RzSjj4vp95gNhwKcCl8ohfbMqBGcGQPk0tulZOh5G\r\nwx+KHvoHYcJBw0CN5TMoK+rclKIUPEUDQ7Y=\r\n=y8lm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/theme":"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/line-ripple_15.0.0-canary.56482dc2e.0_1668722072177_0.00842161819373577","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cb4e96970cb92e02f9766c5f0655d996e89eae72","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.953e689f3.0.tgz","fileCount":33,"integrity":"sha512-mEgsIo/Nq6iFpr1D4H9CjOdri24JrVFbzAPYAnCqz3ZKtqSDdVYa6N/bMHBbGLHab1dwaxSDrq8Qws4dhqDxJg==","signatures":[{"sig":"MEQCIAg3nDkVD0RadhN5aZ40IEFHFXLknqwYK6BUxE1jeu42AiAYVwZ+TqxUAr/1rVQdb3yK10bbSVfgjRiFGiDQwl1mFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq/QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmokyg/5AHk1XTjwvvqux3c6cZ089pAQrupCqy/nXs4SHcaW4gYVOHdO\r\nR3r/04JTC7JnN/tEAkXEQ3ZKd44gzb0OxQe+P4kqMCZFnIpz5zbqTxGvXxKG\r\nclcPaNErwARW2KznKdrt4d1QqN6Kwc9jtZH44Ldky92VnT6f8KEp9KKT87ve\r\nMYQTr8y1y7bm6GnENtCvsLC/D5omEumhYJt47/e3JllM/L4nySvI9lZ9/L6F\r\ngq6BhTb+I2bZcvyA01CUG53Pb6OgU2StiqfIb1YnXmEskrLHID2NQ96ABdDh\r\nBoROFo54vXlnRgbI1TTQ6Yat2DqQPvR1s6c6OviTEm+EFbt4SmOjaNuA07+/\r\nzz/vVD6u7xH35Jyxw5LzYLScjVYEDMO49Hw0rd+drLxo7xmxSMVkVnDwDU1C\r\nSADmWN43M45x96R5vNL+k4MJyIQ0XgJbH2NjAdNtdA/pWdgKLVkb16Nc2x/2\r\nb4Tkmgmq34dwXo+Sy18A2AQaRcBeikmSbmMw5sUnvIBGgYCz4OvWXp8CSS6R\r\nSNqhd7n5nTwNNWUDI+xgg7gR5QYu6KnlhP95Lhn3eZ3jR1CeXhA2oMU1jiQo\r\nEx4xU/D3yIYWwNF2w9VzmAL0bxs0LrjbK0XIbeo1hfMQ0Fjkv+dhbm9BNh89\r\nyy/DT/nF03sk4oishQhSCc39pfNgV8g4+EM=\r\n=T1hp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.953e689f3.0","@material/theme":"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/line-ripple_15.0.0-canary.953e689f3.0_1668722640468_0.15573008583828574","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dc658d2e4f3e99a18fdc9eeb9b862b56fd632952","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b5606a793.0.tgz","fileCount":33,"integrity":"sha512-30rFZZjruWTbIf8s7j6nuyMEiHjUMNlVpQCz8x9KEsCEzu1qxKPmxkCk+xURxZJBCqhSW1ffXiY77oF/GWqYuw==","signatures":[{"sig":"MEYCIQDluaIH/THlKqTrsPZGM994EsIP0Sy6TbzvNo2hWnbByQIhAJ/BLVXRqs8lbv8v5x1TZ1Ukc6CMvZg2enl5hoOwmwmw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1xlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYig/9EoIbeQW06n4vH76pyfAUnN+EopCQVyYliSZyC88z74vnzmKs\r\nQDfdheRm3fc2vWydtxiVX2Jig2IcFrzXecJva5GCqqvslnligbL5SAEmOH2l\r\nsyIS7A3oal8a7BBGeOu5k/L6LBgDYgYt28gW3muTmAXOUlTy7xjUz8TyQh4b\r\nZcHpxdlJQznp+/VSZmevj9AVhcdsQeD5ivPzQqhLpEaMigiD/1m48d7hAF/z\r\nO+YJkXDJu8dICt+7JTAVDTXIUCShcMAFYlC2yU2ZS6vkvl3c8nT4wLqrsJ1L\r\nI52LNH9mUltqxG2yp9u65Kd4SLcfnPk80HsoVhb++5wL8upD5MTXYYU2xVc6\r\n7kWKCY0WRYtbOLf0NYNUW/3auTRi0KRv3aOqnQIbkTXmX2UEpeNrxKydp1U0\r\nj4mn3OcLeLCj17pFguIrvLdqhkFm/HtpzRsEjIKzMQkEUJMJb4FJv72M/I7w\r\nHVAAL+l36vxWzWP1zz2EX3K27gE6mKtz7xPBncSuKtbmw7pOYh4YUpxR7igr\r\nliS1wyLmBRKIYDcQM6lCSjNtkthKZK8iuby86dL5OGwFmuxMCf3BSbXolYDB\r\nrbJuuxIKUMUijedOXh9Kr7AVtZAMwqX6rltKhwIyxAd2VFSobY3p+smu0VnT\r\ne240Zms+8O9Br74F0QEBy6jXsYwIl/E2b5Q=\r\n=L61O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b5606a793.0","@material/theme":"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/line-ripple_15.0.0-canary.b5606a793.0_1668766821237_0.1500986024017763","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d3b01e823f621f344de743a14b98690c61bcbcc6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8c5675942.0.tgz","fileCount":33,"integrity":"sha512-nc44dUi+Eopm9Cul+/JM51zkTZDcphtgjYWmTX2VLqFL6VfK7LYaErVe34oshS+Ahks7COm74PaXEimX6Cuu6w==","signatures":[{"sig":"MEUCIEHSjqRrCEVCjtV5BKgVkgiecyaK5OHmGgO/BO/bBjobAiEA9dQMvffjVJWU3wiYK4Gk/ze2WJC4lhiyKEAwNlCIY0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6GNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcdw//Wkbr2pwo2Sy7QTeWkMeQ+yeocKmMAYlVNIE65GntrVNovpzb\r\nEA0+hWMz49Nc/Zn3TztGGsEGz7vkcL0tXQdKBrlkA/Wl4f2YvIR4f9YyPiCB\r\nm1wpv4uYx0r2EcA+1rOea69wmTn9VAPyGne/3BFiFbSkot9p5D/v2ezaNI0P\r\nh34yohgoe0A9OjZEQ0/GKeKM0GRhw0udvZi71o5YlU0l6B1yk721GDx0V914\r\n1ACe49BH4uKn0hnY9Rnyqlgp6Fyj4TwwNHrz/qa4N1FGuKYW9dwnjFf1zLPO\r\nloLQiUZS8ooni1ce3mBvHf1JQ/QZrMRt5gNaSrL3Jg5LafLETj6cbo2+E0l7\r\nr2LHX7ZH2z/0LaWEFmpQ2PuHbvnA83Hps727L8Txmp9D5OUrcXh51Ht6dhGx\r\nHYpBsaC0/RXNp5liT1Vv79xVTs/pyCch2t4He7XudVWcVfeGAN2cG5fEo+dr\r\n6kqC9nkyKJVn3ESe2iCqdSgxxNQ39cVuqyMFs+McWFP4wGMMQteHZs7V2/Ky\r\nhWHh3H/sWgrBlMfhh2OUJ0OnaDOFFuO3K84/vCw4Cv2GoZPdHRex64wC80Em\r\n7gPef3NhqTN+abPHGcdct0sy93lwGmENgyyUehuME/yoxEU5NRo4ZgGMaZXi\r\nLbY19VIYY7ogJmI2K53SSj8Jn4iJCZhZcAc=\r\n=FNGw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8c5675942.0","@material/theme":"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/line-ripple_15.0.0-canary.8c5675942.0_1668784525418_0.3673640659761295","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/line-ripple","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b334a60b4306a755ede173d9faa06ad008b7af80","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.697fbdebd.0.tgz","fileCount":33,"integrity":"sha512-uqbTby2ehAsLnYpm02D3Q3Sap1yss1r7KWhKXc88YeQf5PiyydOl6eCZIphQr3uPH8Y5bsFjFiY6ntFwDGqZIQ==","signatures":[{"sig":"MEUCIQCKzjxxsAPtikl6TgjTvYK6Frbn++636lVONApIf1VJJgIgXsEramW6GRXor3ZM0Jh8GpOcws4lrsQf4QTWnH7iyzM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7oKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJyA/+MBP7+pxLCIU0yws2lKkzeL55GTqOJ6t8CqcCb3Ig5Ujhr5or\r\n46REuZgCyyVheTJYPtVMneH6cgWxQIae6R33TDw6HrHhaLGOL3yV9JRyogNR\r\n6z4XF4GO+fLbW4uZnWVp6A7lbvD1vvyhioLNN5iXXrUS8tpWuna+PRIXwFxu\r\nMdH62p2p87dl2L+PsYkbd8elb5bPM4LZs+xGTZl5tUVHzp0RhcSYIbt5CL9v\r\n+C6Rqq41RNZWTjMHB90x5v+WaG1AH7+ut34knLPljk+6kFHACymz3dftSFYR\r\nA7u29CCwNAWahFYbKDEkE78HeN8DwFfjh8LhqaQ+p7hzsmZ5OhrRT/P+KQ6/\r\nFcDG2ICHLmqvw+z5tRnEnls3SM2Fap1CSBLhw5AjoVnscD4LVxLbfVl2uMM7\r\ncP+kU9n/3nosQB8B6TXUjsSj9Kp0K/T21QTN+CTlURO+Y9kR0a6oBfRl+Qns\r\nJOXVIVDR41T5kSOV1PduiKAWNdoIijQHSdJ8AVm4BbNir6EK4RwAZNo5xVMe\r\n3YMZayPvBiPjQvQRC2E6TvaezGLbnNJDtenTgMq897hXkRoBLOqUlXy2Id2t\r\nhyxM3QNIr5Y3boy4sTw7DDAHSDVipslhZAP4wEkq4VelZpqWNAafnRkOrZB2\r\nBNnvdUyXr4hX3dzQR2GH+pauB1o1XWNhago=\r\n=vXdW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/theme":"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/line-ripple_15.0.0-canary.697fbdebd.0_1668790794051_0.30032602660235974","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7d21b82d70de780081ff190e98fd1a660fcf5ebb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d58410453.0.tgz","fileCount":33,"integrity":"sha512-HSQ4uJ+4ZLux2OvsR9oMxPRHrXJcEUpkpRYai657SeQYvkSexxqlkM6xCl9Swi3Ar45zJDf2WYekR79mNZ075w==","signatures":[{"sig":"MEUCIQDH3CiSF8SSNi+jD7lSLeWuRUEyhOGh9xLWd+MZ9MoNnQIgb8S5KJOfkddzvtRHXvMgiHcAT6yUGUL6nhvay0WHp+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9veACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUfBAAlkTiTJ9bxRpnQLDABY9dauQE82iedcn+2kU+AvVbCPyTL9SZ\r\nxMqfIILd3vQhSpFiHnU380vXrOBheRkaxp31f+LwCHYQaf1v/NKV6iXG+fmp\r\nxs8fCOO7Au31VibXoB0LolXefoW99S1Mw3dazwhTUVQ3opa/63E/wJl4tmn7\r\nmvgOC9taiqK973Pj4t31l8LRDOsk6c3yLV7c66ZlPeqV0Oo0tqovUFK1L+sA\r\num0j1Vu3fP5234YHzffrjQoRnsW4nfohZ2k1p5wV8KH+HfnQyBv/inCsajYb\r\n5tjS/u6huff7a8VO4aNjiDw4773wSLiT3V0Vcg9CmuBV5lGkHRCvler71NgB\r\nD0+nD/Y5umW+ss5kzjSPW0HF7HQ0XdJCr/RqspQiRiuZSaFuiAXpEZHTcMST\r\nxGOn6NlNUgSA51n2vI21LibOaa+ykRNw81Jk9DvrXsJ3H2bdp+535jZXAr6J\r\n1MeSpxClwROPjZiXDenetrIUPFPtTIYRgfKYMko1eygahfTBhnBLV9MYk5yE\r\n2iDQqoZNbO1FGsZpdPlllubqOTofgYMl8LGw7EggOya42Y1tSiN8ASbedFOn\r\n15ZalM60/5lZm+MTJupRZmeFagKJHg43fNuGwjoxJat1ap6lLCjwwwsT7sqB\r\n1RHZtauTI9M5H2UuWp+xTYg25B3KgaHyxc0=\r\n=9MDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d58410453.0","@material/theme":"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/line-ripple_15.0.0-canary.d58410453.0_1668799454563_0.10599520543375007","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9c321fe5327f33298dd7ec9d77a5782ca3c5bbef","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7971d6ad5.0.tgz","fileCount":33,"integrity":"sha512-f4tcd82xu1OT0wAVT/kHiWDmJy9fRt9QA5b+v81fTSVFK41mYpxy8jIQ5gdoIvY/0BWLh4HzUejG6j98AkyLEQ==","signatures":[{"sig":"MEUCIQDulK+jdCnJ8qyHD8qS6k5amNoILPLtZLKODFgb8euUNgIgQ7jmr+n3+QDyabU77vocFmCY3DFlT/72TElNA3cMn5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJdyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWxQ/9FAUMDWSASNjGdsQmfIzgFjhM58jOrlboUM0zUJIsp8e8h7ip\r\ncgdwVlJ1dkW0qfTcT8BPr+hzYKs0JuMJgpWDbniC486SA+CVuskXVz3nh+eD\r\nByWV/H194ZKxkMy2UTEMopZB3h8iqJk9nsRgMhjuRqgaCKTuC4WBSDeooWXV\r\nFO0B9BLGKXRPVFJx1Dj5dWQaiY5X783/TJQfqVPombOC2B6uRoOqQlcvc9Xl\r\nMj5zjI1CO737dgIkYxGdVfeYVF/dMOaHRJ9vLsVCrRon1unEb8PJK19JIUy6\r\nDNtZz4deGq+9+hadeLxMNcu6/Olkwa9zq0Ny1NRemp/kkleqTc5Okwqywux9\r\nvd4IUc48j9NC9M1BBNNOpTA5zJfaOqn6Se7FJK45D58s2cYP+atDHsOxGp/o\r\njnWKJ+F/rRiHiUJigUTSZXEc1bSK/9iSHKYfi68vV5zwOgk+qygwjA6K74r7\r\nKK1wjst+DpJH70VvCnx4KwnBkRgy3tqNZ1KtvLYAVbildyPVIijxxa4PtppF\r\nFoz238RopsXbK9bmzWpD1/hhGtJ0Tzk2yg3I0rqyFAbUeKYRqa2Z5D7/4D02\r\nwi/VsoRrU3DZEgw/yNPk0rwU+hMZdL7Y5/Eb9rby+5+FGcMSfbOPbXQNHZ6r\r\n7gQWqZXUp8LIH6xra23ljXwx8tl9QsYUwzs=\r\n=5d22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/theme":"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/line-ripple_15.0.0-canary.7971d6ad5.0_1668847473876_0.5504897140565645","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b67a35d5be8636c0e1a25ad6e3012dc6b469adaf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":33,"integrity":"sha512-TNdLOcefAG73ovOl0eKxhc6uYTQepUVY365AuYfRs8Z6xlYmGLeYIfRarUVh9Tv8EI44rHS6bwc74OkjxaUqVw==","signatures":[{"sig":"MEUCIQD1QUZAr802kZi2f0DTvaR64Y68c7WWAwdxznDs7p34kwIgWpN1iJQUkacZa0kBW3IzGDprhaECTdGRh9y0IQjfB7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1iOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcbRAAiVdJjnQJHQgTOSG/EoizJyWcB08OecRYV/OW6XXaXhNyA5Dy\r\nIZlDsMHlA5ZDy84sXYJlrjmXRT145ZiTpBG5uhuivVgpb997ArnjuWQj0UQu\r\nxPrTsF7l16Ovjgx9WP2onkZD9GgGfK5IwcIZJPb1Ay7o66b2TmHrdwdOR3PY\r\nn7HBIE9prtETEMNyJDkMLjNAApmhH6l8hWRNRzC5kiUo2EFuvG96flDa34dT\r\nPfGQC1i3scqUtkwkt+H0OpI3QK0Bx4lcG3qyn2IxDdtfZkcLT+/wo5uigE3n\r\nCSU1XuAPX2ryOwsP52fN/nSA5sgtzXfKIUGl15B/rdwSvOcVSXNFxSw1Zetm\r\n4y2EcJdUVha/LfIZomTQF8H3d1CpioARl0pk0JbkBJZbOEnsCS9mQdJYJZVN\r\nnultdI0Aajsd2s8dZ6VO1RU/P+8uVOBSqn+4iN2w/Fn0/nqBkhLM6lOCtZlH\r\nG3zJ/IDkbFUmRoXrVzLFb20E9+siGU3aBunuOa8G93wdWWUEUPrIZT+uO78d\r\nsnK9z2RgoG8rtxR0uyarctbNsLl9FeLHSiRSpEeOrfOmBX64dz71FLp5j1lL\r\nVAEE7+bfUaGbebcsBRYfHaVwjPJkmDrIIASgx2OT01kpDx+uKpfec4oJ+rko\r\nVZJQMuqj/YXi5evfdqCuFHcJK3OmQ9nxMyQ=\r\n=hZgP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/theme":"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/line-ripple_15.0.0-canary.a0ae73b0e.0_1669027982597_0.8444150959735552","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/line-ripple","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1f9f7c7a34ebc9ac3fb73582c79894e5b1d56ea4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.96f472604.0.tgz","fileCount":33,"integrity":"sha512-DRgOjNueTfAC6mJef5+rjvNTJWaNM+AbhXFPMStkO2jqPaTkoDvHZf1ra8ig/EG7IzESCuSbZXBSz+URIeriyg==","signatures":[{"sig":"MEUCIAtQlEeU8p6ccU4/Vx9cH0TI7GLJbIgwfOcd9B/ZfK9gAiEApdWCF5E1pvhkHpSdc4soDDhTc0gQyx3akn0iej/ncRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3RuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Ag/6AyFv3/VI/cQIXDif01pFqF1rvHlf+6pygf3TLBT0mobOrurB\r\nRFb5QoX60KUKwtSJKXYpKp+BbgfY5yWqu5XVBaTjC7B21qhdX3+Y5RER1r81\r\nJcMZpzSUGzlgrFzE0i2C0iDg/69q+WI5GNgCq4T5BQJHA2fe0fwYYP9shtn2\r\nnYsVx5Wy4rfYF+3quvlzwID/E3Aj6fUIilpNE3+a4IP3OKg6DY9eAHu1WF3D\r\n/GZY4jbw8KTw49QMMFUxzSEkGRpyW4U4+41JYMue0CtFLl0vFdoZ3leyGP4f\r\np7sR++TW4VtVnxHX9P6oOyjf3iVQ6prOdwJUe2IV7bmNo3AsKS22IP8y/eYg\r\nLppQLhipmGXTrFBrU9MFhYVBKEkgq8bK8XpME1RXLPc9ZjPUoGPFDDaqnDrF\r\n8MZQLgqwUWcR0kP9hxEyGTfI5NqFUDvoZz8uI0F+8K3EzagjMCmQsVLlrMFr\r\nAlOF1/vjFmYgPh22St3o1yDjsAe3Cqx/FDeLhddNgVKeDinjVQGzpwduebuu\r\nmMug7Jmel02BQkiQR7/52CF0dsXphGaEzRr+eqWwqwXobX/6pi+1AX3fhEcL\r\nEkNNyKAsgYcwn4eyVdb4d2QdjQg5zK/8VwaqjlMKl/FstgM30BlE74dYHx0e\r\nffF1KiBZKbnYsOvt5caZsdYf+lp22IVaspk=\r\n=Z2B9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.96f472604.0","@material/theme":"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/line-ripple_15.0.0-canary.96f472604.0_1669035118714_0.07893320012515415","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec7be8db040b1961cc0d7da273d87da2ed603c18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.18b8f31e1.0.tgz","fileCount":33,"integrity":"sha512-EyJXhFHUUA7Qf8UW+Q1QxHJREGK7SOnp4UskbcbjiSqhjZLYmMx5VoSYaBj8J535zpGKn0uankSe77Ww4qplWA==","signatures":[{"sig":"MEYCIQC5k24cTrBliaJ3VITlKHcrDEKzp0aB+OXuWg65BI4WuAIhAN2ULNLvKZXFGa3RES4sfkSFWsS1eT784uZhrCJf7DqK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6DkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHTQ//QLHG6O2zC7pEeeDIOlP2B6BfcfCq7BFLUPaXwxaBMTBu/my4\r\nO/LUhNsjrAxGtGRTb39i6XXfzdHxfV+Dqb30FnZp9/rjX/mWdYYEEtF1z9nR\r\nulM/gCQUgjEcjzBjhuVXnSRM1VgFi9dChxKdbBeUR9mpUHqKg1BR6Kqvjsb3\r\ntP3P8kseMS4awLzAORbNvgd/B+ACrJ2IhDklCmBf198iuhFfnhYKeL/KX+pV\r\nEDYKE4qV9ynLeK7TNZK0NPyHyXLkVtGRHg6FpU558XrioM59LRbgWLtnKLCq\r\n8D0BvfAXwBJ3nDt6zchkGbsZuObFiHWtxZL0PK2x2So25wTmWZRjlwOYRbf3\r\nlGHb8d642Q0vCeC1TOp4x8UpZcv9S5Kd7qpolWe8XMwXvVBM3n23m7RhP3I7\r\nXVMIskDgKG7LpeqF2qbP5MOTAnEP/6R+EQ9QGcKBGIIJ5/d2bTDQ/lW6cJc+\r\n4MVbAnZS4VvvQ1dRcICn9OvHvQBOVfZ99/U3/NV8K8b5su8DwGMpaQ+m8P4a\r\neQPAyyxLKr099Io5YF0odLPszSTMxa7HCJT4o3OcHda8yEmicPDATkfYfHf9\r\nbbCPxpTK4TbhHa5q1+R+9EaMsCdiqbABSb2oXG1RMnu0VNTd9AQ8PjU6lYSq\r\nI9HIe81k9lPPcXIuK1ebcgSZrRferT8d9KI=\r\n=S2rj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/animation":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.18b8f31e1.0_1669046500732_0.5042759416013374","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7c833a03a87dc2df7e783fae3a329e918ed31e9d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.912f33ce4.0.tgz","fileCount":33,"integrity":"sha512-k1TEgrGZumiPeQLtLYKCuN9m12zuNcazq9ScutNeQQsjvG6Ravvr5+ZvYblLdlf972o8qG1E/NcG5fO1kGMEag==","signatures":[{"sig":"MEUCIBmrFoX80pIaFtodvtYdPRoa4OknckGuOO0GGGpU2nx5AiEAp60ThPupoZo6+ybjavGmIIWcraYKpHS1c/vT6N/F0Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7sNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsAg//ZD5k4EsqOvyahUCgDydhZJn49R9k17bWSy3w5uu12FhFnpG5\r\nojo41fFQCplTPHJS1TwHcT3UAy5eDeQuiCrsB8uJgendQihDKbxYgSfbUOSS\r\n2BmAwhfw2lmWMNVZR+JPbPAv4hy3CGBm5z0rjLYvcliFvhavJ6KVDzwyoiMD\r\n36jkDI/dy9ngGiANd8/gXvBU3vaTCJY8X2Mw3CcqzkdAi4J79ZRtI5a1HDYm\r\npjWHBGFMZzFcQNSgKnaskUdo2aM/x/p1+BMZ6FHVy4CgXnQ7q67GfaL1YJZW\r\nIp/7o2cOvkfl8IUKkGVgyImQ1qDgwBSd9LYGocqD6k6xRzs1eQ5DGWw6uOjc\r\nGhNkTN+9kX/cfucxD0LzQyL/PoypkolR1FVGLTcJNGryiud9y4GhWr7W98TA\r\nVi7GuT3vRLD5FMW1vNbVnpiHo4MupebF7ln5Fco3mQwkOdTg+KDYKYtpASCc\r\nRfSkftlAnjEKXOwxXpbc9XT2uTtQ6HDGzNvtSZiw6UKIyu0RytMVby8xm4fL\r\nppfl7HGIrYer//Xmo7SIniImqyXKg8Lm3+mHA5ebTh73TTQB05/WKAJxPE9K\r\nOUuDAq2ALReN0tZVS7f+WAz9K6JXPxX3aUCJ0dIIjrd6/CouMASqTC4dg4Po\r\nqLOzaGuPNKGZKKXU1hVQtGeM20FZpz3Ld3o=\r\n=Hm7y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/theme":"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/line-ripple_15.0.0-canary.912f33ce4.0_1669053197063_0.1182339351851951","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"abc5cad38b943bbfc4663f73bd9c66b124169d38","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1e1b1c369.0.tgz","fileCount":33,"integrity":"sha512-wYcJ4eHUIsH7ND64pN/stB/z2b+hzTdy2zbQrFIaBcTIVB0F555tVKxXjFHrCdl5S3lEjcW0KdErpFe2egiJMA==","signatures":[{"sig":"MEYCIQCep6UEnGUyA0b7jicmmJgt6xkfL2NAzrbMz0xaRDzyqgIhAKQQ6n+xlCwtx88hx4f3IOf+MPXJvfcWSswAx8bJGGqJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm2mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+XA//RPR74iRP2jlwunpkW98kCl8vOkRDwTBXFP/pmqKk+ShdXr1t\r\nkJa7tMGA1Y+HwWpFiZ5Zr7pBDBhZ0WkjowDycEMZxs9ew04CuSHoCAD051EV\r\nXPa0uxy4mB3p6J+Kopc0pehvbbM4Gs+IzwQBngW7DN+E+RqY9qToHOyjIbrM\r\nTtNz4+PHa584W7ge2CFSycbJK6OyqMsCwT5ydu1pSts3t/DxUBJYZe4uh8lH\r\nkeSkncbTdi4Gk/nv1GQ/Z9iqPcbyreyncpjFXgTdlZX2s4SSjKSEoieDpuyw\r\nFmcC1ml23Blb4UnkiibiQFbfEayK0vYOvjt4b+QJufkRw59RYfLEZbSOWB8K\r\nujVMxXU5a6xFqqLyCbdJtFwcOqkAlYhdtuYbHbZBIY5ZKnFZvHDSVypt0cHq\r\nvWgyAO2dARptvZUKglLC1uZs9vZG7zET4+3blcOy4NVRriw5ajL0Tf1kbxZE\r\nwsABNsaXE3lIMbed9Tjz0GD4pW9qynAyJZI7gND3ba3V/BRwstJOimm2kZxh\r\nMtUk+vPhxBxDqs3OzIbb9l+kn8fu4mq74Tw0Fpg397GuAIoryhQY/mxj+74f\r\nItrRtalJ9mjmbdCj5UfG5paJCgx2fASMhlaCNrMwFjuSp8TLuekzRf8o4EcD\r\nQr5uPJbKIXNiGDXZ+/Rp1IOfEsc5mRLAE9k=\r\n=Frdo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/theme":"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/line-ripple_15.0.0-canary.1e1b1c369.0_1669229990166_0.24476913905070363","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d625ed3ba728a0850b03b6c94c62767ad8944c4c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a2ec49244.0.tgz","fileCount":33,"integrity":"sha512-8QAgt54IpDR754AWh0YMJHinPluRvJOIFsRYqmrvguBi1YGmS8M4l3c6fptKPJvLdU+/JKof2Nj2JEwjBJzeBg==","signatures":[{"sig":"MEYCIQD2b49Jpb2zILHjfCTmbMKduqz9PNBV3awndl3BERcOJgIhALqFhclsbonj/FiHPTN7k9Pyou7wlgsrm0/7Rj//grUF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnTHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxQw//SMWskNcq5kpV2sSrTI0K5U04KYKrPTKdnhXspPrNDG0Xa1Gz\r\nR5rnNvXLNLfChgmsIXjAn39KagE8Q3jf70pUmA6HcX5TjjgM93t+WmsObPUW\r\n7Mgqd5JN8fdmMmi0MWdWAB3XP4/Y/4uBoisM0ZQCBDUAyyZbDFVdmeeaW06q\r\n2cEWl9kVYwk1kLi4JOvjmerYm4nDrrTPCVCGuUPYWxIX24pYtH2eagoWbRhR\r\nIvBNQN2u+ahBBBKMHa1Ko2rtsPWwp17YYKwSJZReAq/khWL7Ox0G+MgQx0fH\r\n8xZkYZe7jYmyk52sEaVCCxgbJB3SNGQKCfaBYd+dW1tx2/nG49lpj9bIEPqF\r\nsOHWpWwMkGQJDRVdk03zT/rW3+H3TSrcjVVqqMyUJ53hdtYAbDlMXMjU8JDA\r\ndKdQU/wXDV2V1Rxh+74LT3LKSfuPaablY5eWUNVPlgtyrV/6wd8n9EgxhqOp\r\nCUqzdjXEBfNedQGJ4OZPXL6tmxC78wKZfwnVlZYE02VR9CZFSR1go9wcz8PR\r\nZ8WeBmpcau3eM+kjMYMP+I0sSESaXiriN1Zm5Ac9lMf+Fbgx1BMlfL1rqxMs\r\nGamqrJcQ1wRuRTFksZHtp2c9cvt71SJJkK3UiqbZouHf61CsOs1eWqSJJ46X\r\nr4pP3Jsh6AfujY9cklvzJ7+iW11MMuK66oY=\r\n=+cFO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/theme":"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/line-ripple_15.0.0-canary.a2ec49244.0_1669231815657_0.34699885905928896","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"57b00a2332d360936e81eadb04ad5a1bdda0ea7a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a7458ba0b.0.tgz","fileCount":33,"integrity":"sha512-kBKYAFN+PhtM+JFXkh2UR29CScT4QnOhW4HM7FdEdFNAHqaEId/3rCpL/I9KGitTT4spslhwymEP/I4dj3tSsg==","signatures":[{"sig":"MEQCIFcJFFsKs6gS9fnED9So4B3o9tn4L/nrFQll/AR93dqrAiBtLyHCz4vzKc7gOAqEjSkwLrR4PnizJ3CHiInTR0HzDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn9xACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTdRAAmACFjQXfvUiqfbY/7lLNaj+pKIvnZGTpbKpBOgtzosn8RNQk\r\nKmHKeKaKJ6FzmEipS46RiZpt7qpj/9D5YcJaY4GJELF2KgsB3srPeVDbpCrO\r\nTuSlltIzA6SvoUdExzWITC0N6pErzA89PCqoEooUGW9njYzGc2sIqgtUDdmn\r\nWs8Lij7B24URn5g97pBrQloNTn9ey06rSZdzHXZRwUavq4+Omf6QJfENH8iP\r\nMMF2v+XxJjVOoUenivENHwsfHDhnueRTqkj8iTVVtU8DY+rmJ+sdDGznO5WH\r\no1Qd4zWTJkfeMXED8M4orERaWjH2tWnxZLGkO3OHOHBh2EP2A54KrkjzxcUX\r\nyMmwciEadhfj2zf99Bk4OHIY+iCqZcpUVTLOyaUgbSYYc3T1d9bkW/FQd8W0\r\nSfMe9MP6xvXRnqzlJGtjF4rhFunSVZwsqR2AJhXlZnbC0I3H9B6phk1YVXW5\r\ns7mus7IDOXsVNBRuQ6L33GIbJyv+vzyv5+201XxKrwD3s40eqMtlBvjbChW2\r\n0zSwn4r2zsZ26LPbAzpdoOXprYCaeEzghj3+iOCxSlgft745NE8VEpIBkT7S\r\nZ2VpMei27f2uWjOj7jsPypkTcajdubn/UkshtISzDnMMz8oBzkmXDHpDRiDt\r\nka09NUYHMJVXu1WZbmj7HKuli8nTDAGK8IA=\r\n=NOMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/theme":"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/line-ripple_15.0.0-canary.a7458ba0b.0_1669234545053_0.4289788735698463","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f6d29d30dc9a59b43d99293e4502af2a3799e90e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7c35e5036.0.tgz","fileCount":33,"integrity":"sha512-wqgAhvaRrreMPAQa4Hf4vrvFpDY5P9z7bDHBqMhFIAprVlrACNdCDVPb37U0+d4MJGY2jO4/WLE6WFJbx49VGw==","signatures":[{"sig":"MEUCIQDHZewGkSpo2lWHMYAC1MG98xWTLTbN0/zb5W1gzGwN1wIgWHWVAXLAa9k/AsmuR7NrPB7oYvxEeV5uxReaVA0+EAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy2QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTow/+M59IU38riWJAtUAou2+KN3wckk8RkeI6drZXhgaQ3UI68Ogk\r\nTuyy+Vl3MtmIb9uDbsVS2sa7yd5CWLTQm814KasIBmqR0grueC47g+UPFy7v\r\n316kJU1GY8vKeaRO008I6PgSa4FWwZUUYVS3WIL7LD9QHyu8+/H0kEZbQ3TN\r\nlwZMXiajnqxnTEoPAx2tAK+7tuo8UgYncDPGgzoa/EmhJWuv5KGe+RqlChJl\r\nLnXBkVbwQGjjec5zT43sBRNt3VMxDTL4dizZWvSFhLAjL5M6Kv9KKdmVV/l3\r\nvR4nnjlIA/PzsVpBUA4uYLsldBOz3ZsuFNY5UDU15zS1FuhEjwTfW4mzZCKG\r\nAwczjUPbXybJ31QF09AEr1N1CZwohVvuCUYo7fOx63rzsvzHrr2BP8n0PSwA\r\n5eJMeS9/7PwpaCAmtQXQKB6zuYYdPt9HR6LVjpuBqsPkwUSJCmBn/lu4/vL9\r\ntPYMWBwoHv7qRTNFc7cuNVtMzglCHCiK1rP0I1+wb9Sa31/DN+mNJmoh7hgl\r\ntT9aX6ffBKyLS/rpVSR8ppip2Ouu07ZCwYVRl3jJ1/Q8B2eN0+A1JTPjqWtP\r\nCZxqlRUgNa35C+URFoDBy5pOweFm3Shav7dJfpfZBpECq37ImAvjAfecW0ZP\r\nC73EAGJRg9EkG8u7hX8U+CKTAs4eH18X6Gs=\r\n=9UBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/theme":"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/line-ripple_15.0.0-canary.7c35e5036.0_1669279119864_0.2952009957266226","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eff5e1d631bb1637349c3b6ee522121a99cf37a0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4356e05c5.0.tgz","fileCount":33,"integrity":"sha512-+moWkKoVRkbHUpOEI6+OtSbQZjhvLCLvVhyO+2vRILaRxmLf8tliNxIOy+8ajSa6ffVXwtx3DCdQJO/uYfBpFQ==","signatures":[{"sig":"MEYCIQDqfPSA7yno59j+VrLK2KzVU/vYtCGGFLhooDH+0h04+wIhAI00jgn6kfrSZPjjIW5eCmRPFMcqmTz+fI54PSroLuVg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfz+zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0wxAAiQ0XcOmvlSaWxa1Wda/v2x/DFym2DecWmK823CgT/OjG9dtn\r\napfmd/Oq+tbspbd292z/KoWFsfMiXZZDv9sldAx9PmwzzhRcKg5e/imltyDg\r\n8peM8SnMiZfEZjr4Z3v1G/3uAzcFFnpHo7zTKXonyhTZFXqDvvvQuC1wEU45\r\nQmTy/nmyTEgWkZcoYPCyMEn98N8tn+NszffvPAATPi1/Be6jqPb34s+nhKDe\r\n7YfzmRQD0vXJO3Ddb0L4yHKAVsvFFTgJKBNrmuDOfrogyXl/UBmoIACX363M\r\nHfEAbv3d3OComZf/K+lJVqETzVWHWTub/O7SyJyMwzO3amZXQEACweHUlXtR\r\nRUNnasnZ4ExmSM2/z0dhd4Uol/jtcnC1ZDkO7cb7BMwH9mSIN46nwdgt6PR6\r\nThJ/IfJm2dl/yCjycY5twDSsZM7aYPtoZcQj7eNYBNqIchAhy6qbVYOBnguI\r\nY5rd+auYR2GMu6CIU7PGidOTU3Ajt2Gtysdgjq4BjANdG4B/+VforRwmVuP3\r\nSyHN6YYf9IcfEtS120Bw/TWdvErXwvEwHVt3VOk1/XnQHVk+LuVRMVbvPwTw\r\nh7CNdaUECdZZ+9LAc4gNLExRW/Mne5GWB3C+reP+TNx2437DlOhNRfPbk2OG\r\nbOONGW+p2GpgSElS829e+JKFC3IHHQJC5FE=\r\n=R3ol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/theme":"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/line-ripple_15.0.0-canary.4356e05c5.0_1669283762937_0.6355778504328407","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1e8ed83d3c83cf40b00f9bfa6447828301b73897","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cb605f8af.0.tgz","fileCount":33,"integrity":"sha512-Qn68m010uf/cJhxHMtGoh18G/lkzOwklZKdK5Qq6SM2z+fZoVhH17pkfj4BXznzDn6s9kUNsYLm1bW3NDq928Q==","signatures":[{"sig":"MEQCIDLIbSa3sDl3w+fqZWUk2X3emfymueURcJk5HSjk+Mu8AiAYVamtF3dhjfV+Kug5k6Y3Vlc6N9dFJtNH4FdptptaNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0QRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXKA//ZWSFBfmYYrgoNBp6Dy4j9YteId/rlqpqdnPaL65QlAXdFsvZ\r\nuBYjOtwwKhPu80Nw5uys17XF5CTVUsJzGCYCNqTd1B7nho1aKLQ+aHBsns9o\r\njiGOsAT+AahHvuKuJxBU8AAAZQdqnVy2by8yzMQpgwxxaAvh8zlVymFtwMMi\r\nhn0l988Dc+2lx1It6jAlUJK5/U8+4OPtfWNmYHstImh+HUFWUVPnvB3HTJNk\r\nFUm9KJH27Aifmo40j+Z9lCASTvMLmrAiIyHShniIAyDd6xmnF25M9i7ELYPe\r\nVV9M7ozA9rEBRct7jFVRRyjq077wWLSsnyJD4NhlOCe1Ww0X3doiRYeAnAb9\r\n7xAp7Lw8gApxl25FqtxbQu+TbpkC6o4iGaBJgMYydiqKPfW79xt6RWd7Aas/\r\nIB8iq4vbRpWvqpovEppf4Pdf1T9d2aTSKJyAbHanDGumyhuJffUkF1jQwkYF\r\n9vNtkpp2Pd+elMurAVMgB18wzQjIzg72zLvjtVpUJGfSIZWKQTrBlOzNC12V\r\npGpAUXBQy/I0Zt5GRe5x5HF9GAnl/+rM+f1jgYZgNcdRZVkmMBTTfgZ01XNc\r\nqO0JrHbNm09spFMwrOLMs41O6FkvQc/0b0aBrxA6ihrkkG/IAPRB1mVU1Lgf\r\nMB1/BtCMU3KjGq/R5r+KsPb4zr7/ifNYAO8=\r\n=KUpp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/theme":"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/line-ripple_15.0.0-canary.cb605f8af.0_1669284881600_0.401389864998545","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a8318d285d8801ced7f309aacdea0e782d620d1b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.05fb07f9f.0.tgz","fileCount":33,"integrity":"sha512-btOOQSpqh9ca/tVn3sq1fKTB4nw/Asa5Jb3zfGkxy62bHtG/7z7r0N4PLTSWVfxLs2KOvrBFuQtkNRfqtZQ3UA==","signatures":[{"sig":"MEQCIGq1niHtumm9JUrpwnbqJDGYjX/7fiW9pkRsq8iwYeojAiBELoRdybs3UDFMA2+SYbSlY05k+rL+mKu6ii9vVjRTSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6YfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpgBAAkkC4kbzrfIqGkU/fmSwP4yZPlaS0917zeYpQSZKFYOatOGA/\r\n7x1oVOdzohumeHMpYyp9xmboawVmmEx64So9WHsCHKOwMTYayo6fffwPS8B3\r\n7p5D0tOLX8K2M9PUYQABYNsi56Vz8acy1f5IPAVSPUdZcSkiXby2wd4LEvO+\r\nLtRRiIcpK8gjX4HcvqqpNiref+lT6Xl4Z2rbTsu8Q+ZLyH2jJXHbX/1egv/4\r\nYidmF8miyELCp9nL9JJPkAbefLks29URGa5Q6vahVFzOo9Kra4pFAQFMJj6B\r\nMo/MDGOlV4hFZw/OO6Tfxu/p5xK35taBUrX6ObZsiXnWLx1bmPhSG5RE8piN\r\npFZ9nKSLuGtL4eofHxyWT2irXeddxdSjeA4hMMcQJTyRl8W4zPkNm16zAgFO\r\nqo3qhwfUFZosGRfn6a/ZKB7xISENuJeMGw4wEEt467+ULboWGIfksa9eSz/9\r\n0Yy1YN2eMt4yy5rHEyywHp/3lDlGcxztt78cfj3ppmjGDqbeRFvalDjXbzSy\r\nJWgXh9jb1qPLrxjm7JO+DlhgopQ18hMTZOuEis/qtlOtcxo4Q5ZEpnmcQ+FJ\r\n7krB1qMIv6+5mJQaEawGkRr4bc8jWjvB0E6fVERCriPp/wq91hRQYpyN60D0\r\nsT3YcO/oMHazqmCcdmJzPu6jy1RzcUhpSbg=\r\n=MP/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/theme":"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/line-ripple_15.0.0-canary.05fb07f9f.0_1669309983786_0.7734785184344051","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6a35781d9c4d2a8316fcd38d917814f09f3a9efb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a911b386b.0.tgz","fileCount":33,"integrity":"sha512-QgOvLJrztbjQTpzRclwiCbVJ4mtdQFK4Idilomwp0Ai4GPnY7hvUvrxnwtqg88ky01T/0M5FNzZKHpWG5Uz5ew==","signatures":[{"sig":"MEUCIQC77RX9AZkgjDtw3YOcj1VTLfXspci7Dxdbvy/S9irVcwIgBFB/miioImFv0z3kKPSXQNUS295ugUPcoRW4fXBHp5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOXvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr64BAAmbH5KkWN0eWsuHYzD3RUNaYujqOOlpl10MPSoDUavE/6aND4\r\nCjMMpx4RXcKcBzn9CTPuzGT8cJlMX9trEd+nx7f43/mqqgfWCcy/mhQ0Z+mx\r\nk29NOyGpWczSjblBJdWjTFJIYXiLxoeeYZG5c5I5xh7FMEi8VH/Neg9dNngz\r\n9gAG2oJRin88By41QaGNpY4CtvkJgatogMnso/AWfwSlaA6tFcSjgP1r/P5b\r\n/ydpTCbkoZ5Oid6h3V4t8dSqPWDejSg37538rndcrM19OVUShCdZ4sQ5IvC/\r\nm2fGDJxFIY772klsDw8tM7R09Ts9+uGF/lQmOxECEpLfVsmD5UqKCEtgKfHH\r\nUiZYvF3ZPRbZDyIDKiAalTD2WHgY68AolQJav7rhn+qXUKcL4eBNCZtpw1a0\r\nNE/7LH3etpeJZf6gJaPusZzkpONt3jI9BDf4vfZQMc5bdB7NJye4D3Rb0o1R\r\nsafToC1RLRLEoWC1XshDMdyG67cl1mAPOSHf2DTQQavJbT0vp+tBBIb2QRfN\r\n9Vy0OVxrds5aRcqSL927GJVoekz0AOEnY3RusjWuMIcPTIIhLI5M783z3zEq\r\ncL6ov27hRFFY7Vxf3f8ZcQw1nKfRkmI3O7hbyP9AWiJKxfWOO+zGaLT2rqUz\r\nguH21kPyENf0pz0GrRtX0voDBlH8cKUFpQ0=\r\n=3uWD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a911b386b.0","@material/theme":"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/line-ripple_15.0.0-canary.a911b386b.0_1669653999004_0.5029542565480845","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe2968a1eb2f5df91c27c19f7872f07f2b3f7aba","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2aa8050b4.0.tgz","fileCount":33,"integrity":"sha512-EmEIthQIMKPUgiEpL0yaCbaeUaXpK7aOkH7vbrzynRzpTo/EpY/TQcv/hQ/A+IVI1GPIrnKqkeAO1GEJE3Mlyw==","signatures":[{"sig":"MEUCIQCP9/0Hz/Z8NrkHlKz1CtthgqMySTeAvTRr/NNe79XrKwIgXNitb7jms1m2cxVxWFsO7FLhY7pd9fBvf+AlrqpSs/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQe9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQ6w//Y2Wv9bwF91EBwZlUWBKA7RHEeE3hidBFJXGti3qvmdk3/2y8\r\nudlDqNsCknAO8fPHR/je8G2rT4O6tO23vgCP5d4+c22XrsemUbD5D3zH5Mkg\r\n+EUGjo8E6cIojuyWmsQ0C0njajAcM4MBoBnYjGko6aQoEhl3sqXb2Xyfbmui\r\nUHkZ57dMsIdtn1LTzmrHY41Lyl6TzPLtkiH2HkDgkKxefNoPuSsEx5iUeAPM\r\n/1GTH6BkbBSG105/nGYmnqt4/Blv6YAccG/ReKe6dX6EmrumUA7ZMkunVJQI\r\noAREBuTmqC2GaRni5Si1KWmHXs2Pq9BV7msiYYFAvLG2ccZJlyhAuchMA79/\r\nKlQJd1dkNVfinWpGhdR9KQWgz0FEk6OTvI/2bFgZLJR/gI8DTZF6iOjX7/Jo\r\nHuUzymbPhMHPhOQGhm8IbajYR5dd4N/TFuukE4qdSDgLL+mWB8ihrG4Kq8y4\r\n/vxxHVwm9XoZ23fa5OaCZ2rdDmUQKTN+RTvZOEEZRq/t7vMamWHBm8wv+sZi\r\nLfOFz9g0p01M/oxvcrYEgfE6XkMyGZoDdljXbLsHoU+5kCrXoy+QEQWExcz7\r\nEjZvnk44Ad/BYv1XWWZS+IyQIdLg6cIytFNNqNjBtyVKcHaila9RhidWb59U\r\nkN5gaU2ZoQAvYOP+ppEG4QXq9ze6+6jL3ng=\r\n=2tyH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/theme":"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/line-ripple_15.0.0-canary.2aa8050b4.0_1669662653551_0.9193325735930757","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bbd1826794fb5d1d3fec9657585d4b89f011ba95","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.323904a9f.0.tgz","fileCount":33,"integrity":"sha512-9hN9MxwhGpQYV6hPKGSwyJNzm3Z7++mI6RYOAwTkKg7EidMUNAl0aep/qaMPyOF04SdJJ2FSKnI7btylw7VwCw==","signatures":[{"sig":"MEQCIDkMaZf1BkGr6eRBTcpuAp58WA7D8CsNFdgMzanyXqqvAiBUTBjPiAL82E7NVMvZKwum/Pgo6pHfU+vd3ZLX5jzNZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiY2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4YA/+JJXjNjpPELP9z3Tl78n0J4Y+MJfRZjg78ULQb5TgUxQI+Wm/\r\nbSymbGGGwrC4Zc2VDdfIyZCaN2tvn88jRGLX8ZcAawoocus+3UDcSS3gCcxH\r\nl6dBnlmalifCcQ81AP5nobJfvBREpdDUZ7kqPhGHEFYj8cEk93bTAOeKP+03\r\nq1yzavY/oAKac10dZQ/ulg3NmSwrr4Zh1mhwJu08WHKq0bZmRh3y/T9j2io7\r\nYsHvA9bs+polkXQWo2MacSxocBJwIJVrcpfhpgtgR5popQ+zFpU6Ib9iP8kg\r\nAk+Hfaeu9SBqvLB1pCpbD9Nc4MmBroKMO4KzeLxe9HTtUdiCyzv8qS5NS8Fv\r\nFJQercCdbmbXyGW/BukgvPNi5WmQDmi87VosSONcS2H8QYuXHLB0us4ZQCXZ\r\nlWqAVfljd91OuDP1lsntd0Qe2hLQp9L7/iittNQatrGcklLoTq1OfRIYyFi9\r\n/qk6BJ3iplJ+XhYYhXFiA0H7muO56IslQ3RYXLNbs72H8dqunVXDdZK/pVVF\r\nI2Pm+lMnn3iTiTSVhA8HjBdfRd1pkuvWKmAHzKDw6ZBhUcY8s5AuKhznqDQ7\r\n9hA/adJUh5QNsz48Cs9Wj2KnQW91/XyjUurTTC7oEOv7tmakYvefCj7gZqKE\r\nulDjtEBAId1sEuKIjGS9qfc6sEb2XIc+SRg=\r\n=11vQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.323904a9f.0","@material/theme":"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/line-ripple_15.0.0-canary.323904a9f.0_1669735989784_0.5368218067007913","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b2fc74eab506ec8805c062a6056cb88caf5c2d7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.168a629a4.0.tgz","fileCount":33,"integrity":"sha512-+9f903P8alzEgePCxFt+UfuakW9fI2IVLafVDzwKD/0lMkv4KOrLUBSvyAWeE8UCpULcTIswFXccIGStSrLG/g==","signatures":[{"sig":"MEUCIQDSQJo+/KbucoTM30/ZHK2MY2BOFhZWL1v7YKDwsVMTUAIgGH3Y7PMZuO7NJEqdXE0svCzF6QbgN9VS0hYZhSUse7k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjfCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8zQ//S8MH2TEzxsWQ3zf7PyN67i1TTtbcinwSxG3ZyZWXKJwQ6NTb\r\nR06IUUW0TgMR9tOMk33/Se4yMYKx6hpcOG+LR8Xm/NRiRzUzuDNr+xdNtKP8\r\nsDxQGokWIIqBj9JvH8yLBieOhTEnRcvQ0vArvoHTGSIoBIcycgnnY7jAsM6J\r\nVmlsiIrsSCRyRn3sYKmgWYco/v6M84Tt2JPoQAS8iP9X3lWOCKAaurreu09H\r\nW+EcP6t+Y+iYNC3ZZeusSaiIydxZJfD/MjCIAllwKTXmJPVhh/4W7lR9XYwg\r\nMLwKZDS+Gz8clo2fWibnPZ1aIbLNwqnbVzRcyoM6V5Yj/dEBKhmosBQTsY4L\r\nnLGF5TQPhisao/S+a2KCxuVhlbks4ztQkEY3LDEXzMi6zwt0kC+biNC7qWm1\r\nJfNqRKOUi/JV7L/sSngN3ixQ1TUSdftQKGqccasz037AFM4IfTHOAg05GnnS\r\n1uJbTaEeeA6B1DP73HxPucqBh0BpInNqunIIwgYRhc/2ZitIeWDUTi0ytPHc\r\nceoLP02nc9nT5CkA5eOHC6U32w/fszbq9NiV+GCqDbK5QE603SZ4s5Vc90Mm\r\n9PsM+4OkKjgGVfJh8d7z0muYZdy6DiLQF9BklzZDsTErNPHuU7yLxt270Jhz\r\nPyjHX6X9evkqeRJsd8HD3b0MYquDxJN4jR0=\r\n=jPVj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.168a629a4.0","@material/theme":"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/line-ripple_15.0.0-canary.168a629a4.0_1669740482546_0.7161168585978308","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/line-ripple","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"56d0b567ae7fa83a87538ca7917098d125e42c20","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.65c411674.0.tgz","fileCount":33,"integrity":"sha512-Hr5cwYJxIWDR01QbSl1B0sGiF0cSNJRy4QblWI9hbiqb13TYl5mYp8SI0cglcgpoGeeXnNatl8s24dRCv4bjFQ==","signatures":[{"sig":"MEQCIC+QskFsN/wg0CB00atekJ9YqobYD9OvIzmeUMXE9b8VAiAlbGh0if0YhCFEXyoUAD/oGnWINNABZHr+QbbGPG58LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkNbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwGw/9GOawHUKSlbatfNpAzFH7/zP7++X/8gCTI3djffLZEwWQ2cp3\r\nIxlNwaeDAdEMhh+E3X3653R4hh5DUqdvP6TbfDtBfiW/wS7nCyP+v1NkYU4K\r\nYiD7uvDqmxnKy+S9Bz99DFi0ymAjrZYZDbzASsMXKr/d1uMQ7o71pLZK40QB\r\npy1UavDVFqKthXO+kzcuEq2zoPzURyiFjFIATOj/ydrZFixes3XSLz51TUMW\r\n1zriHYAVwEVllXqfseMblFowoZZyVu/ejXnrxreok69x76L7dL+T+msq2uI8\r\nNEJREeDzfthW8zwwRMBP4Qu9v74AxV+d6MQ8+me7mqC0P53TSRgot+uF8bjx\r\n3BdirosOHJtIx1fPgBmHgHnZZaUt5rdxITG4rOFSYqJlzyz6d4tNijMwR93a\r\neFiuJ9Z1GpsL4AbuhtE61PzARv5XGdrcAn2BGTaxkMUSo+lrpP/q8ymrIYMx\r\nuNIvwxPzCG1EpKLcB+agqRNpkjOM0S4eQlts35O9ayxVnyFwgkA7UvdMuKeN\r\nFIiucgoxNv4r0qUXXmp8xTJWk8RoFwUi9+59emjCu5mfv8VqsmWtoraXlFwx\r\nuozbTSr1MSru2PDc6WSaFSv8RwoH/HA/qlxW/ynN9XvZ/2Kn4KjN06lkyAXR\r\n54kQW/Aj+WbJoXxBcnuvhK3Vsbthy3BjoaU=\r\n=ufOU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.65c411674.0","@material/theme":"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/line-ripple_15.0.0-canary.65c411674.0_1669743451421_0.49599421046701875","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"964e42d15070832c0210ab52b05a5958d47fd095","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a86d36fd2.0.tgz","fileCount":33,"integrity":"sha512-c5FO31e6Znmwa91rj3f/XGlWqF7DfvANoGmMIiAe8GPspctXi//EcYXz4olO8i5eA1LK/Sv2psod10m5s1sfcw==","signatures":[{"sig":"MEYCIQCRB0QPKPYGznisgaLEw/OyHCfjSPsWNBGksZkk3B9ETwIhANjkYggxOVx2U7OUAwlGi/sQcLgwlL0+vcC1DiwaWmtu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrxJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCLQ/9GQ3BxCII4w/GEoIloz1Y73HsdyWD73+XGYxo+zlO8E+OIDZr\r\nUxkF1Eqaw2plsOH45hwSOzuvDxPWEmXKxtPevDO4dranEiCm/JTQgr8DiY5S\r\nMjDCXjSgC8T82TJoARKCHx5G5Z2yjiIVWq31t2HrGI1FCOfjGGFxvT02mc48\r\nKjeRo19FPzXL8yViSSZ/cSvxo46b7oWc/VQO1JLmdQR6FatShmQqQ7Voi/LZ\r\ntBxjDwKNRgZLiCQKTVlPLwhkXRPJdZ+xwmjvg2rnz74H90IeENvHktPIR80s\r\nNyAUa6oEWjnT90Vvyfm5yvEgPDhkQhSxUeQOlI3NgEKvZ8YIf7oI8UpXeQce\r\ndeDGcu3VlRUHDgeyRna8OIeCVJAxg1BZ2N7M+HM6ecGj7wkQrSqLsZrRp0aF\r\nO2lzhtyzbv9FZ1f0Uck//45bJ78HkQJEjeRfZDkPxLeQqSjCrOgwOKXy9kc9\r\nvBCnVAtRYiTub6+xqQvoXW0yFKSNMemNM8BYvWpGHRwNVOMD2o7nxlWQuxkZ\r\nzjC110rd6g9zB7kAkmJFhkhEEb0q2AOb+9uHOCy0O4EAK0M5vml+dbSxdoyl\r\n65AlQVdAo39S/HnWlXw0FEtS/hWeoSxHC8JnHj17W7UXbeYc88M0dW02zBSk\r\nCXx+fSnheLyC7+xeZyDzcrNFFVJKuafy5lc=\r\n=qQKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/theme":"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/line-ripple_15.0.0-canary.a86d36fd2.0_1669774409014_0.557351866073138","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b182748a99af69987fd1f9786cd1629057fdff4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3a1f46c66.0.tgz","fileCount":33,"integrity":"sha512-3g3AmovA0onkTQDqv+lG/7h5sZvzC6FH9Jy91ubdeyYaWOl9lmqJ1iMG2qh8eJjM7npDBuezrcbjvap0P2nEiA==","signatures":[{"sig":"MEUCIHSt1vd1P7XdzPyp9k3t6dZTjVCc8jQK0+z9FH/I/HPaAiEAgzmoNb+XpCfvxvLfYz4DNE4wbq6RQooOZml2PWJn1Uw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0c3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqueg//d/GxmK1SoUQloaUqLqRdP4V3VnaqcKciiVx/6Y2HL34JocDR\r\ncfZqu9uBxuUcZaBWtjjijpkadl2hUprZiLDe3Ep46doZivAMNJmTJ+Glbcmb\r\nMPiI5SQyd5VACsr1vhRiHSr9Aal73K0vVbISyySJ3+JB2QewA9QPI0RzlArh\r\nVc765gTj6H2oRhqc0m0BO57djaqoHs1TMBqOIIFFLVJk2QMc+jZDueCqjDFl\r\nDrB9eK7sGHdtOGUIVADPtuUECI4QAq3F6s7ugiViQliVeCwrndRBVz6lrTlp\r\nBJ4zWrTl3ZUJQsQr/sbHAjT2KWxQe9OG9Ep1Ir6tOKo34UrocBBY+yT7nLpx\r\nz8G3ifjuNOMREE013ZgBAVeEbvWIGkIcvb7MkgvMI/9bvroc3UmvQwBXhzfc\r\nELK3EwQXrIoU77G+ZPaUjeQuVETHuGb4rZiN1MbudXudmBlQTN8I4+fE05tV\r\nkgtaQJOedgxBHzKMAIlECoDncR15NmAERLDnDKKOuySYXF90PPXzT6z9Fezj\r\n/9ZPizgijlOgFZcZfI4q5eACtGe93uuj/USADMhySpF7gzYpnI2HW6DS2kkX\r\nMnAz6yCLTC1vBmrP5DQhiOgXGMR9JCS2IChUO9DKPgf2j8/0QSyDB/WCvcF6\r\nDghZKVZ7H0YG3yZYMaLac7mjk1Rfv5irsk0=\r\n=kE0g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/theme":"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/line-ripple_15.0.0-canary.3a1f46c66.0_1669809975010_0.8724002462038649","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/line-ripple","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c18466a623681c76c9d9893a6d79b2e2ddec7f6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.32d8a9648.0.tgz","fileCount":33,"integrity":"sha512-wPBJcDrmS3dpMe+M6stMJuRKUCQHPR0CzHv7fkBi/b4FiNjYZi+tSPH6Z9kgPuDDT5PS5YAosTHrNkm4QbCXXA==","signatures":[{"sig":"MEUCIQCQyGpFyTILIjGNW9UhvHqo4BIJLHD14UxmwS0boB8dggIgCLaIq/rtseFhuy1TaCzxZbbC95ozhK0kzamZo0mcGQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOQ0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNsg//TmEmIi9v1v6gUUkuatOMX5Z8wtM3dz9UhyiKuPKFZFKTSGt2\r\npdYUs8aZzQ1QdblasZIZfGFt31rJGsM5kS9oPK0YuPxE3fTK8hyQImN+buJM\r\ntzVs6MlSNPGcCcFw4jlCZqfEckXYmiS4fiH3dBKx2s2L6HmuBEewSvYNMk0q\r\nsbu9Q2ZaXqJY2I4kOzyy2qc6gjqjvgsfheHIprWb4BGcI+CAD0Z6YKMUT0Ho\r\n7mmoZMMzOtYRcwDtYwrQXgef2JpT+PF2wH6JlD0whisdHXi+W9uSZipoWkxk\r\nM0n0Zqj1ScOgeA8iibuVr5SXqiZJJALueU0S0h6WnHIpliv3fp7vc/rxJ14s\r\nuPZT7kDw/0tK3xRyeEDHQmMrvmJjKmt0JQfv0aaAvTjGqLspoNxjFebdpiNd\r\nhM/ge2IFcwJ7Qlff4ugzz27kAreIk/lHaYS38KxCASNUc67HNvkEVoO41C+t\r\noSHxQn5EPH9uMnzhxA8vVI8cW/3TUz+MJy4aPMLldf88YtyZSmF4EmA36GHa\r\n6mQ5OyIHxRffUGmoYhgieLj+VBHCjGEf+Q18u6plkxdShngFuCiKU8BoMAa+\r\ngWQkZLJPH/pRSYxgKFJFhfxxDxhWpow+srBM3EHgqNli+gA7YsmEhxFAtuFz\r\n4DWpEEnB6TIusgeFnL7VVNvL7Ddao+hU/uY=\r\n=Ifsl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/theme":"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/line-ripple_15.0.0-canary.32d8a9648.0_1669915700736_0.8971688209091093","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/line-ripple","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"19f909e35bfef13335001c213bf53291ef8d3830","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.03618ab70.0.tgz","fileCount":33,"integrity":"sha512-a3ijpBancnS0LeOLp0/7avvpDra4Cl1u94B9lydTOjHMKaSjqf4hlvsIZF2I4OxUZoNF6Jbq8Q1RwK4MeZSMXQ==","signatures":[{"sig":"MEYCIQDA17/e4566WA4XNiJvjqtH2O5PrUhmyoFGgv3JPNKvnQIhAJDklxFAvkFYHNWvZ55DbJZ/8v8BbmxK6YSomZfFTuUB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRRdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpELA/8D722cSgJRL59v/LlHsGmYFPsiO5/KAV127ktAJA3wZ8xzvCA\r\nNit7fZN6ml4jGqg9sRM0U+H8Rqn8iaqUzzHvhGpIJ+sH6cKsRKCCtb7T9LVF\r\nzGuLLjN8JCk5OXe/euhEtvX52F/pV4hvF3EKJEXSaXp5ev4hxP0atBnH5wX2\r\ntyn2m+spzsGC4XmdExDTOJqJHA/2hlKwKyAFzeIg317MLeX/ts2v0nqX7XOT\r\n6OPfFbEw3wqrD34vM3YCB1DVeNEdxeIksMsS3lCyWz3CfA5lKCSKeDHWl3/x\r\n+gBTXbyK+iKjDwpga16vMWI1VM2npnQf31X8BpbNmXeOEfbAnwFB4TNkZdck\r\n1cMvFa6fZfrCZfAfFx7Vox6HyUr7XYXPu6LRk86TP75eEqKrq8IcPvo+8pkw\r\nZ60NlQS4qBZPRa6Y0P5IQA4d6rxGXFd0t5fg4HhxVAjgkaWsob9753U+yzf5\r\n9uPGSpFZdhL0Euo97HP5Z3MCIlBHBcnLyHGuxsnwLTlCrw0gxKCpC3tlor8x\r\nOpDPc34vpXpTasLrGsCyHFqm424kvREE2YVeCxZY+FB++eMu7bgiK5fQ8QJw\r\nxWOaV0JdgonOvYUfEFx1ed05bMLbD5FpJ1Bb47e+QGTM8J0mZPOQbkuD500z\r\n2xUVi9SkUNbMmSW7D1qlslVDUfX9y7C0AzY=\r\n=pWpP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.03618ab70.0","@material/theme":"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/line-ripple_15.0.0-canary.03618ab70.0_1669928029462_0.23798511166270897","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/line-ripple","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"18be27ef897796bfb525609ec7618749a6bcaae1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.68aaed940.0.tgz","fileCount":33,"integrity":"sha512-T/FROzQtNwXv0Zg+JaCjUmTii65uEAZQf0VStD7iGkBLmJFx49gfpyRCdFJgcFTpg55u+/8Ocq+dpY+g5Qni0A==","signatures":[{"sig":"MEUCIG6vxWQJnV/1mcQu4n2YTAY7Bks5/oB/1wqEC+NntteLAiEA05bucMkI4jmcUCPtqg7EGl//Q8QdVhagLUm9QfxgCdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRtJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPaQ/5ADbLh9dcAXB1Bp1FDwa76Wij+bqd6BsjLhKHgEhPieO9fQvA\r\nPEyI4rAeF7k2QQu2fi0UVpYkBXMCPLDTSwOhSXpg6Pb0yyuuxcuGDCKhrFZY\r\ne5MyyPnlXiTWeGzh6YFNBiNP0nVsJ0ihoKL92gzJOix+/XCBKZPtmTNSn8Og\r\nZ2Q6kD3ilBtlJ9lq5SKRNreKA4bQflPZi8ZgUqrz84TnurfkeMXdhVpDDLKX\r\nRYY1sPf4kyeTjuYLUPywwoCHPHNwApWCVYxV9vV9XRhSu7LroghckgJnJjo6\r\n4fh35Hmv0gbIhHg19Ub/fD3+xLZl38S+aTR11EVtdfodDvGOjSIu+floiuJ1\r\ncdCD5CO+g1Rdv5vFfNkXy6rDdtV9UkQleY3R2VGRCz5FuY+ViD7x85ykY80h\r\ntMgUkfnQB9Fua32Y/o4OtKJ72TalHfELo0pqMbk8Bh3Qr0o8Bh+zCYZTThlT\r\nYN5cnHTBXNLMrPbO1fQaQgJflKtW9Zr1IlQhCwo3AGaLpg1ni988fv7RZ/g2\r\nNPbMuDN0rM7hLoxOeGAsiRkKudPyDIFRfsJCc7kSaLNPBHjCkF0iuY/ISTjX\r\nNE1WwZPVVUikBDmG6yVADRTlZsxOS4bUXJ6qQqvBqVfn1rVCelr1Gm0f/JqL\r\nD+xILuF/6jdh/RTuDSloBdD+ZQ2+GgJaTpE=\r\n=rQXg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.68aaed940.0","@material/theme":"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/line-ripple_15.0.0-canary.68aaed940.0_1669929800752_0.562789488941837","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"62d7a9f3ee858000d639e7f8a2dfafdf2b02c499","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":33,"integrity":"sha512-mt0dVSFuB2afK50HRB1Jt06KIovztpVOwSN1ZhUtcCjE60Nia5v72fUkVcK4FK95RYb+h1D9nyUUECJw1N9fMA==","signatures":[{"sig":"MEYCIQD5blsnts3uz6AnbJYWEjIFg2AB2quY6ufROL+qlfzGnwIhAMvvBWkz08S8IACRbIqqDg2P5sJkYDAwxJo+Pzf9lg9q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDKQ//exqZW7QqcXk1+vOxoLIjmxzUfA7+7cQLvnAM1DTAFK7mlg7H\r\nAOxu7ezv3jwtpvSVnWXHjhceO78vwLMagikRLXdgEM6wQjPAHUmptm0b4lMO\r\nGezYxF0fHpu6eBRFyX7deL2T7Cr5Q2chgJX25i/tHjC/mASp7mDt0BbW7mjD\r\no2VWVxcCPTprglIRSwVm2x9Kt9ywSsd54a9YndZqpqnygFva7TIW1A3pIVLy\r\nlkggSHQPPpzWpR9VmgnG1zS54oIS5IcB1SpNh/mkRbm6oVcVNWMD3gvTgPBt\r\n0TEYJRthihAPJ0Sz7nxN2g295ZPr/gZnx5VLuvZSTjdsDYCWUC2rzDxabujr\r\nVPxFIttR43tFkNGBG6I9cSlqNAGlnJg7sRbJlFeumLS8OmWXf8sBXOtgQjWM\r\njePi7jTaGv2ywVB8USEMq7AZr0zpDPP43mcO+PKQ6MV4ZlejftyYoVfSvPxR\r\n/cJtgulBX/xTFyZOmuCGAlBrg5fZKyHSJr1F5bXm3YB3s+VGRLBT7CirReOP\r\ncr6K9ehV6EaO/P2KOmx56u0nOMxc9jYyRr0ztEkOOA+Osm7JjotcwkY+LQIk\r\n+a4JN84+/Akbth+nydtFLFCWE46iCVfK7iqFh0EKQpI5u6PI3jr8LNGSStRO\r\nQkfq510EBJszl28clBeIEZ2qR/ttb7cVDQo=\r\n=BlKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/theme":"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/line-ripple_15.0.0-canary.f0a0bbc75.0_1669971665527_0.9110011330175622","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/line-ripple","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5c9bd16981cc4f816730ffecf258a2a231130e60","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.dd99c8764.0.tgz","fileCount":33,"integrity":"sha512-9oP2KLfV+soZlTOdN8SqM3QS9B+FWW6s3UUxGOLEFq1HMiSQJWtwbV9Hoq+3iDwyXocyYvutHRVtPGOE2JF5wQ==","signatures":[{"sig":"MEYCIQCPohJx0mxhwcw/iTWFp34UAkjo/9tdm+sHgKHco+GO6QIhAM47YjUKYrcOyCdObEtsB8bOpXRBXGgmdMh80va6U100","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigTyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJMw/9FYnYyOOnCcP5Lp2CuI1RfmBlWankmpl+7CY7zId5/AJTmT7x\r\n3l2ikb8GCzCL932O962p7Gwr5gAwjrMhYLF/kJB0jnyluSWbNawrKja/NMrb\r\nmlRaUbBuWqFGHfpbIWwSc/NeW1bh//SU7s2YOEgPNsmzbExzQ6pbPOeB4o+8\r\n046oW4ZBCJ7qyXCytI3xu7CYgM0eZJU88impZwL75zbV20M5c61JHKaHuB5N\r\nV8+2uv6BuTPDCIj2I6lnoF1K3MONAyGBJFLovqrHcManauvTQ/epqY2UM0FQ\r\nShYYHwiCgQEDABu9RAQp1Kis1/wyXLt05uArClim2yBljbSyaRhmWFl1rf5u\r\nkeO0857q5koHmCRUxBpjhkSFLo6V6QTMZBDFNp2DSsAYgPfQUwkHqpiVUDXb\r\nTPq2CoTwSEd5yf/2O6Xuw4gvNrgUKM07j2lsZGLFelLHPjJeTu+OK3XOXxbn\r\nEYKLKV/zqB+BOYoT1HC6mErTWk/lBcghwMhJSeFeDkw5osTAb+KP6uOsuYQK\r\nW6UGEK6YBA0dHan/VRE5zy5O37gOGdj5ygAb3jd8jEdu/0TKumfNuKLVvh6U\r\ndE9w9h+t+b577JZNs4U0jVCiB1leZ9EmbCtRHEc2CQAvWPzFX0Mf3s4L5Yph\r\nx+h7170k/QuLJ0kK6vHikdyOhVzFe8Xoo1Y=\r\n=odUY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/theme":"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/line-ripple_15.0.0-canary.dd99c8764.0_1669989618333_0.009695110555364872","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a4d8aecf24401156a590f45435562c650505a691","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fabdcca3a.0.tgz","fileCount":33,"integrity":"sha512-or+prqFGcDp7UOtRlchON0GVG1tBEggcx4X6TiTF5vgshOYMb+TbBFCb2wNIptPbVQo5W19kLxtplSx+LmG/dw==","signatures":[{"sig":"MEUCID917+ruu5+7CgjmUkYlq091Q222ZVcKNtr+dygF1CUYAiEA8aL8bM4mCxgfr6sOfjG2455eE1DUosYRL5+eJWAPH30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihRiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofVA//bZckqfaPH9ZhRnr/yk9pAU9PzxagQoJba540L+B/IfnJd7Iq\r\nzJ2XFiGyqS+83ZiCcGP33asu+QZPuAYpcyXrNSgFq8qwrOeBM0bVhYx2l/Zr\r\njzofXKQzpAfFxzvNJmg2WFnweuYTCeyAsVYZtFEcck4a5ivRLQ1sp7Mt6uu8\r\npBRA+NfM8V9E7dUNguyzrkK/IKulSg8bz5CfLXmZiGDX1wNGgbDXTeoSbUML\r\nU83bqoCgBzWP82QnlxnfCylIxT0DHOaAX4Fn3ad1853OXCIlX++yulAltktT\r\ns+8Vk0B4u8/OhGbCmMrttyflzTwn3EWbLzTZT3D4a6OB9YPLQbHTy8xY3VIx\r\nermYVfUp+H4kdDDHJXZAgUJtkps5BAhMECbwtePUKd8HGcrPG59uAprSe30p\r\nc/6vOHXifZXFHWL6OI+b1MFCrnMXbGdKjCmV30LDRNKdYCgcerqqNqkhLwAR\r\nY20eOjcxBbYArCqNHfD79X87A7zsqexVGhMyh8agugtTqhboNJmzaTDRZ5dS\r\nVS6yfbK7wctg3VtDIOX4H0/wwaIzQS/qMukcI7+BqOaXqd9PBafhvnYgqbRN\r\n1nz7mxaOrk3zU6B28mYbENlXCuL5PiXZ3ZUstb7N9mEQKPH0czryZgW4TMTB\r\nVN1MlBTB0i0rXykD8bDzti3LILdijsmvQbg=\r\n=iqqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/theme":"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/line-ripple_15.0.0-canary.fabdcca3a.0_1669993569884_0.9702756997561452","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8d9465b43b8ff430582481d8b78647697d8f5a3a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2d26722d2.0.tgz","fileCount":33,"integrity":"sha512-ZI0Iurq5y7WiTQvZZ+cfp4tK3ESORHbyAPDAtbCQY1iGUymmIB43Y75/aqwwIxPZC9LVwkx5JCNfgEm5oPRVcQ==","signatures":[{"sig":"MEUCIQDC2XlzEVTOWQkmVBp1ot+YYJ8NqkVXApDZhZCbZDu4KgIgetgIHhPQ0/FB/NKyxeO4diLIozZuLSPyiFGPRTXSW9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiicLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZpxAAgvQSP08Qx7uByRPkBULUOqVMbAgq76fw/6x1wIwBhEr+ZBP6\r\nrkd+evwxBPHKYuriROGf1MjkiZqXnPhM8qB0Y5+VTSLKdlwyPV7Gm6qcg9w/\r\nm8GMe7u5mhJHTHP4kQkQqB4cgcF9BAerrf6KCzFB07Hih46O37gdqE30ZxRR\r\nP76hRIldQ/SyVEWzMLZ3b2bnZ8kCX7o8o8taVpNDtUPHtVDaJOQjaSYnCMGp\r\nIIp+UCcBDQViapz1usYWyFIp8pKN2iUhgif5dWNoByEehMpuNxuoSmjxf+9I\r\nhFrekM2Ty+XmSQfqCXPNt8arDfAl25zxOnsC6mfB6edbJ1bM3D1cTaaI1zB9\r\n0Yvq5duZpgVCW4f4NLfm9y/ZQI8S9JRnah0rnOx1+/GQwmkqET0U//8vD6SG\r\nbwNukOXvSOWBZRHSBwo9bQ/4wnU/uEQ6pS6Zq5esmLF6tBeo9IeLgKVJyQbR\r\nqZnw73REQA0750UB0rXyIsDBMQsCzKupjwNON7WYG3AKnvlvuAacLrcZUOx9\r\nOz9N1kDizFYpaeP6RBTCBfIp2N0JKffnqfxqiwiQo6aOfWLzEpMcin+DOydS\r\nBlfUNEEpk6Jf6W6FfT5HyVKwkLrcc/zsfWZsKFdtJbWwwNEVUgnz2D+teH4L\r\njMXsDVL4bFu/+srxgZXjZG89xP1YUozbjsI=\r\n=rPm1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/theme":"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/line-ripple_15.0.0-canary.2d26722d2.0_1669998347501_0.0662547301682237","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/line-ripple","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d53c0df4dee7e78b8da8d1f982512de73508621c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":33,"integrity":"sha512-vF9w5ktVTtQ5vxh+BDCU5FqLWHXLNWiHDMUoAbRImszUvrJj+6ae0syUd0lX1TNRTNJDd9Qu+FodiSVTtj9oqg==","signatures":[{"sig":"MEUCIH5Q7tj09WEzkUv6W00J1V4cyCwt+mlx5gjUZp9F0b2PAiEA16TS8hZYuCpiJv2zQagkcmSTRAtH4+2o63jCaehEkEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijjhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhpw//QAbkGbiAk9RF2BlcPPvR4fkBjSnUbyADrUPDwerj0xYLNQAh\r\n5sAKcd02HawbJRf9U58aoOgiDC2z9vIEK93ZLPh/zX5+D93pQZE/VwK4XCJh\r\nXUfHWluDbX4s/CO6wRTKLAp++dtOandEdkKIDQOJmyt6TTzbVPv8bcduxnT7\r\nLQ3JLfjpQ0NlZeMiBEfAtzUvwsUfcIwylXj3CfbZWLY9DjAN3K6Ew+WgXc7Z\r\njYgJ2cWBSZLf3S39KjVpHNBsWanoBEFafXs5MfFoFub9cSui4RdbNv921Ozx\r\nNUQRSFkOgUXFTl6ti+VoYmg3qsNxl67JltaI/+aXGZnjQlMcSThzsqkseVy9\r\nCS4Iz8Wjpnw6G0WRMRSmlfGAVCtDSRSMsLTucAt8rLHvmXbvwqKEqYcKSkZD\r\napZJLafy7D27eJjXkVXq18wp4aas0poefDRRsHEa9/RN+KGfKn1HL707hPi3\r\nDEbdxvxZK+ZuG1r5TmBixxmjvrflefsBkou6+8MaaXStnfpizoX319CRULAQ\r\n1ZvsNoKpTngfozCSptMnc33MGRqD8Fww1M7swNzmuYIL0NE2b82SI/P8Ar2w\r\nutN1x6w8zHz4qjx+8VlZFtBWgQn548bhhd24BHpnEAtwchkwMarmHpy57lGv\r\nWipiB2K7inUGaxKvgnwZI6hViQPGXlKx/1M=\r\n=5dBI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/theme":"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/line-ripple_15.0.0-canary.eaa0c3a86.0_1670002912800_0.11836228194701759","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/line-ripple","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f584ca3cc575d11c1f8039e7cb981919f48679a4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.79a613bbd.0.tgz","fileCount":33,"integrity":"sha512-kX9Da66atNtGBHTqOwBRs3Hw9N0u2+SUxG3yUkQL9/Qh/Ezy3+r8P/QAFieDWXxLCMt/AxPjFbBKy1m/DYLAeg==","signatures":[{"sig":"MEUCIQCpSUC6mxqctgsBs1jpLIan1znHXAtnuN3q3oiPSghHqgIgUc78bsj9gJo51R5MTT5DpiXn07af3bBOjYCIVq0hZEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1C7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBQQ//RNfYZCRRCwfQ0dHeA/bxYwovaunvx9Gp6fnj+i/ArhAUWlxr\r\net17fSU81OcfjkLKfZOYo3hstWvDTlwUVvTu8EQMgll4EpFmeMbkJoccyIxp\r\nWJwMkq9dIRWMVLLoe7LKKQItrKWWy+7GyjjhoQ6Zm91aYsJoDHREkDpYFHAF\r\nEosEd8rR6oUeu0OSY9XSqxrLPkZR9ao5fBAL0TSjQOLz/timiO1SwLOFzopl\r\nqtJ4wXomszELZHuRkzniIdsmwGeBig83X63rwyAyp7PqjqnarKkd/w/Y/QhC\r\nEyt6kD9BwpGPpVWcZJ1rI3I6BfAy2oVMZUmK+p0Y52pVzyJXd4aD14wDwnUQ\r\nG933I71V4wZCKDdZGJTzKwpifBh82IH9/fgtfGkJ6VOYblFnLTJSy6oyuCbt\r\nWp7W3ir7IJRKcpOTdC1CgwOyUE3vK7WB6hqdMiXSCTKWzux4/tBjne7Ir4sF\r\nVi1bp36HZ0YH0GRyMidGfbmFE+KaH3zG/zkNyNLqrwqobkj1/qMCyXlW4gHy\r\nzQCQ8awK2uOSaaLD+Gt67QNMkdCpuxAjr98stGI55Ja3MtiknaM+koqCvXSp\r\n8jnlMDIJnRj8NEsP9UppyAonk/MLGxsvVuaNEvruSUyi83X14inuYGsC6Inc\r\nktmocn+oeHHnss0uRl5r1C5TkCAK3QXeIFg=\r\n=ZsJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/theme":"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/line-ripple_15.0.0-canary.79a613bbd.0_1670336698923_0.12740519829392705","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7e646db3b8e8adc1a7c339e72bc7a57f57ed8ff4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c871fe61e.0.tgz","fileCount":33,"integrity":"sha512-2oRe4RwyNoz+oKPTeczXAt+hFivqCoYIhuDmTfV3yb5d1in5ZeWUF1ou0JuWOcez5FCub3SDDB88R0UN6uyT6w==","signatures":[{"sig":"MEUCIHRVv8BrUPWc6zU4xEoQp649HqTd5+3ORG7GX13C56/TAiEAwYOzjrslSvct4s8pcbYMUhzO7pCqh744UdQ8cTGDFmw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEX2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrceA/+PDFJ2fqjSV5Gf+hQR7iv48scfVGto7zZr+AzomfAe9iWQF0n\r\nLZCeb6nbPhO3qE6iLtIULqTldXuAxoOI0iijBzrDHrjsdjR4S+zIxqaulNtM\r\n5UdHl2ShirQTk8kvYZS5EbUrA7TAI4JcpkCoBaGIDorHXJetzliaGkZqd8zt\r\nU1Zxvg7QT/d6zXn1D0mlipqF/w3ZNAH8ruZG1eIKKwQ0CIseDeTLZPvLvA0u\r\nIA8LAd858OQUM7RCFSHlbWLWLFyQdvKd3dDlNhRuv5rScr2KjBorRQjH/cyb\r\nlwHZewQpfXMp7s5VXZozjSt5jayjFoBHjYkvTgSbvaHteiu38+8O+shg6O89\r\nUsjid9DtugpUNUABJkpJhUk2InUvCwj7I0GEl7Eik1qCEKqIW2igKDJkFWZP\r\n5LHAbPZ8Cqq/9RuJidE50bJPkoW2pLHB69jK1QwU0xHOrOYfdTF+Yzx2TRSp\r\nQihOKhuziwmc7dbjwk/MRLinMfpToJ4Lq+ONZbylMMed72sR29CU4ssIe35a\r\nXIEm626X82DuDkQHyY2iCWrYyIJoY80yX2gQOeARUMSatkgJt0Xi4DKeRvQ9\r\nFAVbAbNj05y9iNjDXk6fYbMc2pQy6NZOlVavFoKsg3TUgnaAfoJwpY25zmRC\r\noGaU9XK/bVcFbwLiFPqHfiXT/Cv5FD4yLLk=\r\n=zKSi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/theme":"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/line-ripple_15.0.0-canary.c871fe61e.0_1670399478112_0.806072337590426","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"da103218b1b702f6d7adcc92eb5d7ce1fe2c261b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9eaee7936.0.tgz","fileCount":33,"integrity":"sha512-PC9dld4wHqdZBskCyzBRnn3tqcx7Xb3lC5NuBnbY5Y6vtk3yXbg/BQHiCIgZwP6ob0yrzCftcwX6tsAJ68Mt4Q==","signatures":[{"sig":"MEUCIHNWjYv0io01m3QjnuIhlY2sF7iV4cIlFAP17fLHjc99AiEA1ahP2ZGGXGMhw+M+3DhBREK4+4/Jdf3FuDKjGNHGLfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPFCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouKBAAgocrr7nwopiNJxpgDTP25sUqSa1QOZ/9NygqrjUSf3WGRbno\r\nsLtF+xxEgpubxb0Wsxg4Y7HGLybiadUHEL2eJ0eJxdw7ckhOLWSiO2c13T3K\r\nu0qc87mCTMMG5phUYQoLVueX6XvtEocwW9pighJ2Tfpi870DKS44D4Q8hBGS\r\n0TKBQCNMjAps3nnCo11BZ0M8ttsFhaUKqhT2cMr0jt6e8G/EpP00hno60+8b\r\ndY0dai+pQnB3yWHYI50561jof78GdDLy2KS9fNnDRS7VGJGzHUT1jNSk7/2x\r\nbYbX7aWcqCa/geADWgbdXuqSdFcP66Byh43xPAd2gFkTGPHc19mNktwZtnm+\r\nqLVeqGUEsp7qo784Ys1IHWTiao9X59VTrZZS8ULO6wQLR781Y7+/fbLgXpJo\r\n7pwYlNu4x9XE9opNDiSLJmAiWfADvkvnMJGolnSwucn27To8vDqu6hwO7aiP\r\nwJcUpAX0yc41838w4sL2/VwwbeuMpbRQI3kg6o0eJ0yoR6SuE7eapcPvmwIP\r\nPW9yCrNiiwLQXx2qdhczCnv3WnE8zT87OuHhW3PKisxqRG4LAqxrrG89A++V\r\nWSO/d51AGGoo+UTx7KTcm0TnHB3L4SnSWgA4DmuWtZtf7mgEnsVf5PpDsJtv\r\nwzALyM2K3Fy3BLGVHf9X7zyKZ24iF6ydu10=\r\n=q8z5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/theme":"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/line-ripple_15.0.0-canary.9eaee7936.0_1670443330557_0.7138794859249644","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"eae2c27fc74e1c33a24483b313b68f46d8085ee3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1d37bf601.0.tgz","fileCount":33,"integrity":"sha512-+l5SDUl4aN+zKibLFU6otTRUcJt2dd0bJ39EzEYZ8eh52f9jwGflk6wdmIQwlX2wkgmu5zqAmI7u2ZU+x0RxZg==","signatures":[{"sig":"MEUCIGr2f2srmH0RbSyj5S1R2o4ShGVkt1O22LV6A66QQketAiEAiLatfVldjRdStCb0NksbU0I7lA9+RIuwseLpZ5FwBJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPpGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNTxAAknoX0rwICvPbqEThShAtcG8rLm6Jnjyn6mgi/qzJnBxHdd59\r\nrtpYHzYITaht8gttaLajL9Qfh5J5qK+rUK9g6SyQ12L34vVLzhMOZYlQ8vuy\r\niC94iEUZrMaJ5KuAsOoeEA6Jm8ZzmQrgxwCRFT361gKEvGi4NeqcBxUMLDqf\r\nU0Hva9WYCyLclDvMD+6iYyc2rDamqppftPeUW3xVsAMdUeqY4W4YGWtjTXRb\r\nP7DcULi3bUnNjuOFDetHBvHG6ul5KdjRfXARmBHi9y891IkOE1NeUaxQYtJM\r\nZM3jb3OCtfKgvS4FEZRIWuoTIIZQ8L1HQOQqWJXBtI7f4bJH3WLyN88QA8jY\r\n0vcRDvPkzExPa+6XIvpGKdJM75j/IN3ZdsdO+w7/WFt/GanPZmI+fjp/mG1O\r\nzitOGpHkqnBUO0jEobOHRlHs7W46b40a9bMtVHsMCU2V9gPEc1tctV98WpfM\r\nRwRC0TmB7R6oo/weVvPVPd8t4Ohksv18ceooYPGeQj5Zo7y8i0enzMzxcaFf\r\nG897YURBoXqmG8el0sxtgYFWSyQQy1SoxHOTQTiPO/OE9inh4bPNedxsb1+L\r\nrzMDZENGtQDVedvtoJjz/OF1IDiUIudzaKV/Ap5g/KQavcFRupeDtZlhfK6/\r\nN4tieekrJir1uVLini3TgOQiChEgPP0+6eE=\r\n=39ae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/theme":"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/line-ripple_15.0.0-canary.1d37bf601.0_1670445637862_0.8699767068691238","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8f204bbbb0dc3469b9e7e88b5486894ed9fc63f1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a5fe069d5.0.tgz","fileCount":33,"integrity":"sha512-THeDa/uN0e7DACt/aa778Dsik9si7NYOa7Bu/Ey8fIKFKyxgW7FrX7x8Kme1vpaqsVi4EYlEUswYpr9L2A6tiw==","signatures":[{"sig":"MEQCIHUeHkXIYAyoQsfvWIZy6ZVzkV0eHFH2zY8LewiiQMW6AiBPOafyxdEjqXNqfR2xbqhEB7aMsK89zXTP8BUpUa6sTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4HRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy1hAApLGosOcmMtMujAG55go1K2cOIJ1jZyWmDk9Dk/4JT2493Fis\r\nsvXBKjHYy2UPNUxNf61JvfqYEpufoaJRKv1BuEkKV1poOePEjh5kWZcXxtLc\r\n9ZFzWa3onQzYRGl6mNTS8Gws6E3uqBh3BCp4jMVagjy9nB6Z+sFT3/7Jo8W+\r\n8VS/q8mwrRhwBNlOiGfaR4E6bFAzlBiSO8WEJMcvoD1KRGdykQb9KEF85zoD\r\nBxwSosuebcTqhEx9QvZ9wtWGVVsi2Fe8Ejx5IJlv5iEUC+n9y6onYl/hkS6p\r\nuoQRZgvXWvRZe1pxfSotioJaezL25usr4F+PCuYeIVO5LPm31Ks5LV06ZLcC\r\nbHckXy93/pV1jzZ8FdcJtnr2APZOkzfseTcEeJMCA4XG5Fld9W3sPXQ6Qb3i\r\n4Oe4558Sv7y5OIF62JcTBr8/0G0+/RyRwllNAO5t6vUT/vHi6Kj3eijr7InB\r\n6bSks4eYUDXO3kIYcbFjrt58Lfbenp3V6hPDcIX+IMlfTAfktk4ilU2GVW0X\r\nAf1pFWNVWj5TDVhehhgOk/MXUOAUR2m3E+zAu09OSeLX/Qmg9pV7KMUjejUF\r\nY4FteHEpteub12sNC8YHfPjeV5Fi79paLnhh0nNetGxveOXOheutcODe02yT\r\nPvDYjZvMjqTvQfDjNyUmqra5EQJNahMw8oM=\r\n=0hCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/theme":"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/line-ripple_15.0.0-canary.a5fe069d5.0_1670611409467_0.6606478528844404","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cfc64d776bc61a46cfa1905115c4d0f0261d6a7f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ce8b5326f.0.tgz","fileCount":33,"integrity":"sha512-ptNkdxuUdv+PZVN+i03ObFJFd228Oj5lFLgOF79zhdmeN92xNz2mfNd77rjhX5pKcEV3z2XWAPigaL162y5Zkg==","signatures":[{"sig":"MEQCIA9VU0SAS8J29678QZCljFqLh9zFOTwXd9MK15wrkeF+AiAP+ggw4T/Gx0hi87a1775QnYA03aset3Z/eKJ/OQkMyg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8T/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQxg/+JGb5+FFFRPXMwnTpyo3sz5F/sqE91u6yGQwkFccEJitQnPIe\r\nSTToNKXU0WvywTWC8eIhMA47zkNa8/wK4xwfNJQit5XZWVSuekCJMsOORs9j\r\nlqGPdfrpDjtQqftG5VRP+Hc3xgl2eRPfjETJTuYAaDCVNi5wcZKtIM4mIf6D\r\n5OiK71nJvydxO054zIWkLQS83IWdVr9/WJJG1KEtnGwIobxV45vjJ8PHJbY2\r\nHgmFrt47YNIVSqJcX/7I6VaDk2793jDXdJy53eZ10ufcnM1cnaYOT1y2oqJZ\r\nGKZEopk1TV4cvYATrXCG62l1WKtCodrs2valJ4LwRcN5fBKdL/NjtbsIfovo\r\neCJG0hOsffLorkA611EBaVwBqHKHpuVfgtO0FP8fxi1WStJkjVLhyl8ZSSXm\r\nOFY+TMdwo7D5DTiug1iGvg8a72r+kQcvwam+pJAbwzOmktBq0B+3k/tLICOk\r\n6S6qiOmY+i14JMfhMZeK37FQscdqvJ2yGCdw0sf1cxTjO4VSNK2XAnKQ48wa\r\nz5J1sjZyWfebpzFuuOowDMCblEfm+0fNsTu1wqD7+nqS47WLW95+COzm5OU3\r\n35gvlcOmcrwp/yL4D3+kGBlPHLGiTeaAiv0IqZhe4co/DcyZTrBzTlnQUNsx\r\nEQA3Z7+RUQy4PSA4ptFsAz4taQF4GJrfZww=\r\n=ym5a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/theme":"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/line-ripple_15.0.0-canary.ce8b5326f.0_1670628607271_0.46941748167030983","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"103793ca8fe13c7163fa53b0459302b006469005","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.43f5323bc.0.tgz","fileCount":33,"integrity":"sha512-6/QihSzoUucWFCKMhURUWxU8vC8V4B4iHk1qOjl8o/hP/ZZFqcotA9l1sD+VIBtEI/TGaV3iajUrNJL6IxUrcA==","signatures":[{"sig":"MEUCIC1Moe00lvCCP1CRs8ETVboM6Hs6bR9MevRBuNtmRxL8AiEAiqmiw4xt7QhRmRvhCrwS/ATV4/8KjyNA44GKYufWtPE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1quACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeQxAAh6eHMu5JZ3DRiPc+93n/VSgkr16mj9oqVT0F8EnEcadNJ41R\r\nETSK1sA9f1JNKEbAJ37osiB5WxhP4vt0ClgLIoYAJHRGKvOp61VgTVuZuIAf\r\nIWVEgHwvmZlJV1KGBvakx5eX+oZiEEXpLOfrHiXdfZDLXFOnAwVlEmR9OXB3\r\nALJiR3u3meEbF1IP1w5e2o/w0Wx6rBphUaeOTlkE0m3M+Azy74LSQWHT3jMv\r\n6yRPAOMH7OhteZKfVrz26RrYrwXCI+AXkOfKxJV1tEwDsXUI//7y2y3NHoGd\r\nmqi1u7xCepwYkl4D89UX1bE1Qg6ojygf6440kf1lU4uPKuPbGYjqHOuEL3IM\r\nAV3l1Q7BYyCT7su59CJz4IRCCEvj0Stk7Ha5EtfwS9J/LLvXxjlPPS4bXmgR\r\n3tPWfO1NcYCIP/GyY3EOQGJTJz/dPFH/j3rq+eQdEULw6MZd4axizfJ7UMNA\r\nF+hmGkA5Fn8YJmzMDHROZNTCRWPLX5rze7VgxJ2HHstQKHbAQtmjK9eL2Xpq\r\nsWDtO0EXv6pjoq0pK6WG4LWSx6We1Bsn7aJy+cMMZf5EZLIXor5okdKwhthI\r\nmRdp6VlynGdxP3HWU4nEixw8FI9yaGKvGSih4OUKc+9IShoPYwj0fZjMZeyt\r\n8L9ByhZYYJKfSi1J6J4nPD3RzaE53N1TTuE=\r\n=CIeO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/theme":"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/line-ripple_15.0.0-canary.43f5323bc.0_1670863534142_0.6485995039914434","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1ca032054aba022585527080964ccf295f023f7e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5490e32e7.0.tgz","fileCount":33,"integrity":"sha512-Mv4gwZkia4PoDI7eivLamgzzpb2cFGID59gst47zTU8U6bm6WOZ4ulai06FDPASpl0dA+Bm9dxR1y0d4YxhUyQ==","signatures":[{"sig":"MEQCIFEfbkTQAg+p5TcWKqXi4uaOE+Iv8RqkqB1CJUqq7kEkAiAu39p0wiy2jY6Ltt7yzVpZ4kyddd85u3Sot9A5XDS9fA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl15mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCaA//WU44H8Ico+bjlroWpKrRotjO1ccgy6DTPM2+N5TyzGR80ONO\r\nNtlQ2rUmEJnQbogfnZV/H5CBkypyITvrtS9/pWZwMPUr48VXAGCywEJQ2Ift\r\nGNsMwJoUWQ7zv4XDMvcjav3sRvPW8EWFoFURtGlbuzfvgliAq2sGU//G2tDe\r\nFaWfeqRw3eCEhhdsj9B+AKcuZWhELiYHNeRCEKRd6qKxgrJNUBhnmA3LDHcq\r\n6oedFzAX+0xM2O5JrCB5TiyLghmm/LKatbjb4PWYfEV5lfMBPdH+qrV8TRti\r\nyZ2fQJcW0aJbp28jXSrUduBr0m4gY7pYeZTzV2iVQ7G05LeXTJ+OkbwG/Txd\r\nQxT2KlflW0y/MQbdHWNmIRyv/Aa4s0YsWqWfuteax3GPW5Jz1jA+HTz2ktKF\r\nLkzXjmezgoUsmbvPIIDAGxvbl5+Ou+8eijrdrGZLfJ3GpoBwRPcs/ClQXcbD\r\nYhjv5owjSamrgj7Kc9M3+MpORRoiMwY8FIJm51uVeAH/RF34rPgpIyUxiX7H\r\nT4p7hTVr8tcUtxvJBFxhpb8dOUdjOXvY6hwtWMK+PaqOk7TS5mu3a1EhNQlw\r\ndqOWKQzo06Klilceh6ffcNMzl5Lef2vnbjiGqvt4l/Hr8LzrRGLcxlaaQLrW\r\n67N/7svKskUEzoU++unmhyWJnsmrpHGfI/g=\r\n=lJGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/theme":"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/line-ripple_15.0.0-canary.5490e32e7.0_1670864486244_0.7997718214852818","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/line-ripple","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e1f159aeb4e72f1f48eccbc74a0a2cd05126a349","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.817002c29.0.tgz","fileCount":33,"integrity":"sha512-iXXzttJqfF6shHBWgOYBLfZ1onFEWxfJZbwA5m6AJBG+/WO6JL1H84dC3TVS/09f0gayEcVXfp17D7PZJ5fDwQ==","signatures":[{"sig":"MEUCIQCNRvbNiWu0kQhIBHShyZvVonJLSu4/yuhlVNIpx8pEJwIgV9fMIl1kh0n0/ZRXwSd3J7lwwNlxdUFJDU3HsrHSFEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm/hAAijQLZfGPM1vGcr6sOoKW2DqcNheuQHqvsZ66hvSzY2OHEKzy\r\naMgDqx3pD5+NTIcnLT2wsJnC8DNVzleDBw/RDbNGyMF+WJa4Wl0nFYXUgOkq\r\nJQwUAZc7ef0/aL1rvxe+JcAd521wIafIZAFupVwq9+XloGJSL7MqtMWf8cJ5\r\n3olg9LWJxMipu2nDMJJAMzD6zR8KOf3R6/4OwUV/EaNwaZ+2zUU/6wORk1FT\r\nXUMgcxVPdyYPO1x22L+WO91w3K+7x9jHclINbEqfmaTtnRVySrM6V9Bf64dN\r\nBYFg4HwCp3zy7+3OUctMyeBbKwzLGqxkz01KFUu5cjtGmZVUMEurKNUx06Uu\r\n+kM8nx50sxNQubQZKeMxzdJI804Wiw2WhYgtejPIEhuh6J2/1cFmMWTQk47j\r\nvNHL6N5myunvPI02BcoVLdVY4iVYxhT74XLsollXAmeb5be1QImyeeK+yes/\r\nCj/WNFOkWAso54Tf2u/Dk1JC3tvHSLnGf65RbUWeAu3NWLfAArts28VJ79oU\r\n/zUMPIj+X2jnNNPVyzFnI0L4r7l2AZbeTIjhx+cHPLZQemDJrny9yXgY9QfM\r\nnNlE6IdpGPqF18rIzZXLFVaFyob10t0TzlivX0DRO1VNkVcVNqP5d1irkIXw\r\nsD05N2Ztu+newFREcywd5blU79UykfxWP6A=\r\n=3v3K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.817002c29.0","@material/theme":"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/line-ripple_15.0.0-canary.817002c29.0_1670968397911_0.5691171135884114","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"de87b827a4eb83dc99fc40b94894f0bf4881b000","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.313a1326a.0.tgz","fileCount":33,"integrity":"sha512-dhBZUJPcgDd1h40huqszWaiGq7+BA5FasqLY2zsRuFAi0wNMuToiz9s8Qp+Gr3PFUdekbAxNYIE7irPCBsntdQ==","signatures":[{"sig":"MEQCIBlBp1bEKjhERDlJPujxsJmr27hW4X6DznEVhP8LlS4tAiBT82hJbVmsVkpdtTdsjIYmTkwPzBJjvKrsLpSmmK/gxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaU1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYEhAAj6qq0LRYD6Xo4x6XXp1mUgO7WJ1X8PuUxkEEIZls/4aI7e4D\r\nC/0D/fwojSKa9vJ0X7oRAFn7A5xUuDRh6SrV/QcwUS7JWH7t30jtNIs70EQr\r\nzDgO67y5MzvYtAvlPvli3GnSxhUg9fNect0aLJyE3QEa3zNnVgOM7BjGqQ0u\r\n7l1Iu7F5vEE9iWOI49vk3WA5coAneaH36gtwV5z7pAQAPOyqCTsTttJuZNbp\r\nfX4yGcEsw0/+7sv5Jw1kQRNSITgu7YUC2fBCsOg5dbvJsDt0EbSP9Xu1Im/r\r\nQtAl1VhbBWMpqNylxUa2z38TPuhuPc5IchT4Tv8lydllBPIHc7MAhFJvsa13\r\nHSjys0baAO+qQa5x6MOC9ndb4BpYYclyPlJZkxRGbGVeIugOPoHe8OOjFGfA\r\nLL4gSBLVlzMoUuh+aE6LxPyjvcGh9eOaC7/HcObFOW+yKdXcvCHbr7afb0eV\r\nRxBY7PB55ikhkGL0rQ5lL16GvO1mHwW4p/U3dJzEOCQsf0BcffCi4/GdP7Az\r\n3oAT0JUsMQGntw8EJkBaxyb9XyMIAadaf57jikrViDE+dPRY9unbs1X2ISds\r\nrXYK9M75DjX45VQh3NG33tRrP+Oj3MRslcFUa8utSbw7zhTqdiGU86z2LJ5h\r\nEhyjeC09ts5VMSupG8Ey91TKvXNZ77Hmqyk=\r\n=4EAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.313a1326a.0","@material/theme":"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/line-ripple_15.0.0-canary.313a1326a.0_1671013685331_0.5503290704554935","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"720a348a0670274d3d576da38d4e4dcaf67bfd99","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a69c14e10.0.tgz","fileCount":33,"integrity":"sha512-FV3Xm4IbbHemIEXU6LPe3+lrlT9Ee9HJJNx/sHJ5WdUuq67mq4yucAS2PhaCWFyudnrphu2hR5F97pM6H93vjA==","signatures":[{"sig":"MEQCIFB+X5F85RqhXEToQjtigSdLAUizUj92nCPD9hjv0gFbAiBdUivjpxiwNkVY63M9IdjORJWLyGVHxrGmqjtFe9KPzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbDzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfGQ//es4iugOOCbi7ojF5557zU7hDqvOjdZnB0foZBOl4AJJvM/Lw\r\nenxPzCfaCgeywjOD8J9gfFEWLAYPJUK7b3D+eFale6TEQfPrHTwy6c23GBA9\r\n+Fcq41/ylsIeB8bGO2lujIbdRGjUc23rNxBS9OtdpqkLtR2/zJw7u9lXYcs/\r\n1uezwl5YY7w4EzfifyAhNR78TSL+DnTXTZXpFXVP2soj4d07We7nnrn+SQYN\r\n8LxQgKXWFOx+RH5D0GWHK+bFXvXCkyvUDhsbFyqAFpmieGdGGWDBKFu4lUrV\r\nJ0sZQcr+dTiZnVeJzqKwf7PtXkJH9kKnV5dYdyn3q827pu7rwciaWQ935QbG\r\ni6StthOcfv1R7DrcZpvXXtN6iWjDruTZbcxdgXINgkf7QX1dyQ44eRqYnG3/\r\nejmCKv1TUBysmY6Abt53dFGZBtuBTnZPffXnAS7tMRppXDKaKZewQzBNy6bu\r\nzhhoSZJmaVOGeeR9M+xIJ+ItkjnfzEz1mKuo7wQRgrEU6F3Kgrdk5z3okqRr\r\nPqnWVUW5KIMwK+gNn7H9wJMD8Rg9pumI4Ac992qPnUn2XDnw4DmJ2auUWbtv\r\nq0WAvHoXrnFZu52nyNdaY/uscKqqb5dqVm9maQHROQyM7kz2cj/2sNpaaTGA\r\nrN2CQHw0qNwIbO98/lsaLXvv6ly7rVsnKjo=\r\n=DjHb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/theme":"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/line-ripple_15.0.0-canary.a69c14e10.0_1671016691346_0.8657865615192981","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"44f3bf3c10c1af775b6509fe4c0a7a0f3c71f89c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":33,"integrity":"sha512-+juJ41X/00R6RCVDhaNniBI3P4fWALWNoPc15aTFIkVImS2QjOEbxMU4IP2lJAKkD25vyBf5oerYIVsix2EcNA==","signatures":[{"sig":"MEQCICbT95ftJmud3jGsc4P3cqrb5hwAG7UQnaqrHlOeb4e5AiBYWP+Z19zetZKhLha1DzE/e+LmYJyaA/paa0ylBNQi7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf1WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocCQ//Ralsr3+p/H601Dmjfasv1pBVbHkAMuA+2m43H4ctCsAec4vW\r\nD3DYjQ95Q9t5IxG+2bwZ/X+pckbXMznBelTA5ZjQdRGpQ+0rGcNwr1BH2sUI\r\nykB25VgkMkz/b2kWpFFkqCjRAkIr4eXL1IFMD0+NdTs254vLh541ZBRzXF4x\r\n8Z0aGh5t22ENTkv0Yt0ShIxm6hPfOJvta87uFaV+nhzE0jJSxjpSk21aM0nL\r\nWDxtwK0AuiOz8ASjQhH3Hq/OMOkl/Nb+Mv7uYSy3fVr5HR69QpXCcWXMmHna\r\npWFZ8h+fgN1ubX5JkHHAhqGp9A1zVI6n5PFIsx9KIE7R5szcK0elMjaLCp9Z\r\nefbc/geTcvxlBMk3O5qrvH5ULu6+AfQJ5Dc2MyPUg8vgLAI6tUeLg8B6nvMT\r\naPv9RhyczX5L0ovU2YZFY9LUvA2Ss83KWJlOGQe/AZUZ+nPfqKj1lloAe/gJ\r\nEMW4gIxXVQJ19M81GIDJ4b/g4hFUEjKFUyD5/8MSusRzMVCBq/wJ4fJCSAyJ\r\nzCKectGBezNvTp9xbHpZwPDjd+xteQmOLkBogjFkofc7AnJHee5dgXmMUnFh\r\nY/cNxKKxk8SOF4Gfrdxykj1CIApNB+LP1gEGn+wp0jeRapY/LHwfTrAp7Dgo\r\nzAIJ0yfpqoUzNx9Bc+Z2iiyaMeMc3YIodpM=\r\n=rEnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/theme":"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/line-ripple_15.0.0-canary.f43e0ceb5.0_1671036246562_0.6902606217833513","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/line-ripple","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"362b82a01ba4b55c503987845d78f157cdf02b8d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.34767110.0.tgz","fileCount":33,"integrity":"sha512-RtGb6oeXMCUFSnN9VX/2DBJh+OKencKVyYSum3VadBLXNDOtVAnmBMUahxZPu6mJwXNCQxkDneR+Mup75/ek5w==","signatures":[{"sig":"MEQCIGZq8ON5Vs/FoKGcQKRHMTreSfcfSjyuQBuOptkdlUJyAiB5T3lf4fOq8Qf1mcSAiXU01OCiS5vnvpLLythEyzBI2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgYDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIPQ/+O9jkfNEKtYYAQukSSO1aPh4fQQYgs8emWYxnun8kc9Huc5ha\r\nBiR1xs9GxCeDndt5dYtx7EDgBDozTc6I5wu1ROhY2jCrqtGn1T4TLgkBlsws\r\nEnoFNRv+xvsfRKDJ9AWsmKr0uB+oTgVG6rI1mBy6s7h+yLpY91sl3bDDNZXE\r\n0Sx4MXfn3ZrOOSOFlIcwAJ/AKFBDDKUVn/anLqf4jY56o0y7GEOihTFygrmz\r\nWX6QYTafEXuo4DePdkinOq55DcmjYTHK0l93g8y1jCPXqttOZD/3HP0uaePp\r\nm/BjUX9uv0akacNuWVeHyoD+JROK7uU36aqfKqQY19GM88q1ouauaDAsHRDY\r\nrFUb95XbYoUAkc1J9k8lLSCTpU+g8iyPgOtFFfm5YG7p20VkRkG5huwOjA68\r\nkeCNw1S6aokLTyUVOSlelRghIxyXZSwL67mdOPLDUdHRShVLIukwWXkZnkLX\r\nIayx+oaSr3jt0q2u3BoibAe86/YXjX84DouUeZxbT5LMsCKcD7+C3VQCvcCV\r\ntul/8mUDMYLE3VDpjJBBRv2ykQJAPizbWTZnBKScVgedhIBgKUwLhvmO5thy\r\nhEMzDsyypcFCX4il3RsOgGT/2Kap3mobgfxJv39ZCXbr2HjOEslzRqjbAneq\r\nBJPdRLNbx6U4N52STcu2dEdYLTsAqt8hfo0=\r\n=kB5s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.034767110.0","@material/theme":"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/line-ripple_15.0.0-canary.34767110.0_1671038467165_0.6535480744593951","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fe7279ce35d054585b1fcd86955adbe691612a84","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1f99f3c50.0.tgz","fileCount":33,"integrity":"sha512-dyeszbzGPsVcV92d4UakKA1U88BRBNHgc9aboq1x+3cIa0COiF2MUYMVdFBJYTEBR412eZdOVdoIaJAGChpk4A==","signatures":[{"sig":"MEQCID6O/dyKICHqislBsMY+7qEYsgO1rXzOL60goeEbXLj+AiAxRW9XviRI1mieSZmh4gqcBQ7SOdJZTQmsmlSAUM/e0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy4yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobMg//UoXMQX5jCldINUsyDUNag9DiRjB7exHygsR0v3ln31ebmwt/\r\n5KQBspJJ3O8SU2dNsLjjIZdoRqA62YjUSGQ2sfsUuZvbYJywYXzYCQddy16Z\r\nSYOkv7iQ2X7pMolwOv1uJwBsM/2T59sCVdI3B4V7Sh6bt9+jKn3JUvxYhvW1\r\nEWdPJX3DDnuOVhYbkNvR9bDAkTBBN+08xpd24s76Mqlw1cJQnoJZloXZV67Q\r\nCJrOTRtXbCOIT81OdpFTZhQn8UMxlt/VpxmEHN2AY+40mpbNQwCwwuQwLHq2\r\nIbeiF1hhNcvj354agtauiMvcSSrqZxfccA6G5GMorYPuhxrSuwO2nyQ+tzK8\r\nrxrpydXXdrHfcBdHyUJ4HBmzzv+5QsNpSd8U2qmxi2G2thad8n83TxcvGFiC\r\nVTuwomD3JLC9AVvpr7asnJdXtjSrgmPvdseMqVPqPQq9WGEgMi76oswAvsRH\r\nbdidNpTdlBxmwzzLQ97p9tvIMsrjUFaNhLcHWzJKa5OYaEULPHDS8n/eXVxs\r\nFY7CqKmL2B0w9ILc9KyeQBSWHLuXaoA/hb9WPkv7YABn7AU9IQOulC/gJeF4\r\nsBahzn9M8rW/b7+GgNgIS4o3eP8BFiIeBYqt3aAbObjuCVaO/DM50KwSqjBc\r\nk3jjjn/wkFOpphnpnIeFLuNZf/SvY0LnLgM=\r\n=toi+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/theme":"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/line-ripple_15.0.0-canary.1f99f3c50.0_1671114289918_0.08965123321559498","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fded4825c31c6b5044496d4d4d20c92f6e64fbbd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cfd69490f.0.tgz","fileCount":33,"integrity":"sha512-/kfVPpY8Lo2OUWfAZYGQKoevFIW5YKsVq3Fx4cnQh8ltp+vj2LEIvjdp3zNnHyF8mLsmIKDernVYaDLl7MwSrw==","signatures":[{"sig":"MEUCIAkvYL6cEoNmnqA9ejfv+9lo35unK/CoJnl7pHx+T9qUAiEAtLNjTu0FAWfLlRDawPu10IyYKH0rJNZZHgnoqoqYbXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNAZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUkg/9FmqXwegZf3fOlnJ1F+3GG5vvnZ0KYd60483dTNRkWVR1peWn\r\n6KAfd823Kmd9psVOUzyjx7WevwjIRBdfdZo4D5MaOopMkpApPtwkcrRPzv6c\r\nObHWqXeeOS1gNK9CDBhq3a7VhwIp6fjupE7d61/+kNLKqz2M1VtvHgZmLClX\r\n9O/Z0nFNbI7W7d9tkH2+vcSIEwnZKMOu/QfdMcXVeVwgird38HywW5tacbzX\r\n4a7CS53t6X/Na8lcagoEoa4Fio58rkXVEC8arZLmv3agnLz711TNvT2vVrAZ\r\nvJvrJWi/y+HtWVY0NQSU1+W9303sW90DyZdeycJ2pTx5sAfcC7bh324RY+5s\r\nwsVbeD9ep+C0ka7cwIpuZcwA/6W48i2iY9T8oEVYuLLZSO7A+kBEOEdBNCrS\r\nunI8lUJmrjSo01ps2frG6mKp1cv3VOj88IR+wBbvachCvGXkVoKbf6t3/HGB\r\n1bykp2izSPxaHbNYzxLEjsijRAMHQ6PvD7ha/jJ9WS/vqKFmAUOFu8hhECpM\r\nRj9Cmj1m/NwmoV9HsWj7w/TlpWMrTrOGFkJOvFJD/1xKkwnYf2s/l2LfOu3H\r\nDypFuyal3gyrP/xjHM3pSdpldEa0bfTdGY80W1efIZ/vTOhz8K4nr27ohDZ8\r\n6gL8DA3T9HXPa+PZG0KJm5ob9++vQAcB/BU=\r\n=T4Pc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/theme":"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/line-ripple_15.0.0-canary.cfd69490f.0_1671221273173_0.1782947275541229","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/line-ripple","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f6f53c16a4047a5d07ac9fab696f29aeaba3b376","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.94ad8d986.0.tgz","fileCount":33,"integrity":"sha512-sq93MPkvOTkf58tYiGGuow7CmTweemfFDcizL4KJpvW9wLEI435z0Aa4vqRhj/I4RWqSg1RRaMPh5Ms4+BHSDA==","signatures":[{"sig":"MEUCIH9UJl55VNghOJTlK1vvg1WbyR6Su5dLqlRDR2dDn1owAiEAzgLKcic/HOeV206lTCEyMPgwk8ePje86rghkHxVamSY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLrkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEhg/9HgfPaAZDlKHOsUOt0TNBqmW0m3dM/GvkbK/dLjZ3OG2/JFw6\r\nkcrPKOKXPlmfqBGT/R9WLJ9UyPwuPfqnSob2EnSKYVxJ6c1dCITzoIkPlBxv\r\nwnCyAgcKTM2RmFD3cuXSP7xQlMosvt3PIYtJYdF+YxKDgTpybPg5y44NWNVZ\r\nv5Oncja5FkkCTCAbmdfBz2mV1lJJKqMGpAGQdJvZv3VOigTTkfAHM0BNKIWh\r\nnNBRcjZBikH7P8TQcvm3DvlK5uAEAVNAWvHX2YJKhOGMtQl6IiKcs86h+APo\r\n+AVv7yKLqo1JRDibe0WRdyvws7OTRtweC1vqsQGnyyibLlgKoftuSAfOfuKu\r\nf8yiOJCCny8DWsc+iQDNWoDTSOJxmnbwbs2/D9NJFmElLzD43fL20uibvrtl\r\n1imoOFDXtCXah57TITtLd/gWP5RAJHaiIsbZzpwluMjpV7Q40msp1AH7Llya\r\nt6ALWarI68r1fNcPBpf2V+SDLMF1U0bSwRixQJE+B9NBfI2YmecBSTE/+Bwl\r\nAuQf26k+MlCshv26w6qlicv1wOOtPRmlqKx6CgYa+GUYG0x9wbnAW7G5GcmH\r\n+renYsCiyskjHbzOOHv7MeWp41gpmnBALt8Gc6c02Irz8ujGg9sCNgrnotgO\r\nN2CweXFnASZZgXOb2vq/fC9LUtlve1FT2lA=\r\n=tsmV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/theme":"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/line-ripple_15.0.0-canary.94ad8d986.0_1671477988155_0.11513003902050234","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/line-ripple","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5ee0757fe696d36757686be55137e1b37834ac11","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.604264203.0.tgz","fileCount":33,"integrity":"sha512-Qx9lq2J0A8ZBKtLDB2dP/T+lRMUC1NSNu7zWWi3ET6YUWwPPlSYgYpQVqLFuZziDIbXlpfVOZ+v3XymaeQSjpg==","signatures":[{"sig":"MEUCIQDWqC+cjWf3n8XlWY6dyNbbplSABCEHGUYljM0Y1cBi9QIgILEWxQNqxPDbahwxCSAgGOEJ63G4MZhUxEfb2uQn49s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo306ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNQQ/+OP3p7PJHVCh5tcYhIvOBJ65NkpvO1Rc83frAebMft2eTu9dj\r\n6X91Z5kIDfajevvgdybbLeHHHp+pKV6WlbgP/Jn0FheLiGQE2SwKcr0yRyJq\r\n8QxSMgnA6uVnYIkn5D9OVJ2dWRnMo0Ez0QbXwZDr2wIuMx8fp6rgzDNn6yhx\r\nmjbZt5WQNOOO1KZM0r5o4RQr4zdjCkOA/mX5G1Da9b1P80W138Ag/zBjf/z4\r\ncWd30D5XcPmdjaXxwW4AeNqn01wnT6KOAGCR+jNANNgDo0lgfDfx8hqkF5oC\r\nG4m7vk3H03hxRLO7JI/s7boExtr7bm64Hw2UmLk/Xm8l5kuaaQV67W+AvblJ\r\n4/WYPpVbHNtqMITxT+MlI4UNahjyzFACJ3Q4/LLEevK+ieBHbf0JhOD1kqKY\r\nHGwNvMNnJPyy7bQzJEgu7Cme+45YrSEZMjuVN/AGogobyma/ssEwPGFmaUce\r\nR95oHIKKTugaa4MJ0+6uK6zn24j027CUaMhTmDLZRKIplj3PiWH6YgEedRWY\r\nZBRGI54hHiNvwU3t4/nz6Qb7JpZv2p7NjV9mNK/Q1H0TRu7hbTYkB5lCHCas\r\nHypVAYiykWfo1AYV4eR+ZaJ0txmxHv6FN0DZiPtIBSoQYwpVlqmHzG+TemIZ\r\nho5JlcYly9Z4fZq0K7gP+2ljv4rpWt6v1cE=\r\n=1+CW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.604264203.0","@material/theme":"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/line-ripple_15.0.0-canary.604264203.0_1671658810456_0.2754299795536368","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/line-ripple","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d3e2d5b3f24e42e6b53f44d40ca4e604cb5bb504","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.85bcff6af.0.tgz","fileCount":33,"integrity":"sha512-197wpa5aolNkqLRAqRSaty4RyEH+f/otXWtLETxI4+qEjDVJmNV53WojDwqfzdB2nKomZdhGEJkUabnROPynWA==","signatures":[{"sig":"MEQCIBMynBtJUP4rVxqnTw1yuq44T5zncvmEC0sujVGYU+FzAiAMhmxak3EoNQygxrxoaay3GI4kzmev1xLbb4ADrVsJLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDBcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMwA/8D0zkvZWg+0jHjFXkBK9vOPFvA3PaStkugUMmzE5uohAxQSUJ\r\nl3mm4dp+/IliKlwf+mUs3HiMM5YooM1AjiUxWi3e+i/jUkTQQB4rvU0rzy6u\r\nmcYgSSC5XZFkX/HxphtGXYL4Pj/+ZScaaAdZ4R1dIOYuoAODVb+VLrPI8xUF\r\niY2GOHguMLAXa8Z/QcHh5TvJx9u8Di3SxmNrh+x89eH6umzvoOEQ7lzo5hjU\r\nvQkGIsFm1xy3kjjTHCsC6cFXPDzwzq67p36TaHw0NvIvQxHSOYT1JuKDYwi2\r\nGd6XB583wPV+wMUhABaAnlyZ9jjQ1VhtggodRwbuHVvzGlSEmMx4eI6uzpQR\r\ng2WbMI0YTZUg2C/W2f2LqGStFHRXutbAbqFpD0Us67XOZzEgs2GYFqxlrcY0\r\nkprT4A0e6Jzcc8Fp/m11lWm/fZp3SPRRTMBNU0F4oySDcRm3EBPA7x2wd9AF\r\nBZNkc0L24Y7GDW4r5aJ2JFXyigCjMRik9eVJKWoHRNNs0Z3ZawlDxLVtd5Pm\r\nq43Y1bcL7vi++iAkuVYDrDOAftdVT2ep3ZxTbsN/svoR/Jkrf9w3DmB9rrZS\r\nMvZe811bevi8o1tvdvaXRUKqZVkcE3c8hDLS/3LsF0r7dJOTzj3e7D+SyHWG\r\nYLw0LfUWGqeD4gAPwWXYArHw3m5BjntBk9M=\r\n=XxVV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/theme":"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/line-ripple_15.0.0-canary.85bcff6af.0_1671704668560_0.21314919502929985","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"24c43835e5f14defd7a7ea04c1418e4816d5c79a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ece3e8d21.0.tgz","fileCount":33,"integrity":"sha512-a/Xk3fekWZD7rlkCH1MmmEkI6OIT2JHtZSrPApTSK4TWM8V0onbTRtKzul7zdJ080jw343f4jINZpm4t74HUhg==","signatures":[{"sig":"MEQCICnAgPVKM6U3K+dN1oNScQYvBXQpO5jlJOunyXs5+ZbLAiAZk6xv9RwfMZhI7DlduEOmsT330BxSgq9GxDgrAJIIjw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132816,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpI/GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfRw/+JS0AISOWCqIvO14EWzOpjyYxmqtZ0ux8axxbic+WNuwjWYul\r\nbnJqtbljiCRXjzmB8eItffMS7obxXfvLtIfKleP8Q7PYJ9waX6GdmX1GnTWV\r\nKA7IwGKglFYn/ivQJy+HLBZHyupNHo4aEnEIuJt/xz2UxCdQHsj7g79+y1SV\r\nSX2r6ssYK1X6xAhuAPdFMyEaXo47AGa0/RIKjPVt24KTJaipj8iel3PHoMVf\r\nPKjkyNjDP1Uk2yboGUIhz+8kQM/l79niMgufgU8v22fP1fpElrNWRAb2PE7D\r\naAfEtJTQBawW/m/2a2adwJ1CaYYmWX4+2/DyeG3ym060+LqhOfQKedGzLn7l\r\nfHMWhLslynXqJI9yjSkqehk7gBCGvm4emBI+lWQT5sRbpIpPdFpjAYn50b69\r\nXYhsmF/ooUwrzbo+zow6dG2asSZisjxwbceats7Xe1es+JzlN1piKye+leY2\r\nfOye2q4dRQI/s1mq7WjScXqcnZTL6ndkqKldYMbJSzm58u+78j9ULSC3ynzG\r\nAugjH35bBtfauPI8D4MLjXNrMqP8RdZh5y3VtSj+G9+pZsfODgmjAuPzh42v\r\nAyFy4CvSNNxm0kVl2HGVHwp7Qxwxm7OLTL+0kPIJ6w3TXeO5wWhf3Z6S30n1\r\nb2o3h+AnVh/SMcoWmvTtuI7Q8leMfOVNFtA=\r\n=TXOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/theme":"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/line-ripple_15.0.0-canary.ece3e8d21.0_1671729094504_0.05715169645946938","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f111a3a4157ead74a7df52979a52424821dda2d3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.278ad53d1.0.tgz","fileCount":33,"integrity":"sha512-VLmNKssZUjx/kq/XftvlPKzylJPn7wYMxw6ZVkK4rMiRfeeC4redkf7xpKsxYrRcqXQ2c7qm9DH2s9CDyMddXA==","signatures":[{"sig":"MEUCIQCAqvtaCJFpymxfq/rKP0/uhZe4AlkClzHjMvrkEV2F4wIgUJtljSPz+/ko3gVJePd5+HHX9q/dXiBpOrCi6jO+CBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyWTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrU6hAAmxJ7X5AF0hiBckquz3bX3GeDtaidmE5iJeVpGRlOWsUQ4GaJ\r\nh0YPHlJiSH62Xt4sriVV1kFkLLv6/V5OmHtW8CXBNxt8mQ9fGxrKUmrb5jYb\r\nzGl3BjMkPQ3CJF+T2h/0gAJLRtl8NXkqrgJAk8rXx4pl+FvUhCHuW3oQYrW0\r\nwrfhRX9SY/IOQQQF50+WrmHDshf97CuDDqYAtcu+i8uwfIUPaxhSnkT+mzL8\r\nHpGviR2RGvXliZEwehuvPQVIGuSshHRL2EYu853tCx/bddGwFFRx0utqHhyF\r\nCd5rL72GG3cq+MtC3kSxL/d3t+Djql4crBWVi4fXRZP4cZQCj+o9D6HfM8bt\r\nKRmSezJiWNGagYmx8dEax5rvSX5OaHu83VP3Qjbj50sdbECVTzTzkw+/yIWE\r\n/gPkzV0gMaFx9XKf6KNioLsyFYaZENLFPxLK1vIYfg0YEhXUfLJ1Vh1mHEbR\r\n+JJidrLxUp3vY+fcChUVwo7O8HB3a9XKrl4Us5diOk1FtcwVXESkUJ8Q017X\r\nWo5Kcod7tBZzZKR4HQIlM7+XZ/hqy7/rH4wwEdZkbZt+XsNEKo9tjyi03Gja\r\nVql+9EpgofcjrtRo03HJr4URRjaSFjxbKMACOaqO26+OhWFnP9xOTSNRa78g\r\nAq7Gec6W77zUfX6WDtfoyVtNC6y9tTwNm1U=\r\n=01j2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/theme":"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/line-ripple_15.0.0-canary.278ad53d1.0_1672160659251_0.962755630629782","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0521b20b6e183ea5561a46a6535646c90a00bee1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a7d8389e1.0.tgz","fileCount":33,"integrity":"sha512-4IukTTrhKSJph+F5hdC4s/Z9QwM8jOuq5aPaQxhU9tCQPAqLqdBTBfvSzOb1UGH/xrv87l/JqUcp3Y88golGDQ==","signatures":[{"sig":"MEYCIQD2DRUhuvdrucrzhtZevyCeG+N7JaDKTwAxPrT/kMhuFQIhALz5EnpAyIiWwPCDsM6Rh59/ienvoC4HVkDPHJFebGEx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":132943,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0FpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1/Q//VfernD1GEOEECOdYr+1hvTjyYqUDP6tRqhpfMlCrztqu7rlM\r\n/+MaJTg17lb82w3qS8bU5gMIMeVZWNM3hSBDUuu+U9PvSLqFJmohEgxgjirU\r\nQtmepQth21n5APY62B0CxJypPivkms55/tn6XmSbsBPvdIE+nqe6K67lr+QM\r\nu6Yz/QxaOH6DP58DZ7TrStcWxSyGYRpyrGbOMleCpqp20MxFH2ZM71ccUtCX\r\nQs1ha3gCEmHGax3jOsDmTrV/QHD94OnX30G/nnZgchbRq/mFDKthOIl6jSSk\r\nXf5xQyIAtZ0MuXre2JZoUPT2klTooLVXUJQX+9WAkkywfBCIbMXeFewZPDDn\r\nnDTPXLdzUuJVTj49B3Ic+sS9iY31IVsb7a9Gt9SevbVc6IcWKzVAHM6Yu26O\r\n4CpOwNwA6Y1bzZ4xWH3lbFuMNbvg1SpZEDKac2t4E3ZtG5noTnu2xexVD5vr\r\n79+o9HCd8chTBndENm1xeMDtNFAli8EbOoW21w34RCP0yhrjNCBxoC7exDF3\r\nJ9Sr3r/4ku5xets0tovUU/ukdJ2EFPkGsIl/TL+fPWTpywuTTUvDiYXshtVN\r\nGdorl7COzIjldFGl/lDg32+7zmZOeguw+I3xozqYWg8YAJB4w9/BnpKy0So/\r\np3Y7/BFtVReDCz9YFeWqYbxy0yDRf1QiEeM=\r\n=hIOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/theme":"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/line-ripple_15.0.0-canary.a7d8389e1.0_1672167784832_0.5536860071521688","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"274a55c238c6d417f257566703c10c45d3a5ec7d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8175d5eff.0.tgz","fileCount":33,"integrity":"sha512-IZN8tW9+IQTGOL3TEzhmEIVcGyt4/a4IgGtaPAr7zFc4Wt0yDPmYiRCzALrgl0+v3Pnatmcof+5eN05nECUK1A==","signatures":[{"sig":"MEYCIQCJSwvPIYyh1GsDL+pOYERSlgV1tql6cidaQPRYoT6FMAIhAOPSAf3gQP+t5xPtlA97Z2ZHnb/m7Tq390yilaulDP6c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133843,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6EAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZtQ//XQbEbXNk6W94Qzi0ceJAPtWw7QvrfNraGGqZyI0IHmmv6ycE\r\n1pmqhl+wB4+wM9Y1ZJ9zDKRqiQsWI3dEZADk2vOwuFRJavBfnY92LWV3qXWP\r\nhVnNRj2wOdo7VE6JHUjovYZBbDBghtTxcoxIV3bLYLXtathiE0u190Yqd4Sb\r\nSj5KbzLvR/BPVHatoAV+CQWvRYZiSz6NKGzwlIz3kd0JWUC/PiQH3HOnGlBs\r\njwfQvehlDWqwTDpSPS6FcDXWKPQXn/VQe63V+Sn6Pk5hkWg/a0lnnnjX4P5J\r\nN+9nSk/WwkYJazRif96GghO7eRA7jJqtCExFVcXlsLcno8mcd8Emc3Bt3V27\r\nOuy6AXGlrsm8nfQRZMlaJL2Mz8tP1H4nv3cEjEjDMJkgDHy3rtkJ0Hsuu0fp\r\nBh61laFqi0f8SIaeDEkULem37hsMT7g8Ctys5jVMWYUKkPl7gJiXhU07aWvG\r\ntEpw0g36GJJYec8S0+NLEclM9iFgDdafhRJH0Drby04AYjJY4m/sexKwvN/5\r\niFDoFpjsQlithf2JXHv0F12ZAexleyDqn7JxwrGPNQcInsHbkqixMTYMGjoy\r\nEGb61lBCHuhxf0LfyR/GZbBvZMI6r62aIXGwQHZqvWg50bQzcA5Q7xE/Xirh\r\nI4az9rtlixIlIBW1ZYxUo7mMtF/30+7Wg1Q=\r\n=LoeS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/theme":"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/line-ripple_15.0.0-canary.8175d5eff.0_1672192256095_0.6864516897457429","host":"s3://npm-registry-packages"}},"15.0.0-canary.16abb41ed.0":{"name":"@material/line-ripple","version":"15.0.0-canary.16abb41ed.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.16abb41ed.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc6973b5177bea4714386ebc97f1f1b6ecc69b4f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.16abb41ed.0.tgz","fileCount":33,"integrity":"sha512-mewvVPgAD8nzTk/aAsY/iKz9yufBI46PaxTB2pXL4BntuIIu66MY4ypu0WNea2XPEM4C/sE5SVFYhzMcLXIlqQ==","signatures":[{"sig":"MEUCIEgjyYV+4j1jvXw/nEDtubg9XpgaKrCa/SUWAmzteWegAiEA9rZv8v7IBgcco54Hta/I1/fd+8xMwAvwpKanbvrs8gY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrJsLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoHpRAAlZdPvzgNqKQpqOzAeh6d6dBgv9DxhwdKEX7hr4vxNZOdyQkD\r\n19r8VUdtuWp82iunKl9X3cWGYH00FO8BWwgZyGT6K0R2p9kInFZomS1o6Gm2\r\nG4V29lCQHQ7qKoWhIMx5wu2rRCzSRivelmjzx0SrXtOuzYv/3g8UnKNQ5yLI\r\npJE0ZcO4Kj/sdpjxzUAKSHd4jfrms8Z+ESUG7VU8W15E9XJ5OpxgUl1pA3gJ\r\n4G2wMyqq0Ilq9khln3GhUcJCz5078VoEbg6meU17+wFXB+caxFQ0dPpJ86pC\r\nbLluPI1oAAYYqsgJyrlmFdWlH6yd5ef8aZGfEwr/vnLcK3cWrZ21/zy/rcBC\r\n1StbStQQ+atQ2vPfXIHvjYwBQJwZRv2UCHIQt0ezXmRuZ74148hbpsUrDbi8\r\nDFhRgtav4GUK/qGGN9U5hPlhoOSQlxbc3KjRuYmSvIu5gensEcpfiWkDXEPq\r\nyarzr43+B0Ytb8HIsKOz18Ed/jYuAOlJsvD1gx1PlM3bmpXGWluEizBsAnbz\r\nIpFw6vT7moZv/hVjmOQg2R/vUAPPh0M+FGiJYApJr2Um4DvB3OnGXKBjwdvb\r\nBCLkr21B6MLV9yY6PnGePZNmAmDaG8861U7w1qcPwWNQGK8X/RURoi/n2zpz\r\nRVtnpKD5kYxwyPb+VQ/mJx2Ng+bFKlMrVEI=\r\n=2aqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"d76b7c826f30ccda72f622ff722cc7585648dc34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.16abb41ed.0","@material/theme":"15.0.0-canary.16abb41ed.0","@material/animation":"15.0.0-canary.16abb41ed.0","@material/feature-targeting":"15.0.0-canary.16abb41ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.16abb41ed.0_1672256267277_0.8510733876243031","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"beaa32932a1ad9ec34e6bcf1a5712cca5641b630","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e21dcb86d.0.tgz","fileCount":33,"integrity":"sha512-tO78jQU5P018T9ay3bO6wWJcgL8rUKfOon4b9D0iTA6Fm38VoKWkAyjrPGQQpJHCsFftv4JpUjv0yTkz+zmUzA==","signatures":[{"sig":"MEQCIGfsv0Um+zcfCxRIa5f3+wp35KuZpVOruoM9b3M1BY0ZAiASx9Dz1dZC4IPiMTfXzxEMAVv+hk54uX8CCDSjivalbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBtw/+P3eUHsgvHTqmMwNR9+moGPWUqerZtRx35Ucc40P0wVOAaHcE\r\nSPygmZLNzhdYKF1yxLBvB2lpGoTVUvwZpg1y7q9Y+pT5StDb5OGGVXygnHb6\r\nPEKMYlfNX7KPEsUFbXTshW2ZR/Vmo7FQojkwIqvUY3z7Jt2cApUzo1LVYiVY\r\n+XPEChV0IlWgJvjjbmbtt+zt5X68iXCS1bW8Ijz3t8/2NxcJa/SjlaTus69Y\r\ncagk1LpzvSWOjQT4u9T8C4GegBTCGkBUgTxO+MuxqkpA1x/Ud4Zcd7JCYJH7\r\noxVfBr+lmZSALBBUlt+t/q5vK6Xylnhqwo6K5Ytc/+9AGTD5Ldsla4eqVVOj\r\nsibHs1AalvSczq0NJbJ9g27WTKfeWYG4eXEh15MxNrFtD2bEBK22hJhzhI3Z\r\nAzTx/SGQUpKbGiWuoc5mPwMgGHferTDeLNsPesamjO7le0aCXNY/PxFiHCuB\r\nlXGhH1Jlk4nXvSn28QrFtTCnjkh8b/mechkjHRs4OD9evHjaxpZmUz0mG2Gu\r\nCwPVrL7u6AXIrxebKDw4MYa4HVLJ7jMmxbWXEldcpz4SOKn4JLETNM4J0ImD\r\noBIlNcy1cLg6z+reSMpSDespvIk4A7agISA6z+24oBxumopYVGjkVGiQ3HKH\r\nO5FnuJlkSmIVxCKCMw3fDiWcgw5qTYIRbvY=\r\n=m+T2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/theme":"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/line-ripple_15.0.0-canary.e21dcb86d.0_1672322489316_0.36217082673410794","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5234c1d2fd37897549e954ec3870cd467e9de500","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":33,"integrity":"sha512-Sr/vgfGdJuDH4T61c0+tJrX9mCfuq+V2/Gujo7uHjEBTpR6y/WdnjRarucg7NJPdWkZKCPsShxz1dxgOLy3M9Q==","signatures":[{"sig":"MEQCIBh+ufJM8WmASmYT1t+Ec8p2oYhLeNUi4jNO5hXH2m+mAiAR41CHpSLjtOkqwUgfOPO5wTlBoZaMNIHRPj491K0sZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":133946,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre0kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkrw//UUyBybwlkPYBfNmoaUNi1qoKmdXKrC0oqn3pS/wEqio6F+k2\r\nu1gl6GDSO/cxStRqYqGVaXm2jCaZfS6R8utvAN/VrHQeB7+fzh/bkpZpSVnN\r\nEX6rlkIvG8O2ic8fOERrcX/ZIj25s9Fe+UXb7V4GBTl9XwYgQcuC6dBzj0of\r\nxGhf+ZyqSeH3RQYJcgy1GSA9nkHB4EuTVzPo3ZaIXwo4lwmlDp+Msg7+2l5f\r\nPTAjOeVWncKcuvnEj7zG/u8LKGGQIUNhTW5cCTE+g1diHAQptO+ZK0aEcKml\r\n8Tt1ubrIZZQT204Am+lRU1YXtFaK9VYVLZ5RvWLdOSgpuBa3fRZrX+LQd1OM\r\nOgaUYxg5xditIT2khOyLGUxv6rKNso/3BNAxjEt9ELuNPAtfe8KFyDTStfEV\r\ntWTAVIe+sELsdl41DW309S46RxFMh0W5hlebZ+q1sOZBR0aUhvdMYv7gBlSM\r\n91c/c3OrLL2IAxAWqZQbYSkSzdadIUi63MKBlntCnVWzhZXG3s5tQpUqhUj3\r\n3ETcJ1/m/ZfnwncrdrPAGJtQeuBh2K4xnMYsW9poNSln9/Jen2avcIm5HPzo\r\nUooy3Ehlxy/7BQMw4eLN/vYg6bSc5oOaIOLS4dIjjsyv/lpul6GhFb3NfQVu\r\nOut1rxmFyoFTyCL8NdZevlCRxPkAQA7Tjew=\r\n=vZS1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/theme":"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/line-ripple_15.0.0-canary.20ab6f5a8.0_1672342819902_0.6948695025174481","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a1404e52a01454af8d9efbc3ca970a7f2ef0127d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b9806f623.0.tgz","fileCount":33,"integrity":"sha512-d8HtbxgjPYGpx655xhx9YBiGeGOyRNcjR7Ca57tK6qE1qZ2bQuz8M4cXfShL+Wd2P6mrQQZf8F6Meuz5NDYQSA==","signatures":[{"sig":"MEUCIBhzgbgVBrV7QNDBe7pGtRF+NtSKR7ymKWapoWyTc9NVAiEArTIV2LUL+NBkbc3AYr+Q/jiCD7FfKGa1syREaDbSKoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh0oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCWg/9GaUjDKbtRmKkwcPHPp448UYqKAkw9wBofgSeY4K8U7EQJRbF\r\njV9GHcUVb5ImWk5MeakiIudyW1c1RchSYSPQ6WZVn1hpYDfF65E0iv1xiSb9\r\nEgh5HTCd25z4UynDU5Ps7Ga4bS1b5Kz8ChbUUB3GuK3PZPOuebbJvfrOxuUD\r\nLr0oWgLHVljhWMuE2LK5e6B/3fvKOyYeZVj3TpPVPoR3MP3RSu7aWA21mQrp\r\nker/CYJ72oT3+wZkVGCdrL8Rmx2Ym5mxlgSNRpIe24G447rv606lrhzvATN9\r\nrvTbkV1Fjk/2rCzU6ej//YLqVC0whjGV022LHDKf5jMWr2uVYCAzfOTryuuY\r\nkwXlgXAhOrKjAlku5D8lqCvYQeCZxqEnniCa3PkbX1ojU0WBZsykwYRc8m2o\r\nP4HZDork04fGYWEvOGX+ZsZRUgh9KWUoCCL3ZklHrccXYerClmwTzjA+fz8n\r\nyLWjiqmiq6SZmVBemeuvaoUvNYYdXByGIud+GxYsGVKru1wqKKVdyQMvZEzd\r\neYGqzA+B5Y5I1SiiipDp5NYmtFRyz0wSsywx1vgfCVbrqauRjyBiuEeVQ1I0\r\nWDYrnAQnFFk9tkMQfb30rpmc6huPkk9S7NoN0WGF3OE+9P3M+c8N7Ztm8csu\r\nAHdpxse9hSKGOTmeQrio/XmL9DlvvX6ketU=\r\n=9daK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b9806f623.0","@material/theme":"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/line-ripple_15.0.0-canary.b9806f623.0_1672355112428_0.15554240225234883","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bdb1b894e4520e1169517c6ef1c998d9bfc29e5c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.50c9f550e.0.tgz","fileCount":33,"integrity":"sha512-R87Y0CtSEKcTwaHLLBZe5J7vL4UB+vEITIRimRRlDkGcsJH3HoxC/fzVnPodb1UjNA/n+X9+hITNliRZo6dzRw==","signatures":[{"sig":"MEUCIQCri7IcsPwp4GbQRldbDBGpjBqJKgMYy0k2V3iE1HQR8AIgVIN6oVRRO09kFqYMmT4kUYaZJvtZYY8r3xDRgwyYbVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE35ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqF1xAAop9hBjH3kO4iBFBxYcb2czbN+/W/fgQV6ywpvQWNE1hlHSD8\r\n+5l2UX66/jZiaqyioq8cXEIDgMSZMBztZxM3QEC0zSxoerD9e/zCn/FkOOI4\r\nq/FRsxa10/6PEqO3JCcImR5bogMVKACInmggY5MFLTyugMQJDp11VjOyF9y8\r\ns/iu5S3LBIUjxl8aupJ8HSPSVlBwhsrhXC1PtFRR/Koayrjba1P1QdR0/54a\r\n++Fsatkl4LUTYjq0N0ngWmmV3fh++6PbXADKIuPM5ukRcNS3TCQKZhMrvyBJ\r\ntN0KqQy6BNizX3JzzDHI2+Kz4ASnR7XSgLYoix8JJLJJ1iVlxOdfGbn70u82\r\nzUGcGwQV8UQ1PNH/DIg4pqZE/fnQonj+Iy2WcEuQqIyN1CKzDZVKw7B8mIK1\r\nUdpiDuJkFfzoLQebTSy/XBLSCo2zkL3iv5aBeQZ+tB194E02EL9LeD1CRiyu\r\n18ZISG6PsbQIlxuvYCBzJtPuM6lPV/vG80Fo1/ArKXfRcyBXe0R2VTQ86xyy\r\n7Yo0xCxiHCgTdqhOjaYsz5r5/pmShb0RCcPKS9Cl/oZMPd2Ew48yV6qK4nJ8\r\nDnAATwBl6zuPntc4GzYOARxsheFwtQijUSoiAowBIDM47Oyeu7MkYTRBFynP\r\nzEs3LyMsePCiMjqaVdtvxygCihpibubIJaM=\r\n=uHvR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/theme":"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/line-ripple_15.0.0-canary.50c9f550e.0_1672760825144_0.3523518329520532","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/line-ripple","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6ac600af898391fe195517b7ff329f9c2bfa3b50","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.af490a848.0.tgz","fileCount":33,"integrity":"sha512-yZ4bIN3lv/70iJLfHXU5ZphAqESZ6Xz0oHOPGQ2HIFMUDDaDNFudI6kjfFsa2tYc+45fMd1eGfNJcquBKPFW/Q==","signatures":[{"sig":"MEUCIQCWRUKWrfWOOG0khsxZ7WcXzAgMWIRTlVxC4YnZHTX89wIgC6zo2mwBj5nlaxWbci6+wkxLjfGWTQfg6s2GWv39FeU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFAgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWpA//WnWSqe094MAyu3S/G/pQcqDJ6J9BduO6T4vWrbhJrL5/WxGt\r\nBb1hRP+GWbSpGEBgN+EdXSNY5HZFRDsNmYY7PWUxE9TWYviqxG3FQ54060jv\r\nqactZl0J2wMSVIZLZRv9P/0Wf9rKQiYEflx0Sk3evg0+FSmlpZqvOoVpL2i/\r\n7J+NQET8JjlWijfOcVZbw4E2E9vmWAAokiW3SjG54XEsLpEMyQ6+zU0Crftl\r\nhbWZErE2es8vDtVNu1f7wBWmQVw5llgwyF7CI/cmduCBPEtgKPPNuQ5QHDjF\r\n6RXCNKb2+egfYtb+Rz86hx/BtSoh1DxuODbLa47QuQJuNBQve08xCuBvPiDz\r\nWsi5UxWG92Awzn40CKTTgY14i79YhffQeIeB9JGM5RGvzONP8WDfIOf63rY+\r\nn/P2nidIZE/X1Wtezoi0T31d8JPJX+RCGVGMgliw4SoJOh62wGDxWO6A/fG+\r\nikK9uVwzpeLnnRnzBmyfWHZTEa9xtecn/6zaVHMcbFZlzAvHdK1talkYm+px\r\nq5q3jgl7NtdDXZc0M13CTlfojx2KUiiL3fj9KjI13ZDsXbYSigTaDujuuKJn\r\nFyHGDphEiBWdKWe/XlUqen7XdPLSO7jb45BXE18w+0ZLkyXFfxo+bkKof9v3\r\nm17xCxb7xtjjFUgYqPbWkskq7BN+JqGUzRk=\r\n=8BwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.af490a848.0","@material/theme":"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/line-ripple_15.0.0-canary.af490a848.0_1672761376043_0.23590496655690374","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f7f5a03018e64ebabccf2f9ac9bc4c0886380cea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7cf487c98.0.tgz","fileCount":33,"integrity":"sha512-rBCqQfegoHr/XtjnG4TdFXxLKYQmXLqnqSkWrabWeioSmZqfgQynHFFX8qgAzkBSDSOu9e8iKoAvDRmGF8KCCw==","signatures":[{"sig":"MEYCIQD5vNSNVkju/kzNZTJ27/a5WneEx5rRbzyrlly/YZgKDAIhAMa+7ncADH+kiPnrOTGahnnSp1Q3jaipoJBxAFuvZb6S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGf8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpxvw//WWLzBRwaresvhjw69iArLoLInNUuPr/hShh/ur0v/SR5nJUL\r\no9/uHZ9lSnNQ1TAKZ/yCuuBDYSAjsaYUiZbpRGUvXRIJHjGOBYodtlHSbQbG\r\ntUfPGdGnpBNlJh6rTWYteYLMJlHFoL7vBcvMy+ozoxaM/Gk1b+jVVdgUi9oV\r\nT6CDdIFIc1Cn/zDM/Dz9YciV1Gu0YsMdp+wTdeA3FDGosqsgopksK1ta4Bn2\r\nkwrP9YcB9KuZQh1YOMvQ6LU+ivXlcMDa3UrkGzo20nhGJWUvtBuJyzci2pnS\r\n2YtgIP04g2WHfb9qpUCTST66FoQ82UE17n4vkcIbK5O8ONLSQuvUugDo86cS\r\nc6RhTvyL2XGFAtVnHuxz6DZgB1GV7ObGn3wPQv8h7G9uQ40vur61u6QMLpEs\r\nniIf7PIQ/QTc/duHNMppfCZ24lzg+ClgPhGbsstqus4Kc7Icjll3zgchPkJO\r\neHjBMYEozzI1XnMAucwI3Q/oqgv30ykjY48GBomCMJweH2+gkf3VUpyRNRtW\r\nfb/kXHKFHo5KjruMptj34fxOBTGIP4t+eF2S+Xa1luu35VVZmvBDl3XByWtD\r\nT7g8iBS5FYlaa+0waMWbqHDV+nWC4zzlkSM0D5C/EAHDEXsVa8yzVSy5T+dU\r\nK4tRmlxyE+m6DTw/2ZmlGs4J7WIsLItd010=\r\n=7S6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/theme":"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/line-ripple_15.0.0-canary.7cf487c98.0_1672767484503_0.6763936106064403","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"097d89331f5031926b5585febaf95f17d9aaeee4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a52be2d5e.0.tgz","fileCount":33,"integrity":"sha512-fP2uF7zlQwwVmJEqD6RkLKyaMRLM/500IJVlm32ZJDkOQe0uKkoqdt3EcLhy0siezA3DrNyPiASNg1/2ejrlhA==","signatures":[{"sig":"MEUCIGRtZ0IsxSCjLfOam57GspUApn5ROf46bbNr1ERnIx1vAiEAoeIiU9r2x8874XumjKL+8Et8cChK+/6c2r+/Kgepp3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":472976,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH4iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohaA//Wnug+82q3c28mc3R+ZZ98C2op9HGtQNZjYkIIfW4fRD/hSxO\r\nBhL99COAN10/Lp5Ocvkvb8kjtWvMqa7WYUbv4Vpv/nvc9eYyWcyhf9BtnT5Y\r\nBb5fGuMWnjJKLQnWndkC8JAlR3UYGWtzo3rhB348l1R5vK+kQK3ss/A1FeVg\r\nFkdPB1W30KD79qGjLu9z/uncX5nWiTK6FKeelNzEVOwklRWSKO+LAR1qxYpO\r\ngQn/vETIYLWTxtjEW42aWL4RPr74nJwZvY2pocRchKlWmOedof9OT1Akk+ZU\r\nIrQPiD9xau3c39xF1+NocNHSudnp4agbKR1UpvXJJRADsNwgY2QEvKUrUbj2\r\nNv/jq89f1lm9jSs5b827ykbyhek3cz1vr5Qsh+EabHoaamyR5+SvLPRfxfFM\r\na1zVAac9CqHUMZ2qK/3FT0E0AanD9bH1CD4DuW8fdKOZAvdw8Xg36iWhzci+\r\n2G4xJTwTSOJrf34Yml865V4s7mwdxXKXCy2o4XpXLn/6yJDttZ8BhJvMHJjX\r\nds+WVF+s27IJxqzG446Xatw9hyO4/pv9VYdDIiW5ilGy8vAq4Ya/74h5r1Ab\r\nPOSI/YAaWqTQO4WLmH8JRRLB2wSZIKReUJ/DMafK6An2GHzzdnihB+Ou5rHO\r\neYiINLnb+HCdh879d/lIkHR2edOHQCzPoRc=\r\n=fr0d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/theme":"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/line-ripple_15.0.0-canary.a52be2d5e.0_1672773153797_0.7705390259917408","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0dcb6f95593707c16ff325eeeca8df5f4a9df371","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e38ba17c5.0.tgz","fileCount":33,"integrity":"sha512-FEr+fNp4ZpdMYMdMz82EdP7czVK3+xO74xrMqZ+oOC5ymvdzkXb3E5Xmx+AbKSVnL0kilUzOmbVgI+Fl9HRJxw==","signatures":[{"sig":"MEYCIQC1We+hL148bfLEeMSDlJaMlE/6TzxwbMk/pI6Wcj1XkQIhALGHvQiJ9gEEg0o+kN3mmOJl+ZZJ5jgznIUqzeKWRNq7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtKzVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrN0A/+MMqfrIRC9dwZnhsFJy71PvPjD+q/qn8c1bGU/xWoZiSQQyvK\r\nIAEafMOW7NntSGvqy6lMDvnZaz+3x/itX4YWqA8FZ6/oaiqg1nJPd7X4HV7a\r\nDXi1TdrtTJwJj7PzgznfDM5rvtD2kP+lfkaa6zOkOBCR/9CGx6SjftmgMqOo\r\nmFdHI2rbvA19EiUEyKERJpfiv6fCFhqfknlq8+RBQXtpB9qEpDGt5GoPzI0w\r\no2cypPOqZZ+rRZ3kTn96ySgLtiDxdQTtkaWQSjkAMAoKFgbb+4oT6VlC3oal\r\nzT2kLDxDq5QFZldkF5MndGvq0I1p84Ck9sCcmIHLNjH+sLFMkMLAPF3DWYU6\r\nroznUFj04hPEAj0RkhhZaLGJ4+zRpO2LcXrOFzE5lPo0I0zptJXe0kBpqXip\r\nwJFpKewcFQmc+CwMYhZAFoU3VfMdKUoMBLsRxm8JzAlxjiA80PekTEkCpvEB\r\noUy6OGkRNSN+IOt/AJ1rtQ7T6QjlXC9hOsau73H/1iXjD+8ButQrFiAJjpKm\r\n/RGr/CaPzepNhxuTHKBxttKYd0Fv/89B7DSRHgPq4EnYSFbSEBdc4h8bHmbg\r\nGIQPQT3koBOslIF2YFo8IZteeji2t/60FYFNFVsHj1nmCthBMwwTERU1cq/h\r\nOykARa5HDSebZPUaSG+0ii7Yu80osKsCa94=\r\n=dARW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/theme":"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/line-ripple_15.0.0-canary.e38ba17c5.0_1672785109514_0.6226721781017788","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c9548525986fba0f4f6389062750c1c538ca4d1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.49041a6c3.0.tgz","fileCount":33,"integrity":"sha512-bsdnRBZaiQQNe2apFJZgXIOs98fyvt4eI+m/nU3xssEzmFBJpomjEPzKBpLSpwyoc4IjncZuxEUfpgYBMFHryA==","signatures":[{"sig":"MEYCIQDrrO+qmWDhnk3ugxLrKO+WmrGuMKW5xdVPWXQxPuhAuwIhAOwxEGMx4oPs24gdzk2P8Tj+5qp+y/xEb3lsqkoehHsY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZhpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNQQ//fjGTnhlxmiwA3xemv1RzH738mNGjP3c6fAoL+JVLKQyZtbzE\r\nCkST+ZuYSvxV+937VXd0s4bvJbmTPQRjsHx45WjrnzU+gNTBpj226WAwngLm\r\ntTxbWSHKZboZMXorwtD0ZGf3iAt07pwCaByNLIoKLXtJVWnyUISnYhhrDyXT\r\nMvgPkt+eiVXPzyJQO1W7yKVoqVxgG6xbqcjkSozF7/x0cjJAqfm5XBUXHAlX\r\n14TZijqq00mRcllpt+gyk7oUzLfldnnDHShXUs27Mkr/0b3F5dUWAsU9cEo3\r\nPpYa67y12/bcPYhH0ZvhM3pMv3zDp1lnzopCquM0Bj3UgXCKMLgP3G+tgEdT\r\nn+G24V12PelSi36/F5QLHo2QWhcNh+2RHzYynPi+JS2XobGUoSgDMX4fzXl3\r\nVGHZlWiSSbBbgOcJpLppOcOtAlFaxL5lUWAu7gqGLujygQgmFGOe+Zo9tL/w\r\nd71IJbXiMdzZfVfEWCR+ovXYHD6WecOWQtfZwoSAevfuOW/h/Oe3S9YugFrn\r\nf7R2AoR1UaOp1A7GLUh8Tt5wSHr/nTq9m2l1giWdTgwgnOrGXMCWkFWwOprP\r\nyqNSmcnpc/bDl4rUcTnpm3qpT42dVGf1YrNHDjnf9oChKDTWKkRZutTecNgL\r\nXcjoD8HxP4BeylF5eVfoAlo/S7pZMesh6uY=\r\n=Cv/i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/theme":"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/line-ripple_15.0.0-canary.49041a6c3.0_1672845417432_0.17946008740815445","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fcb3e79ce46946800d4a4d6e985b63afe0af4e3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c492898c2.0.tgz","fileCount":33,"integrity":"sha512-Qdni7wG2yWr6HaQZZqkEPwt0txsZYhdrGvZYg2qurTeXi7y1c8pr63HUt3yUyUv03r7VNIi+XzUb6OimcsMjOA==","signatures":[{"sig":"MEQCIBRoh47KKtVxe7dkCObRwM1NGYATjJirRAUZHj3nI4k+AiA7Oo2swHhbgbtITw7W7q7DmYnzaP04iwy+YkI2S/CbHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbkaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraCQ//QklLGlLDT1DJRB89OPUuD1LyYYzk1yGQ/L+PWzbqo8EWn1T5\r\nf7kP09r4oa/sOEAUKK6Z19yfgD872sgB4bqNp/e3199PoK13slR05xHsqUKB\r\nW4Kgbs2hoZTR2w7mfLhxH33fJIFgtAJnodJzLR4UgGM7ZpqFDDS1RqbjPO2I\r\nnMiANESrLOmb8Wld50k84zkrLw5mYtXSRyqpeeRRXumeCo+GCHaBHgs9Aqzx\r\n8+gy6tzOYfffi9jvGrve4AOHScEuOqvXLqMvuOrllhI3iA6NWx3EJYAQRwEw\r\n0F0tx8ZvSEq1Mtq4sD8nP8raFDiIDEwvlvV6jrc/GinI+99BBS9PNK1ACqQd\r\nZbUiZMCYhzXPlh8zjaxt0Pfv+dUl8Ek8ZwTNSRguhKengwMhlIFC3FGdwRip\r\nSn4Le8DRIKEOsKOTAEsabuMvUyv4WWKPSZtDir/k+Bq8wbtIpmZ4vBYBxCih\r\nzVoOpTBTLJb9Vr8qutm7eVjaQKGCEdPMFhUWq+hYouoaiZBVKS+IT1dIN23T\r\nib8yYCEZkIkn6R9aNkHUBvprdl0Wl8IXT1tMJpiIAyhg64VbZu3qeavxUvp8\r\n5P5A4FR5k6Dd5UHCt/P1MwUdx39lmloIrGPQ0e7yPQpnIz9XXxG5MrgaGtkb\r\nw6wd/5BqgaBdO9kyaTFcEeJXw+tD8wH9iao=\r\n=Qnv7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/animation":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.c492898c2.0_1672853785912_0.81162334532181","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b4662207629a4e984b9b2009d1584808f3c8624a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d7a2277de.0.tgz","fileCount":33,"integrity":"sha512-BECSncqqvqC7SGgPY1N633n7n7iakmt2Hm+dWjW8xy8JF8vob5zLGBXhDqeBAN9Jf1yObb96eFMNsEsLA5zCSA==","signatures":[{"sig":"MEUCIFTvQI5fWvWk08Gwa89Lz4+vc2aCOI0tO3TQ3JB05ZdGAiEAqeuCZW943xitWUSpRHGOUyyeOH/SF64XU7Dk4pgn/qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfEHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdmRAAjEfVTOTCK3hsosROAaVTa0m2Ah6OSVm89qWj/xDj+uePXyry\r\nxN5BO3ARqdCHVnIMISscy5ketv/JioxU7Gi+oQ0WnO1Ubu5k75u2Mjo8oj8f\r\nVBwG3ekzSk/6VnZgaEPS/coUZFwF9T8LOpua+OJAxnInxhauS+vURRuP2ALW\r\n2GMIg3mrDzqFZsppi+BWgz5W1D6ETVVwTXuvez5KdtfV2E78Nev18MHUZABV\r\nqp00Z8o2hzw2cDiu0w6PFOatXGuqSxkUS5X5PAXTn3YzVlY41TMl1Km3YdRy\r\ntqE9wpBAayacn4yCVdQ8PaaX6xs6Ubsj/s2AMf5iewCjuwnwaVWrYv8YAWuK\r\napr11x1dnL0AF6J5MjWv5Y2E/KSI7lQ/Rt92/+7Ap1C7/91CpLMHqRzifmko\r\nygXZbOjwpwT02Iii4ekCWHKyAz+4j9d1d1FphBIC/A7Q9QYqOZiFHBGSJ3qL\r\nFfMz2TfI2TN8l193FIMqlNNFHUuxCQyyX3sZ8AR9OpqH/qdV60Ho2Rhwe/zz\r\nPsaDkaevbivizgShlGcY2UJzCArGJMEe2+jD539+xbtXYnPFBMHyXPtPXO8q\r\nR1RAVquOUzjxCqHPnAbYYm+t15EDLq5kPT9yalR03CJRKb3wijU1nt1Ex3tM\r\npQkBBuGKSpk74+FGlzg3YqmGN+W9AN/nNmU=\r\n=SuiP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/theme":"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/line-ripple_15.0.0-canary.d7a2277de.0_1672868103173_0.8229986425917959","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bcfb1bb4061f2dfb52cdcf242d1963470db81fd9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":33,"integrity":"sha512-a5pmIjv0p7v85xNkbXCJFnQqrWVHucyCmXTVj5iJlR1vsqyUR6WN3vJ6F7yFJOhDMEYXZlqSvcTbZCTibR62IQ==","signatures":[{"sig":"MEYCIQDqEp7nnRT+FSS5Yn8Qpx03d5gIpNOeE2Ir5UI/bB2nnQIhAO4g0G4/qJoCVQbyDbbrki/5P4lObuJ8YIf513sgM4/t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiGUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9wA/9FwTuCrhrLvMl6TqMnXxMR1EGPUYe7NjP4EFyYdmLx9a7xnSm\r\nUYBRk/mUHclMupkhfO8DTGuulFru1sd6/EjGyGl//UyYQbm2QIc9P5sfrbqa\r\nPhZMrEpo9ifjh42P4Gt3l65O/9Ts04RDZridCUGgtXpOIwIemPkf9Yj3T9MH\r\nQA4IGdFGpcWzCZbtwEbxpKcYcuPc+O9hJA0tWLmrV8BStJQmNHLZCBZYfxln\r\nMm1y5BTiUropgP7OODP8I3ZhWbp7zT294AxPTOMAq2qeLy2i3+EZwiJ5i7VG\r\ntPFVHbv4wWLCkByhHTQXHMOS/8BBIvxyTXWfGG0Dg6+UJ/fVFAMr0v2yZXLu\r\n9h7uQH4qtkKFk27UA6gqGgFBJAoJX3ijAexST7rT61Sv/HKpe0WwgoKm33Hr\r\nNqP4TlaU/50oFEPO+M4nwTGlFe/w2Pwx3zTVqu4IrkvvSDEG/v7jf1RJIBxB\r\nqkyY7HcbVPYulTL+kDtnWrdpe5XANf7OxWz/f56XuyRCQue/zORF05srRAsa\r\nSqXpB50aR+qPesr4VaFcV41UvDAduD9cr0JcQA+lO6+3oMQxFMP08FZFS6q2\r\n61fE3F9zgucR1utw1jQl+2C4jryMgcLXTJ7qBSrq7eaXH7Kk75vHrA6plWfk\r\nFWIM0ZRTzZr9tYwH0uQuG79GMNluZ2jDqQE=\r\n=7QWf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/theme":"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/line-ripple_15.0.0-canary.fd95ca7ef.0_1672880532557_0.33285133324886074","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8c1929fa6dfeada364cf787170abe5f802bf3337","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1eb44faf9.0.tgz","fileCount":33,"integrity":"sha512-xUufKDMF85Qk48WNoWcPmzLOZG56W1+2b1IKkjc8UuHrOaXTnH4nXyJqfsslDBt3mlZNAXbcvsMNBnb+yotMfw==","signatures":[{"sig":"MEUCIQDoQ2P1/kjiNQWX5MsdJjvJnFa+UbRvBEy9N/ys/GR+7AIgN4sZuvApLlDowaRHp3kaySAc51Hw6hChj9LOcwVfObI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpOdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOnQ/9F7yZ30IyDOL+P5oo0fV1sliS0wliKswdTiSBPt5VqPebDspq\r\nmb5gA0683uzMwZLpynkv2XvHhZo2Cz1DQOPROWtb6fHvOAMF6vj9Xl8YOhgB\r\nBMkKrYZt4Z3tEQT/Ba1yGKRutvJ7eTfSATzjH+N7DZNl+7Vvo36gLSPBmoUa\r\nlMJl5x9J7ZB8DJKGDGGAQkGqyuvbSlQ1P1oaeozmvbRK4HMSLEIZPJz3Zl0z\r\n0U2pk4K5KuVgh93UtvGDDOq8EdQgfBIuz01mv2vkbh+aTIacbfWsllittgW2\r\nZcnD3l0mHGmKRWAufyz90lwInkjBeh1CZ0E+cAmO8Nq8cXakSQxUB9xf/xRe\r\nmKrT4F4i/Y6YOlIChfjJpTs0y4DTJTCuMuU5BAEPjknBzsTueW4YREaV4urG\r\nEcXy1Ti0dAVnSjv53ns/K41KxEs32ArmlnEYdqc5ZUvtXjXR1denyyRUSvLw\r\nxIPciaLmCXQuGFn4MqkiF4/+lQOMcYjbIhyFCIszDZvBMmAOZLcyapocq9kz\r\nr/215Jg6tCdZ4C/sIynNm/WV4g4177DveyJGvs/QhSxq2FkLZ/nirJvlvNiJ\r\nHrdHmDopwQfeNedhK5KmqyFVipVJNS0kARJhD6tTImCweYP7wBGZgZ6odSFj\r\nhqC2BrFMUiLI1fcyAidtHzlHZ3jAjhNZbzM=\r\n=UQ2R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/theme":"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/line-ripple_15.0.0-canary.1eb44faf9.0_1672909725214_0.4314477280986093","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6f89b13cc5de809c32770971468d695a47d307eb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.adcdb7db9.0.tgz","fileCount":33,"integrity":"sha512-LT6AKgdbSyOZO0d6pmq0VzTNjKlGTb1xEj7Z/cZo0kQpmZtdg01He1EbNCyebF35XGUmaBT3GO9cOCwQsHbC/Q==","signatures":[{"sig":"MEYCIQCClmeykgH5draN1SQ2weX9DtwCKO3R2P/GMOPPMSx3yAIhALAOzXf06kCsPXJZfJ2en4qez88YfbL2wOrEhmYnwc3e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvjmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj5A/+P06hSM9/J3pFLuqyAdjJ3rmsTiXpnO4S3wHvBAFfkb+VRWuk\r\ndhnDnfvU6suEfgFW90Zhi2QhBnKTRSxdKK8bjEyWdAYNd8ick4pwY27wu+k/\r\nUPYmGiPz20BZGZvaUM94Lsou2vMg/FOsa8IIv0hZByqP31HoteQZD8pZeFSC\r\n/jypkYNgzzknmnQmQ53PmkxA3yXzHKArsCvlpQY4DeNZJPyaW+WapZvWrh+I\r\nqzS/aKKe3dzcWX9XSSLxZUWUV8UKlnJHhU06wyf+8WvpYgQu+UAPz21ah0rP\r\nUKM9dtrEH/yGRJ0MvUsPkc4TLPp/S6dAcgYPwC1CFuipMuAylNbJ6BLg7q8D\r\nhVX/rko8M15EpeyjGoCCtpUU/ES37sjlJyVU0pFL+lCEI2zUMl8UUaadO5F1\r\nHVnKRkqfSIyW6kAV8Ehr+ioFNIYvJzT7oorWSEogHDURL1/gKi6GYoQxPqD1\r\nzip77ePGsDQgCYsFM4Vutc8P/T9SQJ7FgWaZpCn4bvssHW7p6x4bPNdAZd3V\r\nZ9RJcOcc5JgB5TyBC6dOhpw/nCyK/6xiHt/wLmejWcYoA2QMzL8l5l6Q+ZIK\r\nTjGcYisQYKdhWbMv6ra55RxNqUWH+/LdLbzLw9u1CmZecE5jpiMcT9Mbigi9\r\nFkLRWZsbAgCSgcMvHCDs4PpJjEkg6UxMD0Y=\r\n=wbBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/theme":"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/line-ripple_15.0.0-canary.adcdb7db9.0_1672935654352_0.8826057445403515","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/line-ripple","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fa5e53654eb6be409111122c402d971b98c0f412","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.067af7eff.0.tgz","fileCount":33,"integrity":"sha512-5lTBcPPp2WnRQZ2Mn7kpLQfrV1CTCDO8IKO9d69gTwEBgMWmv1NPIFwEsXFbEljLYnr9A/0v6Z/AGpetf6aKsA==","signatures":[{"sig":"MEUCIDaPn/IDRqI+fAjtIzyl+6kISKBlAPVyiZktUdEpulpAAiEAkmK37Gx+s0tr9arASX2QdGk9AfX8Oek/NlDLXTmSgs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKuWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlNQ//Wc3di2gP2VUDd/lnr6ZrfkZjzvKdqc/2fBvyvRlSAvfEzaMt\r\nMdpJIXaEtCqkEKa2jOBi5FQmMIRN85NjsBJfnle35GyB1KjIwqhegqtBMKtF\r\n5I/JcC7iCHvycZX6srSDdZo8QYmNGsHJcuBVc7I0kzXj6mjD8FnjTA24yKYJ\r\nMQ2L/6wohj3nYzQz/492ZQrTH5snSh4UKu25Q+cdd7G+yKp9kwzVuoiFpNbR\r\nj2Vbmxco80UTDM5gIzi3xFOHNry771MRT2WeG8UowogCD/rDm0RtA7LXjhNl\r\nEMlLHTxCJb9a4j/jAPBQfxt1lkEW0m7CywY0xT19XZXNNn/O4NwkpN+tsAW0\r\nE8Wd84TYfGsfbrJWRGd9cHH40EMcqIDAJuiZ6Vkt/tZDkPbceUUB+AAxeqgN\r\nTMN+4jn4+Ix8etMfFdyLeEKlExeeb7B1Y2DgvqCHTLdo7cwMWYczxGJl+YF2\r\nduckYkKi/BbruvySPv0eXYMM8+cKQi2rc2Lb0c3eEX5/jryNACYp7kw4a246\r\ng/Bgpb2rNBRQWcsbc9ehgr7kEhD9y6IIeDW8AJ0ngu2Ifm+AQ6tslSbrTvDj\r\n+mba9oaLp9w86Qs8oaEfJ3mukRjMlIDc+uJF2UxQDJLfwBYEqx5SSVc8nS9X\r\nof/asU/V4kEt2eIbhcdqs/4Oij43WBM9Fx4=\r\n=ZDTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.067af7eff.0","@material/theme":"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/line-ripple_15.0.0-canary.067af7eff.0_1673046934634_0.5084728208581799","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e6131b32a09b62004664c2db098cfc1e46597314","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.21d1196a7.0.tgz","fileCount":33,"integrity":"sha512-4tafovSwJt7dPecsCGzKpHoYffy/8sv2Prsy/5R07tEe3JDygwkyys3YoJ9CAN66iIBSJOZP3N0scy466IVJwQ==","signatures":[{"sig":"MEUCIQCWSrIRBx/Qx9E7uekCNaI7gDBj29FnpIeMocwURiQC7AIgSucfp6AsJAUIEq6tlhnLSYALOXC4GTSAnkeengUYm/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju++OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJiA/+Mf/uv+VFTc0y9a/Fk7J9ArAoA0S3MpSgFmY9fq2Nh1cdbjJZ\r\nLEPXFN7BsdCYkZMwDs4FL84syk5jtY6aKqFO+XfCFzmY+04Vc9ZDIAa/WxUd\r\n6aDnhV1ByY2z8I6OmYAqM1iF3yvLVOeot+og/yNcq7uosBnC66pbzaKtZv7Q\r\nTh5K6CyEFK8e2JTuRJo99kDudGzyFSrucgOXEhx3sc+tXeS4bQp0Bu1QgCVd\r\nED71EotDiLeOv6nmK1noumd1szpgA5z4kDYoe9GSrLFce7gBJ95LK3QX3yr/\r\nP3p4BcQ16FC2hMlPiKuU9tXDiMgdJ5ZJt988elnmdodsXPNGzaJsdlJqrtrq\r\nKilKgAnLVuDWYJOtS5Yz7w3DDuaWPyHvH2yz9HQgPaYh2bJXGMGYZ4TJux2W\r\nEq2GnY0X31Jojrza0Judpkxp8WjFXj70oWgmC5c5IYfaHvD5em+3ZQNBon3Y\r\nmFOTlOJMPdOD57RYrFZMFdR21YC7zfYdaS+EbN+3iOcKiXQTOPPk1CpiD8Mq\r\n12jGbxf8/TTYvskvBuhEhALiT1uPizRSVLdHK8bHSRWAQaMYKTNdNiZbz9h8\r\nprL7uSJQsdmDV9L1vvmPF+7CcccbHR9VSIw5BCStjxuSgjyYAzvoPAs/2oWZ\r\nD3FwuFkf6WRwcugXy3HuIaJT23/mYkyqP+0=\r\n=zPTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/theme":"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/line-ripple_15.0.0-canary.21d1196a7.0_1673260941840_0.9480962376751148","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c711eb3c9af7cce67f2a07adc3b7c08818d2ce9b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":33,"integrity":"sha512-jQJTJ0MTT5kJKuZHWHgqlXRjDnZq0TAmEKfMg7XKBM3fQuZ3iJHP8Njk6EQ6ILyyuz7Bh6AUczmgbqpZnZem2Q==","signatures":[{"sig":"MEQCICsA4k2Y/oXjgh6mZiHwNB3Ea5pMPECMY4z4GFXzUHe3AiA9vsM+UCLiAIaanYvuiRBLGYP6Mfm7UTHNDwv9KkAarA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJPXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnmQ/+PYYEdObUSHOhX00fzBK8xf4xFAymCfhD0GXcb7EVhI7FONd3\r\ngAXYIvOWP/2qWEcRAoKZ9i73Ib04f3yk6CP5wJSMJ5+EoYJTeMVul5FKKynb\r\noUnvG6thDASpN5FOzgKg1cR/2GG5YXgv7PvryMROpScjEU87d3I5R7OaPGMA\r\nSVnyi5NLPH0Lk6nxHY4Wdu53hZ3IfFCuCAdKvn4VjKf8GUYZPq/pjm5iM0nz\r\nifD6XtXDsU1nxRM6v3pWvjueVTRbMiFmVvZPMt7td05Nik1v/i5jFf0t4YX5\r\nV1LZZlkq9RTQOcTs/x3Rx5FXIwZLdyT4/CFeJvXGgjdB1Nnfo92aDur50QwD\r\n7h9Gy1WPgmpNjHZcViC62zfxGwzVQHIXhevcVa+oFueo/bYbMKIld9k72yAi\r\n0Nn6p+bIbGGnBX2OvIjD7akQG4oZ+JK2hjmg4hGfQ4PFx1CDGc5MhzOZGvCl\r\ng8S/0NtwT3wYUFLKSpUTPduXKWtg0QQe44QoPs9MShhV1M7u9Vhq5nIrb97s\r\nBlkEQUnozpZ3isQ6qkkRCpsCQzqveFip24jhXLknhLACvqC7pgr8eeLrR5Js\r\nex6GylGYjp12y8XZeTxvP5btqOGRKd8AC1uMPYTB8qMOLo0828vCRAAewkko\r\nYizhj8UGg2doZTtHj8NF+lEfz+R7d34qc30=\r\n=phRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"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/line-ripple_15.0.0-canary.8d2d8d3c4.0_1673302999751_0.71530086427809","host":"s3://npm-registry-packages"}},"15.0.0-canary.f476fdece.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f476fdece.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.f476fdece.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"405e868d2244a76cfbbebc6fb9efb4c50de329e2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f476fdece.0.tgz","fileCount":33,"integrity":"sha512-eKaxqyN+xFsGxCz/B2rW2ffeHetoiSYViqZwZ5x9WG1+fYR4ORor7Sm7aSsc2KThZLPrww5vtOMiATP0GhgScA==","signatures":[{"sig":"MEUCIBVXqHgFSzhAoDQQ0pVPEGg2kASBEpbxreBjK09ieITwAiEAguKhDsWpGBHhRVB7NSGSKGDw/vZE/NUTlsrBrVpqAqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvY7EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRfg/+K+b0D55Ldw6aEXFvwimB2r/3OFaNXjXMPaRmW0onq7oj8haC\r\nnEidvviciyJarhmbrIz0GZc8zt6vi9GrIoTiIDbb047ddrQVoZNHklS9MSZL\r\ntbmTIX9R7U5YDGUG0dXMYa+3q5X5KQ81bRf1n3eJthqfUHswrWOJ4+uZe4fI\r\nIciR3yyGGtBrb9dq6IRmqVsFX8kLJspHrFD506b6WWOxmbtPUJZwFV7AKZpn\r\nuZ91Z6RMgEk6dTrx8aqYlbJ3JW1HHXS/r5xKesE2UoYzXe0y6x2tfmhLkRw1\r\nIO8uMNNJymi5EoMRMmxGKoc41J/87AX2em7+Kf3lGaiPiAvqrmd0v5BslNg+\r\n7kMbcTCkQBHZ38UF3f8HnEzt66pVB7c/RiMQ+YmI6SvxXGA1hNvl/73B4MMs\r\nl/J+IqQdUUnfMEsUyTubsdZy1w3CQahTYUZnlnYL6AaAYCf6b/Zuvt6qxaY/\r\n63gXiOb5fVHWz7+S8ckZoNY4/VAlwJI5drwBu2koDcpH0qWvf7KiCsJSNA2u\r\nBfOQ0vEC+GlZcLsy4k4ZCCZZperI5G8kq4O5gvQrCBJuWNaMZ+OnJSqHQGrq\r\nXuZhK0igRKldU0e38ruEBrEKMH6LR+KH7Hh3izqeAcIRu2DCOuE16/b7vKAT\r\nFCrY9ptX0VuGzBSm02nTxW01pXrJ2x3eayA=\r\n=omBV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"672d5b55da7c88d57180edf75e7ce65ca2fefe0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f476fdece.0","@material/theme":"15.0.0-canary.f476fdece.0","@material/animation":"15.0.0-canary.f476fdece.0","@material/feature-targeting":"15.0.0-canary.f476fdece.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.f476fdece.0_1673367236007_0.9447504440089218","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"334ab7930b2c516558bafd1a8d8cefa8673cc96f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":33,"integrity":"sha512-quXT4pVfuu50MsGZ3wq0zg//SxW+95Y1f2fv2HN7FZQhqA1JQpPtyas2nnwRhzGIgDy9VGXzy6ZBvTA/Y8t6GQ==","signatures":[{"sig":"MEUCIQCfqcopk8nlrGjJVgKY7iVmWOZNUAu+38f58YYpBSDdFAIgO3RvntmBTd63fti/Z+La9otu2loT28icusx0f1PymEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZHnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSqg/+IoAUkcBOiIsK0piJ8mHzUsPon0Q3lBf+2SgXIWIOBaIBhQtP\r\nLNZESbELFX65QaDN4vIU654KytYQs1NR079TFyORso0hwa9Z+F+N6YxdAIGU\r\nriCIgDbekIZikasnn0F56X3TArwQ4nDs4f+6i8PbD8FUIcnBaSxSXcZbEUki\r\nG7gjoYoxwVS4b5XBR0oGxr86Z2Eb36vs8AW+NwGdzuV2jLPuOhdhInq/2afz\r\n8vfT4uiYeyNbjhcExyr2jPPqj18hqPhVVAp21vat8F8JlyYULDOJNqR8TWdw\r\nSptK0Y8igIvyxdTXX13K8slV6H1JtVJVSOZEm3rVFs62UN+iG7QM7Hg7avZC\r\n1xK4RxImGkvOcORA/yy7hQ08U1mW2ufhyW2QIoLR1E807+Pm1xLJWBa5BfzF\r\nfYOw5PPWW3d0FWwJLSmBYvjJ7kFVU2Cz9XHnKCuuyP6ZzACoDAiIaqGScnn2\r\nq1PLIIyXH95V1vqVRaGjBkSg8FhpnbpM+CTsRWVdqHNdw6cwDd7/Eu00SW78\r\nV92PrgyTUn3B+1Suizd/WmBmGpm7wfMnDRd0t2xfdqnhCpdLNigMgr23YTr/\r\n8q/97nUjA/tnGcRt4tUAuZFK7NXqgta/zhtITJ7WIRRFvfXE6vMGIyjk6ikw\r\nvusqCU511sIBmGuy4UULP3jw5KiWKCIPC8E=\r\n=T9KZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/theme":"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/line-ripple_15.0.0-canary.fc6ee6c32.0_1673368039300_0.2662602276206889","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e1100c71c8e9e12d61e385ee6a3d814bfa9b6570","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.73537ab0f.0.tgz","fileCount":33,"integrity":"sha512-6rCCihjjvJyQ2BJbJ++wCdhv0ntR5Bt6CbsFc+tucziOPQ7dl0yEzYqfFs8NRSXbnBLk24bguYwqKIHKrRP1Ew==","signatures":[{"sig":"MEQCIATWwQe5nmF7dhq3poUXA/E3bEFv/36KwJDcmKVD5QtXAiBF1FbVbpLaTtlILkeYRgR63U0/NVxBfUYX7DCljMwI2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaovACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqANQ/7B2n/8qc6Bueics6M/1QSweTDCmroS+cU3t6Vxfd6ErhYg/J6\r\nlCdbNQwc2geouRcQ3XRIRJHy0ROoOUoNCa8KaCfuxspmdEEklxydMw1t8jGe\r\nLk6CY4HLwJQltiWOzNtmRx32ten9Mqe8o6RKh2yyzSzpKLl+jEg26hFZmAc8\r\n425b6m3eVNwDS3Pyc0UJbw4iij+ibggM6gYkhFwx2LeRk9wzMt39z954lJMR\r\njjzNp2ZMPLXvLag1PXw8p3RT/kSrJApvgz/2ik2DnC2+i3We/Qv7khlTbeJ4\r\n3pncspM6Wu6ZWeEOCgSC3vtXIVs8uffRSCWNU+N3S9mCHVz9wAjJFkuscKRU\r\n2Y7VkaC4rWXxPBq4habTpeLuWhCbpy83c+NmV/yGt0Gnq+8IGeLIbN2J3d12\r\niKg7Ekl6VAAPw05GtohRbmzBNlM2Yq0Et2zOG/IcMXSTsu1gJtp3K0CxBrjS\r\nfQrlqETopZtpDywQznMkK/W5dgyC34GE3l9wGxAj3fUvlevVz4tAxJDo5LJK\r\n04BIYdH5mqF83Z/ijU9D9DIDYLCLouJSwLBZCya4RwSNkvY2LSArgvSoHlwI\r\nPAA9vyEojONCgWbvNWXfwqsyec/ehXwBjWtiKRnrWmDW5jyWVDo6j9R6GYjp\r\ni23FHg2uFQBJhIDb3nyezYrSKLRs2EmrHTc=\r\n=al5B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/theme":"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/line-ripple_15.0.0-canary.73537ab0f.0_1673374254890_0.1998664889004269","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/line-ripple","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"df4601a780dae919ffb9d2bec05fa189238c9d67","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.684e33d25.0.tgz","fileCount":33,"integrity":"sha512-7hRx8C/e9i0P6pgQpNOMfTwSS2r1fwEvBL72QDVGLtLuoKKwsjjgP6Z0Jat/GeHJe87u9LQvGBoD4upt+of/HA==","signatures":[{"sig":"MEQCIH1iA4D0ie1cJ0X3YTR92ZlzGMM0sxUoWRNNgtxvxUvuAiAlWUimJBBJEP9Z+R+42bLicoOJp4BRPu+h9d6VHvWwJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbniACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop+A/+I6/9+EQeDSfzHkkgtBzfX1AhwJuKEbpX7q5ueHpcKgVQ6awr\r\nvHdYKo7HheI+7vqP8eMjVadJUCedXiDigYRKZUglXw4ei9Xyjdv6sJEWRtwm\r\n7vxOmVPX2Zn5d+f2FYHR+mXEIH1o1I82s4OL+hmrKx/ePulSSk8hcbMQj4l2\r\nHdzeOzCalICa27B3/QanSrL8vXH6P7ND5057J76w05UZJ7j5ESIDPlMBErAR\r\n8cdQbzsj0bTbIp6n94ihgdYtgoaPlKlTn+KvWM1iJjVV2NfNS1sJwktDUTuU\r\njbrybowV2qqZIuHhLXNCcjTF8/9Htr6dHCYWE5zt0ijJhtxOLxSGoK3P4urm\r\n5iNwrd09+hZugICswNhr07TCigLDNkgOCRLSh0DnvyHgOLekmGS3H+ldXoSh\r\nXFragQuNPrAWNd+Kcl1gjUL6us6/9H1lhd35IgzVKrUpbK2lw6kRXzyXrHsw\r\nFtNAIUBceln8XfX+st0Rzkf8slpm39vtiyzFf/rU2D9VNusq+aXpQBR06h12\r\n39k8iSwVvQ2JSE8kKeVQ5u8El3vouh8QlyRUOqsDe6mm/AZDXdjJjNk6SE04\r\nrlYI64esQ798AVcAPfjNKyS8NoWSMkngrHOrGPw0+/WGbL9udD4DlMJMWFGS\r\nzZkF9IlZTYa6lpOR7rgPU1v0r0NHvuXR55M=\r\n=iTpX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.684e33d25.0","@material/theme":"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/line-ripple_15.0.0-canary.684e33d25.0_1673378274311_0.03975574413191896","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bc7e2bcce1dcb30222251d58dfa0a52f36ee5369","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0e89aab6b.0.tgz","fileCount":33,"integrity":"sha512-AmPsAEf4H8qop2c2pXIRXpH51y2kzNgS4T6GSGSKETP8GRiTdMP54J7j9pXmJBj0XFb1SvhxFWh0jRiENJMKkA==","signatures":[{"sig":"MEUCICmTGN5YmunlUd3y0hIdh3VwVKxBDs8TKLrHs31EkqaWAiEA9Q8JLMLfxZZomsOr2koqOKaSe99zxnJnZB4OgN7muDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuDnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlEQ/+LIRomUH3pmfv7O9YRh1SPP7vTt7rECPsL0kJvjhveqDetOMP\r\nKd5GRjLU6VlI/MVPvvU85GRhfgthO2MQwpw3l+fT7aMZGuAY5ieBNIBMAUDa\r\nm2NYyGaZ2IrF7DjxQZ9uJhlMeasBsjmHF3hnbD2lxVe7k0tqsuQ8JPfBEfHF\r\nD5qiOW5l41lDe6fopG/rX99A3kHsBdFm9XQVv0yd4bXm+98a2yjX1Bh6IE7P\r\nUZoduOJo7hJclU0/czGFU2q/iOCrNFXOpAh+2tWtylCq/7iCuxNxrKHpOof3\r\nU+bE2DTobnDYV3tG7TxrVl8FeE2JunztC0ybg6JKfJpnzFl+ch8NxKCQm5xb\r\nqO4931Bjht3JVi6vw3SSaxFCkHip7igaOHwVPMZyxjBHl3CD09Lj3rlHIp7Q\r\n1rXqrZjDN2uuUYZVLce0sBWuGO0zlq9mX+COOuSnp90fKiBtULxacj2MQHBD\r\n7BTzgQj/lqD5mVRe/ge1UwCeNq0lFmDsN3m1w0d4lt+nTG+eVj+aFr6VLhG4\r\nuueRLz5mqJl0Re0cHdtGWsC0nXSfG8mL0FM3CBSCcIn6vmZrGUDhQWgvdr4S\r\nK9Q4V27gfiR//aDQlb/kUxRI8vduNH7UiZ5SOlBP/lkH7QfPVRsZMC9ZOc/6\r\n7ENPsT19PLDD3ML3bSQwdI9QwsJ8SCpBIjc=\r\n=1D4v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/theme":"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/line-ripple_15.0.0-canary.0e89aab6b.0_1673453799564_0.734422871062419","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1ed3b3906ada7792210ebd62492405294ff6fc3f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b0103d10a.0.tgz","fileCount":33,"integrity":"sha512-pLcCtwc1SLUMAqgl2Ihz6cjwlDiSxFaRhgEw1Ffr1t6FgJ/EXRraS/l4fru6IWY/bWgdPgK8cjlO/HQiMG2KPQ==","signatures":[{"sig":"MEYCIQD1GmyRVGhKQbz20y5RlCQqe1J1HF/Ipz9GbGArUf6SfwIhAKpfX1XmS6do2sa71KAvsTWuFgnH7Xu1xOJEr4MVv92T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwn0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrwxg/+Put6kTiezuECfZrKMxNkrRD+e1cwdkW8gMSdiLX2XBLT8O69\r\nr0QQijuKNcxh8SJ7YnLUkSWZj2ZEze6MueCRd/DsWHKROyhuL6cGUIAP2xWp\r\nVJ8Df9ROKqZgexxWUpNKCDmyzw2EfzX6fq0SzOoU7ZlPNO7tBLh5N/EAT8xw\r\nxDy0oF4oF8OWgD32KsAVte6yTvnn6b1jkV630Ft4B/VroSvDlNVhl1Rq1v8q\r\nYnSb1Lx+lVXdrHJ2xgv9MoU5vWv+9x5AbMhzndb07HfelBcA5HUQ/f+JQ4Dm\r\neHCX+ukE57iD75x7XYLeWVzsTyeF6wJUOJq5J53QaLMgA5G9HvRCtysNKl3E\r\nrG1esYoyhczHznEgFdhIAGTrOofgtJ5p9bFQ3N5MrjL9sdl1GAyssraruauC\r\nXYEWvq3iV3nVQStFAzivoHriwoxJhrCs7xH/FxRFuWqmzGA2AeWBlNEZTH68\r\npZL5pNlsQV2dVXUQ6Ee3xYJuUitySMyhwTXuJUXx4PDURWq0+OFWI/MXE8Qv\r\nix/Q+rtr+9LV1+4HyKPz9MUi2cIuXO5XvrFrxS0PrChQzvvVjYKonvDO20Jp\r\ndGI9AT67oK8KZ2/6oQrhEWyhFoePAmcVuBHdu/tEr2l42BdCBHlboF4Ng/UB\r\nc6TreGKSyjZO8uLuKKhGambrhklasVRK8EU=\r\n=qqZl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/theme":"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/line-ripple_15.0.0-canary.b0103d10a.0_1673464307702_0.0253149323400641","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/line-ripple","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b8c4ad1644be90ef484c07aaeb371648b2b08d3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.50e7a5312.0.tgz","fileCount":33,"integrity":"sha512-FEE9jNufNlxOnuhpWIUHPGEeZrqVtpJYcLDnoD/0odZ2SoJVbayoyilCHerHZ8t5ol0c76hMgTNHgf5FA+Nvig==","signatures":[{"sig":"MEUCIQDxbgtgSCkTz53+rERNKJwzfLsfRp0Ch0dbgnsMpMIrLQIgC6DgvcDKsAfKQ1P+0pp04MRkqGGjv1wpughU2ntV0fk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyHJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqzxw/7BPS86+tAz7JuATqTa+wLT8IybkoydK4lqYYqqm3B39qh26N1\r\ncJGmfoc6uKmAXRDqVMuLLmtX8xHli/Dp4IGgtkXgtV/y65eqt/o8T2oHeWKh\r\nLc3JrQ5XxGQ7tthTQ01vJmmeHksHA9Kq/k9dHo6mL0uxtnxncM46Fnk+ETIg\r\nSt3GFXGqceQVl6YIcK8DMS5Vu+eXXPBthHAZmTVNp5GnqotJVCC9abRxltEs\r\nrVJt9l0bymiSKDKij4X+6j7d9btZ158CTTaApqyENQ6dWEgGTK7LudP2+q4n\r\nw5PkmjRrPwtLkAImUC9JHEvhmQQ5Ixlcny4l6m3RxddEkwrN7rIXdoEKUHW3\r\nKlU41BiF7GtEdI4QrXor7qBdkm3jJu89z86lEaLsLrXXC+SHcmdoFU5VNjUn\r\n3RCwpRzey47geN6Ma1EcxrEhU+/qUJxmnxq0FuV0SSpVVIpPpYjGGT1CrO1l\r\n+Y7+t5sBn5/3eBdBL5SOOtwWUjMhirA3FS6YEj1WZ0EVByG724TxUMTselAL\r\n4HTsDs14OHE1rubbWKF1VEONcHCirH9GODf0zqyZN5bdZTOXYWrUUJm7d5U0\r\n+6sAzGeCBXAonKoQ5rJwgqthgrbQfLktPLQYG3uz6+qXG59JgpWHJzX4E2o/\r\nVvJTGXYPojxJGSB93RiJBUwGo4+jAn9L2ro=\r\n=eA6M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/theme":"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/line-ripple_15.0.0-canary.50e7a5312.0_1673470409037_0.9691218786726259","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/line-ripple","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5668150067d3bac57d6864918281f4daf37c837d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.202823f54.0.tgz","fileCount":33,"integrity":"sha512-NBlku9SQhZoWptpvZku/5n327TuF/3gHyQiFu+9z6mnjDXfZ+qFH9BK29awAamdi4yOqhU7ScVydzj3NQXTIGg==","signatures":[{"sig":"MEQCICkf1xX/8XVWgY9xnwmcEpLh9Xnkh0i7018qlQ3nOx8XAiB0xkpPgWe3zXk2RXxa/uy1dh7n+VIDfUTb+FMEeyNOng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyuIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqujBAAlrjvrwkDmwyHeOecK+OOhGZ4x3O7ZOsi3bEmKTpm60FYi4OS\r\n3OHfJ82XLZRI7uWF+B+ak3xARcKzIbb0z+9j+aEkDUYapO3cNw5AfYn1M56l\r\nMn6AEP+yxhIG39SoYG/pFfoP2JyU3KSw37Bhh+ZuqCnOk0PIw4B1yquZhS5e\r\nEMetAAcMCE6JhWooOq7S3wEQG1aGoctNyuGbjnpEDZ9sVBDi3cjF0KhTAb3u\r\n4E2MQy33LYMKMzEuafgxu6SlSyRQAEZ9lhYqkAI0Nr5ZCn63FrP42laL8yfX\r\nAJo4rrPmyru/+bEUcQh9E5AXXvW3Ngl3VMdM/VJMyq6WsuFsnW+jLPLWxixJ\r\nmHW9opThzaF2d9BcnsubEHXejATztPrNzR0eCl+P1HZz1KWfBwFN2WphY6vm\r\npOuFopXf7ivnYfVefhftedhoH/5OYMjtkZd/SkIiyh8rsyHNSffMVGhMZrEY\r\nbHxrlJ0WGfjp278m59No1YkmYJdpacf68jjwSdG0dw/wOrP1WXbY5JanBRjh\r\n0QbXIpYlmSFSXou+JRAHjaak4cCxjgtF7yM7LzedlJApQgj/HCyKhZLPFVPf\r\nDSL91sEI3kV1X+qHok9H4QsJcHQTjX59vuQQLXZkjbHFlG+Ovk0AVI2Y++kW\r\nAQpZMkBwzi3BaT+3DxMlDL9djk7GeUIF4Ak=\r\n=9sfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.202823f54.0","@material/theme":"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/line-ripple_15.0.0-canary.202823f54.0_1673472904389_0.32417677673286915","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a963565d0e1b8317ac3c8c9f45b9417d2e51b67c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.199fe2a2a.0.tgz","fileCount":33,"integrity":"sha512-QvhWLl58FfPvuV0KdJCkZcXHOMjrKPd5uklNCikCCpm6PBl/lVPdnZuS/OgGV+g5nAuP1LMjH/Lvv4ov9KGcbA==","signatures":[{"sig":"MEUCIQDefZh7xjIG4BmGwrmWnT4ktnixfHilO/cFe3Tps9XjawIgIJt/aKNUb+r/V1nhQSK0en47aS2xzu/zK8+nc10xqHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzAuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXLw//TouuAgA3YrRcjolbBa9LNDRql99e9qUFXtBVpEk4qtqvhAk+\r\n41Kqd3Gw2rJ4boWFyx1GmXxH4aqLsP7JlfYXjA6ckXBN7OO/6jiq7J/SwhTK\r\nWmQMggPRXwk7G8tiihKYCMctogGxXxdagWnrbrYxEzr6vHm/hnxOkZuFui4/\r\npVesfvVl+Nc0hzLBJPq2X5gje4DwNHGpc6Ggo1rsJdSavrXCm/Rw8NigrfFW\r\n1ryjN6KHHFy8C2qSl3QCj4d+pzpVjUackb/U0Gjson8s8GMvrDafQWBobHRi\r\nabVIzBew3Ng0MiXlfOyDFGV7HyCMIzV6OjThqcsKQAJheK69JpbKOWGPcqV4\r\nyWeHFy0CVHpqq6RPycupBJFzLOI0bw/dv6nXKYqEhqbu4530/IYAu0BUtST4\r\nZ88jYtitYoCaoJANRnSS9eTs9dLzY6GKTR39JxLrsMqbjuJWTKX15P85hb4a\r\nOo+OUiMpCfDC86tYukuqIYqgFDwn/o3MSjOmDpA+Ph7QhCAN/3bk+zWoylFY\r\nk+gByb+gq3RL2pOl+ifLMuM1Zp4MDItSG8Q42qmlh5Xvq982rLjby13KOC50\r\nkaYjDcUAojX3Cw875FtRJ+HfuOkx2vptIcdV8F7c/SB+fp7M7CKdX/ky+f4b\r\n2LeH6GSTPSANoWc4F9dahKRvCIzGZFb/Nkk=\r\n=0gHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/theme":"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/line-ripple_15.0.0-canary.199fe2a2a.0_1673474094092_0.48112542740221764","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f283e0ab51e47ba5bd73d1be86985798da7f01f3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8c0786d6f.0.tgz","fileCount":33,"integrity":"sha512-41dNQ+lksJ/HCfZsM2E1XE++9POshtOLoT1Jr/Aj64W5obxy8YrjpZq+LjOSnP+gew1EaYY+WFNG4flOH9rAow==","signatures":[{"sig":"MEQCIGqdnwctu+Jn258ctCUSOANRt0nknYDJWdly5Pn1z59TAiAqiORPXr/ZvGiQdUcA25vBJcXWEPYSV75KanJ69kATcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv+g/+OvfnCqJwmQINO4ny2OBnSAoKi4W6kG8aB+rhjUW4o8TuAeJZ\r\nmocdYkT6xEBdle8w4hSgrUBaJy4EPxxXzTJH2m5bUS8hP/3Qw39f2X77ZpaQ\r\nqQoJdisLzukBQtWhBZkK6iN1NjATmfaG0GEq4srUra2c/M1IqiKyebiY+0VO\r\nsUcbumtg3clSy+Aos5Ybe8BV+AzezLTae9XGqzQa4Yvh6eV+5GvCxCTZRgPO\r\nCEEIRkZSI1kgxs1Yhb/P/Aattz5fKkbvcZO6Il7ZNEBiL7wmoUGLO2lTtUNP\r\nTBqeUPIIjcJb9Av3IaTbsqAiAWhE2jw4ZG03aOCiCbz/JGz+3BM719hI6S01\r\ngQwfdOMl31a8fq/YIYUP1Qej97w6rF3IhD3Xl+KXoDL+ToKhBx1okAwUmdZ1\r\nSy1SyQT8Zee17kk6Br1tDIMDWVkwlh7t0L/kF/cOBrxwtyGRQYTvWRBO8JBC\r\n8k27RaT7P8PG+04CdqvslrTXti5vnLmDWdj8eXHeOZXX7qE/pM1TkGhuuRdE\r\nQelV89FB7NRxMkQrbjg8f+KU11fPcfu2brROCBBCE+guqQxp97OpY4TykL87\r\nI9nCre2iPWwxcb2K4aV5dyWLHChnYnoynXKaJNc8LpXxle8/LlKIG2rsfr7X\r\n6pcHQ3kJ95eXKj7VGp7LAJLD28G8zBN9YxE=\r\n=VB0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/theme":"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/line-ripple_15.0.0-canary.8c0786d6f.0_1673534132936_0.14503788002895424","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4b497ea8d160f1cae2c7bb31f28e9901a3e7f11e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":33,"integrity":"sha512-BmRQjCOOUPf5VTSNBogTndChPHJqDPlqcxtn4guNt41kP4PyPFq3EQ+sINBHZdLAnOLcD0wrMadPFl7qHT7QWQ==","signatures":[{"sig":"MEUCIQDIOnOs7txn+AEs5en4wCNgYm75agoexcrs6A7QeCF2eQIgZqXE1IDjU7SmsL8iZ1PrprDQLCbIntXhYy/LU827vBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvXIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKkhAAgxpVQvHGumwFjXg83v6hPl5Zh84yU0qCdHic1SscMie35Uni\r\ngVrTSGBrYaoB1zdVcPUE8Bvu4urY9ZP4issXvv5/0+fngBHgup7H+b5FZf/6\r\n+5lgULG3Cv/5AEV+OW1BnHkOighNGKfu/EJxF7amtRBDA2gPPFx8icK7MX9u\r\nwDtxb3JeCiO8/OR0YdWyB87sPPPaPPbwmHfU5aALgPGnH8ryj0pKqSSLFTy3\r\n/dGv1DDaQ5dOsYFoeSbOvopRTtMVpf2cbO35AhVa3jbjPlRvYW52s3R8xl3u\r\n983j5bOJX8dDlXT/5keInfclZvFcKFZVorKzlylEGxLv+nKbUAvCQhGl1QDo\r\ns9CCoPhZHpAlHIu+KBgbGWLfakvMeztcFRmC0Bk2W5fhnT9el0pMjHRqvwOG\r\nb6uWjoV/PFVCFCVR4BWWBsNr6P2sKMHnSKSkNBDizsX0tkys7W0cIbcdFEjF\r\nTwwNq9p9azv8eBxuo5y28YqmBqsCEKVlBow3w55gCOkGtPSLs93sK7b5IT0W\r\nxec0uy5GN4aXGgt6O/01AdMR+TGQek/2YErimcfEYXQLZAqEHqM7u5DShsYn\r\ngSAazCYWvau4svfo5UttchOKjZh1VIsBC8LHV7qJP8iWRlSfvyQhbuaVPEy/\r\nWZ4ZkVU+fTt0EzLGiYLdspwwIiT3S1hDPL8=\r\n=APID\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/theme":"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/line-ripple_15.0.0-canary.8a74f7c6d.0_1673983432116_0.23615079076916135","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"132e51925167e524171aac141aec9517d4692636","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b4687fdc1.0.tgz","fileCount":33,"integrity":"sha512-2btoxNmOCxxieSklGhl9GP0npDOlG3JokONtb5HRmeK6JflUG5YdBBbuodPifLn6qJS3MuSz/lrkBuPktBguaQ==","signatures":[{"sig":"MEYCIQDRrOjA4pSjZWvQqA20UP3p00cFo783Mbet7CM4ooxpqwIhANeAPl+61x+kX64zd50YjoJR0LRfMDZBJ4EEmKK1dpHh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ6UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6AA/+MmJoHhcovtpAYNN5MmyaXzdDWIFFPsCWjriMmZ5Ql5zyp2ti\r\nJ+a0ExyDV+zwN+5DsaCcr5nYVtE8onnJvC2KN/J2Ljbot6whcmXOGLFy+96Y\r\nOIUcweIlyZNp+CXOwmh1DU61m5CmoaijQZKfufAkdPseBOeO9Itw/6CAd9+n\r\nBOgDztWjl7VvzN9HKWzwVx2gCxabJPFXzyDPBbac0VCHuoL6vrrEipPBZE3R\r\nGcLYD34ZrjtKNN7gDfHoK4EHLw9NLGeGC+se3+y5RMqdRZAgGqCaE4NqVAtE\r\nZP8tfyGFvhw3wUePaRDL0JlFFRoL5Kpihi443pInaARifTZfO6ohTLsWdkxb\r\nme+0kaoBBIDqUql7PZPL0iGpfx3GbrID+sgptM6yAlxi96fyMZhC5nS8aTiB\r\n61BGXhhJI0vTgmFXQ1J6QX/td0mSQJxM6eMtMz2rh3Z2WrVp4QAJ4gKQVSTK\r\nP3VvGYd7GKjNtbLLLmZs1qs4nQIXAD4gOy8jI8pORBkudzfr3h3WwMLpENXM\r\nuJmCx9wtCUBWj/rsrzxLFBOTW81pYhegVEoXM05k8krr5TNa3aoLH93eQ81A\r\nTVPU5vftH/e5X9vNBNXR1OeC35972Dg52dHZjFvc/tHThnBN/QSWVhpkcPn5\r\nopO3YbREcjLkF9DNUcH9dOG2mj4zuWEnHCk=\r\n=zaDy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/theme":"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/line-ripple_15.0.0-canary.b4687fdc1.0_1674157716082_0.275091200907454","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d4da32320e6e721f105701ebca9df2a2da428a75","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b836b9892.0.tgz","fileCount":33,"integrity":"sha512-uZ6u3EiXSUdvV2hG32z6kXqL2dWyAfhdesOB+EhaCnEadfet/ydmpFjLA1Z5tDDqjsVQEW0+iMMPuG7yDXaQuw==","signatures":[{"sig":"MEYCIQDJNuT08P1onlssBLN11FQ4r4ba3pekeVD7yfPw82KLwgIhAKFe6Z0xr4gHGOzV0H/fwIHjZEioDOMF53Rm6nnEq7i0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F3pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqI6Q//Q3i+p3FbItDbelZzSroihAXqeg4c7kFYju8MfeUa4xxW5HvL\r\nIC6Xm13XlV2SKASIg4tmEbot4n0Tx8YC+A/JRwFb0s17j+K28+pHrsAv/Bg1\r\nmG8sozyXC9++FeYIpr5uJTuxmz4yDeSFsMby48cvYMekE6uB/lO5D1nzsyJF\r\n2viWLgJ7xf6iwAINoI5WaUpNPMgrBFPBuLAsanCykvP4oiDmjqFmHGJLgCs7\r\nHD7aGZQBA7Z1HjQk8CgkpkAxd6oP6m8wtaf1JwhWYDtrH4S1rmZXm7VYdKy5\r\nuuNtOWmfUTt6AxNM51qDa7JalnDw/8FoEdpiwiNS0E3c2apym6J4SNOIxnS3\r\nf6IfqguHtw66yRL9XCgswhFkJTyjqCLXgvu70nRhNq1TVgIPqum+PgHSsv2z\r\n4DbrVXRfUOwFv7Jzys7kPrbMoUBioQWHcpj2CsyolkWgI36wpbAFO6RRndtb\r\nww6Zs2U/c1gBO5+P3zwkF7HQZlIg0e4jZeJDyCMn5aHmYaUrMfZmjDIY5jmi\r\ncn9RQR/c3TiLlLA4RRHXTIOZ6OYOrlY1eFV+4wCDhwgRytPBjvhPzQrqSeRO\r\nD/AwZNSqOjFUsnyIJWFP5AcUQBQ5L0f0yz/7xtYpGSR1vqL89SVLSs9rzf9Q\r\nXIrdgPGOEMoQRwEWO9b3ICOspovVMgOZxNg=\r\n=EP5t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b836b9892.0","@material/theme":"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/line-ripple_15.0.0-canary.b836b9892.0_1674599912945_0.599355249352864","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e279903182371a946143b4c7799d9621df2ddc6d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e8912fd37.0.tgz","fileCount":33,"integrity":"sha512-jASyC2LwrSQ/CqC1Mh0y7px2tP8zsEBzHDxjNErYKFXp5UVPKkbhuvGn6f/ugRciZGFpSXCApXcPwpDKMXTURA==","signatures":[{"sig":"MEYCIQDM6SRzFqwUI65sCM1YiplUhbEW/EZKs/SBr2Kn5XjsUgIhAPEsI1ZEFpkk0jzoPyBHe/wt4Aopt0D5YknBchWracbV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sZyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl3A/9GQq3Kdk67QeaNIsX/Spn9j8mtrej9xl3tEkFKWDfdDii4lPZ\r\nrmZQpZZftKIDuMlpKOtFpRgp12j/ojsbZfpP/UQ0yKCbEpL56Ru2MPeJJiEV\r\n9j9Mpdgl3eL7Pgz+18+QwjjFTrAvolzvWsk031xGWTPW1kyM+Jp1ThIndIkd\r\n10XKhOyHuMeLusY715WN7IiDf0/ifkdPSDvxklWWXdTNvgwR9Cl1dTbI3j0x\r\ngi8Cg3mP6kWbh2r3G+zeQ5Jrdk8ku7aYzzQT6KusNovARJi6CXow9w/Iol2j\r\nQPKXkX09m2AfZOO4L30J5YDAZ20g2/e/3NZvLWrh8z1MNBS0Vk3yKf5mIJ4K\r\n6HChyq6tziow1PKKX4cbPVkqLiypmLvJQBdSLD0vU7Q8MvMT1DsunBCAc+mV\r\nxlTj8wn1GOvFv51X5r8MtDeNoghuZ3Kp7nqx0STka5ozHNMUaySFg3VH0VoJ\r\nsefMZIlM+uL581LFdi44vMh/AkYUoshiT+P+XQO54Zp/Rj/BI5rj2Ig9qPA/\r\neIIfb5FXlORpzyJ17a2XQEFPUsmAugoEnTUEBV5sd2bcujNfQTICU/nHqAyG\r\newgCmRZZhn8wDkvyUcKp7D+asUXKM9fCMdCkKldeza1aeT3c5RJn7X3CzdKs\r\nmWI1qs/hRZ8lk5PDIhuTZGVJnrjINS0gUzA=\r\n=gzLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/theme":"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/line-ripple_15.0.0-canary.e8912fd37.0_1674757745919_0.6346188367584207","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/line-ripple","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5e218e1424edf2b1bd90a39f48283f9e6f7644a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.16fbd30ff.0.tgz","fileCount":33,"integrity":"sha512-+5OhSlK4Dru3UH/1AZmYPhXeSlVcxcaYN/7o8kxHBF+9V3nAsqiT28T8sPkpEGAIw4bbAIiDssNzvN7UB3jJKA==","signatures":[{"sig":"MEUCIGHJppSG7O5SLaPp0SwV2eF8eD8RrjndwCt2nVPSINEnAiEAjjRnqEN20+U0wpT1+U0TbxhhkYIQuTlKKta+l6G0w/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sekACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkCQ//ZDqGrpzjikPl22LZC7V+zCXntmdCQKdkXvqD0tykMtBUxb62\r\n3KFOdZdQTy+fBn3S4Kl1W3UavAyXFzFPvglC8PitEWFzo3qhyR4fCxMAjFZl\r\nIswE8+k7+2olNCOKd9FwJAzFiUjbvUfUCu25Zq8CIFrgi9AYFlyTNO2+xA8Q\r\nqv+LzbRTvf2b/6JI//SXcZBseCqsvC1R89dB9QuvhQc2ogR5K0xOFYE9Agt2\r\nh4qJl6Fhxn6dpFmEP66RQ0vAiwVkTZmCNmQ9yrlwWYNR+57tmspttdE5fx4V\r\nL4G5orYJapM+czn+Svg8Hbg8b2u0NmItpQBcy2nTSlF2rUM/LlgG3UobX228\r\n96Nkgc9T4NtOXd0IdmK9/ZZM5l6K6KqY+gqNpiFSY7itjdS6q70tZmIogy6J\r\noF+9Z6HzbRlctVMGEzrUIQ/IzpfKFYDPeTMN9kJhc6TI+7umcfg2Q9pxVtjq\r\n3B31z04tUOcVq9Sgl77W3BUqxtxv1YXmOcPWjrv760O2Z6UZyW+3OSU+9PxC\r\nREmpGOht8irebVnyNf9km44rq3PQnRug9jRkeJPrZKrx67CL4gRmZdNN6DTY\r\nJB2ROBjnyQuSvjo/YJcas1T3pPLXwEVNcZhruppKRXUfG3K+3Ao2pfgU3PK9\r\ndL6p7dw8+sfmEJnN3uW8QhuzjQShvUgPvi0=\r\n=ZqnU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/theme":"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/line-ripple_15.0.0-canary.16fbd30ff.0_1674758051827_0.24111671387132927","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b08b536e298d756ae1cb084073ebf3593a77601a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.033ae083a.0.tgz","fileCount":33,"integrity":"sha512-C3teOOQNuDTYtWzkVCCLT/DzO9eae1INoVMTeF7qWqZ3ElhZUyyOkdy7ztiEPeeV0nI1x3BWKxY40qhd7RBE5w==","signatures":[{"sig":"MEQCIDRoosbrDY3TC0zW/DL7foW4wnICr2gjwtG6s5y/ZH9yAiBTxufSrL9Ci6iYXwgK70ANsvkBJEOJyuk870mFJCCizg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tPTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXyw/+J8nt0m8IiIIdO6K+wHom/uNQNrtzDdjkfjUamWBXu4ppFasg\r\nAusP/SW3r469VOKYSQPqzvLbIZ4F03r11/GrlxK0WKK+SoRx/OiGZ4aO6gVV\r\nAxgWtsCHLqJ1pJJ/ybFLlk3rTBi5ukTdh7DAHHe/JH24q7lMMqG5G1GZRxtH\r\ndH8bGaAeudVZj7/X3k4oRj20JZyhUHm5OC5643PWu4AtqRbMumPPXFzdcAfe\r\nKKNOYqjW39bY1GCvWTihuMn8bQ2DvNtfFkdsErOo4on2GwIw4s1+4WFyLUSP\r\nqFFVcpe+VCqxsH+y3/pFP4TJqc2ha2JpjNi9YcVqVFz60iu7ENG1ZhjrMDOH\r\nBlvBIkHbEDeKP43ImdtGhGRg7OQ16WNCoV93RXij0iKIR2SmfGXSNsXdsvAs\r\npcZoFLtxlZLTg1LYW7QpOKKlQwJKg5CcEMPZ6hY13t9FeJ7zNhO1LgCZ10z6\r\n0bplxJnYL5c6+pei5VHAnfuV3sO4Ywqvkf2w0oN6M9iwnHVycz4mzSGjZSFA\r\nhsb/nMvdN7duSkTsmgm3UYubBJ0ZRu3gedn/kvV2cvmWNcA8hXpsCRBbG9Xz\r\niK653C+hhLHKV7OsVjzqvVSVYoMc+B0VNMgcMlZl4d+2l+xjrJGjQq3wy1a3\r\nBY8wH/fdNU6R+olAmPuWVgsDrFiKSJ6Teio=\r\n=h857\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.033ae083a.0","@material/theme":"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/line-ripple_15.0.0-canary.033ae083a.0_1674761171562_0.74448338493906","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f94fa367d58142dd2e0f1d2b68be2b88f7f34bda","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3a705fa1d.0.tgz","fileCount":33,"integrity":"sha512-muw1HFqY86RFAtr8MKRQU+S7Hpgeq0uClotCy2/hbUBm00fYMjMBeWOa98JunWUyB2paepxjnGebrmhyJF+ukA==","signatures":[{"sig":"MEUCIARfQ4nHu83j6JIYWHnCoRJgjWJFGSQMRVmf0GHVWHFUAiEA1OyjTbbuLJJXLX/KTXuDo3Y32moxXpZe0mMsj0IpXzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FNyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozLQ/9EhqNfMXPdevJc9NqjL+tsbPilSM1XcRdMZV6rrb4KnBNmu0l\r\nF7jE+Cbk54/h1rwYdxJsw7S6PDy8orAII/AG++efSq3lnO316f0fTwAAJsci\r\n/GAD02Tl87fHRmRJnIG2pZcEX67W0ukEEfGShVipw68KibGE8RUSK/gd4rxu\r\nuyMOZoNvD6nO6RU9PvA3NTUVTKAVLSBhBSFxW1J5WwmYeIbMOF/2wpDWfRa+\r\n9zfuSPfWKSWQR36z8cLx8RIfonmUW74tdZu7KOFe0bwm65atRcTiM4bblNkM\r\nqKzkX7F+fMFVu9/DpuIbRlUFw/mwlE5fbtQKiS7vm2f6MKkB3EbW/ITpbyon\r\nHIMQ0fTnGC3m3BXXt0yB30xxlSbtMbfve1ESzVxNauYuBCT6RZEY87tFs0dH\r\ntgqUgWKQBvk/d9iVLRdwF0nF9WI4StjrM8DoivwLUeQdK8M9CtiwHOk1XIuW\r\n2YWd8dAb5ycw15yi+zSuSfXEYGmSCRRYPiL4vMMDl1/GhHBpuMtaaSjDBvgF\r\n4xr73L6YhNJf4zrZUrm9TV+OuoWjXJi3UpYHdqkOTAv21rxiF34H/GMMCg9f\r\nGcE69ovXSGMR8pBDa9c7rNuGcdj3Pn9d10ke+59WOrYuTB6PTpeMQo7N1gAd\r\nG+6X0j3f7akDlN6k8CQ0j+oT2CK5JAcKsaM=\r\n=SoAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/theme":"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/line-ripple_15.0.0-canary.3a705fa1d.0_1674859377806_0.29570982171573235","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"13a13653f7b327361160ed78148853febc4e5eae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":33,"integrity":"sha512-KhYRSHmqnEgiNTVx5vrOLWnpVr/v4Hm3fHpv9lgkDkQ+6W6L88xG4sZbfnk2FwZDcSdfunFZtFNzGeYZ2FQ7XA==","signatures":[{"sig":"MEQCIEOBHKKmWS3xh3W4tN1CXDzo83qI6U8zdDkvW9x/EMqXAiBZWpH/C3m7vZYiamKlEaHBUD0Q5BJxBIYtPfwZ6Rbb2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf+w/+NiXcaibeLiXX3+m6TKOuo2oHA+0CjETF+pawYgPWN4FtfQ+C\r\nPLLEvVJnmtuoxwZTjoUHlckqD0DX1XxkA9MKyBAj1PplZ/xJJIwqFhY2hD0C\r\ndsccMtE9G3xF7iD3RwVrxAWynJYEPtq3wL7K3sTWgcJW/fUEWJkVSM/6w4LU\r\nk29gfNvE8E8KiJgOmUxltt0lX/Nz1wfEE2Amlkya0kIenS4PgGezYiAF1eSC\r\nzqsHh+xily7KPAOQ4gybOTEfEjgfxSQMloWiyA/crBGgFMVrjPY9aXwPIteM\r\nSGs7XuDzAmE3i+HNIDgJsJVVubsLfF6PmEfLi8PqMyJPgaupoYFY/GpwQpwD\r\ntHlOMn2+hwowbFr/2Xuc1Ap/iXaIusafdRjPuJMrOjqq2fvTL4SGQ2iPPUmP\r\n0/1wKkHAFDgLUs6g+VfdMPnZrq85IafxXywBHYVecr7RP5jjWj9QvJ3GoQ3h\r\nXX2C09zQTe/bUduRUZ/izabhuMHP10zvGIAszMkZItfO8PFNuhuG/oyfu1nw\r\nb1/Wn65cof2RnusyAXTVp00TUP8D2KDu+uGKzFc3nCowlgUHWK47PjQxzOBv\r\nhx2nYyO9QPV7BXUSvxf8gyZPlkbJPtBOx6Hujna484flpoCGZ71n/yHlSbaZ\r\nVhTScbxt+18cdYWv+ARlY3yHuRuvUVfp1RQ=\r\n=ZEeA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/theme":"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/line-ripple_15.0.0-canary.d6bea2ff2.0_1675178957866_0.534708480185824","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"58893db0c7ba593337f86433da92b8ef34dfe020","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0c94182c8.0.tgz","fileCount":33,"integrity":"sha512-PdJPXjAXdQeA6rEa9jP1NBUV4HVUxaJrba8GvN+ToMeFWprszTaHC9iDxXaR1iFZMgzCEBlIWoHaReuyEUA1dQ==","signatures":[{"sig":"MEQCIDdazaEnvVd5ZfwZEuQduRALw19gkzH7FkVX2MZ9kOicAiAfbtIuqGoNPNhZmDGSPyDWZRkAN5FUc85VqpaIgywc2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qS+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWoA/7BUQBl/0+4I7qx4vwL/Y51oWaPYw5+MdqQqOl2t41Me0//I5r\r\n4RAAbxXX5WzllBIRX4uLSDn5w0oeIZ7RZhE6z6zJdAFrk4ZdNbhgrGpMcriB\r\nt1PwQQV6eEwgHx2ySXPkTbH31cFcH0hLh3Bd45x9nGy7lG5OdR6D15WemCcw\r\nKI08pO1KAoXYSlm4KMsoV2sb5DYVAKd+wC0QS/5s0cOinRU2LY9CVQF9JqTZ\r\nTi49KbLoQDjJeiUmp38vMnAzd56LDGG/V84XnHePOcegCXrzANBCCw964yd8\r\nRpMuv9uB/vIvIPJjkOlSbWuvbJVr+ah8xfyGC9XU7Br9rBOYVdjyFuPZqcoK\r\nuDdfd0Z6J4ouGDTKaBw+75YCyJOwRn03rybSghpCEdov40ekN7zse+Hun+hs\r\nD1AGhzgqjz9Cm/njdGSiTX4O/Ek9QwksesH2t00vrHRhUn7Kp92D1c27JUF4\r\nOWWSbTG6TbRliRkzSs3sSDZExBnGenvSLM7aMK60Y0dvu4y5sAZ9QA5qN22g\r\np9BK4M07hVXGrySJoE+haHBGLf3Pz2RWS7qcSL6aV/6kT2DjSkAHoxmt9KHt\r\nzEKslk1OrvTEZmjRl4mu1ramWVRhj/tjEyGx1bMKZQR0/LOSqSIh0XX9II49\r\ntjrY4Xvr9QdRoCodI7hTcKXNQ417SpTrupk=\r\n=XPVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/theme":"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/line-ripple_15.0.0-canary.0c94182c8.0_1675273406053_0.5430300562644688","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/line-ripple","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f68a3d399d468f44b899c4823f992c07163a4003","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.15b221540.0.tgz","fileCount":33,"integrity":"sha512-CVKJTa5yHJqF/xhjYtCCMBVeqrHMX1ZjgaBCPUtz6xoLhroKfuyp7MxTDC4IlPIj9cC9TQl3fpFvEeJ2m8mzNA==","signatures":[{"sig":"MEUCIQDPN/E8bGNXJKP04uNlHtyOZtuALYcGX9GtSeDSwT3IEwIgFgTlEqVKeWPW4jAlwy75J3tpae+T4NyK9BN5pCpk1uE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qavACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrn3hAAkPKprpfDeyXB6VXOdxjG71F8D8UUjg2FV9e062/y2TknPMc6\r\nK219GsGp1VYT1E2gg3GCGBpWw7iewSuyIWYqJ3YQB2wId/W4DwnG8U8+TpAy\r\navgi7m4GLFbFjJdTqoIVBY1XR+ZIYv9D650c6zyw4gLCD2ajBF3H2oAr6K11\r\nvqWA/qweEu/Zu3qnKP8nUw5cJygGyNzIGZkyoKUjm6aWZbOv1aZlbBmWwOFV\r\nCz6bWnepgBX0yu1NNerbqMdzoYCT3P0YhWk0sGzwn2jSchlaxmGQCG7QBPpI\r\nB4uXRAAcNwTygwP72ZUFs97FZEPoEmd1HnEm1TRdTrjz6/YRblxKA4/ASull\r\n6NPicQgGslG+hn8YyCIUpynMXo7wfmESoMahlWMhXCxlXwINxrGyIUB8wUj9\r\nK11rQVid2BpRNsmK3uLFmW5oekjJnjraUhf2Rlhof4nuCRoJ3KkiXg86fyjf\r\njk6Tg13xC9TLgMqWi+BTYjaqCh8ARQ7KPl+v31wHNuy9fLoIAmxLMNZhoBLM\r\ngAVc7YjlPXw+x4I/bNlsSvbXxoJK4oCobHfnLnVVl1eXPUOI9nq3F2cgZ+d1\r\n3ad5WAjKjR5pgFaeIYNKYjSox9UnwhxtqnGTJLCuWYDVBaKek0EPvIlUg4WN\r\nVGyMYr5wv5KHF2KbeGKqb0XaHFudHl2R/os=\r\n=v8ku\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.15b221540.0","@material/theme":"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/line-ripple_15.0.0-canary.15b221540.0_1675273903121_0.8646021468387082","host":"s3://npm-registry-packages"}},"15.0.0-canary.eeebb8bba.0":{"name":"@material/line-ripple","version":"15.0.0-canary.eeebb8bba.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.eeebb8bba.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"153e43b46f8b6275b3b4cd3a3b5f29d88cc3a120","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.eeebb8bba.0.tgz","fileCount":33,"integrity":"sha512-sHc4ZzNhursXGDWTLG45MpABcYkssoy+7Pq73x1CHwBIcnhDyuS2tsfnA/U21BAvErXYWIlP52qLCjvB9+x62g==","signatures":[{"sig":"MEQCIBsY352ukKatRc0LqyhesE3vJ3w7ek2G2PwTSezEMZ3aAiAh2YbvOrCqjUOyx5y8uqdOCeYbcSykx3eQHmpp4LvPtQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2q2sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyeA/+Myx+rNNSfbGzK7G/xEFd+HWRZLNnC5Vyr670uBpvu+nA8W7E\r\nOZSxJt1ZZjCXzhmw/yY3zfw7VDFcRvK3ZwRAD4C0zlXv2YShUQkXZCXsDUee\r\nz/paCja1XQThLS3ShS5Vbw0fQmrT4t6S1ec0uDK/saNnKE9JvcJBHQbXrTrC\r\nb088HkUkgZb518tuVQSPrl72KumJ45hMgtuSlrn/FL//0E02ecKcntVCRWEN\r\nymbGwbnPgyVExQD5WIYGWJrP53QRGX8+7/N0J5WGzISfqB3w9BRQ7+lqge4k\r\nyIaHpnPdp5R+FSvGaeZXmMCQpXgftq8KSXAPjVdF4eR5Fswen4QwKDs+ESRe\r\nFg8aNP0kezVx03pYQ5CIL0V0GwGYG/njeB+XsihoarukOpnJbbMF7Mkg5vha\r\nns6mAEcqXLx4lfxC9iGvRHUQehEhw0HMwscvqL/wV/6bzEG812rCAnEfGpDt\r\nPhQtKGFBwiJHYto68WuzJBGGKGCl5O5ZaIQoxq+VAKvA0C+/kl6Ct0R74qMB\r\nOQOPjBVtGfzqRtQE/iBBjyAUKPJi/SEFBgdnfv84nEp0AjU2MpxOnMmV6ZMA\r\nhWkk8P1lFds0QxELM6wCIJXqcWCSXY7/ZIKFDC3wnScjzfvkkEl3D9s6oKY4\r\nHE3dqdXAzHs9XQ1Uuu4BjeW1VcIkt2GBleE=\r\n=m1Zx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"5c8d0d2ef793b8bd564888fdde6b97e8a2502cdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.eeebb8bba.0","@material/theme":"15.0.0-canary.eeebb8bba.0","@material/animation":"15.0.0-canary.eeebb8bba.0","@material/feature-targeting":"15.0.0-canary.eeebb8bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.eeebb8bba.0_1675275692150_0.7355015275102343","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5ff518eb9b98e8da3e4d301074349ced7ea79dd9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6a4b3f834.0.tgz","fileCount":33,"integrity":"sha512-AgZ+ise5oWW8l6R/Ie8OHLhJBV1wA44yxXozn3YkcDcJmkIEWlUVvbQYM1gWCqdTECghBr8AjI2eEKQGA6k4sw==","signatures":[{"sig":"MEUCIFRBzTOqnm+HzB1xQI8/BQQ7LN7fNj+tOt/Uj9zSc30BAiEAlcLabUh+ck4f0GsgMjjDhvGW04q//PlDO23AUaepK7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rYfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxiA/9GgP/ezT76ZJiLrqJCYINEMWxfSxhmpgmEV9AR+jJ9OfGLJDO\r\n75+Ug1CBVuzmS8S2VhX6L0F6of+sKJ469GerlkAcyiaf4KgEj8h0u+DSYgqZ\r\nQJqWMiKHau7NiHoWzriK6n64LdwzjDXCPZiQXv3cOlaQbaEXo1Qg7n5OcTEf\r\nUkp2N3eaPiym5elvwN2f6j4HtAfCnu9+km3gijhyksY55BZoYsBP+coh40b3\r\nnnExYpgmx326W2yD2nNlSY2+OfeqkePf076uT8hmhCSJ7QMAwr7N8zlOobC2\r\njB8OT/sf1zlmKn6a6LKLpxWawHzFUdXws0g6fw7Jipzsj7nAS4tvvSi8/9Ej\r\n9l+KbKgEjCUk1illaD97USyeEJnt/GEvA4kQxreUCwCFJtc3Wd0O+zWCP+/2\r\n3q0DykJ3tEwrnSUbXFc/1hiXkCAv/sw7x29G1KBReckfQLuNfxt7V2O4Y60W\r\nuTNr0y3MkBtdsJucYzT3JKH/7l/c8tEI1GZqZ2QRO2AN1YmEvWT86w0yciht\r\nEtV/d9s91F1tg/NsBUn7Lo91uf4D3aCxKwaOZs+1CLvwhscKteIlq21vbOTZ\r\nS/kSyvP9dfoLDgdTvelGlFtkfmgzm9GIiYEdq1kQR0QoPACA/yFuIcOxtVIO\r\nnrfbXu6sNoSWtbiRNfsGxa/QXJk79NmDa3U=\r\n=jxs3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/theme":"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/line-ripple_15.0.0-canary.6a4b3f834.0_1675277855357_0.020033064557085867","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d760abe8e5ce4e800da8ad9001b3c769fe0a6e8b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b177b40e2.0.tgz","fileCount":33,"integrity":"sha512-iYWFlbxtGmhdD6Ize3blgVUoHe+dPE6L6sCUV7VZiVfWSQP0KqjIww1IehfrSoO3s500R9CxNTw+GYoHbaRQKQ==","signatures":[{"sig":"MEYCIQDlj7k48TJEjroWfTe54FoKKpBkT2w5zgFTUKZLIDatgQIhAPSzTQcdMEHbxzcT+snJ/0NaQF+L7yEQt5iCIi/LKu/s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRWQ/+P9jBcDUnhmxz9rw5hx7c8zWR8RXCU0dTIyFIcIGEwkTbhQpj\r\nJscWfSa28Gpj0nfXeLsmEZB1uGF9KXOznpRRJ2pqL/T5Zoqw/XnfTe02cwxx\r\nlUr4IvMRxcnnHeRfRCPq+Sg66fZouNxwoiKZw660oTOKDYzJpfHDMkWbSpOs\r\nVGExyg/HTgHbKWkDgGEgdSwjGcBp1mj9BFQP3lg63lPQM8B5VrB5MGJ8Xnuu\r\nV/eI5hozYEu2NhJ1JER5h99FK49Yf4KX8K43GDdl5JsSMTpNNFA287KyRDKJ\r\npNEcl3nL/h/9cL55GuVkknOtnhkDXfxbma92GmBGR6Eks3HNHH5GOpy9sGdf\r\nFgzHR/2ZvlW2eJDDh2c+zecDYiqmHbTXhSxyNIi9RzEyjhsJZbzpUQ9jlofz\r\nrAmd73gGBQQDtdB8u534vg6VTB12MVLIU0B+Ydo50WlDidVeV6/QFbJVRS2z\r\nUTqsiGVlEHrXlfy8dqCZS+rBxg6eRr+U3IElbf4vTHLIxwN6LI7j7obQNduA\r\n0nRTPjm+V6wG/THEsc2qN3sNDDR1W4kNHlStzvY369FvuKBE8W52hpw0JXlU\r\nEUar+7ATnod88VKhxz3rK1ezx9oicYBRGblSgvR0HLrHi7MH5xU1E09QlhMe\r\n7yRmn04KqnhZHNeFm2+10RYtFOjoiUd/veE=\r\n=Sbzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/theme":"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/line-ripple_15.0.0-canary.b177b40e2.0_1675308798953_0.41280486793829074","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a9ac6946720c804e99fdabbeb8bc511bf5b23d14","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d9f821042.0.tgz","fileCount":33,"integrity":"sha512-nYpjNX/1gPyRR3Fj16M5LpWvCKpFVumFwH2fNa/6+MfbbGGOavHAbzViz81foW9/PifFA7QldW56hjafDTJsCw==","signatures":[{"sig":"MEQCIDnFecsA0ziSHnlSUKTff8FGSS52p2BoLid9tkg+RCFGAiBlmluOUD9aehshJNtMmaDPC3OO7VmnEJVVNKfLPMbnwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/S1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpu2A/9F7FT7eF9VKR6g/CYHjdRGvd3gJQ3XXdpGgzYVNfLNP1wdHcW\r\nYe1CSs7XtFK7RSml1m1Z31JRX7AhK0eurfzM3Tlga9UNROTscKkl+ew2NXez\r\nKMTfeSRteTh/dw25BiCt6s84sVqQrIycaFsO7+4egkLJ1tt5qulN5rqu7vTw\r\nIfNaOBS5mxl2URgCLKr8M6eixhyW91NvCTzhqiCG/XIeRS3tX4tF4osXTHxv\r\nP9mvyYx6y601f5GUMM7SFRU+F+md9uLkcYW9At4ugIA0g7p6pRGcL1mzwd98\r\n9/43v79G1toKMguWO2m3Kvpz/GomPAGH5ni5SLlrG9rNuuvTXW1FUcRQYRKt\r\n9KEs3FDS7zWG+ZkyGwAWnGwN3Dul/6ldJT8Unr/103ndO6+98LhavI58lRRC\r\nuPLFoGiBnIWOd75VUQwz2zvsKw4r05vFP4mUjrw9Mj67a9LtfaNxuOeFFInA\r\nJb1SxLOOBcQaEvVE8BQxjvgT7TeOMGuVP//5dnvw9MuBJdDe7wRsLxq+fDNa\r\nk1UAGHyTqDLX5DXJdueS9HHzwCAtwihhkgJls5OE5jBCcKHEYXLa5gZx9wjT\r\nTdTQhXOJQXkfuziS9TgZxYgwOq2BUzATt6O1TuvHyco1xWm0+i2S4cLt/2NH\r\nRdEbvAZ9qLVNBYILkiGrDRWs9WW3/MUjLa4=\r\n=7Pcw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d9f821042.0","@material/theme":"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/line-ripple_15.0.0-canary.d9f821042.0_1675359413409_0.044990367652155694","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/line-ripple","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9cedd20d9d4760dcd8275b98d3cf6cc5c27d23ff","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.47c7deb19.0.tgz","fileCount":33,"integrity":"sha512-JwDpg0DAtnhBlueW7CwfYu1L6EsbkPz9+0eiMKdMVjxT3SpeKfSSpEvY/RQpZFt7sMzA5jg+M3HYwlz7+JU+GA==","signatures":[{"sig":"MEYCIQD2+PlEswJoeoo7fpIHaspOE1e2ijA+G5KRnrfAzXgCaAIhAIl47hsHRhUlMS6LNlrBXPeWra9pw04/KvK8tQqXCktp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M7+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeAA//TRb2fWbs7ZD5Qx5M2+H4Q3UlYBEfudiO5L0VywXGjBayx+EJ\r\n+zfhDMbLZ8kaFBqbyJpINSWOq+TTHFrb4jaqHrmDMDwUZBr6CnAbMfLrMS0Q\r\n7s+pDXzWtRRwOl2bgl4Plz/chJG3ayEJbzLy5VA9UXn9DRtkD1SG9AoSbfPE\r\nbxdUgONnZq2PKNDyDs3hjmNm149rS2AnXP/HtPlt3Z6KJtHA/5C06cVr5mSo\r\nBH9Ib1wuOKerO9wk2tBVzPf3sd4QquL2Me+Aveni4kJH0HmA8T60qcswsxai\r\niasUev8CRm1iiSztjvqZWj+F1RNhRdkZKwbiHHPkMRH8DuWuUTUznO7S1xPY\r\nr7x3M/KBfP09IV/Mnd+7V42J1pFceZZhwSfWLN6lPm4+PQe+BbmAuS7tZVcH\r\n7KS2K0JuhIy4AtSIt8H4YY5XmJveEAB2+J75BVI2eFrWyZHWKXKkgMUFk/eQ\r\n2+yeYzpF9L2U4blgg9dCaRU1aCZxtxosV8MEyKf3DM8XVbK6S1+MW2ML/YIZ\r\n68YgK6J+T9I64Tn7EHi3NOwNM7fXRcFWYlxELxt5A5C6nMSOQkm0Mr8kXm2d\r\n57ZrKAngPIjGDMAQ5s0n+DM8NtZPSpxa/vv6C4EmhPjCvvZ4ESUtS3zXtOBH\r\nNarfOr3imrY7K79vWYoSTurjWp+JcCdsjVQ=\r\n=hiNK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/theme":"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/line-ripple_15.0.0-canary.47c7deb19.0_1675415294710_0.46882789521981283","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1980f7cd14e691ca2d3a85c654f5cb9e7922db48","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":33,"integrity":"sha512-RkFSN7yH3hUizybjM1FCsoC0EeDTn+kx18dUAln6RMC02kl3/cSjiiSBEieUNxjN5lLR4ayDa0jnTpaDjxgNLg==","signatures":[{"sig":"MEUCIQDEJc1PEOGh1wNrZj7Yd06v6jKO19cQgI/w/so7w74drgIgAXPyCqVihs/yjMWRcVssJrHwq8Gn29fQgbuiiaEpqyo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fefACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJNw//b9MsZwWOl/uDi8QgkQT2Lb/q5+BZ3GtL1WGkpNbxo1qBFatD\r\nqMvx5iOd58OK1guoc3wiq0eJ3KbJa8cgdLUHHB8HFYIClta0IU3vKFiKWNid\r\nr5sv52wYBgTReF62GCM3+tOS7KygtAIqv22y2uAf0FozcWnQoNHiaB2jQP5M\r\nHD6pLBbjnHK9jlj3MBebg5XrKVRge2cSYnPCv5KasixOtySFFSKNPTtT731r\r\nn6Ut5gMH9W6dhPOtwUCxPtbm+WyEBZntC+TfEXFUy5Q/4MiY9qdcfgIfeATw\r\nZESa7JAWkkYbYVpKt0X6taDhAoVUT8+GYcSuIMOsCLHpRiC6AMyuXjl/Aa/1\r\nX7CLwxygXevpGK+outkgXWLdclcx5EabNf+g8/YaQBoqXgVDnXGp8FkN+CBV\r\nDip6hh2VJAeWL6FF7Vo3GJYHOB1JTn2HNJniIQx3G3ojsNcMZcL+P4/T7jY7\r\nNf1QOW5+rzMbEV6S+9S1zlXEBm5BQR+P9rdDx5gB90IwkAZL88FznwOFrwnA\r\n7+ZlOqAkV6sFTBFyZQyt+dZnrkckB7prOGGpAX6x1ZxA2lCjvCnVyV2mzu7T\r\nKnCtUkfL4LSJ3ule8ZxaKzdszL3+vpezXZwGHNpmIFmXb1Sbul3HmD30qM4K\r\nMprSRKVAgB5BPb1mwJHSt/rpLe7rYoSPGjI=\r\n=N3iB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/theme":"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/line-ripple_15.0.0-canary.a16dbd1a6.0_1675491231690_0.02864118608410693","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"58f22f139cf2a73c7af07b99e5e7c368690f6e0e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.93416f87a.0.tgz","fileCount":33,"integrity":"sha512-7HcBwd1sB3x+HYQc4FAOct9UEU0hIAN518ksms1asHy+kBURrDWwQCVY6ro3+qeMfpBCofgNRbFyDM3yoJo5kw==","signatures":[{"sig":"MEUCIQDmjCaq8p26KUtDvnMRIi/FiXVD60jcJMrvSHKc4wMcnQIgetVftKdhH0+Myv26Fgl6QwIO8zTPigvcexouBu9S/UQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lDKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrS0A//ZkadHpcCoQHeIDYZpuDTnZcN1MFklJW5ce8TDRBoE1acBJl2\r\nlCEpBz6hnABrPzO9fK0KpSQJ9pS9SvX9j1pvZDSQvamcAXP8waBmtLqjMC/D\r\n7RjfdHq0aoCS+gcMFkHtbAancOrRv+nz6QfbJCMquPzD6+ETqwGmXy5Gk4oC\r\n27yvMOEZjNCG0KnTj7TI+bxKPD5o9Sl+TH4Vk5e0+9D+KuBaHfmwVmRis8WE\r\n+WCM99s24h1r/TZBnQFSapEjulIvucGfF1TGba/70kn9eg1p2/iOgDRgOTF1\r\n1SbhfXJWjZIVPHRbWPNDyzac/LoB7MyBxuOtoJW+nepZiimsY6TUnVhgl3CV\r\nahTLy1T3IIpTXrcR5tNolUhikrJ+0K9CFHzIAXasGXfsc5Uv4nWs88ZGAX69\r\nW6nao5erfkVx5TmsnOVifZOIhDFcrGl8yjkr9pninO7cTo+TDTOeqeKHQvP4\r\n29C7z43zdKlSsPwxhdsuJ/wNRGxtmuJsZ7jsra2wBDPIhvd3GjnpvB/2cuu0\r\nQ/koe4YLetfq0pJhYKjXxgoHEPS5qKu+yz7WFcA33e39k7TyqhQujJaSwo7k\r\nUB/Jjl0Lt9X/TjI6/XQOi5OIhjhSz06GXuG7T59NwCG2Rc6doPCOLhovQdUN\r\ni1zlmrsvoamGUBgxbKCfa3789tDDRN+pjXA=\r\n=kYdh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.93416f87a.0","@material/theme":"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/line-ripple_15.0.0-canary.93416f87a.0_1675776201793_0.2334639024489773","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/line-ripple","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"45f17a3166d94ffdaad286f85d3528bd13db120a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.49b8e7442.0.tgz","fileCount":33,"integrity":"sha512-siu2yGHg16aTC23DjcqnZwiR5lC77rxm6gwDRQOv4QA/uHMjcF9xOMPpMGZxfgRasxlYQiHA4k07WOEALEst8Q==","signatures":[{"sig":"MEUCICxHN/5hO4/1sl2np+7b0YY8kaV9xQxIH86+g9TRfVjdAiEAsMsex00X2HalKWFHufiCldPjgSTdHeJFUqpspm33fr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tn8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5CA/+KSNEQIVLNPonTj2+cfAiE7tHygewreGDPOkEp95xQKRMutLI\r\nHrTifYB/hN8Ewoi4D8cplc5yOvmhJPnqHAfHYjX9clnR7r4Kaqi3p3+QV4rR\r\nHB8/YwifSZUirZFDL2UpHe3MFdTJjAqMne1vjrUBRoeulszXwrTR0gskyiGE\r\nWu8y/MSozVl/t/GPlO7QObzXo846Ox9yuK/QHpTJrVn2tVKVEDWjimiShusU\r\niMr05wfOzzyr0lrKCV+qpYNoR0BmhT4W1NncR/RiMEyj7qEhZOGZCGSrXuhP\r\n3IYLWfm9Ak48XEeRxEzzXCN2Hbozna6n1H2lUvxZ8wh2GlkeqC1b8VYkZCHX\r\noKBPgm7pG/2vZrqxsSvhonrWTKhbWyW3MytF+iBLTLRXLvIj2gUI7C97OFDo\r\nqZQCplhEJooarHn5AHcg4Yu24nOg4uZGHnlrTmGeed1gKtBFVslRAikphbVy\r\nKMuT98bgAqQaAV497nciljFOcMGgsWwnZlxjGVNsA0bfXADLDOUbF3KO9322\r\nyZCHn/Msisc/lvHnWzE5WozWrQo6yHrkA21s8AxPfk87YHc2dRBnQ0ztpokK\r\n9Jho19l5aPPm0PSgKyrvsPtPGa6ZyYxGZbDYXI7z2TfYzliH25V4LUPvzlOB\r\nFFw0le4RdudSkvRJdhEYjQV9uwPuSoCqwSE=\r\n=/52+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/theme":"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/line-ripple_15.0.0-canary.49b8e7442.0_1675811324337_0.4352173884129986","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/line-ripple","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f3154c00cc785670ebb8cfef415d2d5ffcc92606","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.de38de758.0.tgz","fileCount":33,"integrity":"sha512-ZMiMIAh4LskkJeIcSA38M8G7SYYk8BuE5uIkmZr1Y7KpLdhlj1trlOd7p0+vkvol8crCKxSUDtQuJqfAN+KOSA==","signatures":[{"sig":"MEQCICW8YuQd0MYAFmoOc2FaIG9EPXeTbz3LJquFEh+nzHw0AiAER4bHQElVFzbTHEHAM4hxsqlV/KYUcYi9PrSNPPnoGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RQuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoEg/8CnLdg2/+Efg9H+fQheNX56RJM+xNxf1SyL0m888mgRLBFPf9\r\nNR54pgTRKDrctFkNN7tDrNiLlEfY/Ne4gl0PKns8BT0ai4guYv5PfxtPbThl\r\nAzJNTJUwmU01RU0N1tlOC2ta79QgN7O1WDkADvP1HsPFIu8deipl2j6zFYz0\r\nOdCc3i83FlXs1SjWP+LqerwyY49Dlnxv4GXkQldyaTomGSSsiDKOh5NnaA2r\r\nGo2LhXSIQHYB+fRv3niSBGG1gOr4WUzg9c5QTID0DpYjofsg96IX4WilxcIs\r\n+H0V9Z4l3P205DMK28F0RWSeym15EtirsI4kHjk4cBRPApxL+XxrfzEgnQb9\r\n6ZFLLmvr4XhjgmQD4V4Ho7CK52kNgBBe4ubAKUGXjwAvKvPbNMRqxEb83JVi\r\nbmVKTWYRrXHqRIYIIjZfpFTvZZevrC2iSTqCYWCF90s3sbQlBCPE11U+nA8Q\r\nn/aU40gQOvvDScC2j5nJDzL2iTd2ylvtYa2PL4G7aBBf20DRVJBiutvXsA0E\r\nzET/HWD13xMs2p6Isuojv8bRYiSSHFngd14a8ZYJ/2tObneQYYV3DVstqC9y\r\nINLRmoABf45MbMDww0BOtmaXITCNBDPaulSbb6ZM3OZtsJsM+cubtBH+eYD4\r\n8UzEBtgnplMCeBOgcEHy5tJZR2Z2oYfpBb0=\r\n=JSOk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.de38de758.0","@material/theme":"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/line-ripple_15.0.0-canary.de38de758.0_1675957294586_0.23862067804222242","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"98ababb8ee625cf700e8ac23db0b23ee4ce867b6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4d62de70c.0.tgz","fileCount":33,"integrity":"sha512-8inj0kldsaAn8WritI+9x/M1FzXfx5Mr46FacvgqhoCAJwDH0ll76d2xOsk6z/TCIiAcmwn9z33ou1iO4ah6+Q==","signatures":[{"sig":"MEQCIEq+kb4gZVFmAbHJCqJ4IDPjkJy+uTyxlAMqOWWp8E/9AiAGJiO4rL4kps3dYrrztX6eDjf0Vek0ZCMmle9Yf0/lew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W1jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreEw/9FqOrszF4ckc4yg5qjsObyr4eSfH7Oi7ZuUwDOAV+uxxGZkkY\r\neWDYwEGTXQ5kBQ4Fa6/6nR4xUGze/Gv4lnXRejUjdW3u5Vj97tQRp0Dbplp5\r\nQb89takNTIBmUvSaiL9fE/RGCxHyNecxRjFc0emvIDdnQLNisgcMsAtmdYdQ\r\niAE5tpRigsG7H4kN4AZLE5dP+SHpXb6cKcqavUCfhiruhOESx8UJ/NA4dA5Z\r\ndDZd8Sv0/1XTuCn3b26Md5nE6koadAzQe3xtCEzNTdJ+zJBDzNcRfCj4VKYW\r\n5/FItv06D/NS0AzNjY8D2qgSyHvVV3ZkmWg9aG/GwIBUqiEPf4XnZuW5PqnA\r\nEnGc7Qtk8t+06hbemFtcMg9qijXxiia5cEc5ABJjGPAfRbrunlUMZtLq7APv\r\nVfPA7nP8JQnz8PzSQcdULMqOb7MCuMqhcBYYmfC55QB3+r4e+Dw3aFHhaClz\r\ncVr4DrQDv4GQiYfCvPriXeYuHmZ0P3zT6nDQkbyd82EddSwG4+Z9ur9Ry8xp\r\ngso6dsYkjQS+Y+F1IkcvM1ABbUXWz39ehovSChCrFWBy069NGwILAq1dNtQh\r\nfX5RNZM4YtE3eU/LlT632nf8kt/OjHWiDKNDq2yO1wXNj/X22/oC2XXxsZKU\r\ner7ESD+ktLpC11IhYxq5RX++3zVU8ON8OKE=\r\n=bOqY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/theme":"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/line-ripple_15.0.0-canary.4d62de70c.0_1675980131713_0.2395572341440324","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b53701c932b56e0be8e193252a8d732f1d1ad86a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6fcd8d418.0.tgz","fileCount":33,"integrity":"sha512-GI55LRVf05R6JTQJ+dRc/jvPPRV9dToHJPV7QOSqqqHeQJF6eeUQ74/7GhTU/3ujoCZAmQfEPQY97OxetutXJg==","signatures":[{"sig":"MEUCIQDbIEChZgRCoPXisIk3sXJn/cpS6VFDpyNU3c7/s1eWtQIgSccOk0TjiSZyIc0DHie8xBWTg1VuPxJOo8vciEuNCNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iO4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWWA//TzS9yX9hG6v0HHAAZ+ACX/IK+u7Qns/R3VA/Qwa73ipFXrhX\r\nS9Dd5SBkVjiWSWb1qXSlBiS4mL61sXW279kiUCgy0s65R231uC7lBFB+GNT9\r\nYfZC4aVOxzd5fMYTEGyfQRKaYDi41dhu/WU0HDuV09Mpu7H+UjgfqiHsm2zH\r\nnGGotdp0+2c8iKo6iyomS1dTFRQJsb0E4b1uJeGiYziO5EGQoj0E5oKdKJkq\r\nJLr8keaMciInKRPpskRIWX/UG316i+o6kq5Y/a8Cb+3wJF3N7QROY09HJyzF\r\nk7EQYKUenhRN6EaE8/vV5GikapbFaQsHonZse5DtTthqyj7oZaaEW6iEHUx2\r\nqu5jmKPU/y/Iems7YxZuiIRgAJF3AJj9p4npMBPPLHgV3nzlDAmG3m/WYc1B\r\n58yZ4IwjVbNAIcxImeilZnbwJSBuRvGW1LLvLsi2sTFWF50lbtcZT2NAN0Yr\r\n/TxkhOr8s+/PkaYuj7NJvw2HMal1Du8nRtwiiVI0HiZlKWwqy15g8vxTd5vX\r\nrz0WsBGKSfF2TNa/tbbSvDFiXPf30JxjsUBRug3qmHh9KenzIOohQNl3G5CX\r\nV79nXOWNJlnHmNIngN8i8h8Y2cn3QepPym/T9DGJUqtqnF0AwmVaTricsN1j\r\ncJb4EGOjOXPSjRoDs8Y6zIlQEuT5roNIKQU=\r\n=uho0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/theme":"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/line-ripple_15.0.0-canary.6fcd8d418.0_1676288951785_0.7835121692465259","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c4f5fe0f4bd1014647242869e0c7c160bcd0ad62","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.066d9439b.0.tgz","fileCount":33,"integrity":"sha512-5qNNMtQdelvQt6YTudnL7pbLXh+LmOUxXrZe0zAWW+sy24dMIjR8HhlBKk5K2cJGFupb3GLGORGdjps/070GWA==","signatures":[{"sig":"MEQCIB44EU01WZvF5dSWNGn5UF97UTDU0oIuZ0/ujhEtB3kdAiB8cbdBk/lUdWrHJ2LycPrcmw44eVMk9lPM6ftCarnHQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TkJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkYRAAi69bj3N+QFzcrmXYSOrXdcjy4CatFpKpqNYx0Grj3bc6MLLM\r\ngAU1NsIGkm0vMTKVBPZ5YXewUvpUmMgGzVKWHRFmcnlXGN5v1+wBXNSIjswd\r\ni1my43v80L9xjVMZk5mW2AGb9CP4PkmtCrev0L+MkVjNDDd8767v9j0XtCog\r\nXusgzaSV8U3sCscxm9W48+ZsDSIJD98j+7bfThldEUMZ3/OsMsJclEadsLmQ\r\npLWS+qvTk48FMYZulLS7MkUp7ROSR1vMnw76yrc2Mt+tMzg9KU0fED+rRiho\r\nc62STOINmoIOdASCktoemNZHVx5kxbi1izU6hnOSwzO4rCT6o8m08Fr98xbd\r\nRew8t5Syz3ULWmBfWSorwrZ5JnrUVNjUhLw2OgJB1aCwgp3yJ2NBjGPbtFAz\r\nnqKOAdiitt4OOXyC8EhoVM//79izoxXWMxLGaYHTf0VEHMoX4HlqBQNCWJqU\r\nrQapvWnSBpMjp7JJPYtPFK3KFT8QOvNW+hs9th+CrbgjxBzye0yw7/y23FHs\r\nH0wR1p6PAtKvOnH94adeWlak6DlRYXdhupcN2f/WNq/Tsfhb0+C5Y0ydM/y5\r\nd20CyimC4LwYOfKJ928vh3MvASgZZv9h0scz958WIWgGhDIsCRcbqQ7BEVLd\r\nkaST5qU2JiY4TFjmVXhwYOFgiSUHTAC9JBA=\r\n=fb3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.066d9439b.0","@material/theme":"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/line-ripple_15.0.0-canary.066d9439b.0_1676491017252_0.46222585370254166","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e05d1831870a6f03d9acefef4894d8db1e299c0b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7ab32468c.0.tgz","fileCount":33,"integrity":"sha512-Cli61c2KFpd9UIN2UjRqM4CtmZ7qj0jmo04io2mUnj4fLNryjHFAFXCo8Z6yqH43pxx5AgimpZM0RooXQi9zZw==","signatures":[{"sig":"MEYCIQDy8uhQe81QahwuvzlPgybLLQ30/kKxkDBs4TxcLRpmvwIhAPVizGu2piqqQ5jDejxBkHiGCzzR+pNF8m1KXmpeKpXU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q5nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBSA/+KP8CZ2c/wtnCGa4EPd5F0uEfecAJKEbmwteMrlqFjjTvyZbt\r\nbNNseEzpzbBJ+VhBcSpN5mI1kRejyZidjt9IYJY+VTZIP89irrekwqvx6pJi\r\nJE8w7fPjlt3fSRxUeAnoff4VWj/tOhpnUQQyk9WN5TQaJjscBNBM0Cs7By7d\r\nx28BeiQtfoB3lrDiOU4uQGYpldlSE89wBeOa44zizxEhbK6APPfJCLCZtiRO\r\nrGF8cAl1ZD4IFS0qc4BJXbnsTJi6aMgIAX4JPQYl295GUf6A/CyRj4np3P3E\r\n8T9iiC3xFNDl+rccffXvY65S/hUpBsZrTZjTLybHx2gw9uMkxjW/4xaop4ct\r\n11Mc8Z58arLu/OIbTzk3rms2Zv0yk8L56IMVlCuNLWm9AKp3FPOHZrIVZKrh\r\nLHaNduJwFO2Wq7i8ZO5tW9//Hz+vwJC84/ztitWzPP9H1qh35l9xYKAVQxWO\r\n1ovo4hlp1rfQ/jXBHTHu5CCDJUlPlXFotiMIqR3De4AZGL7EZ+sNrDW7B+BN\r\nuMJsw4LfHsI1giEncEKSFKC8TDuT/lUEk83wPnBNpwezr1eSrtWT/B5BbLkC\r\nfbYp3EGiuY63cMmx/88xR23ToOlv99xSjjhtSLZffbiBH7OSEnjZPUGHox4z\r\nV8QoRtqz/uYsSLwVx5nxvO871hj5ymESfh0=\r\n=s34d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/theme":"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/line-ripple_15.0.0-canary.7ab32468c.0_1677004390935_0.36227024871543345","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ce7e7c0ae0bcc8e05674ba2d30d0e177d3d377b8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fa27ba61d.0.tgz","fileCount":33,"integrity":"sha512-+KamPtLbH7ozsvfFBskOuo5MG/2fzHn+J4IEQGru4j4CR5lbpaSA8xN7k3D+1mB4I6TFMGW6tH/gSetA2ROiMQ==","signatures":[{"sig":"MEQCIH6DO4nHSPP1wPYEQHpAazjg2IBztjq8CUoTXjPbv09ZAiBGFPysUV7+0s35Vx/D62i4jwQjHsam9sdtqhSJmU9gXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NfTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqxrg//byGko+Ap0jAdZgxAPfURam7Bwx6sdxBKLByteCTODyaYkoMq\r\n7wbdWKynWkc45IRGfg1o/UCOalNBZXKvIU2dP4rQvsFq/Jk84A0KJCL45gBu\r\noFZnEpkDE0aiJsGNUH64RPmWhanr7sVprFWTGl8HF0ckz4eo5bXfQD8GyRgr\r\n/3zWay3vMbph22rrU6qKutKaXgx5C2KVQPg8h+P2560THa4NIiC8ioyQPObV\r\nhi46LruDzb6w7bmzwwETI7pFHNIAAIhootRzkqjGUY98c6xMcGux/HHATkuB\r\nG9bFW7dQ/ko/6QnuVNH6nXYQsaS+oF3NdfinZW0noh8ZwDgbDchIhpQBeK3l\r\nw/ZtDsnXrf3GnrcQ/5Fh5EkAXlu7BXWudgw9JDxYULsvZ1SnqZC9PMVj2VOU\r\nYivxIkpI9PMiVmgoztbL8AVXNDOFa7cF0HTxBVC2r9gO3bGacXI4bw+e43Zb\r\nq8H9riEH/gZ/N/EBZYEp1/mlu74v18WRbiRxDOcGVhHJA5vu0SEdF60PfJLB\r\nPIfcGXDhLjldTp5FDrk2pYRm7Qd9r5IZVQ0Bu41H68uXsLMQEAuBPTxC8CdE\r\n824Y4wG2hZ+tyHs/cqYBH8X5AIGoRQVNEH/1zMCeKyw5UQwqL3tocBa5EYfx\r\n57b7ySEBvBhL2cMljXZN4oFLmycRhRSoHM8=\r\n=Tfgi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/theme":"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/line-ripple_15.0.0-canary.fa27ba61d.0_1677514707174_0.033716210920609724","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f59d541cd069422dc982de24246d593e91da9625","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.311ab4d4a.0.tgz","fileCount":33,"integrity":"sha512-xX9o+cTKOvW6oqncxxvvnWCBmFizke9Edofr+XfkWjoB+z5XZ8HIfwSstNkd8ld3nGuPDbd+7/qOmOsit7h7OA==","signatures":[{"sig":"MEUCIQDV5FOex2KE8JD9A8jKkT3ilEEzR763ADTthQoYGLT0bQIgJfHfmAaWAgS9teIh5hto3sIGfmGm3zWBc6uaX4IX+4s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/Nz+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLeg//e/yM9eH1E6Ax5lHjXoMSNnMAqZOq0fgrbTDuZRGPVWO/8lce\r\nYx3P4OJfbjtkTaq6aucVepu5bpNmceXy3WQQAd0i+fS5FsT97OU/qFuXZtSX\r\nvJNmkM1mvMtXLRhRUsfATM+ZHmc4HoowZ1jWA5TmdDU3w1Bvzg8uEfMWfB9w\r\niO5KMCLDGS+zL7j9EiXRFCQkEL6Ml5w2E6Q3xpE5bJl7Z8Ni46w+6oQ6bdd4\r\nye3zvafW7z9ZWUMcQumU8UEuutKi+F/tjt18Si2vQACghy9DQaQ2VgQ3rpan\r\ntfJosOaWZYEjJdkwF6Esio2x/gYpB5Fpy0tTHRGeKMFwZjRrMwsxnohfPyw2\r\n7mPTzMLdu0iPZagP7GVDISIjyddJrSV2NaODecFwNqtf9nTsiAhc/WH/3eiC\r\nfKVxEHjy8KhMb6wSHX+w74g5b5mCZMnMFux+pqIh4q6N4zyUIlLsISXfRopx\r\nN/mkHtwBBHXSXIW+BhHCPc82U2dnNHBFwbeg+C7MuOBsg5SUHSnW7zjyTiRu\r\nKXR26gyCiXyCS3+7lP/Tdm3WrU/C9xD1sYA9k0VgToaAqLkJojSERZ4RUrf2\r\nAZFLrZBakHzdF4XJ2ruF7i7AVgievzeeWF4kupNQsfeY4BitWM37fTvPH9SW\r\n7LSGFDgVWhEiGZUGR4LH3xw8JK/qHxVcfZc=\r\n=HGna\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/theme":"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/line-ripple_15.0.0-canary.311ab4d4a.0_1677516030599_0.11186902480663741","host":"s3://npm-registry-packages"}},"15.0.0-canary.901c83e77.0":{"name":"@material/line-ripple","version":"15.0.0-canary.901c83e77.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.901c83e77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89c08c1ae0347ff0dbdd8bf330fce9cc3e81358c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.901c83e77.0.tgz","fileCount":33,"integrity":"sha512-Eg0yCxMq0lL7wNAloxPiT4MvXZMah8OFvvIqFO4JYTFxm/EJX+oWWwdbMi50rA27var75WAN0CRv37Ew3xit+w==","signatures":[{"sig":"MEYCIQCqJWcn6EPpNPDiZE6FoQXldRiSnNu9d+yot6Gv8JQaDwIhANUSmE/uxLagBzAvfqxETNDjhYoNn29zgz3UZac1u1s8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/PDdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8ug/+OIgX//C2BG3ZEfBml/5FgEfLAJybFibqRj67cJbV6qdD2EJD\r\n3hTNy4tjGuirp6W5dHGlZ4Eg0hDLvybSVgb0Qp8S1iES+cetl2mGJr+l3eTk\r\nFIcaztVTNfg9Yt4XFIcWsiU1OPePzFoOPoaWPYzX1OVANrW1jNuwVRwiFgWF\r\nwL4S7cBxtJtcQYKIg5byulURagorAbHFZTbYkxwLbEMCQAUxitZ5XQR8ikG5\r\nuIsIjsZ4S6yPRhWPNmMnauwj3xl0pv/Gbi/zsvsGc8iWLzZAffOUTBtcisp4\r\naDqAnKNshYXxFzwIVcAAzNYHJ89dDhHWClNHXJbMG0XZBVAu0e8No2qryprn\r\n0OPpt0QR/+NscqEW8S1NENbKAnB0zjL5RgdWkek9hoQzJMRXkk/Z+nvg0hz4\r\nIOUr9VZ7E3AhqtQfldMVL0t8UDak0YhrgfFST3lLFSW9gXy1MuTLVNLk7eOT\r\nufJkjPMBpjRjaqHsLeJTg63LdY1YUTVG30FJPGy9JFMPgaXXKy3/PxtFoV28\r\ndBZZcXVfbMcQznj2RX2kONhonALEEjc5k/cw3NkJBARSi3uOZxpxlm6J6FYs\r\nbLO3jGf5FzL3ZsY7MwqbrBzx3j3uCcOYU2h+x7C3Lwk/waijFx9V+00omz/d\r\n9OKYoCvAHRdptpaqLir6XQy2d4x8rTHxixw=\r\n=elLc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"86c988d321eecbf29bbb6cc63f7dfa18cda02d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.901c83e77.0","@material/theme":"15.0.0-canary.901c83e77.0","@material/animation":"15.0.0-canary.901c83e77.0","@material/feature-targeting":"15.0.0-canary.901c83e77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.901c83e77.0_1677521117120_0.9939602298315287","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9d7676b67f92bad3a525bfddf6ead789225b7671","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5cb8e2174.0.tgz","fileCount":33,"integrity":"sha512-x3wjAWyhXDe+3U9LgGDOtt/eZ8yX23O5mF3yTNprUKVYCVqdsEhy9XdpeSL5y7JBKndR1CJz2br4S73Zk2QePg==","signatures":[{"sig":"MEYCIQCkY0swDkPw9BXJ4uJpeqrZA1aObypuPOeEJbNsTgPRywIhAN967U1SUhPMQKjPIMdYR+kH7Ax/kyjhbBsfBWjTVCUk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/36qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqpcw//eqs/e8KsDndkknYBISlmPIzZ1UFmGDpVvoejBMuxSJeg65ae\r\ny5opmRDEm5L/X+J/JAFWdGBPDv3YgWSYn7VN8CN4D/k7q9YIXX21yvwo3wkL\r\nP83L5BtiqNdtBBIvALrvP2VHKIExky+VfUb1xh7E9SgS9T2yaZQEBk6rxVUp\r\nNzBZVCp5RDEd4f6vg1th+STx3ytQ2Qi/g8hbMIp543kCP6SNKMaZQhY7XZKb\r\n/Hrp96E6VeL4nB5J64C0qUmYr7A/hUUu8KTx0kzUfKZ3xtLWyv2SFMewPWUl\r\nMblJ+sD4iTyxj6A+OdY/q/mO85MSP2r4E1Qg3or0kBzHgnARlWo8mO9r/Y9b\r\nBa6Z5IP+BxflNUJx/U0SYTnAeWfsO6F45StdmmG2ixSSHCYhllxyYqpwdKYV\r\nZQ7zQVfjiEkeYT/KoBWLK7dE6l23ADGhHa2F6U0qxp56wgk14s42RHBi7Dne\r\nLlPIuYPfoP0qpyJ/bNKuoxeMvra0cMgh1x/mo4k3pU3thlkf3mWyEbmh/26Q\r\n3r7p6PHAmDoSJf5DD01oBmBBgzHEzmMUa03AReKup4lzsW9dHzFJkFuRTSTn\r\nQR2wWaqGAcz7MlQHPkaFvt8AhUOdH9DH9VdsYZoKmlu+t9BFQKPAwF6KpPCT\r\nifKEnkEZrSxuRPeMatqtr9zCl4+BaJInTvI=\r\n=LkkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/theme":"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/line-ripple_15.0.0-canary.5cb8e2174.0_1677688490496_0.6934238101934544","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e5da57eaed025eb1922b9f730db74a04ab4fed66","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f32339937.0.tgz","fileCount":33,"integrity":"sha512-8O0Mg/qg5CyssDakC5wjWUp2VQ6VUlCGkt60hYpucIdZOlUs0CayZlCXjoFiEj+Lo5815tmUgOofHzokcBxH+w==","signatures":[{"sig":"MEUCIA+eKs6fUDbpBZfsaUIC9MvMYW2wwW+hK6FD0fph/GhLAiEAkEOn7YytUue93FBAPhP5dvlLAsrfLZPdxe7wEdGcEGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgNoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiSRAAmRXD13ut8xkurmyUVFzVpU9qdJy00+xieh1TrOoDcBkci82K\r\nwNu7uSFPtPpbL0+wd3nrwY9jJv4OV/ql4vquN76bEVRTZ4IqEjnJaN3N5MxS\r\nbufpbpRcObRHBhT23VWNeS7daVu3QM1LikytcmrOEEAJMWYl9pWr0+Ke1FXA\r\ncnESiJ8TyB13dE6cyGf0sECutYhKVb6AcIdsiflZCLXLVp8J8ugMAFl7R+He\r\nXVnf6QiwQyIsTuKLBxDyI5YEL9EOI5ZjHNNu643M3Ze2xdGg09D4NnivEQEt\r\n2qZ2QTKuxAfxt/9qvRoTXL1wGsdUKzU2hP1c0UahgyuZoXMt6IqpWmyL0lYx\r\n3/9P0fPcg3IX8nGxULabw0uJB7XMwDF/3deBEArEHDWNqrxswFRWezAJHboU\r\nHcAFU//Bu7SS2dN6U/VIWCHJetNT1XzoPyOntghcB79/RVr7HWcHEfluvCVn\r\nBpmzSEDVV5ds9EokNdn8/ZZFll7ECuS5vV72oiezvHENSc9+jmVjszHMKl3i\r\nqZ9CNUebcu1L34fCs3VbeSA+gzg8r4V1lVoEifvFNBsPQH6Q5e/kQuz1Q6gz\r\nyhgunKP0z/q+8SzvYc68f+t5Aey8B9GFVCND9UdZ+CIsEl2oY6l4w5QkxwRr\r\nKqq/vgI0A/Jpin16fL4ghBYQXBb+M3KL6LE=\r\n=tU8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f32339937.0","@material/theme":"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/line-ripple_15.0.0-canary.f32339937.0_1678115688013_0.7199422117924403","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"02fc85facf41841dc6de6d79a3727f88bd03b0da","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7644d63d5.0.tgz","fileCount":33,"integrity":"sha512-vinrUBMSvHTRFFjs8iAVkT9phYjDj602/OyCkkIvRXaHGaPN1LxostZBXWq5q6AWserEQ2PWCJIqa1f68XEkGQ==","signatures":[{"sig":"MEUCIE0IBQXuDEvVtLBhlhcxNBIVE0ub69VjBR9LkH72JDRDAiEAuq4GFZti6tcFssXqBN5xl5bOzeFeLBKZ3wDBu1mUn60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmihACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNNQ/+NQMlw7FhwUV3m+rcG7jVnTKYXwHypPXV8nH9P4Cgqx7ZZ3OZ\r\nvj5hyF3ywWuUifcDRSfIMsgGXRGoXcdUAeJgm04JmhFeT+brHbIHzwfH6GXg\r\nzRUJLbKRxQkoGnNfdRp4604nHoSTgU5T3SUG7lv1QB6aQhe/SsJrr638LqXT\r\nuJe4kBwEcd682bqln5Tx3C86ltSHP/CHxu0CRoJZ/bthOU0dkSLflq30r44B\r\nYGHOGukGsyf3OQEPNtordfIi25RwxwXRvJldkyTg2syqh3kFSIN3ZXVw4vau\r\nBxNYPGLHOIh+YjzF0cIwrxq6YrVii58/Vao94+EjVkDcoNRXZJZ/1Pons/9f\r\nY7mF/rDcF6Gq0whFcBDfH+V1jBfchJxLm8shlg1m+uCoJiiIIlWQvXoFPtV7\r\nNCTWxysnaTYvxdYd+sIQla32qGjm4hssHstCOuXDJdJbrRLRePyLNMWD0jGh\r\nldrOmddlW/6zJP6P2PnZn74mqNAg79LeBhmXJ7NTRwp9cR/z1QLom+vWTOXO\r\nRRiT58QC4Is3sdBuQN69/0gsRJXsFiZ1Q+oTtLYOyLS0PsKvoPNPqVwb1EHs\r\nZr54TJl0D8Hs4n6WvJT9PL0S1PJNzzvU+xiJaDR5ej5JCOygW9H/BwZuecDu\r\nXhf0xCgyW1gqjqJVW9a1LzRUrNmeY9Ra+00=\r\n=xhzF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/theme":"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/line-ripple_15.0.0-canary.7644d63d5.0_1678141601509_0.49125566073709703","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"492d183edc787897776bac48866fce55f3f5d4da","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d96330c08.0.tgz","fileCount":33,"integrity":"sha512-0/HOViQ4MllwPOuMpvtNBz3mip5eACdi2bCkCTKi8OjEK2J1NGNRMxrkgFGV4BZ+v9DUfUYVEb9UzGFiCCJAUw==","signatures":[{"sig":"MEQCICbVNUoLlqUMj3uOFZ8May6vj/7HSnusjkKUAkn/7YsCAiBoP4gBwIagITV0pMwNH1GmsZ+s5gQbVXZigZEeUevPBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHRNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV4w/+N6klWfyIZsiaCZnrdhPJ1zHWxr3NfLHew+GixFmDJBAmN5i4\r\npqXyexh9Mrd7xRQmyPpCz/zrBwQU4x50U4N5SLLivtyBEe5RlkUSyQTcCq9D\r\n24tvSJu7Mrf17NfQEV2k6a8Tkmyj0BKBSx+BdVut4MXcAvoVVti27hMsxqV0\r\nd7/6kKStXbIO+eRe+ZHY8Kv2bRGeD/pLxkogqCXKFZhfWYJBfytkCoimxPNB\r\nEbKrKN80TuCSUZmwq/STewiQGUSshfpsH8PWT1uVgcVqof+T2WLEou1ZbrMJ\r\nROy50RpzWe3V5tr9WQXCK6mpUUgcDO+eWRFVmxVErcLgDDsRmwCbtDe2Ykk3\r\n1buh0N3sDrXA825wtWugfad9wAAbhsIuc/+fCBNmMbYLF/8FJyHJHh3Pd6Nj\r\ngcXjHVJp8S+OyFvp7p6w9rk5xsVrPaL1dM6ypTqTepOOieszF8WS9XTXhlce\r\nN2/WM9vwbwfuvvu5W1BW9Yw6osRgLVgfS19m1mBPenWalI49YBFXgRnEah2e\r\nUuUCOP7CVlc+xk7eSuy7r2UAQOskY/k1fIdnyS9bD0nYa0jVcJpObhBdj1Nm\r\nKCUIY+uLvvhrcgUZTVkJ7Cp/qxnOuWG80HCdiHi4n+3xkgBSy0xRvX6anrO8\r\nFa+IMPZNYebI4CU84xmmpYiVEMdK7sFGlW0=\r\n=nu3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d96330c08.0","@material/theme":"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/line-ripple_15.0.0-canary.d96330c08.0_1678275661768_0.3006580076120233","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"07969acc74d5880ce7528c3be45651e912c6d788","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c99cae77c.0.tgz","fileCount":33,"integrity":"sha512-Y5Q9Pf0yf8drBCKICd44X6sWxpdpMALl7BPV67Mbu/0FsxbmsT0BExlXCr7HI5owMjzLM//9wl1nk5kZY2vtYw==","signatures":[{"sig":"MEQCIG0j8in9mxt/BA+RuRo23TFM59qFHu63NE4efStoztfOAiBPY776y2tY/UIcDzAoQqNJoYpC/6Lv29bD5ciTlK7lCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR1QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1pA//fP/cj8lK7/g6lqATYZQckP/+D9Ip/Hctg+KWOc9GNEsjMBoF\r\ndeiXWN0r2WQKqfYqvgnwyeN8mYXZtoOelRCCI1orGvpKW6ESf//VIApvXaom\r\n6bcyAWS0nA4MYsNLQ6M350sGjyTvpdW22XY4z0J06hA8e46V+dR1AkVLvmbp\r\ngf1hzrVyzVz2bDnWhX2q9Nb0xKDZcccTyhTDOqQSMPFQyiqdNx5eGoREjsTw\r\nA6rK7zrA8tIWOCrRhnvFcX/JOz2wf/Ohr9dSAvlHbVj37Sw8Cv0MW2d0SDtj\r\ndqDPEbq0Gs3rNJnJShZFFkfTOzof658w1UD719BXrGHOfXDRLAVhYQ/Q1JTh\r\n4pH2e+xW5f1M1PlzRaR4Fm3ojxp6uYHJYj34Tkc2YC9khbZkyS5Kq5MbvQ4T\r\n6+8J+BkcSBl1P0pP9ahKZC0y8XzKjYEK8zsXNXFSAlNsqGmS8cL6370LCoXY\r\n6fnqpo4xWScm94CUDBGPr/SMCQRdgbKxEPkfiyYFQ386TkZfLZb1QRLYdjH7\r\n/MsBGgq0+LLUb3TnNiXv2giRu8GhWZ1EkL6zkZiUf+uI4EpOS3EibpYP32io\r\nw/y4vtrqiyzJu8x4jSNFL0sTJKXheYA8V8PQWkP0wru8tEgLwXYDia4lmHF+\r\nuEA3iR1JKMGQZCLIUx/DH79ey0Nl2OnU6Gc=\r\n=bKZr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/theme":"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/line-ripple_15.0.0-canary.c99cae77c.0_1678318927808_0.503280487611705","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b93b95f6b57c45548d1830b00383b8e6cf3ca82","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6023b1cd3.0.tgz","fileCount":33,"integrity":"sha512-FdKzgajCxjIpTVhRNYCq/Jp/uAkWCBiMA+xcFeYlkTsPrNIv1yIuKC3VYbBkpVXe6PRntzzP1s5sgHEJdRhdRw==","signatures":[{"sig":"MEUCIQDhIiH/XLilTL14PdydEYL6Y4o1/xcyZvKINzSvUZ5aCwIgeFH4jKxqDFd36DLL9ortXntbV4i2297MMOgChYErAKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCexjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrdw//S5Y1NKZR3hkGzvGZy+2oBRPIGjOCyh0t6WJqIeRKq2yMCbZe\r\n9bF2x+BsQcSeQPAafWJO9++iRovnq4TZcRVYEEbQROkcgQtrRlp9PHifFLjf\r\nL7QniOWOa4xLpys7xk6B48+xIKvXdiAXxXlfcwErO6lh5dFJwP84OQ7T9wXK\r\nB9ztiBGS/o56iPafHKXaWw8vBvBQVtmvf5VIy2dOwwy93QLeC1dU+Swp9R7J\r\nW4wq0BYITWNMRuWqZuQOUjN9z0ibh6+HuuFSWIeW9Sgt3Qa/sOqCDXoz1gs8\r\nbr7BOQZovYqh8k1kQzkYY+SdG/BUitKMK4+ayYfZNQI51fmyNX0sLrxx5IiV\r\n5hI8dcP1DT4dKtOwQJcW5VCtTsUmKKmR2+cBH/3XyTsyZL53JXnD5PnlJKTo\r\np7FXUeWmc7HrM1vYZYEGhCWqabVwncY3Ec/wodvSH31T8+BZiCkAQ+lDFSXZ\r\nXJbZs29igf4sb3dbfVkzYpCcWnda4cBRiu3lbOB36diQzjArOU4+PuJjWazd\r\neBGUNFSTkOWjt5331PPGRk4UbnKzNxMnIKxvkdE1Z62+/5CvHD/iw485G6dn\r\naw/Spw60J8umN1V+IJNrygzD5KN7Mb11QPa2SNEcJObpob9yWiAmjNPSiR6B\r\nKvPkTwrpdM0iCFgGpg69J6VpKQkqQqOkbQk=\r\n=AXKi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/theme":"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/line-ripple_15.0.0-canary.6023b1cd3.0_1678371939463_0.09513471405749852","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/line-ripple","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"01bf8c23c1eac3f5ca8cd2cf916fda6c18097d21","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.274610c77.0.tgz","fileCount":33,"integrity":"sha512-By3cHPiuArGhVTCh70voIhrJ4y2/wLlGON7Tm0nNSQS5pTXa4guAPyTWmH83vP5/QZVabjZn4jQQVklvVqB4gQ==","signatures":[{"sig":"MEYCIQCVE3PCFg/QwoMPi7rypJfMeKuL3eO3sNym8SH94hO8bgIhAIMXBX2Ss6Blxzi/SMKtCGe2IsjdMdCu5I+LJAGj05cj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfPrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrfxg/+Kdwmzt2KzAj0wud5HGadozvlxs+/Cs46akhQe2ywmY+tNEK7\r\nkijKGFVyaLK1AsAmr+ppaoqTb9o0sYg4Xg2BFzra3wUgi7IKAkDjXDtAxqzp\r\nonRK1fl3ssrX67pGL7Xlo2D1B0v50FVd1CohmmMAXnez5K7HOIW0ak9jly3h\r\nb+ljX+XQOrwWNczA+OdZ/CpSPIPcfk1b2PPcTR7FBeneD0nNIV1Ttr/Dw78K\r\ntD7t6HsjGDsQ4gcAuFkKj/2IRSKZ8NJPqFSUiTNkHD6CYr5Nyxdt5Wp+gAYP\r\nV9upAE/+UDgevwZJihUyAboJ7xpsjMzCdn+0PVcYUudl/rodpAJxdCjV18KN\r\nmvuph2Rn0a9EHYN53W+YK98wfTKrYR65/ur5RPbXKg9rv6cDVMqdbz1uDhkM\r\n/Z0Lqu57+yhQF2uh0EwU+ZTjak48HKXvHDvo3SgWbEEt4PULhV9Pli39inOb\r\nWYGUNIMxgNaTQTXPsNREJOSzFXMqiDYvLSndwFRVK8lUorL1vb5egHVpgelp\r\nEJsz7UvJMUZyFLD3g3ov95BNLk4aBr68QfbKGEaxaaK8XuyFfI9K0H8M0T7M\r\njFA33hEssUk517EgyJJw65QuqCg7/FwQCawsNUfkhJnhqAw3703wQzrBxDNe\r\noeHVXnP9qAwdqQd+ZM8yFTWUaLX3a/KvLFg=\r\n=aJ13\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.274610c77.0","@material/theme":"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/line-ripple_15.0.0-canary.274610c77.0_1678373867022_0.46138375014682476","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5229c36d0a4996433d4c813c6505c3e828de518c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a274583b9.0.tgz","fileCount":33,"integrity":"sha512-9l92dVcHYfS0xjjx9h8rVGz79+1KhWPZ9IFpRF51LlHi0qX4w5SZsdj81nbhg+HRG9MBAtcV6OXj0ehGEC0Kng==","signatures":[{"sig":"MEQCIBSa5sF1eMzSb/IP3h/Si20Y12eMEBgPqeH6c3lZjLGKAiBjL1niNJdH0lHmpYr66dseWflZcrd3cJxbddMnlyXhew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjjYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrlzg//Tf6dB3eQVNXLvCMiYQcunhUIwL5jFJw7dhQ1z3WR7cp7zFh+\r\nF5so9REABjrg2YdK6HQq7Vq1vOrWUf34I+IctbrYYnhxmOOJOguhw8Z+2FXy\r\n+E7kaWakyVMa9o/KzolZ9gym7PGtsusvBaAURnF+eMQsDauPW+261g9WUlGD\r\nTOdrVfCuMrpPCwt+fP7egwCiw/VeJt+0zzk26VWUxpZbdmPXur/T4xnstrvb\r\nLJeHLfl8jgTkbR8raCovxAfobYsWMOIRj7nLojl5u6B/lNyu4UDHg1wg1M8W\r\nBWdi+3H3ciFOYKExZoZ6cpphLcsA28pZEwkKgENiXwN1GGeQykMn18JKS67h\r\n/nCneFvHoyokVfDPTuWaUFkPuP+mX8AtK9q2AUYIHtx8hS97IT+bfwdoG+oW\r\n3c1EB4vXAd+R/E71X6ZCnEDb4Big0PymuMp6Hm98ZSv11c2L3csLsmz0IuV4\r\nmMQpQhIF7xyGELLq3RvGuAb8Jf/pCy3gntDllFXjKqaltZZB/5IDggD4bShT\r\n+uMEJLXNyoOEpXPLWrIdrvJQmndW29M/nzUYpUtOxjOuzI1yNo30B3Uk+PWE\r\nfLV/xrhdFJhAxfZLK16aRmxYI7NGGPQeWrdaO+D4J046RY3kcF8kHXGzCepf\r\n3ckNYwQJF1EDx4mkixQqe97WCBty45SX0Vg=\r\n=GuC5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a274583b9.0","@material/theme":"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/line-ripple_15.0.0-canary.a274583b9.0_1678391511977_0.01743118605321281","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/line-ripple","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66832983a0fc0b045903b6f7dba630843eb071e8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.da22ca960.0.tgz","fileCount":33,"integrity":"sha512-B6EyPUZM64xOsG4cMbQZbWUoRW6X/Uad35waqni9EFN7sxcLvbR02xnd139V3yrpqlpu68g0UlhiZJ/Vl4tCWA==","signatures":[{"sig":"MEQCIBE4HLoPBn7fSYK/cDK+GrQYcZAUdVUTdtWZnSegyGLLAiAo9PmOfN2Ze8IFRPKTj/GfVuiDgPkeaV2CIxsyX1DZPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH7w//Yex9kjQdMxFOLQ7oAaqRZHy6dlhs39EbWNOpRJLLDlpVyIr6\r\nGtYp9oTSQ0tLlNo7RUUx8Clx5OviY8Und08RPDe+JQgmZAtKn594DsSO+gw0\r\nYJ9In/eIPqKNu355C9LxnOC4nHK9TZuyimJNQC0WR0Z3c20VV9XnK2gJTZJB\r\nfvoWsiSEUZbTUnmxgejzejz5S4HWNI4Q+kQGtCJnkQlkFS16LZGG99IjGCK4\r\nZqbAGogLU2NWaRr5tfg1d2W+tpcSw/M1QV2KuLYtz9hBdQOqJf/RpMP13B66\r\noEbaLVFvz8BTqct2PMzQ1wcAGw2SzXmkPkig3IeaKK9uYFM+D78ernO40wbs\r\nN4NJhdMl9maMBg93NBx8hsVSuVFVqsujTvo5AHrQHFf+ljo7rZlMg7fzdxfX\r\nTGfrpwHLC0p+mJUrEpFebkYy/hQyLSisfg0h5qyROChPeD46NNC/kJEmkx2x\r\nz4sa3UyB0D0i+O5iphwg2pspkdhDFiczj4l7ft2tNA5r0BGDolBE0s/x+4bs\r\n35QweI1+qEbIgCkqSHnBUeNNBi4oosh5enE9KFiMvgjdMqi3S1OzR5BvqcX2\r\n+4g0pifFSPsTA6K65p3ozslvjH6Non7ConSEGMigVDzFsb8j5tU5f4C6QOLu\r\n3G3e4xQ1LDTitJS9inJ8uwXbI4whMBWNqZc=\r\n=YTFp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/animation":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.da22ca960.0_1678393041755_0.9111233707175586","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9fa8946fe49e86bb52f5bf42226b892ba23389ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.304a94e8b.0.tgz","fileCount":33,"integrity":"sha512-F2gjn/LLmjrPgNLpadkASu0PrxlDWwcBpUKGSERbLjfw5O1NHuWMoqn8RiJFt51ntPQDkiDpl00HNQGp56D0gQ==","signatures":[{"sig":"MEUCIQCVmVJcKgboOiSfrwV3lW5inYAsU6EsvI9Hp7q/9aZZPgIgI09Syph5mZdMO55ztUyzYeLb0g3nvj76mOzoKH+PR0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkUeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdLw/+OCHD9v18YPRKkchc+dNbHVoPoCxieelampiEd7i/dboWYenk\r\n0N06kFdDaRgc8w4dlIE7VmW5B03qt+K37mWwHqSA+yXssA59HIwZ0S8ydxUt\r\nKsMyvBIP1dgvy7hguOkpNa4BfNTDEQnfs34ADzGcb2CZcGD8Y1DGJLSlRPp+\r\nOa8tdtwzmWU/azoEhxmK3ZuLfCyXWDTgcBhnDuSB9fzVwMGNq+QTLI+rNvfZ\r\ngJGk4S6FALoWb7NYlWaSxu8O+8e7rIodaxkROO+xr9czUyMCGOebzghpNi14\r\nxZ+V1melt0zZyj3fKfpMMwRdqlrCN5HTuR+eYUKJVUIkLn6WuYOo0aKyW0v3\r\nfrrpvsDr9tphQ/5Rg1J64p1KbIYu4Bq3/qCIt73Y4fx/IIhthaFvoxSxeW94\r\nQiO/NPEZc3D7i2NVs+1XzDfOa/jbueOWnyytMYRuJZHyax5zI8d7ILXaOHlE\r\ngdszKGvrcuTx9cjjZ+DCQFB2kypM/62/PYW7zWbv8lG6iRcCXMWX8p4A35qf\r\nOpORT/LfnGuyDVTmx33uIeseefRW6H2J0lfofEwwlMv4jiFyJZDxeeFvBz34\r\nE+LEOOI8VDjV2wMcLVd2R+WlgrLpT7jt9zrk0rctxDI+xgFFGDXdJiXv7Snn\r\n1EVRR+8e7D5VlwXvQev47LL0HonKbZh3hzk=\r\n=iwg/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/theme":"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/line-ripple_15.0.0-canary.304a94e8b.0_1678394653864_0.045907816714910066","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8d47022b05cf32ff59c9f27a128807c76ef7a579","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6c265915c.0.tgz","fileCount":33,"integrity":"sha512-pZwrEW0XROiZ2+ULXev10FMDoJUszK+jagK2MmKmEP+udxAqpTH7G6LiDrhDRhvqxRAXTFz92p4nkRXkkKMSYA==","signatures":[{"sig":"MEYCIQDJkfHb2L3RAYzX4XEfaJZMIw3bgcNyYsD9bH8YtM2jIAIhALl6OtvQFhrJCsDNgZkCvTobBTlwY4wft/O2vrt52m0q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClO4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRLA/9Fz6MVCcVcx6afb+SfG8H/wEpgbaUzvv15Dz3kVxDtqCwcioD\r\n0zYWcS4Mqo3Qfy3vPzJqOo1IeI7iY1ZrgiUFC1JrR0xfo182IBipxILNBcbb\r\nX6Ti88HoxJrWjaxGqiDqdHb8dz11XNX09ANVDzGJw9auURR5Ve3iNRAXsvcq\r\nPEA7BwiVEjnoi11VVs8JN+WOtuzjFpkRjD0Tv1R7kqyDWTj3x8xwb8r55FcU\r\nMKhOwmPdvjnUyHBkzIZjFOf9l+BPCRJgQzLHILqP4RWULPq8ERkfD648lCK6\r\nX2rb4rdwm1XpyHeOSzz+xhKHBm0yn3FKigqOQli67nSJOKpb6MvttOrX5PSg\r\nF+WWbTIUkZtKuUS6n6Di9ZTiwS5iQ2noaQ/pvRiJKU01LB0VdEX/iWq8ain9\r\nrcu+p+7Rfwey3wMxYZqKXuj7RDJ2Mjro4xhf98WxDgl1RkVYkRz5xNrZGh2c\r\nSSVm+ucd3lbwAyJAfL5XHePus6tiHEz3DUVEYTDkppe/bs6DfMSCN4BevTi/\r\nCCVg+xK2XPG030hGCcffyjRpUe8CnJyt6x+P37j7wUjdH/RlWk6wjxQPZ4lF\r\ni56qbL0MgWss9pgK656xepcEdyCklYLRDPx8wBoaEbpE12zDtT12lcPcilVN\r\nqAoYcuD/19lEGRHvQt3lrHZpFE/CWsH68QI=\r\n=mzn1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6c265915c.0","@material/theme":"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/line-ripple_15.0.0-canary.6c265915c.0_1678398391976_0.9434368981654466","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/line-ripple","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9b7c6526f656de2566626e8df38a0855ebabeede","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.de5224633.0.tgz","fileCount":33,"integrity":"sha512-tOEzLhYKlS4yLhfC55WXgsABnkScr7OeNrPRizj0mXxk66Hf+OMcIB3leCqfmWxbyjdNCRsQSIy1nzEOgAjhlg==","signatures":[{"sig":"MEQCIGsCR/kXe+mYMMRe22hww4STtOYOei5tXTy4Ne5Bv/BWAiAWfRbZJVpCRCH9uI8GlA8FnW45eHXaT9RMkBC+tSwGXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnHVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooDQ/8DmsGC2cTOvBJ1bILPCKF5c9+SMOA4HB9O9LmFCiUMBSP2FWA\r\ne4wwXqaNup60wQ3+GTsclGXFfrbkHINop+vtbgIQ6OVZz/+GbKBK+gtmZ1U+\r\nrpbLdOxD6Okr1QJ/10wX8fn5ED6BvIEGKfyWCpClvN6bHrPbYWj4kfuXkz63\r\nCxyynMq+q5FFXf7g/rwE+LeWosXfk/6gr76eI66VbFTH7lSFG6cFTA5Utdqb\r\nAJdShdOiCEzH5b9jJ/OLh+TZwqXUjRytHdhe2vRAaqFADiVrkXMg0AuOCehr\r\n29WYiElu4ob87HPG15lKptF5ins/mx/vazaB1pqIunfweOxFm7t+d5bCnFI8\r\nJifGrgqKeHOeGLN8f8onWYE4xNycmCz4FHHFpne8f5hZaxATBxdZ9LWI/uPF\r\n7w+8jahzoXE/aY6dvE1egjn5uI6XJnqdTp0+BfZmKe/QuypiENoH9o+22dFr\r\n8CQO5/nzJWQt1zAenWdI7R5bUhtENtDe4cknPMDBeanG5V6PYNfmKuSEGvq6\r\nMqGdDegpwdssDjNR+Mqpz+x9r4h3pRJWH013BnboXl7isB0xAj3mRKWWvmR7\r\nhAJFpMyVKuQh553ozUwQiVbUNZYrpMuXXfpYm5xo6FtnB8l31cI3egODqVLF\r\nzuJ/DKcGew2oDhxz/gbjGkrxPLXUjuYVJyw=\r\n=VUxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.de5224633.0","@material/theme":"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/line-ripple_15.0.0-canary.de5224633.0_1678406100959_0.24795906734830142","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"344cb1b0b5071041a395532d5c3912d5d52af097","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8879557e6.0.tgz","fileCount":33,"integrity":"sha512-NOWfcZnwR+QfcA8EeosL3iHmFyAP1otxsDe4lb/krg12uthW+Gta5Zv3szKSrybZuulRlr09lECofA4yb5Gcgw==","signatures":[{"sig":"MEUCIDGZYOC2KCNNYK3B2ZpF7pm6+QuRiHaxnpnOse5eFv+4AiEA5tQkqZRB1p1tuFFNfvfpWgViODoK0x+HcGuZtXmfq5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzmMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO0g//QF0DIZWbRsFOs+ydtWALkXs2EnjhsmO+Ck+cE2e9DavYS+X6\r\nozaNSut+8nF8O+6zNk3sFmXUmmPTRX+SU79llCE5xbHdIu4dWM4kGxer561x\r\nhbiWqKv9ujd3I3vGJ5TgO6eRBKGYFKk9/rO7QKlRdXiUD3UbrMDuzFP4+XR2\r\nExd5cgEssUlLwbc7ZVFBVFyDEvgCSvQuO0ZZwewEbxG2xdSgq4x+zVr/8orW\r\n2RLVtHVPeFa3RgCMftHv2uk/gai2q6g4b1egaSErg48Ra+4IvveHinCk1Q6k\r\nFvoVqSlztsASIeuwHuXQm91PtsY0jN1gTiOYTubbGzE485MNRieSmhjtNM7u\r\n+jZIT6G1N4yuYeMSsnb8FlNH+AptI8A97tkUFFSlduiZW0NgD6c1+OXkHec9\r\nzsYT2F00+6vnVuvjSay9P26lsLqI4SHzXhSY88fxgEdLcdf6duNixIBen+Lo\r\n8W5hCWGK0EUUBA4xAiqmKhvvvYGOM/vzDu3/1uKo1fSRXW5h86/d8C0F5mI7\r\ndU2XKG8HKfFn7lzLIExzHfeVAq4oka7TBeNNNX1n2pDe9ujGobP5O29YUKIJ\r\nNW1UCLxob7K2VANTLP1uy0ro9Ce9B5I1cU1JdCJuWmsLyv51QQSEybxbnt4Y\r\nS790gkITtJyap5Xz2ts9UWydFz8unuIhMW0=\r\n=oN6I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8879557e6.0","@material/theme":"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/line-ripple_15.0.0-canary.8879557e6.0_1678457228487_0.1809558864634293","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/line-ripple","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d494be6a911dd347ed093c24edbf94f2e792c13a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.23073a303.0.tgz","fileCount":33,"integrity":"sha512-Hg+vzcHQxbZ1bb2P/7nKw2ecsggXEauYz0+zPQ5paHArnDMzEtvXZcjAvfE4FbG0e5n5Qgs6ZLJEmmhWmxCLMg==","signatures":[{"sig":"MEYCIQC/Ngj2mA7iloQm3214HPm9rzgMU04uGLrlbNIwRdjt2gIhAJLx2QDv4Ral+v6HN4sDZjsmFLpZ1/U4c0IILx6sY02/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzspACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+fA//V9Ys1Fk0KCEZyge4zet9G1gWeDRodrv9s/RPf0GSOuq4rZVl\r\n9fqHPImD0fcb3WAWMV8OgIsvYzlHrL/bQLSi314U0fH+GWUgOlf/2RD83ovd\r\nlkev5j9fgVVbDat2KDyHNgUxMlmoii6A+L+Y2XyNhNII5Vq7VXwFEEb7Rlon\r\nrAzllj5z5uokmrN9hfDSDyV3VLMs9pQxMkI+0qDBLRKauyGWXQhv5BzOlW7o\r\nIilittQlA+i6iUp7mDuMD/IfSFi2QERMc3jb9YBZZZ5PA+g/YPGJPq2e2nOV\r\nMjaNM+4/CBAb6G0QJsF1tRkAmHErCc5Lpi9sTSvuw7xDaV5JnmMz0r9EVlUe\r\nPF0yj4/TKxhHrSpR+UJH7Fct6KcVQb5kGayTBcm4Txg5On/vpBoPKyvP0AmR\r\n+nh7pPcwHeSKCj8nnW+EQCze0O+xztW+SpwmNhTYqtAcHFmBnEGpEKZo7L0h\r\nzE9Za4O94SqUoETsEJx9C4gJS4XonMIG+ScT9Efmi2Lbt3Vdr54CWI4hihGD\r\n/a3aSQQcDre+AoXv9nWfZ7XkUb6FUSH7wzk7Qm8OGqc5A1BsqClbjhO9+6G/\r\n0VoonduBvTJHUVDKMbf7pAUUwgSMs4Ptf+jtBKKzcoQMEiu4iiFyi9MbIFWc\r\n9fdGTvxOGD9j5WBRwtYUjth8AENWJ7GOasM=\r\n=EVOV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.23073a303.0","@material/theme":"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/line-ripple_15.0.0-canary.23073a303.0_1678457641102_0.9425578032167674","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/line-ripple","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3dea6393ae247e485a7b85b515e62b016816b854","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.51c7d4014.0.tgz","fileCount":33,"integrity":"sha512-ksdfqAXYDr1nFGeJ0Wr2w5yMoqH8i9ACtpJw2rhyBmwVuH2Kgw1XhlYIOImklPYY+PZYRHVmK8qs8/muooEPkw==","signatures":[{"sig":"MEUCIQDQSxmsZXv1TIqD+daO0GvBiSXw+IepkCNH5P5gIHOEsQIgRbG4w9gvvyGMiDz3cZMoIey6Q/uJt+HGkBByr6wnp6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":471964,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC17tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2mBAAheryeEpxC7k8r/sX34/fTL+E4Z92WaUXi3jhI0Q384ekm/c+\r\nVt1bd75HhQUao9ra3fz6lKPPQKJ4mW6/o88XGVI8omCGITXeeCGod2N29ue+\r\nTpqsToN65+iHPj8UAEiewi2wE+TYYGuIo6JBeqH25HElWKVvuNRYxarDPzyD\r\nqigeqSL6yiCZMb8rEVQBqNspP2Dd+UVuPiMqbkLIqVmFqRO70jLx3Yv+9uIq\r\nJLVSeLP7NVVoNoioEVqlbLoSW5wjglkwzkPxUP5A9einTSWbR0ow9GcIESY3\r\neNxgCT4SpQeOAODqfI8m9R7IbLTHcVUmpiYxJRgngnHFnYUjg+xONDTIKGW7\r\nhliv8cvYwhKzyENUMpvJMdNIPTP9NRYkd4BBIO13bG5w6P7nCjBwEcKD1oHe\r\ngvpo3zZ1DanoRp7mFXMpyNT2RaAbVj2bcv+pdcQNXz2ZCDaoadhVWMFJGwau\r\ndxRIrtPASYhWvSd1hEvseuGJoGsIqswAiikwWSHAQYSOgK4ITxbgWqcXX09b\r\n2hFr22E++Fu9cqSo2bgrEjmjbJaozfp5KvHIgHDVA8QfUDlosp0yZR5/Hv9U\r\nW96PD/HKiGIf3OYWM2Eo0JZUOFBQeq7z2MtPAJ3bco82s2ZZdP9jvw3VRGKu\r\nfjBv3CVugmPfJuielGb2lS3a+qbJ66cMCzs=\r\n=539c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/theme":"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/line-ripple_15.0.0-canary.51c7d4014.0_1678466797104_0.8759382180510236","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"aac7181c593838b7a95498a0d4762757f14d0e22","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1175a5be0.0.tgz","fileCount":34,"integrity":"sha512-VvU71y5qWnjVj9dlnSWJh8RAawx58ELBq4ULB6E8CmnFYeqlLSQy5Xmt3x5sNSdSI4kBUsyRO5pF3hbxxepwjg==","signatures":[{"sig":"MEUCIQD6ERwMyZhvvVHArNKd5rKRx3uVJi2D3CuWDR0Lxem5nwIgBkb14r7+SSsWLr74GBDOqv8VdWDzH7mKTOHfznL06jc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5dVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrvmw//XNjTVz/eOz3TUYbvexEogWaNxMvtu0MQbJzaQygz1XkQn1Xd\r\nYPDTxjGnX+B31aMWJt5zlVLiRFoP+v2SAkWeGT8/lwlgaq6Xiag3OeD3qpsx\r\nq9GWGNYLZ28QHlUkHL4IiBykL5NRxCDuzamOVFt8/xYQ3g1MGIExEvq+Q9Pw\r\nr6UJ3rrdQrmiX8gqORYFXxspFsfTYbGyHmoc2Q472VAxVfXvydTTcTNve3b+\r\nAjjhPu6PgOaQKPKVMVs8NOJN3qzKzRIJ7DpURJT2fji5cG7/QRmb7nI74Iht\r\n56JT18mNyPvhLClk1/CqrShqZb0f2e/fHt5BrgrNCPA4semm1SXkuMtciUJ7\r\nsriRJn5MIu2r2FDV2/WJg64TTpJrx+/cPy/C6/uvH1cDJlGuKERBimrYtI9f\r\n+xkd1DOs0/MW5eMQT8Yd6XevdXmL2oDUnuKkNzNovmT05IaJzJ5YbiDEHJ+H\r\n5tsrGOyCetZCaQHzB8bkuB9ngP7wYl7QAJbXwao16HtVJxXO7wau0uPp7nK0\r\nuz8SG1nG+ElumGe7dsAhYSnt161XPSox3mtC/jG1nO8mLEpCsKNludm23Hfv\r\nPM4QE1O1TocbbYke8e1+4ifOIF0oVZ1Ilnh7s96Z3WoQ/Js8iatA3IXBTMSi\r\n0aRZ9MiKWrEecxxhvHNflmYQqqjKwmz2I9c=\r\n=ONBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/theme":"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/line-ripple_15.0.0-canary.1175a5be0.0_1678481237197_0.010792135633557853","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9a8d787d49e69a1d67d964ae98b48f3d65506d74","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7adf3af80.0.tgz","fileCount":34,"integrity":"sha512-AdX5NGcaP5Qw9wmku6jsXekja21n69YqCwRZZ8mGEBn15sZAizC5VMurLygDgwjrelOEJNW+0AVE0hDoIqkZSQ==","signatures":[{"sig":"MEYCIQDeCUzp2HLr6CpNgofeVwgE7Q2SRb2NLbfB/7Us0d7BgwIhAJt6wq9a/rShYF9xvOhCTWeE7K5Cz4Z0KMs2QJvTns5Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9g6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokYw//Sa1yaYEFP5WnlIbwCzLCLC5qO/caaeZ/m63e1Yuud+2Igp6q\r\nuNI6aTD9JaRhEyAUZE+PUXh05PBz9lxo/zULwxcm94E5y113H1Vq9JPN0WBG\r\n1FUCRyLBzq/3ZE/riD7NgDve94LpQ22X45zYk/UOa0iwdvdUPU9cPWn4rlBg\r\nZi3OIVPcp9KbwFuiU4cIAlKNTlVPWrm4o8jINePpJf/N0cPTBN2Fs+e6Flai\r\nInFU22hmD3MbFLonvMwMNyEiccqikOE/iCyb/34me5vL1EGUxdtdcBVOCa8+\r\nAdfksjKCbjymS5AUuYYHVyhALyZMl453leG5BU1hLlPREAJaAMqiS1VKvq/r\r\nbI0c5DknpdjUUWvVyKAREyhHRzIKQUB/lxI1qhClAZklaEiMABI22WpRmYM6\r\nZTxigiASMYzhbfAidQMJnhAbuTlz6nU/qId7cGicaM93GXPsDlYtKyigvUxi\r\nDZbudirKLXv7rTSSOsNTj8USi0v4VuTJglxVkU8fXfxKGhBeVIeaMh3MA6mE\r\nmtogyGdk1d05Gs2oZcT4UFSkdbGYaei26xCx3WvAm/tR0Q/GvAVVp1PFncOn\r\n437P7QBNCUycqaZjgqJw3wWZ6/UKqi1ICOgBpAUcnlgDsW5dsYvaahaocRhA\r\ngHCnGUsa9t/83OUMu0Q3NJBN2pRUjQGtRJo=\r\n=SlOp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/theme":"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/line-ripple_15.0.0-canary.7adf3af80.0_1678497850425_0.7754893637432239","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/line-ripple","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cb54c04345d0774b76b510e03ad6a4f22648e167","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.82554d770.0.tgz","fileCount":34,"integrity":"sha512-uwpcSRkj/JUiZCBPWJAfvQfi+MgR2k7v0ZfFBJphOCukaNTNVEzbVe0skK/MvDd2PRrdDH5mKvX+g7cLbefr/g==","signatures":[{"sig":"MEYCIQDepX3iO4rP09tN9+tIFq2puVsjCNKoD0AcvdPQcNfQbwIhAJgXxB0ezX6EJW0nowpL1I6rWM6jsXzpF4HFDon+XrcJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9sgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoosw//UivWvLfx1NUzybtoIDKIBk2re0jlR+XFx0NC6HceSqFDxYQ4\r\npsgRqKrZf2HNFOfMdk6MCMjplqke+MMrn65MWlc9k0rmu+MxysfLrFlCWGkT\r\n1/HC5cuClmSGlf2K2lplBS5CUZcdO60e3fUVT2wlVBLhcqaRRKQkQMb+zaKK\r\nViLFpXNzKgsi9P9IwMby1f10KDS5HmfRBgbqqseWkA42ACeIdJRVJAIMwjg+\r\nCUezByHcGwePiAXu3ZPb5meFLb09E1BFPYfY9HTRFUSS09MGMyj42TQd+i7k\r\nTEMrxhdVpmNo8hCbOfeSutYCOhUCJN8ayAqG25da4lgBb50OJCwTzvN2JMdw\r\na+jQKgpNpmG+OGuEYZMn4mJvVSEEsJZHaUFY5Nx8FVYkvxX3zB3Bw2RGlNeB\r\nIuKj66/eAXng+zdwSiSQOYiwc93JniplzI9ThQ8xqv91mclxVanOGk4DW33S\r\n1+1qt04sDGMTV7m8L8FLRBPwGBuCRJt0RoJaNjqiflELX9k2m21aGvrPKEbN\r\nlbU1nnSH9/vCEhIBG+P3tiMPCmM6eBiC8IlUKiYvAntSUOr8JvmqA3pjDcYH\r\nLwsGvIldg122PbcXENQEFml9wbXKbIxiiKpZGLc/5pztWreWvA61UHKm5rJK\r\nkT9Vh+4DdZQJFN5dYDsJKsxZBdWB5UxbIto=\r\n=YKaL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.82554d770.0","@material/theme":"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/line-ripple_15.0.0-canary.82554d770.0_1678498591844_0.514595237290246","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/line-ripple","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5b180e5ade49ad038273508171f58c50a23b4f6a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.93fc524b7.0.tgz","fileCount":34,"integrity":"sha512-egXHpGBHeA5NtpA3m0TzZKYARCw5Rg1eID3ehYQSQ0gZXGnuuv9bKu/VHk6SkUAyF1o5E2Fy9XFgIGQ5rRV3Vg==","signatures":[{"sig":"MEQCIH3S6PzdNoo3Z2+qMotnu6V0MObaEM7zRULsjM1OzpwtAiAgnEpSVoPKXoexzrG+7lyo217nDsm6cZ9iI4edk7q9Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuDWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1QA/9F4aEgNxS7Zk9TydoG0sg2ILR6hlXQFi7/LhrxAhW0VOGQZbz\r\n2EJdq7Pmpn7nOYp1Mbolk0m44NJpBcHSbf3/YzHjJjkDKAYHWazpYK+arpD3\r\nZOXx6LSYpk5OKPDehZZ3I/1RWv4LkvmOOHtCRHyiYLhPZuX59cclpcdXFess\r\n0xnvzALPnQ1uxTNjZtQZj7GEW5BMpNTxNKL66jqElijObZqXJROa310V19b/\r\ncsTQuKo07e/r8sNYJ7YjQoeH+/fEU9XpMM9qtk6L42Y+YOrnjAGy3yPU2czO\r\nCx+clA8nJnWx16RGlCZVfKpPFvDusGCV+XxetNJUn8o0L223RlbA8KdlC6T9\r\nalSjD8HnRakwXrQoLhsAuFPQ16ySN/xK7gwsYBGmcYAPOIk6D2nMa6DMTW3U\r\n3lg3p3jPnU1Nr5a72i0QV2ikkhgsCTu/fLtaqin29AdT+yLgQNmIh8tIzCWo\r\n0mZdfxI/wOzs4KqOpPc6+tiDFP6LxP1rY+DTRSJP/nOJjW6X8hxvMk9CiECr\r\n2vIrmopw2QUuWgbYrV5F3bs1a6t86t7udanAN7IiRkh2yK+n0zo+xmKyiUw2\r\nWUZ9vVp5Xr/1i4ohTLGAZTXy+QNKYaj1lA0aQ5pr/tgbrw3igoWnRpbO8Oml\r\n7sCrEIMFFiRfSyarXY4kWaBZCd255dTZw1o=\r\n=I815\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/theme":"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/line-ripple_15.0.0-canary.93fc524b7.0_1678696661944_0.14843995890068684","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/line-ripple","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4e78904d26429a03416877456ca4f0695143e10a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.50be0fbae.0.tgz","fileCount":34,"integrity":"sha512-ywtX9rlxHsruLfZhTyQtEr8Q+l+Yg4XwX7CSWVlJG+ZHTW5F10U4N/4L2YRieFgk3ob1L+s1q4Tps0KmaO4IfQ==","signatures":[{"sig":"MEUCIDJ6dzSrAd0TpMX/MTK/vyszi690lE8yaHy05/4l+KgHAiEAxHRRwZWR79qnQPb8NZHOy8VNeAAqiKHdJ/JXXU1I9Ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2C7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqkog/9Fz+CY75vGtCfB6pq3T9Z/9iSuMzn0kt7fbwQP9oluILYpeiR\r\nu3eLt8OdbqoO+Eg510RD6aEP75F9opq34w3Bv8W1OF0FDxldp1GgDrQF7phT\r\nPG6vk3gDJoVh0fP0kpb9XzoHvD8y8FHqT6WeqCa8GOXtK016SA6i9/nJNCwm\r\nwvx6qj9SBM4shJ6CBXTSb21ExhIfNl3qSBPSASQqotUw7LDT3SEbvTSkGMzu\r\ngr4TmhCBPAwbCs1R9NZEb+BMUA5KY4dKVXnsfg3ysSDNK3vD+dSG9HVsvhNG\r\n1e8lb40TfAeEk4ojrQjIFsMAxQCewajlhUyutg6oKMdBu8WBd6vdVTcQROUt\r\n8/mwp5awvFbhbYPxadEyB+w7zu3i8YyKOs9oAXiL2MzEMXeLPZnx/RkG9zn8\r\n/EQ8f+hBWhVPeXUsfwipD4hB2cXjrXUZznjm5deCuZ/ld2XVm77pRcH63JSX\r\nNeC7zSxYdjVM0GWSoMW9qiz/EeMw4FWgrgF1QBq0ALqyDMrFFqYtsS+QUSTP\r\n9mIqHjj/yOoBja35SwupnddEF2rSxSl9aiVYjsRTrgl3winBH8moHZT6wzXw\r\noGhbdjpt3Ur3kRLbX5KO6eHexOuiB9r4DF2oMzOergUNrM4h0Vvuka/RtKDi\r\nNVzM5Xmwt3egH0m6K5REtV0srRys3TzDlvo=\r\n=o0SE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/theme":"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/line-ripple_15.0.0-canary.50be0fbae.0_1678729403735_0.5318635589825569","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"37e6f93bc8d114d22212d0559aa9e00b8e98da93","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":34,"integrity":"sha512-V+L6kvbPDw19cHZtpM4yY9YnCw4vvE1vvaPbTH6SAlOF0UP8x+av5tSFa83cydp7nVhEgpOzOp+jbpiPgiGejg==","signatures":[{"sig":"MEQCICWWFxOGczx2ja17gcPSy1cpsgiDesjJuowRdy4lh6s+AiABd+JpNju7lJqCS9ejWOOrXGtRAvJfNQz365mxkeGx8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":473226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2GCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqA0hAAmx6pikGxMZPbrfMbBz1bBdHHTkPf2jdEwHpriuDMyULkx91l\r\n7XMmTosU3DXWjhz3TRelgHryscTyz89PA56Qry8xmv83ehxfgnyeVzk1Gk59\r\n0g4sc6niqdvXNOeMbv1YtYTwxNFVyZYeVSdX5oid+VASlD19diPB0Vq44e60\r\nXdSFCoISRtph6cN1W6d1+vILHvOVugqqbmT5u9HReY8wfQr/lFzMiJqetCRf\r\n+CDGpBVwGOJOSUjLO/4xxXq7PmI/Tv8qK0Oi3fJQa+mPxQtoswN/KOJwq1PT\r\nyOyzA420881jMtgzl30kuhnu2C0Tjdipe/fbGKIS/xXnonVw3h72AoBRK0hd\r\nt0fZIZJUxQMtFKQocwsp8zu/bYcng/YYErzW/D4SO2ve+vBW9zYxHZgIeeD6\r\nTKUiEu3SPAcD5vRnnOQj+Y03UGCdcHgViaY2Z51L6/u4s57OwZ6rLIz7YeCL\r\n6ruBPLWikl00WeL8WahoIklQ0zMf7mOilCV9A66sYgx+UCHB6K22yM/Mp0ws\r\nMV4Th8e8LybczHnd3Wf/+vVRdTuZ0Pzod5kgztJCtGfJPLqj9pKKZgdPKAHR\r\n4l2+Ar4cU4t5N23z1qMevJreUMUqYKMvF+qYqU7d3dOiqr8vT48J5Z7f353/\r\n7s84Yo54tgDEuzlIml3ym76jL/DF6b48qGE=\r\n=P2cq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/theme":"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/line-ripple_15.0.0-canary.6b5ffccd9.0_1678729602065_0.27890934425338765","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ff645dfd7fb5c13b6c48ce0d4445373fc8b5b79c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1c8013f4e.0.tgz","fileCount":35,"integrity":"sha512-dhFkC+lGRWJo1qFDXm60u7e6kCFyICz1hUc9Baite5PDbNkUa9AZLBjncEReOt5Z/o2UVR9hSxYEN0+AZ5t0gA==","signatures":[{"sig":"MEUCIQDMqIy66DS5nXG8OS5bYQQ+U0rw+gPH9Txl5vZ2ijj5oQIgB3k2aavdQoWgiYzKWI1Oh0Rz4+vq4YYVrmklkF8qICs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478683,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2TkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOhA//XWqWkPkNNZrqicyqBOfR6Yq/VlYWKNnAuzTMB8IobGm60RrQ\r\n07rgLXFgRWLnW9KFBfUlS2mKDP2he+Ix6Z2zB/HEdlimA7+Zh64cqxpcJWwJ\r\n17UkyRB9mlg96J4uVFPc3KNWlWNOKx+YOFwBrNusdGRBoUpgUQIomXlbuzCy\r\nB9qRvf2XNRJOzgrW3vlLPkVpYclTsvWQcpTz931S0eQEnPA4mB9Gy4ap6Wk6\r\nA/ZFqKInZj5IS0AtPLzmxvUkQzIQ1nztuTUVFihUz2lYQ5IDFt6L9yRxwU0z\r\nLgTobSluaWTTbkEB3iE/5zUVxGs/qvUzOIdivMEKEFwWivqzzOKdiLVCMtTK\r\nbVAWRasoAwWIk1WaHkqEhUjAnuHR7H6SkG+bye1VBeSHceRa3cQmwBWdnTLJ\r\n8Nnkask5xDRDXCRK9XpcLjOzhN1WYB0mL87s3e/TxvCLJxaBmYS01ye++ekE\r\ntpcjwb780vwqZtC2buapHjNd1NqhownOp7hFUIGS35Crv4DqWuHrhpodoYrt\r\n6+1WywCWWkppUtUmKB6KZ0hOgYxiKk9j/+JwVgUkEbNpNJbKoON5575894NO\r\n1sWkOqF1aQUQyv+/twBwURNex/a9GUSNW4wESRdZCqhh/mfYLV5V70VLzy6c\r\npWYA1s4kfmEwzADMMhzalRJKXI9yvsIX8kY=\r\n=93sO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/theme":"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/line-ripple_15.0.0-canary.1c8013f4e.0_1678730468607_0.9195375666195764","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6afb993698e848045204a3d093402a5652854ff5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.112715df5.0.tgz","fileCount":35,"integrity":"sha512-4SJJlmFGNQxAgIAoB06xXsawWSZfQ+CP6ISoWSGWDxRMDF5HyIzNbelFRgLdVRtQlxpb7oL8BSCPBqgRCaQdVA==","signatures":[{"sig":"MEUCIQCrYKOF2LVIhk+w5RY7TfTyBqOr3SJJN7O77UxKY9COfwIgfDM4ygXbGYwDGsdXFAH9TtFlfrD7P2jiH3lFc6aTAW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD22eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Og//cLGb/bSJLzXDcYT/A+X3lKa718YpPvBDUpThfwsfVPwEmZ+T\r\n2n6VU8F8Wy13qo6dmVN8ISNR61LrjyVme/WZOyRhdCRGMO2S6MV7Ikdbsulk\r\nJAJDaC3d4K0QKCKrthMqpnAylRLuZd7VNOaPISZ5huJ4xWrCGkvJo4ZxIito\r\ni9F6SgVT9IyMn0eRQf45Xd6hLQDuNFsz4tddRqc1m8kJJoZ6pDH/OKO8u2W/\r\nZxEaXuubxV7pbCT5+Mf2BPDVtGAs0OaOjYnFIOKiihyknXxy8ZOzTDdydydB\r\n/MerVMPbBZ9uGy1K5G3iL9uNmwTVy5rFtJ/yPceoSTmSg0hz4j8qeZ0EbdSm\r\nuzz8PBpTZtZDe4zP/ftEj6GL3X/DcbvhEwQ5VE4j5P+YeLrMu3bGFZATnDep\r\ns2SvaW2LvqDop6/c5Bg9j6ydv+RF+OY1FsONJ4KVuSn54tf22Jfbjk/WhlAD\r\nSaWKICq04i4bAqfZWBQfru15IE1YMbSvkfPF9asjm6WeP5q1gvY53Kgf0BGT\r\ndTUdc34BrGPrE0XR8F14K2wxa/8ks7fPHo7wJjxSxjJYzCFBGH+1vrLAbGNJ\r\nTWIZGOiovyvvEye3IfgTVRsy1lsGHSE2SXq6NYxK4SKP+9Iy0pYPFIowXU2K\r\n3QlHzqCsZPAOgxySDNA8bX1S2Ke+Gf8GIbY=\r\n=gMP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.112715df5.0","@material/theme":"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/line-ripple_15.0.0-canary.112715df5.0_1678732702124_0.3413028436602805","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e3fd6a7ef24de4ec3660c388f8c2673ae1fd7a85","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d250911f2.0.tgz","fileCount":35,"integrity":"sha512-7lrGYe0MiLLaTtNqkJMSd/Fsd/x6gXR4FhMMjS3WFlK4Zzt/p/pnh//O2MIveCHGnYF1z0CWegnDqwq+JpCPpg==","signatures":[{"sig":"MEUCIGy+UZAL/vpNeu2EhuAMn3F/qeQnoLHI7KJtIStrlU41AiEA9m6zRb9EiI9J9bhwMXETGzpbdDb+Ih7qiootIxs8C0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3nhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0OQ/+IQsmrW0CoCd7u56ys7wVzrmRVXdTqUqPi3OkOBzM40ubYZRM\r\nHDCRMxcRqRYwGhQwxvPd+uVi+pPDz2Mh9YXgnmXL1vQdR376wJU3kytfyKEK\r\nuG++Aj3eKcwEi6+jxuqTH8/9OWVZR04Mh/m6ZlHE2iv0Qd02Drox29Yh8jlW\r\naioDQXJBL4p7S9nmmCWVZL4Ur4+EM85M+EyyIyvxabACfAuGNTeaiRX0iuRf\r\nzQBqYhLUgnxfMicyuDrdTgR/38ctDboulQsGC7nHcNnqSFk1Rl2b70eQeTTu\r\nok2jv/UGgnHgRa0LmxdIlYDpsIAKnyk5YX8P4PAOl/Mar1xcPlUKYyi6ZDY8\r\nMBvmvvqiDmYB5UCG1ciIxvPlG43zmueq+WYhcZI4KSzRkc34UtO6RLjv7XH+\r\n85ANDyfqSJDbnkEATd0Fqf3i4twQxgRFWFRoSZygETphu7pId7IV4ttMKonh\r\noYQ7izl/VNi9Qov+mveMpygNEbOkXiBSfH2ohq4x1JS/qeyYme+eTjuQLlsl\r\nRdShe8g4sNYlC5ZYf3CqxtVyNGLvzA8Y2PBU9YR2H/UYcpSWqjBIp6n+2pYw\r\n2vUWDGyAw1Iodgtyga7nY5fcUTMolULWJSMj+FobfK9dYyUShVOiUR4rALQv\r\nSr4G3aKc7xTsFNZfa4zmKSmWjbBVTeYeMM4=\r\n=qmPh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d250911f2.0","@material/theme":"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/line-ripple_15.0.0-canary.d250911f2.0_1678735841222_0.39064808070247614","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2e8f10023dac35a879e038b98c87666ad381a5d1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7cd925c12.0.tgz","fileCount":35,"integrity":"sha512-bHzry0x+XcI1GDwuh7PZK4vLsHyii3ckBs7k3KYhpEpOz70nojCnUTv5iw6kX/cnftozBnht+m4m04Gf9x7c7Q==","signatures":[{"sig":"MEYCIQDjxBKgXmJ0LtAXBBevGa5KwjQUi7P5zYNErFDcBRKHxAIhAOb/bSV14T4zG2S9uql+6jdc5wh4LJsxiIqe3Dqw/+R6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3uhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp28g//a4p7uqgdqRN7eheNK35s672lfMyQPXcPWASLZOgzlwbJb8Og\r\n3GG/YrgXGO6b0WSawDR96lvxZCrVsO4fiu5G69/eOdJICNH9C8oL9JTfb+ic\r\ndfcuLv8h3V0I2UkbylULnfcI0oi2ySYlvjClhPG2Q65xm55myGi+W1XLQzmv\r\nOsR7F/dBOC16JTUSDdlr6LwkIjq6XG2unotbKhdgkUaQx0YoWULp5l1y6eQF\r\nXQVyh2aq01/J4nRTTxi+XQ/varw4C7s1Sdy3OHwAzgHGJr1KVgc4B/vtiHTd\r\n4MeHLUCIO2zsljiuv1Ig0FdO9PgNGnwJvNIufP/UtV2GSuvzrL2hC9kECiVs\r\n+PFINkExlVl/YeDyv/h+E+EwY6E+MnnYX02+ERnfpAArx390/oGxDwkMxWge\r\nY+wMdzdWUD2e7jOpMOniE+gh6Jx+Rg+xhSrSZwO0VcWt3ZY2P8dWGopZjhKS\r\n+l7nekoa2Sfy6YlrgZDG/l0R3QHiE9L+Lp4ue/hR+gnRjJ2YjXGCaidD8EDj\r\ndi8P+q2TQkjTJSBtAZqEc5quXg+rjuLWk7ZhaLCQPeubiRtowiTvNJGZHvVX\r\nZBzLhYN898qmtqCV9rxIDuzbra1ip3kZPRwI71cRqrN1ERf9ItC9KYPAu3/4\r\npzweO8KtT1j3c5oM1Nxb0OY4plrGLk9ED+Y=\r\n=Xrfu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/theme":"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/line-ripple_15.0.0-canary.7cd925c12.0_1678736289077_0.3025750406054497","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"69d16186e2e17300f637632c7e5f41f4d791e8d7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b2ddacf73.0.tgz","fileCount":35,"integrity":"sha512-/UFRG5jfKdUEXQ1tioTEu02a4hWeD417vkLT3nIZlmJWZMa1zuMcjF7C8/mkdufxyt/1IJEOmcacKyp0UBU2wg==","signatures":[{"sig":"MEUCIQD3nrIz23SjvhJKUApqObN1R+tnJjStmq9FaFNJnGblbwIga5C2eksbTzOInYNokzcPDQ2F+s+VZDamFNO9P9X1CZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3yrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPzhAAjDzQKwQcw+LWYWwgONIiT8uJ4Ka6xXOWF4v52fmPZl3Cm8a9\r\nJj0JjSZXs7Q/9eS7bc9Z2O+iyP1I2I/CM2Jxp976BL93m4/OqZGSL29k7HIH\r\n8qm18UWYbqYNzowqFJeDpXeGkDP74MUFTQiVBcFgGbHSTBSyBBSKoTl/OaQv\r\nLK43FQIoehVPD8A5RTogdbha5gh8I7nVKhXq40SyKfF/awuUsfBvfKr9SmAl\r\n3lrnPsa0h8r0OWZjmp6iZAmYfY6oweqApzsE4fen/PwL8IJ4T+af5LwogmlP\r\nS0x04saCUSmp/n/EFHTRYX4xDZ7F0N3Uuc0cNcPF7I87WJEQu7RgHvg+4rPG\r\nwRchJiofjis0YlZS5K/G3WVTQOQi5ZYKXu7h83HrngFQgwd8hTat3c5BvwsO\r\nXFl+Cq7TH3a9GTJSbM009OxqCWAjchSkwCTOsQE08Dv1GiE61o6Nc4KcTD1S\r\nfvYs57ikmMI99uSDBARYYHxIOcxszbblLozleMUBT4HJ46FHjS6Jg+dR50wv\r\nj9KZEGIoOp8wc7Y4Wpy7jfj4jMjtLHeiDpQkRDMwZ2SXza9Aj9OVYjqz3wkS\r\n2Ff8wKCI7k1Unm8Z0Te8oa87jGH0uimo3YSdK2ABlzU4CwRkBSOfkos296HQ\r\neGLtxeclnTjF5oVPT+tgep6r46Mxn3JkUXs=\r\n=J5Kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/theme":"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/line-ripple_15.0.0-canary.b2ddacf73.0_1678736555542_0.46894565394376686","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2883b1c283b98ecf51514e45f3c0ce33688cb80a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.989ae2ecc.0.tgz","fileCount":35,"integrity":"sha512-/KjDwk663SGjEB86tMelgysnx+bqZjeAPs5vK4KMBsVrc+Bo3htPzd5HLRTxqrKUUcoBQvbCTNF+RHuwkGYZLA==","signatures":[{"sig":"MEQCIE3v3re07K77A1F9qMf+V3zLHebc4pcHa+UA97wtsJ6VAiATbIugWJqr5vNBN8m4A7dHNrUeSKxlsMfQ/KYiAAJSDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD37VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL1A/+KAdYu9mDec4wzd6R45LZB1HQq6F2yxj+2C0OQNO0lKA0UWnK\r\nHR7yIi1HoR5KrZ4Oqgv+m1rLgFCndL2lHagjScjjgs6g4NY7k59wN9YmW4JV\r\njerKRmEM5+8gCfLJdfUiGESQhVj9v4h9jUK8eyXdKx6aU6Toaymp2wNZ4oRA\r\nfm2Pd1YVoo0YHsbcmdzX6dhCGkhHQKv/oFr76ctduNe7UA9dlQAPJDfy8T+O\r\nGxQkW8OMRbTaHl/CAOElLZVuXUZoxneYm5xLU4QODCNJp72pIEuBCcNVUQ9J\r\neolASMpI9px33Ck3bPYcC+2oRHqAm+UlRumqhcsAZcXzmp6BW4KGgca0s+7r\r\nl1V0hN8QhxNezJUs52GPoOA45ajKRRwhSsK+3SOgjpxN31fYHGprZZCY4s4W\r\niu8tRATOFRy2Xc5sVjIlnQRKGVWIFmvoiL5BUYK7k758ZLCzQHqHnAKZ/acX\r\nX/L6qAJs+khfVb0afDmV7UJPQgtuX8JMSvQegFfGO9a+CzXla91mf5bowrAO\r\n5aDiXlsff0M9/JvqBhAOVwkYHYojL6eOcgq3jUHVVL+D/cvmSU+lUgnmiFih\r\nrpzndX6tpxF32pbKBZ67CZvifufGKzOGGm8rEreylVO81JftP72yuee2r5tv\r\nN+++A2+R+Aw9/V5klGHsSM1P1ckSw88KLAo=\r\n=nMB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/theme":"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/line-ripple_15.0.0-canary.989ae2ecc.0_1678737109150_0.3407166219241393","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"08aa5187a2711d279ce660bb52147ff51664f95a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.89c66483a.0.tgz","fileCount":35,"integrity":"sha512-pIv6FVyWXRcq19Kkge5wZRbBFiF2RNoxHpNc1poQRIWQ7UXWXNvCnIY1hQ5aDHfDDoA7MoZvuwAg7rErtBlf9Q==","signatures":[{"sig":"MEUCIAyhlciEQXviO7D5htOAy4pAKqPIxheZABpwbo0/oKX5AiEA1oi7hMwnYwqNe/Rj5IF4/ksu7LcyQTuHK1FLZNZ0uK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4RpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2SQ//ctF5ss9NrsiCanbf11a35c7wbs3vBES/vZQx61Vy/iJ/Ke+W\r\nvgS4DFYzL1P+/hjNmU10u2TGZ6A11C4ALFxG87GHU7tfUBEsUSfY2iBrLStv\r\nsTNowETHTioa0ULhH2939mU6dNlDz2x129KZ/EAXTsCItjdMVskPdNWpNkGU\r\naLDXeClX53BmPB/KoCASfs9423HYSTL3NEshiZfXbON+f8jwic0OitrFncx9\r\nU8FP1lXIcQ41zHW/LIc9oVdnA+rWldRAfthYsLUwxyYe17gXtQv5TtCzHUKO\r\n0HF+w9Ru9aelKD53NYclvndtEMvaKM2EqwIQNWHSYMcIVLBFyok5cQrJsWZC\r\nrnFKegtpJyyYeGAK4vqm84JMlsS/IY5NRTVAKLdieqHrzD00/DkW6f/nALYR\r\n5M4HNmAKsbaljNM7vsqmAlcIC+47XE9l//6PTGWcEzyqoaJ/q92KwA+6Sg/X\r\ntnj3xDyraWQNMhJibd7ZCzXAfZLKI8J7bguKkvX+7M3as8sw66KOfzHnyBKY\r\nS0sG7i35cqHGkXv72bebWq6gVroy9rHE8PUn8C27QQsBd4nsHKeL7e+R5ceR\r\nkoSseekqtxpvFqkDo0AYzFuLnHtwgYpeATHB0i/R5O8lx+qI/fQi1+4+y7o5\r\nam9FFy7cs+qjOD76b5q7EqJuXVfAUqIe7lU=\r\n=xsNd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.89c66483a.0","@material/theme":"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/line-ripple_15.0.0-canary.89c66483a.0_1678738537353_0.5983481625362375","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2b389ff55c5bd4244418a0547cabd82683557906","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6a85742c2.0.tgz","fileCount":35,"integrity":"sha512-7yq2yTYFU3x9fD5ZBPWGAKeE8eUfNa8BgGqx4EX+5c7TROfCaD3KD3McbsjTz3xDseUUUvcPp9M1tMU7sDggnA==","signatures":[{"sig":"MEYCIQCBY1Mu7b7G0NdIH5Nzj45p35c17RToEUFK3WSdM9idBgIhAMnhqbPtEv2KocFzl4q9V9LWIEwWtYJCIOToY0tdSdCi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+AMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDLg/+NxeNq3YpXHUzPtseyAyDwNCw1T10vpQ2rAOl4+JjzSAUL2jl\r\nF5TZmJUGBW4wnm74oylHwcuFSZa28P5NKtVaQ5vg649zEy9hiu1fOD7hUD4s\r\nKOP3j3IWXkAWJ+jpuMdenp7i5HuxoefL/WwtRdr2pMQM7LZHOEg5hZYH8SQN\r\nQR9yljHJNzEqOeTCB/AjAM1JOxid4igucFQLaKMKnIiz0lLine7PK4spDukw\r\nIUztF46jh/b+Rj2U6DODNHj6OYL9/U24p4pae/T856luxxUP2yuXiKoX3xIj\r\n5NBZKFBd0OP4usPCt7lQRzbSnjil6QNKh1LD+rnK3F/AXs/rGVOa61vUDxl/\r\nusJZFZIcKq7nYtHOt+Yi7QJlU3dq/D4oKVCJIAJsXcy1CiQlO49q8AwFi8u8\r\nwZeh2OKElbblmMmc9Jld+PjQqi0Aqemjv/6wSEGF4uUVsZ0CLgohx895dS1k\r\nY++5GoY7qjQauuR9YMQ7tFfkwZf5Hv44fspxyjrPgfAb4JAHvU1602L1PAZs\r\nAhew5NqRCFWK6A9qYAl1X3mYgpSfZimmj0ztFuCaU6Kmx1ZF74vXWe14elr8\r\nXtlxrJjl1UPvGNQyR1DFvI+gG3/RI/snSOdfJEC/RJzn5nckkd3KQLZcG/eD\r\nh1zpxrcKICBtCMbqeTmicMj3vjtSg/mfzWw=\r\n=GFj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/theme":"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/line-ripple_15.0.0-canary.6a85742c2.0_1678761995844_0.5459272313024011","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b943298ce8ed282de128a43ce175ed0dd94e5594","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":35,"integrity":"sha512-IxpNvvjYsqcAbJqgmK7xafp6USuPowPQEnc8nLrpeJythXk6RGa+UzJ8QgENuJT52lr5L9nn7KUGVNQ5r5DP+Q==","signatures":[{"sig":"MEQCIEtV7IaZab6YchoAmidmiuDzALdsGJzrxvTsr5r+ZcjvAiAXjCebkpw8h7GShKEEYjwi5WZDYP1kHz9BWR12NMX2Ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELncACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSzw//Utf0TFTFRfNN9tFNU8F9PHCAzmWngLLpxrRhyg+H577pTIzy\r\nyF5E6qAT/Ks55ZGhUgGnH2BChqsyR1tuBBB99MVrYH1RVBHG2s/pNS83rXLC\r\n8HmgZ2Rktmq94BfLVbqTeMPiapgK3hyXiBxNFfzdOsIjF3hDXYUEtntWWJNG\r\nT/ZzSRx7T1fZoo8FUNuuYmy8DKIqbSCabB3drndWYOmp+0WMTm+3fBCmzTGl\r\ngOIQ7m5kmAygKIc1i5cgU7asbM3nphNqDga8/o0LlKbFsmBQqkMn6OB0BIfU\r\nXSD2Cymbg2CJu50K+Iia+hM7aJQJBJl7N8nz9fNi6G6eB6OxGidKyU/70yPl\r\njGdQfQiQDKqrEFhuSf0zOxYX57krOUBcA3Jra/KGtKcr2ipjCnHXTyEu1gnv\r\npnunsPNqpLhERFJ23Vr2Fu76+8F+5fWbzhTdPKXB8bt32HOfiouxhuPQWYJU\r\n0CCWbMyaiDzT5zhJmtjmi/IH+BSWqNpNONX/dD1OoXoqLHSH5f5QXvqmD4f1\r\n31BPZGTBOI5gfKJ6uaaO3s8JD+mzaWQvLnUe9xE3tQlH92e+JCyCYSCys01u\r\nKKMF9z2x5nIw1VKb5ZqaRK3WqSezzfx0hBqfHI0t6cfSQY28Hs7A7ZZRAx/h\r\naIz8r+Uq6vpM0qClyw0EwAA7W1ZIOaBKaUk=\r\n=B4i1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/theme":"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/line-ripple_15.0.0-canary.bb6cd78d5.0_1678817756731_0.20455469881463428","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f383d3168d7e84e67cba75ac0730037c46007982","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5f94aa37d.0.tgz","fileCount":35,"integrity":"sha512-QDxqr++vjMwJI06Dw9RS4F+i+jdnCLU/7PLfHzJfQXJzJttXYiChu4+mMCufSxS5o1G7OVGpz5h3kp7VaKXgBg==","signatures":[{"sig":"MEUCIGbRNt/a1ieLmL1A6miONFpQaTkEv4m6irzSppyMDDT+AiEA9m1GuqsBEqZfwWFOMM2PbUfao9p/GThf5uDI08ZKxto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLDg/8DQ3YiZTVOHQfyDyjkHHVtiR9N5lRnJDbxVZQCLhjhOc5HiV+\r\n47uclYN5YYeW4R/8uqSkI0deSU00E+xgpTfzb7c8r0aEvdb9oCLeibh5iNxk\r\nauTHp0iA7SLTTiFbV+j7fYYg24Fs9/hraTm/pt6f0lrlvPn/LuobWNX04Hm8\r\n8Y9utKsC+te5TUG2tPRWoBBZHjaKsX9ZS2BX1CrVupNxh/8tja+qmKhGnTVD\r\nxzDCu3ugqBx1Uj9YQqNTGy88LDG9dDXTAmhHXnJAoLtllq+qFo62fBnVG0mC\r\nblI460Did9htc6p02/7SdmQWLPKMngA9fPVMb6VRZlPGpVWp67jrdi0qy171\r\nN+YX4VCVO0VoCXg8EvWJgyIWBLLVKWW+upow7vIbVA9UjiNs3zNY5ErncB66\r\nfqvePcadVCAVLCg5AdfKseQDfWpDad4xMRg12wpPC9M85IMlbsrNR+C45JBV\r\nHW4TiRPNM6U2WGiS7UrG7gLGPbomfsbwfWTvaupUVCbi/E6I0xV0QTf0MlPy\r\nqnsTGd0bUNJcie7sY9tnfDgmzXA4N4P/61g2nRzYtVFf+IdVN9rY4yGc/1Dg\r\ne33u94zLr6jKIbeyMeS8FYvYRU+NClb8vxBHYaNrhwbrlgyAzsR3eXdSPIbS\r\n03mtqvoGwbgyvdAFtiCizEkG3ezENrCJllE=\r\n=/yyG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/theme":"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/line-ripple_15.0.0-canary.5f94aa37d.0_1678817962261_0.8675486681806812","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1088af0069806c8c4c3875aa06f7a58981665dcf","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1bd317240.0.tgz","fileCount":35,"integrity":"sha512-ykWEfyq8CVDzZnOhzI8vlcYHvLlY3kDhpwHST0CQuDXQZYOsKymrHP4G7hx4XP0yFut5OfZp02pkGzTupdCDgw==","signatures":[{"sig":"MEQCIAr88hWpC6/n1XRpd1l+beecPCq6SAEVXHB71rS3MuJuAiAJOHQtJ9VRzN2a8ntXruFiThaVbcoCnAnduDcNYKgLDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELuNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogMg//Zxb0HQHTIHTsrzZpy563hK4/LpW4gQdDUSitreEgfvgf/Dzb\r\nZ0nImlh4ovHWeckP1k16mvyhnKvPiq5M7SJM2thlKt3mZRg6y0qZTnUOUZ7h\r\nzSlUQdPjgi9U0SUS8lmdy6jYns7e89pAbLtLlHBT/Lr13EXMpAvFLv9ZCRba\r\nGa74ZDvFI1e90hX6/WIcUw3kTv66BpTFyqDiR7UQoL2xbooSpkmt6tcY3Q3f\r\nZIuSOKPkZhRYVrrxPmK7HQxvtzVCiIWmOW/S3PZ2OxV7t71nZwf4LTLIDAxc\r\n3PgdyTpxey4aTnvLBtlDWRLYBdzTf4jUj/sJX5ZtiQ62qrLwuRVpOMRyXuEZ\r\niAD0x5FwYrkGKmgOwOjZp/MCyVpbrkNClmCrQ2WiQSiREcV2nhaNAbZszH9M\r\ndHN3+gTAKk3ZjIl0D3C7R8/7uUBL6czqJYOTApTWuT/kJj9UAiUquEpnlect\r\n8vbADfI+v+j3Tqm6zUDgmtlNSFiybEBoxCd+4JguCR/HP7marFQ2Ad1AOl6u\r\nqAGdAUkdns8ynPjgxLYrvkNgVR8VnIfNzw9ts+iCCVBTSBdLm5jAWhIhEhwH\r\n+1IBP0b2s9jZ5VtNb4cL5dWwkRkY+kN2pbAiifNJPX/t3cdoV9h5p7sXYtnt\r\nMdq3V5LOlADRGQ5e4URTlNOKeMY18P292JM=\r\n=aPJG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1bd317240.0","@material/theme":"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/line-ripple_15.0.0-canary.1bd317240.0_1678818189698_0.38404754967377275","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"87c75229ba554efb6c15960edde29e99ff194574","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d441d2a2a.0.tgz","fileCount":35,"integrity":"sha512-082k5tj12x2bTVgusH26BVsSGWJEaxf2qDrxrPSudAQEp/+k5XLx1j9YXw5TKhXyZQ4bi9JjTTf4408LkATnaA==","signatures":[{"sig":"MEQCIGrQmJGkVfDqKz//PMVzBQL6Fwsc+nv+geICAiHiy5tVAiBuXkdwhXcOZ8M9eZWH8S8+BHKNDoEWJxO57s2t0fQKKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNQw/+L0eoCtRD7cxUndGGjGNCkvSiwrtVG1CsACfBMrfr/C9wSrcG\r\n2p32GuLH3OA3DKhuGDTni3g8tQ5p795dLosEj6kcyaJBrJIEwi0wIRII9zCn\r\ns9vix/Tdhaum1iz1WFv9+Pf0mF3faLiaLdnM2TVBtkDQcFUh5OTVddmt2GqC\r\nMmhAGRcFN2DNmE9aMh7c36zMmDbBVRfy6rnl6dg46ZQbszOwGWJhbpPUNKZN\r\nLb7wJEe78qQMcgDp52PtJ1dusbv0eWRfDzEJ1dsV8WxSobg8hlmctMMtX6JV\r\nN/NB3QosD1fcDa7qOurn6ybAiMMz7a4i/qM6betiLHUw/FGuWc8J6xUZ0xOs\r\nG9+s1DydP5eOhRYVuWI7o3Rg65dBe0DpgJmAGoQQCDshR5YUKn8jL6dXAJdW\r\n/oD/ooHU7aKckVJ1bSJCe4BFSqmeFpWl7j/ZQDzq0MRLOQvSOsFCejnNclet\r\nsCo1rH7ybIbS/NYTtPUu6uTfrnrTh7ciPjw25++JiPc54FtNoypnVj6PwEXR\r\nPUHFR8XjlBTeNEXXh5dERAcAsT8yidRi7XJjjgkxZS+pY4y4uSb9QLuV+2Cx\r\na7Do5Raw2I9b2MfhP2b7IvjvfjfKpWPoUAaQWzOx1yLq1S3uN4fiiOyzjsYQ\r\n7Qt34+SWEy3HIM+edUoqR893yghRz7WB7Ys=\r\n=K2Fk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/theme":"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/line-ripple_15.0.0-canary.d441d2a2a.0_1678818343039_0.015193299634920887","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1ddc706e7b29cf4e63b9f23db982c7981531a802","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.fff4066c6.0.tgz","fileCount":35,"integrity":"sha512-QF1DEtsLo9p3mWpQuFcNO2+3CPJySQdIMlZZ72gT4LVcnmtIBOzn3cRmk2C1veV1gxv1BOQX53VGWajcAcJ9oQ==","signatures":[{"sig":"MEQCIGwqQ8DFavRVOqyhnuLPGlRvesAvtR98iDSGlzMR/7efAiBpk927IstUOIvvo2ObgLRLx5wJ7vG7Y9A68/ErSknM8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELxKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkhxAAoPZIr30ecimyqedQN/+BNCpwZY8glYLuybY/k2PqTROiFYua\r\nuyMcVlAebdUgkhTtUy4+lAdgoB4a9z9h+ThinnETkFvxhhw8fjGsbMfTauWO\r\n9QWU/KgITO46yDZQPMPtr3K0G1yaTHOJYGh8L3aEfaFxAninAE7S42WxuoJN\r\nZJDUkWloC0KG6woY7pyujIVyQBEyKRXPlsriHqt5ETuXQ5E1G0Hd94+J/fye\r\nohzKnfoB7HVxxZEjTz2/u5TNuvxGM0G7J+MkFKpOGTAJypdlt3I2SjCHha3m\r\nE2WJSMjNoSREPzsLZkYHVz2Z/PVEo7Zmqw8D09O9tMjKfq6sxzTs0iV/C+E9\r\nGPta2zemq/oIXiNZZUvB+FKMfjykluOGyPmYUukb0nBcE7UrY6F+AhsVkTzZ\r\nv5ecL+DMB4wyrc9RPAkIPrsvdz/fiVJdDdMuI0OSPuG+Je7isga58eUzmBod\r\nyQpwdBXX2cbAtzvqJR2LC2q4qzLbZkW8gDNgc/HqpzJQNHveIDJdwtl2wP7R\r\nKtVNAA++5/Hs8XUEtLyDfSYPtXCo4CwoGfNvxp1/Dz4A57O/7G1Se6ZSgawv\r\nnVmGUD5YvrKDowxhTXiL/P8GTgqh6MW9qIg1POy4RLnSj6Su0XYRKAmD4zdC\r\nuF4mDB4l68PcPP0yMHaEEKT0tFx3rGhiVQA=\r\n=S7jB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/theme":"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/line-ripple_15.0.0-canary.fff4066c6.0_1678818378259_0.06883711040633078","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/line-ripple","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e915190af3bef47e90dae8a44d9912ff5d22cd40","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.87809c710.0.tgz","fileCount":35,"integrity":"sha512-QiIJ9Sw6X7c7BGePLKeRqBhoymsQ01fTSSlhq881WISLMp5KK866s9v7IbBRb0bs3zUrTQgHvpUvtP48cRgxLQ==","signatures":[{"sig":"MEUCIQC4aOG/dVwU1k+ZKDayiV30LkS6MCv0g7cWtg00ElBqPwIgGddoJ1HeBmOc3y2r0/PWjXts33BadDgjpg4AvEjDko4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMAcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro5g/+PpJQ83Od/CRVVc8UnqXgoBCl+rwYKxdpzOUIAMfxlmWdwEy2\r\naCajeUVyaELvtDq6YWHRDwYl4VPUm87vFfKgyhJQn4FeqDgwrMeXaadIhA4k\r\n+LLt93Zj43O4l5mjQYiA6fE6Q/OuLM2/qjI3ISnUBkxdiE+cMzdZKLrEtJgX\r\nFCRUnI+gz20BiRPQV9rPnbgSUR2hCnCrSWyGbLBnH8gmRW2s6fya7wCBFIq3\r\nSY5rixVoVG8M0J+bMU8eRFf8L/SyPJEd9aCTUuK8VNWskpuhyFPDFCbzGfP7\r\nrAd0SttZix3Sib5hhmpaKP6iM9pWcwtnnCod9ysDpGFJZ6H2T0nerjMrOWLZ\r\nM5xMe9bFOGKVhpmy/K7ln8bh3RnZ4XkP0opkIYSzFASqetYossb+IIJQndls\r\nOH2pUeTPlQZCUzRJpeU0qVrAa8Nxkew1Jsil3mUUaSwg4LOVV1uNXfWyLQE0\r\nYwUwJvVXN/l3x3tXLty2zXbtmsXy/0PJr6O3rqw9YMIVEgwsIVtAqHlV+5F9\r\nKNCKZ7zUo7GlKjv0GO0Yry//uDBZ6gmsmIOxhFVRVvFn9/YPn4CN5wtxoHSB\r\nXEuIaYl2A/eLQG7bB+juAPOiT1+NeWHWoqxONLmcgDm5yE+OcC8US3A9Soly\r\nV27eGGB8cvIGoSSAOs1HdqSJm92SpImkvh4=\r\n=LOrz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.87809c710.0","@material/theme":"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/line-ripple_15.0.0-canary.87809c710.0_1678819356681_0.09829442930393117","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a15eff32d994af33957ddf3d05695948c7964b8f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.48d30012d.0.tgz","fileCount":35,"integrity":"sha512-T2K0oVAfk7liS+R2TwdQsfZ6nKH2j94Bk2ddo0R4oSOFVv/B7TQgHN1JY1/fWtfjFasW0DbOU4qwBmoVucqkzg==","signatures":[{"sig":"MEQCIDhKgB8XNeQj+PG9fY82uer0mF4XAFW9k08i3LNtPS3RAiAc2g8zcQJQ6JJc+RhJnJhC+aGtzMFnz2+kCwBmfxbbIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMEjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWow/9HtCam1k3LgM3IWSLnXhXwVRLRcX0scQnmd2r+BbBUJ2wHlXY\r\nxZZ5nxUObmHb9/EUQpdbRqsMXVPHdBeJjJJYYdvf0XbGZ3YJffj0klHgH7t1\r\nnkwnDDTABqLkV1YizkRaS+6r9XgCIHWwrimqB/yFs+uk99s/0QvCzdSKyOKa\r\n670mMeWCvapiOP9w2v68Z9/fOrjZahcu7ykN2agBdPsM4Lwpe8nGqW3Jw8A8\r\nKYEFqrMYVLmDEtr0WpXV6YE/EnfhsjBuVjtyA/yOBh+/kqs1ni2OU1gxQ2fs\r\ngTBxsChh46RBDaWLSCnYfu51cTt+FXIwZt+euht4aUpf59ZQQoNkvl1UjLLk\r\n80xCSTNLKoVMfUSPdwAXhln0svwtaW6GiR4TAL2AXZwIWpqTRWLdPwv8jNSs\r\nnxT68D+PcgQN8OfKbNLlfl/Ob9EDwYEoFtosk0IoRkdte5BWIMFJHANd74P1\r\nM61I2gPPwQp9xqxzZQ0wUA8LoSZaDblbUU0hzl4XT6EvXY1PszJTqLGwl/A9\r\n+DNYLWD5Brxv7y0Z8jVj8Z6UsfOZNH9ZhzwCijaHx0LAZ79J5gtY9m7H1PvF\r\nquFNW9SmdiGmPyw53mMxRJ3fjAI2sBPPSrTTsv7hNewyuxmXEM4Ou0YZyUWY\r\nYfxqOQ6mLN0zdeq+0kfvJgSZ3hYI65YxuaA=\r\n=ww+T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.48d30012d.0","@material/theme":"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/line-ripple_15.0.0-canary.48d30012d.0_1678819618820_0.43888407691235165","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"97d40b7101b065fcb87d2707290d13be489e21ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.419b23cc6.0.tgz","fileCount":35,"integrity":"sha512-rzTKXNhk/MXBHwv0W/ACyXciAcnLrqxAXKWooysy1AUoaUFEZlFRAuZj1oNbl+VT+Dlkp3lLGhQ577bzzsjCrw==","signatures":[{"sig":"MEYCIQDA3zGkWFYwmLP1ou2odEWWxLGQUSxnFizz7Qrvq2sCGgIhAN6m6oS0OoEEa1886tsshGGU+8wgPKBj8Z0ERq4JNAPO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMOzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGvxAAgyu6ShHldbzplbGYRBK6tbriLKWDTBmgMOm8a4QicteQgE4X\r\n/Xu9GlA6a0HkoMctCwE2jy9F8UpkBC7AOMtJTz2KY6nhJsd0rPPilwVXVvnW\r\n8FCgGTH9k+AC0vpYVhOoWu6TsLD4l4OHF61pBO+EGSvPIDgupKeAbYp3hC6Q\r\nx+jJ1J2dwlFt5bWnCqw8pH5BF282yQzd/GumIYw+LWd/DWEy4KVOHKMRHKX0\r\nyqD5xhvEaSA3v0C9ChVUrl/nXYhpAuXlHVLC9EXShdgH7u1ZK0y2DfboEu4D\r\nG0Z9dTsU05V4O/C6r2l0IqB8OvNE1HqVKTgsf7uarKElHWYul5QdtRcXh4VX\r\nNgFHhpQ4G1neYmUSQnJ9cR44Zp0t7/fL2AlLi8nYo/QSMCVvFynVZWlVd4TY\r\nvL4HYuFk0aLWwmMt901Vi0Ku9lQwcimTHm103bpLSo7K0aFkUqlIH9fl34t4\r\n/9u8iqbyjhnU5O/9yEjEpcVfrW1loqPK2ji3AHTj1XeAoSbMGnjfW/uTGvM6\r\nse8Jv1DFOl0r/EILyQOLHrmRtzjKUJi1ysxxI+9OFRWst7vEYAgHzFbNvpNT\r\n3McfeGlTgq052doYE4tKl+THG2WhvlaIOauvWlGR1E+Fk9RUu7hqmBLua8D0\r\nvGAzxFccr8ViqeSHUfpQbTkWiFChMkjLy9Y=\r\n=+ZiT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/theme":"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/line-ripple_15.0.0-canary.419b23cc6.0_1678820274876_0.2875235560259728","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"f669f5760ab28669f79bddd7426053f99bc00bb2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bf86521f4.0.tgz","fileCount":35,"integrity":"sha512-8fEXmDQpm1UMTYFw1/sRz2p4OJbX05e+mfz1CqfACGm/ltqi4mOW+Z05zouKxj0c18dR2JifHvvKS84nVAV87A==","signatures":[{"sig":"MEQCIAgoqT23EHrwhyZfnorWYSTuaAe7ox2kdWaexvg2+mS/AiBR8hehGLZymeqPVtFL9Gd2JyuZVLSh67aNB+fpcA501g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP9mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozaQ//YY5JVYIcVlku3PuxmKCm9AUtVm6U7rw2uFNpYG1hp1OiKHFm\r\npOMlgWhoIBJr/4KiZQrkDjAiMPrE3T5gkZrqvbRSzNpMvoPj2HBMXnNJkOB2\r\nYHGYCBF8+p4fAq/iKuJjLbxLeiBapZCp2td/cLgTE9ChIOIfQd9qIeHKEh9Q\r\n9mNJE0IKNDQWm2Fk9GD3tYCKtar6w51ObQ1hHKBXTszFBVKNJMgRVgJ6GEK9\r\n8c7i2csFx/lDgcF8vRDHkEA5fm29wxSR4nohFkqRbNuV7wotUHFyKPQNx4uB\r\nmX+CfozL29Asid/Az8iwOvxqWfuMFJUja8QjtmoatkU1T7K1byN0igqAl3pd\r\nBNnGOjpWbs5/jJuMT9n+9mY/eazNxyUkOPXqlV2Dn7wc6o6ZS1iYZ8yZZQnb\r\nBjgcoKYP4NWrBcyWg0ikellYtDMqusEj1+QCztrSJjbBP0HLMPbCR1Dx+diQ\r\nw0o3Cy0OesMqL2YROqfLiA9hNSms4qp2ypZ+1mL2a757HL0n1dttqIkSupmA\r\nc+PVdTQP2Iv2AusDKhbHKn57mwWY+IQYjgzITCc++w2RfCSTNFZJmCVGfUrq\r\n/JNZYtnU/2tMkcWRsE0hQCqc0PEDFgRb++wlL1NHfaCC5fWu9o0kuV+nSY/8\r\ndQKVxb+j7ZgQ1EKyRfEpyEVhm4g6yFFVuxY=\r\n=1Krl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/theme":"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/line-ripple_15.0.0-canary.bf86521f4.0_1678835557917_0.6552143708319116","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"170b4e7e39321f4013c6de0102131142a2300db8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.11f3d280e.0.tgz","fileCount":35,"integrity":"sha512-Lz0y0+Ozy1x+fmVGupvbn7i6d07ikYddMJir3naVrdhespo6cVCPbtk2QzXzDS+kKGUzytuN+BSJABVX7wurrQ==","signatures":[{"sig":"MEUCIDAv9PCaADY354rQhcsJ9p2OVDA7EP+DRbApfLFcr1BQAiEAy8ciHn9wP6RnUl7+LbAJK+Gb1sUO+v5JH21GnPzLEd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQz0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMRg/+PR3w66GZF7VgzjRbjwEFvgUsCDdidSlaVxBAPT9Va0TtFGEo\r\nLd+OC9+TEGWTTUwYZSvMDb/sSJtz2tS+GI5eABQFFyYhWqrclwAObfRDdvre\r\nx0XfkojWqAMylKCcSYJn9GIc1sxzyoxEENEZsPP9hOx4NQhTn77A+/cNjc/w\r\nZdOuOoyBob2Bwy0AvrV4oII3Cq/i5m0pKBSeJJr60D3Ff6OEH0mfPnlr+zNb\r\ng/IBCxf7HdHFTdt/1qZeNGf4k6JOdinlBlzVZirnrPTwDJ7XZ8VgFK/6Kgr5\r\nfVePFOpYTEh3pFpo5kTmQBS/PtB7PTyvthMXsWnwhM6utWhKd/Bqt7cMMCdu\r\np2ROJtxerkbXEVtz0QDhREjrXJTDjt+XkJW8rPcDZOf3lw47FGhlf6V/F4r1\r\nz0dxAhXiDT7D6DHQOYoYuPi+b9onLdhDG3OnKeBKm1x1fzAdielleFC2ikyY\r\n1w+QhJnWaQ8jH1ggcQGBfd8e5t4My4ki6LeJGoykcsfiYXwNd4OYmOEdHOYo\r\nXrNN1xJm9Gnpe6AsN21Tve82kg/R/m42QcqVMEOJZphKVyF/uqTSt9hmnNNm\r\nAXrLB+fvHN8DxdDdVIfJ2FHHtV2l5FeidL3qL+ePbCqoivdb+zNFiYPfgody\r\nYSRjV4jTDsagiktGVPsEEc+V+T32gbxaFyM=\r\n=uXO9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/theme":"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/line-ripple_15.0.0-canary.11f3d280e.0_1678839028719_0.47186293930706413","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d14f8b2007b77f4f326d0b177d24f3ea9a0721d2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b281a409a.0.tgz","fileCount":35,"integrity":"sha512-wIBda0xr+Og4hAO+tnF9sjvanrC+NG23Wl1myDrlWA5v8D32ahjWsu4cU+5IAJkekRJEbXXm6iTntw+mjw8Giw==","signatures":[{"sig":"MEUCIQCIFFT1olK6sv1v9lX5lwOyeuoj8D3HAJeaSyO+plmCIQIgcpM/Kkp7vP+ZP+DHoc3qpnL0zimC/suRs/ZSbn1AonM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGc/TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnYg/9H8LJy6+SHJY/N00g+ORHgkI+z5QYU4jJr+rN5t2u9oEWTmPO\r\nCF8XAnc3OSzgwEaXea7H6EWQMCpenaXPd/9XgM5k25chgYC09EEWjDWMGP6L\r\nsr44BK7Z5SDzsgYrxo33ObT0oA2V3QJWRmxu7Wlvux5CcEFe1LpxDhT5s1fV\r\nuzKcYzwlssAhyEaiCToCXErzKWq8iEj/lF4r8v/o0+ympL1Ald35GHhYBPPy\r\nY5T0cLvEDxFutRR6DpPPnEa9BLAxraVxZrw5NvuCFjZzSJYeb8Oi3rYMbdVq\r\nIdjNWLnwdmAfnhfND+kOoeBmHS0QtwTvGO0G0dziCg2k8aAZqymaPPJX1qqJ\r\nCjkGY5jojKKic2sceFeroZ24u5LEyzlA8KRm8Eld9yLZz0+OMgHW1yB9TOIQ\r\nX+mjf0z4pCnFqCK9iw//6qa4AcdUkOgnKcmtaDW/4MScAiJUqruEuOZUpQ18\r\n7I+czU73p+oQOqgkZ0ngRGoJ9yBEDj6ER0sqeJr0xil7WaBlqExKmj+/sg4n\r\ny0e8im9j6LPd98d+ynmqIJFXdK/AUFwr5qqzJse9fxlG64JrRUKuISQ8BURL\r\nzTgxjOSya3lNH/6UNm/mBtUIrojYIrxlT2+NxUeKg/Iig/nK+AGCMNWtYyqB\r\nS9CP2P4k6er/ICOJvQiPCXd30hbLSaedKFU=\r\n=EHTc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b281a409a.0","@material/theme":"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/line-ripple_15.0.0-canary.b281a409a.0_1679413203271_0.3483101096165093","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/line-ripple","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c4a58cf1482b53cb4c4d96ac2ede074749590f2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.39e473690.0.tgz","fileCount":35,"integrity":"sha512-6eyn3ZnDVf1ZgLQbvG2yLM2lQMVd+cP6j4Eo8YrNR29gbDLztc+D3FxCSwa5kI2r0RlDj0kFTh7Ek8UpixeEWg==","signatures":[{"sig":"MEUCIDwMYLhYUUFfty8J6mgY7g8MtmBkUZowjzHaDv7G29TUAiEAnfKso5cX4dz7pyLRxQxystPkVYQv68eHkwQ/KF+vJjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe5jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpsUg/9HqYO/rERaOXsu1Y+2Yz+mgjelw+xsORF2BWW5RNuzDzxPSjF\r\nKC9OAECb1x7K6J33VBmvpEE2SGyZKCBpaklN7UtJhfTv144BQ8Pv+LDMm8oS\r\n3N1XfFLjVTAaFZy1J2iXxyfAfuZ9gmMhl1OgbPL2kyyNwVikWgeCmTtTZ4ZZ\r\nkzOMG0YPYPqnHceVQ+KVTUhH0yGgClw5re4WExYSnC8K1Gr6HkCP0Uq6UR4F\r\nIaUeGb+fhF2ScmX9aGd4tC7b5g7qwDSBtguhLhBP5VSoKgyAjHWIEj4u/zX8\r\nkQ9N2PDatJNDJuhlkkhVEre+Y2OLojttRmz7CWjs2pfqVIKnCtBSWE+GKFEG\r\nhQrInmPNG5+1Obr+BapcuLlk7bzazAgWJXXEXy6BTHXziv6ti4Y8PBhGKtVm\r\nn0BqBgKk8k69F9bbrJkXDK38uHvcOm2J8ZNOxI/0Pc44GsijT9kdsmPEO7o5\r\nGm8sd7pbg+nKxBU3lbgCuBvcj4AGWI3Wj7dsZXC1vv43ZKv+IzG5J2Frv1sr\r\nCbB8XrixO/AnP5vna04XGTZkh9FSafkcb1dAtRWhgS2wk3aLvzSbUNfszUCR\r\n8eKlDIjATu0lH9ZYLnwMtMS9ohEZ7pmBYBOPu4jtpq9HJvSh3Y40TjdgZLYF\r\nz8prAmMeaIdT06ZfPJJn/D5dD4MdBu5/YY8=\r\n=Vu/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.39e473690.0","@material/theme":"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/line-ripple_15.0.0-canary.39e473690.0_1679421027011_0.09809000446442506","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3c772ceff4688649d24e66bf5f40d50438428a02","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cedffb44c.0.tgz","fileCount":35,"integrity":"sha512-KIMhA8QS+i+WZ0Duero7jvwDeznCJGbH0p5M829kcwTMrexQtWwApQGRi68+T+X8XtMxgedycS14ow7m9eVcug==","signatures":[{"sig":"MEQCIBBthuNSkiD3tXBbbADcXtz9IMO6TvPQoht74maO9tg6AiAV17JHTWj2jkADsrLLP/QuCu5hZh+Dt5NcMWqqAGrhGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfAHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop+Q//VMHviildDBzHmijPUaHuVNU3xJ9mndrqJrjeD/euRcFNeCCt\r\nBYVjmmalMGSSHj12zb7v0O77FJrpfgDM93j9qUx/4ukn97GTuSfx1TeERHQi\r\noGgd71ZCee1BUrhZ8ZJJlYyYDDvtYDPRASRG8rUaLDWF+M3cTg77i5WydqMu\r\nzmcs3gQNdWDjDG0B+TG4KWeiBNMXwb9ej6aJKXH6L9sHvTfY0WXDA38pSj9a\r\nYoh2KJmZmXx0ZQEbfVzck/FxCrw70z1TXvXidDAr78q9zRvQkC9ZXJxt0Y7y\r\nwizkwjD6lGIfGthEy/vfXTkMdwZX/W8nWd+qo2+79GimM9FBRLNyNK7rCSDR\r\nDEW8+KmCmP+Vhjp5yWniBJTTI/LX2sKusx4lLimCTgHDtpP3kd7m9AjjN0H2\r\nJwwlLjd0a3lkRut4J50OuOs4NoSL+sDCbm0Wr1OzATIVt/5q1VP0LWIPpuZO\r\n3aoasBqc3Em98p5TYxJXb94+MY24hLNoi/bqNwrfzvZ0CkD+MI7BHB6eXr5q\r\nSQLh7rothqRA2uLbb8qoYq3rmkCWyQTQWoYO3XzuuUKlleOlPvr7Xll0L9zX\r\nKjGCaj9h8Ly7vyQihaTw2KZPeFHpSr9ytUv1ikUESF47KxeGskCuLKQ/oioW\r\n/BrRszf4AEhEp7qx2j37hA8pkO4ZX+Owhlc=\r\n=fdvd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/theme":"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/line-ripple_15.0.0-canary.cedffb44c.0_1679421447528_0.1557736168918067","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/line-ripple","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"26207c868560ed64c4ea2369cfb2b309729557e9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.36a4cba99.0.tgz","fileCount":35,"integrity":"sha512-gOXVYm000AknsOiMeJqBNeuESD9K0z9dzg/iqfe6hMnxwDA2B1xSUVuCgmz8jdlZFVRBAXxfZqv9cThUx960PQ==","signatures":[{"sig":"MEQCICX9Kb5ORT3mqZ9jIAhGhL7xYkIl57HiwbSC1Vqc9UTgAiAU+ObFKWnL8Zz3tfoXzHkY07tV6fJlowLyVN1Eq7xGZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIyiaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Qw/9H2IIrDyXrJYBumK8kVnBsr/UPjfu4TzHwPNv+Qvb2gmL5vKq\r\nNFvx8mSC848h0JQpnbLIS1ivz9jspUvblxPyNMKOm0RStiGm3iXBbsz3BkkM\r\nY9WAgAoVlGVsBe7cZC4M99M1krzMnKIslyOThoRNmkekuMk+ALZfVbLyGbaS\r\ncOWBkJsECOZN5KHrUOMzj8OgYFn3I0e54NlY1l8DKWTZ2jjBYCoAc1RPpYhm\r\n0Tt8tXdzG7E57qcXqTk5VDufxq1BFPXl//CHIDiKvISSUD0wxXILRmfNTNCd\r\nP51Ux4POsm0ujIHP/In8sxMzdcmimuHlT7kkOdwBTanttYtZzPLJmNhx6n9F\r\nalZuv52eQIE1ETireTlouW8LYqkhvkKjl/7U9OWQ2lBSRN/J22zB5GnvqtLs\r\neEtJB4qe1IuWd3HZfu1/PgRvimLeq+A6J9DkkhVeKJnsEUz5VLAA+gwO7UR1\r\ntwohY/jMN+wg5hbS+udcFlo3gMCoshwiuZBB8gQ7RDkxLByU563iYN0SN8kq\r\nke0+vlN31Rd3It+1D8SXbKAuIbFbrkefTENu27AyOXFt4UNoxap30iOOpizk\r\n11r8VimPfLfa6zZTJXhUQnIxcedl46MHUttuJrvXsj+QTOMfyoPbmhchFHWR\r\nn+JgX/DVmh5lmPfY4P+0LOpQfSni9ibyG1M=\r\n=sjdf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/theme":"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/line-ripple_15.0.0-canary.36a4cba99.0_1680025753773_0.6729231986758428","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c3fddf0e881f5cd96400a2e863030dc18c6d80fe","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ed7e82ded.0.tgz","fileCount":35,"integrity":"sha512-sxN5gJN0Ve2A3wmZlHu+CFjvOG6pMIhQsDBGtJ2FpwBzKZIEsgo4/sGcNs+RpIsDIhJiA4NGMpIR/r17BOi45w==","signatures":[{"sig":"MEYCIQDNYi4Ox1JJjet8qxeivWp6gwVY/j0mAVE9krjuLU5soAIhAM1hxEZXQIZ9W27kntggpwcnmM4p7ETEutxmYxVUWbM1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI08oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5PBAAgmhGMypfcnWTGAET7E3v4w/TZLhSPy0pyfG9+s2qs7Ku73Td\r\nP5JrAl8FHA/CIPRWKPV8gwmaWwdGAr8gwithWOmwiKQlSZfQRoShUEBIWLka\r\nvb06WXx8fO3/UYPJ3d5cpzTQAPdW+Dqc47AwcX8BfhL3eM5iF9TxmqWF7wh+\r\n5H1/tMc0/xy+d9a7rFLKUg2YWzOcvBhhgOrQPfx3B4hIn2JwAq3kwmBQLonh\r\nSm6QFhj66qB1lL9hcjJ3JaLd8aKutDffQsQNNsH34Pp6S9KhcJ1ZG/bMPYFl\r\nkM7aQnmVZCwOFQD4BQm8GlsVmiNA/krKsMnL1wK4X1iSeuSdZxiCQo47iEvB\r\nI96cCCfv5AMTGkpCBZa5mSgSw2SO9GV8Wywa3ifwaC4ZPR63+H3d78svjI0l\r\ncK9yH2oQfalT7vmLmxElyT2sr9oWcA5ASOh2ReXk9ZyYB2pLFKOe+UrTaDjp\r\n3iHFTN5PTGbGmXSFMFvviDr/ouhfzUwtsK3QrW5fsBnXCU/TunraooJEth51\r\nsn5f4Frxj4ICEFVRl23dC+7eiVKaNAH0uXSCh+bEIfdXVpnAvH51RA9XHv2r\r\nd6YSzkSRV2yjSSNOGxY+y1WqiCe5zBN1IXEKYyq2SttyOwuA0LQ2tUNEJYAb\r\np1U8EGaeltpKLEqPLPyWBrCXSKxS9gRO4KE=\r\n=UGSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/theme":"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/line-ripple_15.0.0-canary.ed7e82ded.0_1680035624309_0.8205601337899531","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bd8406d1df12bec922f3cac3ebda41127415dbe5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.55093ee1e.0.tgz","fileCount":35,"integrity":"sha512-jD8MebgAlmPJEnWoOLGzbhAQkYpi1U32Z8dMdhFnO33YKJkWLeoutl67+19T3ky2tXVs1xhJo4AQ4RmpiDOrGA==","signatures":[{"sig":"MEUCIE0RO8shKxPWJ4EHyzNZwugafuFoabyrpaTHFOIuNjxUAiEArARg/LJ0LCUwnQA+s7BYdh0ARS/tDnB4HO7JG7ocYEM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIeJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobPg//fBkwYjLnTr9mkQfOJvaWsJ3+oMh7YIZphEUIsfib3kHXPGAm\r\niRbSIOeh764oCJKn3QB1BbYafUwBlvE+ZH3S7q9V38kdYW1Nfm8df4vcLTMP\r\nRTpXoE4tBppzGlmaSbQA+F3+i52PoetpEWOIRh93IAo6azT86cODpNzIICCF\r\nzgk2wZ4kXwYY4eGQzlvshkB43P2rueQpsfzOXeCizoQAfeqSwmwlreA+K/2U\r\nRenLMGgDjuQytNny6dSNzw3HgngQtUTfl2z4BgEHeZG3xzMpS3iDH3Oqz+Dg\r\ntslD7lOEFGzuTV80oF9fGRltyMvU+SpEE0YEuXso1tDTYgnpZLEe12r67RgM\r\neYfgQdhug4TrR4hww+9BYbIOm9diOf0BL/c4cpeQlkl7EcdG2uT1i8+FORYc\r\nN/PU7sQYjwnX7czav5qcPud4q9Y6i1z4eO7cfcgfzCmBEc4PfG65tkGU6DCC\r\nqHz/YV+Ec5GfJl/7I2mJZd2iymAmTLb30BahMQunhpknXKrWq/Qx17eOr5n7\r\nOM/Z6ZnECqQvCTqFcGFIm1uwmOZhFcta9aBycdW6O1qG9KlVarZAfNbVtTZ7\r\nMYLshQ0CJJwUf9FAVGKrbcpkL7m2L3v+PPwPmCoLFxwVgBUwzsPlX9nGiVXa\r\nhcSjqxK/QkrjRpRe2OkdUa6n/d/Rrs6nXaE=\r\n=gGa1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/theme":"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/line-ripple_15.0.0-canary.55093ee1e.0_1680115592889_0.4007322593703633","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c39e174aa4921b1ba759ef8d2789c8cc4a488a52","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0c53abc81.0.tgz","fileCount":35,"integrity":"sha512-jzLIlLI+2/rgCCF1TiQXMcEs6SQOxvWJswpUwDeiygUKguk4FA2qLG1OfhWsRJM1STzxw5vrHo++INVDwCNTEg==","signatures":[{"sig":"MEUCIQD0GDSN/+11Qq0bkPJBNg2WzGgbImH9OIqb359dxd8PTgIgXzZ4Aj9gtjTzZxJY01GBfC7Xe7+qF6q4heXVgR767uw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3SGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvAw//QREefy6TM4u8iSS1XoRaZyvE3S/2G+dQMru2+90D/M+3Ew6w\r\nWWnZMeJzDWUJf+I6o+9XmWxEePzsKJeXro9HCRoehz/TvSOhNc2yCqkpXUou\r\nTvAYtxY/Zu+KvhReq5oiQdnjHukfj5Ek9cgU6AtOQvOJ15qPq5pKXDv4/tl+\r\nvvZjVBzoh7NVHpONs6SIbIwL2lM+/FNJsV3sxHyqwrSSyAW2YREqw5YxDxA+\r\npqSsJb2y6+8j/rjloKdnHeSdNbVH4OIApEcUPoRa2EjFauFiMBzvb+gqCuSw\r\nAmyrPjHm1hLpiAM0QkedkmIAuvBMtl7G1TZNMlcxr/mXYdvae+EkNTSUhpZH\r\ngVK7yOSZcPho1ibiBPlgGgmWx8bjZM/azCvsv/Tydw3aN0Vn6GF0N0NzheFf\r\nn/XIQVQ8cPslhDTnZmsRYI6TI0ZtTiChdsZqvYKeJwKaw6EDcZrPyXPMfEKP\r\nN7sxb6jbqSmQ//UHiOhsGifM1Ocs8GBrDwh/5MhhGDyn73ChryJ2PoBs3/r3\r\n5xD9zqpJ4YkxX0EqaDAUfvcyV2KN0LQnXrZSjf4XciEsKTE9EqmzA8UdOybJ\r\nOZB24gwKLCqZ1S8MhcBLE+oV8eXLiE485aZUfb7pXF3CTPMD2D1FH6Cv/tN6\r\nCrog6FrauGPgCEjWykmJ7o5zhLp+jtBaN0M=\r\n=fp42\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/theme":"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/line-ripple_15.0.0-canary.0c53abc81.0_1680831622138_0.7506972200727824","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"8a63eb9938b74e9554530fc380e9836d5da55cc2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.51311e69e.0.tgz","fileCount":35,"integrity":"sha512-5zL02n2K+bzig7ZNJHRvk7VDEf0jxIHn6x1hjnFVE/s4w0db5hskbZw4E7r5FvXBJEb5p4m4afCj4hde4+SCWw==","signatures":[{"sig":"MEYCIQCHQp/Bf1AV9XTRjOaVvvHonDjrI/Vwp1AXETHWg/8PAAIhALuroAzYZeH/9zTQrYcyLqHtG57D/7ugWZUL58hBU+ur","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFvHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRwxAAieREf9/4LYya4FzY29vhqDN9R+t68P8b8fdqFG/MgChcc3qg\r\nF3ITNhzfPSfI/3Gp51XQ6WZGXZ2SwX1hYNpU/2LVTgnpQC54dWkhXLwYOyEY\r\n2wt3pJ1DOeElzkmkeBuxA7jSysIbb+/SULCkrAIc71iw9xfcl1NVcVdoSr5d\r\nh074Pk80FWbyeJbJzQe326BcvP7aACIHl5NwStjXKR3JYhQhtNPzcbHj5x5K\r\n9iIrKgMW4gbLfDxzDGIR+qiKbtEQ6rt542Ev+sxRZi/6+iNZs+cKa7Vc1bvc\r\nyhXbho2O8O6F4VJqacl2XzHaemyjgf1aP/f2mwAHENxM1nE4H4uckSpm+SAu\r\nil8Bpn1AK59+30Ro9sMfiTKRwl0nfzhnL104ADvWQf8uCyvjiGICYCHJ/lPL\r\ngZBFiNaOMTLyPmEriKqQqMpfXaBSqJ8NgkT8ioeaedjx/u+r/+zoyoor+QfH\r\nFRVCuZPNJsSbCgkHw0/YBxWOjHm48m6LCKlLCjtNCqQtkyu7n9ueYCw8J5Qz\r\nhhrkVJRvN4jvAzeCUhLU5PlkbI++rcTY0OeHOjxpVE2sLC9j5zOxdGLJQd9w\r\nf24oy4UHmJR1iOADQB7CasQG9hrvYmFkg2PfZN5mKNxeH/yaYM3iPtceX3TW\r\n3kVHHONyNLVsXYtzhY/KkqnZMP18h2qjZIE=\r\n=meBe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51311e69e.0","@material/theme":"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/line-ripple_15.0.0-canary.51311e69e.0_1680890823156_0.40875146696657283","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5bcfbacd24c53faecc05ae1317818e63aa9e4aa8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.113b1a38e.0.tgz","fileCount":35,"integrity":"sha512-7HcGfUESiHiS0Su+E0A2VyFhWnGp4fHLpDvy3XnYtY5xCc/mOtgWauEcl3fP2WUf6IWgEM8rTd7zKEGxY9Zeuw==","signatures":[{"sig":"MEQCICFPQQkw6KIXsiMbQ6cIoAmwEMYhVPnDvt6uwV0WwStXAiBz79DSidy2ga1OU7+hrJXWmJXJ7SaRf803BKBhoGsDyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIU7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJLw//V2aDGKT5g3podxkLPvYsMlJwcfLLNpAVtJaO9XI73Sv691m3\r\n+nkz5JOgEfd7ocsfk1ZZ7gkDwrGhZjTS585WZ/ehySt7B3/eIkS2k8TuZkB/\r\nbYgQXNsYGslkXiaUMv4X25wdeGfejNVTLY2rUcvJy+SqfIEgBjgGQXchF2KG\r\n1EhiMoKiKFsyDi5zziqIgMV4jJtUa8rY3azxw1/le60qFoG+RH/PSb/BHUhT\r\nRXo6ll0SRkUFYFYjjhkpGN4E9+rl6cOuZmYu5oYOnmO8SJ/qcGjsjRG0vTH0\r\nGdjVuSMUQ2jxy5LyzZ1d2oHgLJaqGjDMZq6Z21xddy+E/u1mrHUwy0gZ4eH0\r\nBGQn14m4/epV/jz8A62isDD8JqS2doJTxzr9xNxL5Qe8RL2r3h4tH5iTJAVy\r\nZ/lHM8KlhXEOmj465qNRMgGNwEaWFNfodF2UBPDzP7pHPDOefxjhx7L6vLBn\r\nxjy4l6F3jjbzUi1YDcPR0TjrXiM9wFFqL4UpuoiliZKmu8Y+UHrGFow9hVcI\r\nVPy9kVQtndB8+AxoQwL8pyJXmqzq3fCUCAJr2GVCnFbXRqZbnpUOkL9ZSDzT\r\ngN5IqsYh5k0kosBMIKuAW/TJTnArvb9MS63HvuwnWv9CLqDJomL072IBifv5\r\nZtV7lpm1dF1sChs+6eVNmB4cdUHCAOILStM=\r\n=h/6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/theme":"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/line-ripple_15.0.0-canary.113b1a38e.0_1681163578858_0.6189586409274783","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cdbd962a13444b28086de06c1fca6e865a408e53","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ea2191426.0.tgz","fileCount":35,"integrity":"sha512-S/7Eesg9h3SUO+JZsjRpEIt9SuweXEmWAK+9jBtCwJCk8fErL2aIZJtdsmE5khdv9Zw1n8goET7C8bouDQksUg==","signatures":[{"sig":"MEUCICIdMGSZR+cOgV1HXHJAKtHX9oLZzAGS4cM1+yoYEe5KAiEAvpH/yLnE7fx5Dg2avGapf/wBJbDOloJQHN3vzOjuIvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdcpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTHQ/8DSi066C3vbaOWMFZbqnyp9T82tawI8RAdDmAHEJsUJLfhRr9\r\nwzkIS2GhMaQvqm09ZENPFO0iLi9hwj6ezhT/UaJCE8QPsOJc4JIy7xmSy+MU\r\nb5Rs718nloqdcfdq25WE8juhDuTxnCfn+AaCabKmUBaqtrUmtcySEfSDGl8J\r\nQJGGCxmqF1tDuBu4Rm289K3voXUpVeRIjDEpSnx1xEpqL624u433VRv67iiQ\r\naTaWQ0nRdzOPGWKjKpeE4irLojYsr6L7Aub9rAs35E8J1d2HRZUzUsK4ZOqZ\r\nN01hTJIEwsRC/q33gRqhU7xsYJJ3OGozXGfsURCubN/cAvo1pTqCcHrBrand\r\nXKME0qXAUfvf2GzJyj7BKMLo8pkklAWWD8BGLHjiR7ySCiO0xQPA1WsP0M71\r\n56pn0psARu70Fv3uTVhw8dRfD1gE+By64CEjDfRRbO9HQP6pSvDpkvC+qYAn\r\nLkEtxbEyKnQfVXRpFF3mAh0pUIwk+VlgJ90KDmkD+8soPvkInI2e0HyW0g/P\r\n2ns4rVdMaUaMg2ob/m72VsOIruJ6cvqYaDJszCeDwNujbjglmcqC7SI2vqJx\r\n8NeHLimkDyCGJRDJy6rQHizihP8aYng7HuCWLOXT+dU5BxW6NHM4+yu+RAm0\r\ni00orlN02n/fjCu8KOgXiIxQ5SqJdwVAd9Q=\r\n=sI72\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ea2191426.0","@material/theme":"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/line-ripple_15.0.0-canary.ea2191426.0_1681250089211_0.5813448634097262","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"af0e36752c0e859576ff941f1f5407a65bbefe18","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5a5c38538.0.tgz","fileCount":35,"integrity":"sha512-eRet2Vkzr1q4nJeCYKLFRDBsjpHZwiDyrsR3ThHmqEOyDZZExFdJ92PKuTSdDGkE4RjyO0XWUwBKMVhQpWHFRA==","signatures":[{"sig":"MEUCIBAUwzlL4ivLFL2rp1AAzy0rMHPNI1hj2brDRVAj31XyAiEAjV/RNwn4/bOb4IwC1N0BkdvSzMQIqpX7uvHlYQmUn+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd9MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcWQ//a5XRJUpsAQwHPPzCTUjtWJgjlsdAhhCjgQXGvD8SuBvYCv7/\r\necBLqbpb97H0To+NFNdsll9SQQWyUwK8AojxFI2yEivXl0uO0C9y+PC8WMDN\r\nqkFgLlkew3Ui7DXp1Ck6TImIccCDF0+E1NASh29zbcxzPcAYnF6fUCpQjBDs\r\n45ti+amL0tZUQgGPxuUi2kyyxX8HOT2xPZCtvQU1Ptzbd1Qs2e4GrF1+++fH\r\nRbK9CFP+W308ck6IY+dn7k0oRzXToJNOT+c8Dnox/my7XSDXhxVwRyQtqCbr\r\nMY3j/RgMmM0hClqSLTjgiAA8ixwQonFogEPeHVxWH0FQF7lSp0JvdcuYdRBY\r\nGSq1gzeJ11/2dE6gnYiq8kaPCyW/LtcKo2SyLxvsQDhGJXMrCPuUJWWp9i6+\r\n7QasR0mnumZWyS0PkTVlBhE84DljxV4/IrDqwjhV3nS1YrcxJzgHBE6GGmu3\r\nPXB6G16xkiikHP9TPFT1RpuUiqan5KyvQze+C6ijHFRpUQpGmb/laBWAVbb5\r\nuR0UY5+2H8xo+pmI3pp0ZAYkWF6vtvUM6p32HRdpdqZ3maItDl9S3Ln99wpp\r\ntwUNJ+ZeENbt6AKzQ/7oVMZ8bEfOTmvnIiUyfADn7kxKgGbHelt8gHQgQSEN\r\neiKds4gIGzZzOdNQ90PjN4a+5eK+wCxlorM=\r\n=YcJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/theme":"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/line-ripple_15.0.0-canary.5a5c38538.0_1681252172435_0.9491171475380518","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"20d08ef57ab9dacdbc585088997bc5aa23509ad6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":35,"integrity":"sha512-XhinHAKt4nCMP6Wg2l/byYVNEIcE+TxJNjR9ew0DT2Pql1TCmCus3IjzA/WEV3Tp9CI0lO2FqgAjMWAeUoOgJg==","signatures":[{"sig":"MEQCICTWg1StQLSOE8FE99PS64kPbvvW2LQD4z3EO5AiyTDUAiBl57l1gvXoOzmtTJs1rd6wwHBqK2YCXQKESTdXPo6drQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNec7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogUQ/9Gs//ztP4PfkqHOEV3iJWCh2qYIa7htvJ+y0Eq7gmAmd8RrYk\r\nSdk4Kwlk86sKva9BTEi+ADLaXcGeFeRO8/Hw1mJxj9FNz5LXxTJpzoDcKs8B\r\nn9otggsjMMx34jpT98qFblYtTyNY5+btVBA4/AVlkm06Ox4wZ+EkHmMx44J9\r\nD2uDqnRy7RtpjjiBBD+87CAqbiOw2VAFnuRBjNv1PBQ+VAowzIe2fZ+cGGHN\r\nn9o1n5UOXlUdR4uTJwLLJ1144i3dvOB7mYi+cp7qMBTzcw7O84z93IbQZlmX\r\n5M5U+cMCElUeTUJW+sK0BTmgEuyntVfLUpMDJCQ47Qmf70ZYVFVsF9w0FcNm\r\nEOa1vtLtb14QwPcGoZD078+TZTWz1a+04T1m0SCA/+JrzvHu3XGfRqFg3q2m\r\nzpVT5qnjCG/n2bXpZaCs4OWrTIDWyAaCQqpDEqiL0p3ZASyg7ibtXqGmZlOu\r\neO7R+u9nP355N/kibLNtYKyaGNafY6ppyRf1XcZRWDTqZ5oNeg7JIwgbqoWl\r\nzCxdOwDmvJnEUl7NPHLpMM7EA38unR6LBLCDK3oOMVS2kYj6rgb3S8Dqhph3\r\nwvcBwNbQyQXMfaS+6sZKyvYbVrGKfH4m4NWurUpA6asp/n8IYF7o+8HQDLip\r\noyGhVYjnIbix3Ww1cKUPJnJvJlaTY+UEkzc=\r\n=j/EY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"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/line-ripple_15.0.0-canary.e4b5ea7eb.0_1681254203575_0.09948978998125346","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"9972596a933e18490eba55c6d4dd08aa8c25f176","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a094dd9c1.0.tgz","fileCount":35,"integrity":"sha512-7vOA0DqArHSwW0DIqkpVLqVHaR9Nme6VqsNJWOMASNnDDtzlLPaeVP09PhoIAlbq0rQsXuNp4XPZGHmRIbFSXw==","signatures":[{"sig":"MEUCIQC1zsUG2aNWrKpnGiCuHoMy7RXtShYqWtwbEtEwZqrV3wIgYgye8T9TBoA2QJidqQ21j0adYsMbGyJglEzF8LZkA3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdamACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJzQ//TMHroZDm9ZTDuqYDl6V4uY2Q45w25wXbBvXaTCipi2RWlTTG\r\nnvs9aJGq/+cSEsLYPclpVgWQFeg+4ycld4xNpNSQLatLkj5O77S36wa1x7Dl\r\nTjUi6hutC0PLp4rn87ySVxRz28Mmn8np+QZ+1ZTpYNoupoE/roICEceTPC92\r\nR8FdwYMosDFB9Dwh//Ne6v6pJj1bF684nVTS+xXeQpYBczibWZ2CB0bPKIX0\r\nVVpzyLiemUe75u9bV7Q2QjwdnOztvWs/ETevXQ/OeXCar1JDt5DAjANVZfXW\r\nEhX0Wba1i4Wrh22otZ2eYanuJk7248lyR/3XK7A1wnI85MjEIt2xp2lOmvhT\r\n5rjr9yEQRzvOyzJQEH0NEOKWg8hQtsHDz4yWPi2JfkL1T1lXqIcu77U3GuEe\r\nTaWoJrYhLw7899Df7aJl5Bh3Cc2MjfC82m/CfsgrvIG6hPZiZTKyFcUTOA7Y\r\n1B/HZEYxw/SN0DMm6wE65KecQxOEuyqJhEdMgSMdeNwP4fVUfTGqn1RBm9tC\r\niYdG5jD5lSjrp03vMVlC2qpTwqoww0KOH3K6qxFOicO4KTXvRGiDc2UHV6z4\r\nkvysWq5a1howY34gDXHtKi4kDJlX6HlMDkH7glgdFf/qf9b2BCvmBc3ZyO/U\r\nTNwf0R33J3Y0NB7MG7O1DKip4DC2v2oVSP8=\r\n=OVml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/theme":"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/line-ripple_15.0.0-canary.a094dd9c1.0_1681512101925_0.8007887656887545","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fcc50c33605fa569babafea41e67cd3e2065141c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f771b091c.0.tgz","fileCount":35,"integrity":"sha512-Dru1XyoJ+m2D8gcKIEorAYLpaMfhlmOtjlMP8fT5HSgilc878pUug3VErKxpzFEXCM2wHKxJfb4ij1CtW2j7FA==","signatures":[{"sig":"MEQCIHpdnPnMoz5l3xJCzPAUc/FAjFdPfntJ+mjDqeZVL+TvAiB+JS2Ww1dtpQQzzKGr1P+uDBRA/+W0t8sahEXVrUjt0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWejACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ9g//XJxRNZ68e9YAXbMdQ5a+g/eN2P71YXlnMhnqkpfZbZGuKCSd\r\nr1cxC95+1SrWXYRVqSkK05CFmxIYVOSxR/zYjrZ98BGnI7EI7xlLFsRSk0/Q\r\n9xp5rGhPll6g8Jq6YB0RhglOZiwvRpngDnrWxA/T1pNMoxxtiJRv25FxKYR7\r\n8kdJ2PZuB0aD4rmfq+YrETKOSriNQkhiaJXpSbbr+kRLZe6hz0gfyqOAOqy2\r\ntCpbvIdKpcRb3R5eGmCjyVidBKwnrQlTcEI6Kp07SyPv8eWQ+Gx0soBRLUtE\r\nVbx0aEgdNXwOw9PKcSw4YFwQ/vpT7+ejTZOiZxeHauFG+/rERSehoPQaNlIW\r\njk5eg+nU/wXjtbywThlyRABCepUebwwxBPPPASF+Jrj54nvvUaYKhnYPQHAW\r\nAtehRLuCpcsOYBWFDcm3dESwlwcbsU02ejaH/o5WiXoyzafnk9wb0Ki1bVSc\r\n+jTqaeffxUiHIehis0y8h0KhBGQoRSEZ1MciZDIBW2C1fjDUH4GXn539NR84\r\nmT+zOEC3AjxO0dRW9WzgwcduNZybaGab1GRxWjGvZq+DpnmhWE+rLP37wEYx\r\nPa+73Fzqq1F/p0v8aM48N+nYQ1aa1PBsnI4l79CxADy4sWAKv+lPnGHYqyKW\r\nkrZ1ZKj6jzAjs0ezDvTe56MBc/T/r7KJadc=\r\n=MEWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f771b091c.0","@material/theme":"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/line-ripple_15.0.0-canary.f771b091c.0_1681745827567_0.32108797355157415","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"803381849e3fff6153ace82af6e4371bc2891621","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.79b1b612b.0.tgz","fileCount":35,"integrity":"sha512-8qI53vUz+D4wLzq7Itie3iYXTo7OSDn1AzmfYSnaHuiMOJ1Ny7PvrIwOfOiPFlgo9nuQ5GbnS/OY3KyTIpuI/Q==","signatures":[{"sig":"MEUCIQDdV3+XHG+/Wvch81sdYqm35HRQF5ZwlgkqrWmXiq7BxAIgJ6w9SyQoKDVJbEbeg/BKttMLMQV0P1OQ3fAyxcgAowk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHudACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDmg//clgZLRWU1bP/gbLsZutoeGRYQeYGI8gd3BzDyx0JjB1SIuyF\r\nb3pr4zK320PZxQGkbhTXZaenx+uTvhvqjn1jERxcxUeTiSNe92ejDmy17vyS\r\n9yQhTmhonKEa3r5QOTjzWA6ditW3N64nRGgoiQRr6DnAUuj6mGQY/kVZG5ls\r\n9z/zSY3/gUIN38xQl4us/W+QzvCWMPpN67Sj1dta+BO6th8PfJE6gLiIsZpy\r\n+F9KzJy1Ies/yTGmc1bqfhwXkaSRuOB4xH5Z91253Fprc7bV6tk4MQIwU2Vh\r\nPbz1hgCgIt6BRfXPJjLWPc840g2tO0oZczfWz/SuOjebKBbcvWMjogT53VZm\r\nSE8fYCjyNvaJCxMPbYNZrtSV0XSYrZ9T0sF2Xmm1AyFEJ2771QURzoXR6xBj\r\n+KaTozZ10bA5yqpedwpk89zbk9ul+MAfZ5EcGkhkTXXfWrPWbq2k5N0qPp+c\r\nc/np7AMXK2fuIGUoZ3XgfeGpGsXyP33jO07OFwv+7RrJzJ9YJCzn7l9gfqmq\r\n6nisV9MtQ/6fU5/LMagA078C8zta8EEbP+e21J40ocJAwVAa9XPPo21l393M\r\nnAN4aY0PjYyxpLJjk4+4BQlDc782cuHE/tbO0OOc/L0d80cf+8mjkNVSrbMW\r\nGE5dQVK86DKC8aPUCZBrXY/DOCqF7FBmjgE=\r\n=2c7X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/theme":"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/line-ripple_15.0.0-canary.79b1b612b.0_1681947549309_0.6962799008831073","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b489f4129873a8989a4b07ad7039a1d9a2f5a791","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6f50071e5.0.tgz","fileCount":35,"integrity":"sha512-oZP1GO+rhDQXe6VZhS1gjHD0UN7zPKdgs2bPLZzKNhPHfdO9irUQbQQOsCZ5VsCVmpRT5Q9beGpksqclUKJz4w==","signatures":[{"sig":"MEUCIQCuUvDcshOkH8XnhWZ0zPh7kYxZ2LtiPU0cqTwrcT4jogIgdMwuZC6onvXYK+52t+PjsUH+ouIb4m27pTIbgnrxSuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyNQ/9EMIJMYpSnshQ60UhQfSZ1MDr0oJhh3JNmJvGM4zDe+J09zE9\r\n3RuDMr5une20loKVMVIjNOWpmxQW6JTx2tLEV0zTYtEQAPfXb4FanM0cgiZp\r\nMjg4utZWYufOqsxs1ZfEb3HZZCnLuMBcuNulBlzQ5+4ly90CCeEWzapOY3yW\r\nbZhOEOY2EtW3O2tLY/EmxDQjODW762ki5+19pB5XjGAz2pBnbWGvYUqbWFfF\r\nMZMbq0Lb2IN+g5gEzmapqlx1QYPf2VF9QXDr1/ufGP4gtjYGbs8qtI4HXw13\r\nyB1dL+OyjU6+LeXx5gUlyGdV2gz/tUbOb2TiNvLqEPfdCGF+iECTZKLwwCAY\r\nxFhBaBPdmkXrwey0Fe7xPzO51qaQAA32eSYX53r2+2hmFE79EDbyBo5BxpKr\r\niM7xjysPR+k8zdPVM7diCB538z7k4IEZ+2yolINVecLmela6AMqGnQj3N+m4\r\no8/z5UijBM6q9Z0VZp2ang53hHTuXzBd/R4BiccRLK4UnhoxxUUTCU1fknQQ\r\n6AEr/oFo8VB1eVk/o7oYI/TCdCENTy6kMiPKwn2yp8p5kkmN6SbZW7YQwjZj\r\ntaF4nxk4WB+9BDVDBJM7EajxSi91uOO1bC1bT1hq6a595sgKe0GdTWIakiHS\r\nD/3waCVGdbQ6EJ+H9eA0VuA4yG1JZFoAbH4=\r\n=fhdf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/theme":"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/line-ripple_15.0.0-canary.6f50071e5.0_1682013603959_0.8865339790838183","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c18fbad62616c707657790e5a2ea5f658de85027","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ef754381c.0.tgz","fileCount":35,"integrity":"sha512-G99lHdQ65JR2ZQxg53N2p9nYbo+sALR+ZWlfl356tHgDT/TDOUDMVUKdTE9TuMEV2VjI3+ezlbe2z66NbybQ7Q==","signatures":[{"sig":"MEUCIQCpA+otOK0e0tkgFJ+LOkrjRZu/DunKea/I2E17reBTKAIgNocRsMl2KkFdOL7vjruJXv6xX2A8Khb8Gx5Y+sun8Zs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRut/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeJw/+JbSKqZJQv9l6GPV42Nl3X2SRY1I7gqKdGNX7CoJOPIzuCKU4\r\nA+o1JlblSF2O87+9/n5hYh6NNVd5GYE78nuLjhN6g42RUNryFDTA2Afjbayg\r\nwk1vie/IJpOk44gILJjzD2OGPnRaNvmon3xHqZLrQq7gvErxY9/7FIRbuG0m\r\n5g5aHAZr+7ZeMSQODS49hKcfgIDHzXKPvynyy2D4BEYCuC4s7hE4KOKOegmj\r\nijO+J0rsFDYvDJH2KkYtPTvF6SfXoafkAFaKCsIUmC+m6mEBciMyaMZSXkOz\r\n6Eaa9GPv2jDGeXT75LtT/7/KRyphFMELSr7k2h7bROI9MyIl0sPJ9FqeWelJ\r\nKsMiFdJ86W9vTvLBTMjiDqpXCGl9TYgZngz1Ajf1NDAIt7FMQx4cY1E6IlPu\r\nnwSvEOkRW73JP+mYGThJ72UihjkeDy8gteLKN/eaxYJ3No+Z7kwL5lAbS3a3\r\nKBqYI/8e4SMufgvu9inLyVIKJqYvbFvAS7pLoalGGZL9grksIY7W/8L8lqll\r\n99voBgRBNaihu3kNfVPF551CYfW+m7CAdKKuSThKr6vXDVbc1ALdU1S6cafC\r\nfrBcBUCTHvFzCtMQJBVpXj2fGwgO0Q0Bd/YZq50SRdg7sbUCxmh3WOW3pGlc\r\npXGALtPwgONtKnl2swOb0TBhAmSojN4iVyU=\r\n=hffh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ef754381c.0","@material/theme":"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/line-ripple_15.0.0-canary.ef754381c.0_1682369407494_0.3654396466177656","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/line-ripple","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0a181716190b773955429694a78794f5b8f7ae1b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.69ebf61ea.0.tgz","fileCount":35,"integrity":"sha512-zr1pZVWK0x3ySu2+9QVFIoiEJVz3PsGKa2iwNT5EOqUoGISjnwFGIOlc6mCL2HA+X1nYEW8s9j6ZSY15/dRQ7w==","signatures":[{"sig":"MEYCIQCdJfjzrb+DA6sKXMSysG1iX7fjxIgAaWurME/kbj2azgIhAJ1nPiXeFsdHRmuOzEIReizxsk7nFAjuOe1iR5bM5BUC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq7RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrr1w//cLihH0iTSNsm0kXm15g8puXq6oWeBqoKAhMGCwUCw4EXa342\r\nhc7B+paTaUa1Q14sNRWXl6U0Z0dZ0Og+falPmtZl1REcyvrdqHSRwre0lxOT\r\nUXT4NyF/5sQW6OzB306mVR5b0/cMFBs3eQQ5IoI+SJCeeXBBbn/fiFpS1bJ+\r\nNJeS0uOj38y4d4Z5Jtl7qJWAmHyOgcO37/2BIcP6P3WjoM5zMa1yEBcsWgWi\r\n0kVK2wxmhFbeNCy6Q4Ljd602ZpwdEggTZyeHoUHZVLd+OkYL+3yisqkoaQGs\r\n0EgcoQrSY8zKIrtMsK54jqA6WePZHHinOJnImYlnhAmNpSQkKbEZDuy5bxzv\r\ndEHTCKe8UWpRS9afcbgzYBd7f9ACbD01IA6FJ5n/fhYUeUvPdlvPc/0IY+hw\r\n9cluqcVNC2DVcn+aQi3TYOcrEnlwQPV0KAXfW8z5y3zdTH08uFMpYbhsuQAi\r\n0xJoNQm9to3LwZbC/lHii1xq+XyzmB2ivH6qFjR3WuKdlm3G5pG5W2GhGU8F\r\nClzUbm9euXLL1ReTs3nXxijJGCZUqlutxPhwUEVBtO7jyKyWWBVLRywbaV41\r\nZnqmQs544MxBc/bklYCt9Pp8F8vrok7skQUKLEj+Mtopdz43zfukKp0oTTiM\r\n6kNVcFX/CoNX1f7gjoyrFFEF7Xf9scTuNVg=\r\n=K+Bi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/theme":"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/line-ripple_15.0.0-canary.69ebf61ea.0_1682616017090_0.7164272258472411","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"35ab5f23d1cdcfeab71b9f39df3c81b322e5c370","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b90be86de.0.tgz","fileCount":35,"integrity":"sha512-eNf428Kc1ifQeAm+pyWD03YWVY3e8vtaeXLnPXKmq0Gwb8fUCyNixfsFPBBzTKGoSHTD1cJ5bUnflLdtXRs2Wg==","signatures":[{"sig":"MEUCIFtCeS1IsijIkvqqANf0IRUMZz1qSNyfR8sYm8FbvciUAiEA49pMkvJy5+1xWjBN5KvE8NgEGRStS2wJ3h4EojaMA3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGLgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzJw//e2pcS9uSxNT9LHcS2kv+9t0SEYlCMn99gMIrRLQuG1QBLqUz\r\nPwI6O8B396qXxyM7AEPOzx6z8XxA5dOuONWeQYG4ejtjwTjh3SF+/QpdrewP\r\nTn9XPO94ctBY5Dp0ikVLbTq8CIi/kNATFAVgFOw0KdZNaUt2oEMUnt8NnCiE\r\nhaacAm3jmuC8LWdGO7Ih2/PCgrwZVtLEprNUumo7i/SZLrMYFsushappM1Va\r\nnkcfu/imWphzfDuQETZbrKyGz04r1eCKFjWGGihcQFaSudFcdjiVzrU2JAUK\r\n6H88x+YfNfBN16cwZOZ99ro6mMNgThRAAK7wML4tRiE9Zo20gh7hLpsxsbNY\r\npvgVI0Q10xmf1yXEM3qJEHETUGhe0djNSw0XL4njzGmimfeVw9Y79Vkl6mUW\r\nPHpfJynh0SI1qNugt6G0XTDMeqb8Eai7+cuTEQP9RAQsE/cJ6ObBLR4e4fta\r\nZHw78/LG1Uhh4SFal6CwNkJo/vmXF0q4tGCv1sjD3+54xXqfps0dw+87a3i2\r\nIZKksbN8bBQ1Z0wqKOpuP99V3s9d6axvG1pZJjKZwmT7EcVKOFCfhtzGclsI\r\nAC0jNAf5jYpb82OkCVb7FRuKRKnnbku6LFZamhEib43AcvP4ifO/oY7mv1wn\r\n6Y0j0r3Ol5ScwpBRfShrG2LQwGEPJo8qnEg=\r\n=vdY4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b90be86de.0","@material/theme":"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/line-ripple_15.0.0-canary.b90be86de.0_1682727647972_0.6278609686395227","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/line-ripple","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e637bb5b8aa3b5cd946461bf9330c0bd793be1ae","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.51f9c0c28.0.tgz","fileCount":35,"integrity":"sha512-4LNf92KjQ+RnPv3qb9R4gwO0zWMbMfCYnuvA7mXysRChL8f/3uuvTLySRuobMeE8HndErAMylHdWdtgTQ+6GSw==","signatures":[{"sig":"MEUCIFt5S+E60p9ga7/gGizVG2giPJfvBdTeTroqr3GYpBi9AiEA1DDfYbOYGhSy7Jz6Juz5fYa+1y0OT1BDPF/i4UmyIZc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGUrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphPQ/+PTwv39UyNIQieaPf2xF78GjzbBSVnqxcZ3G3TKiNgJ7kmA0z\r\ngDEFhKMFGAWG70xgSCu5ugLiAcebzSswlm2IuVg10LKmHVGCARAQyZs/1btx\r\nM5ytpN6vkCcIwhYO0bBqpCXbUP5uYjhUO2BB3uGWbGooj9mUPCHtIalLH9zF\r\n0dkrT8geU9ACESM1QGqSX+6IvRZaovX6BfWY43hqVKZILvXlUodPUxDFT6/s\r\npSSEvmKwMKCx9tku4IC/wVOiuQ/sS55dWUe87lfo9STdlFo3vJVRARI0zCWb\r\nRmqv67KyKJQcdLbVBFo29HZVL+6VlW9zkMG9Mazp93yAwbyaIf6LfkVCwP9e\r\n1xyPlNxxTCPzuPa6GU64jFI5cjJXQ5OI88jAWVflsLdhurxHKyObaB+QKN4W\r\nO09GARN1J9mI4meyyp1m5Lsvgw0ZreL146cGfAYt6tgnBUQeQtEaF7ZXzNUN\r\nwA83GtpQWG/jExiL/WQlO5SnVHvbqxZp4jH4Gk/DPtxzKHY1fr35xYSG7orO\r\nL9vboHk2veopoOQ23H9RembYkU4ogJ8gH1QAthUn2un2lO8cMV+/SNnsi+Jo\r\nOvj0J8r8/4WxVZMw+MLxvqr9Pk7NAwO4NtOu5v5rVQVAdgya3x6Mz6ruXzRS\r\nzAQYxVLkh+sUG8Qy00s0TXvLHRDS8GChMoc=\r\n=FedG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/theme":"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/line-ripple_15.0.0-canary.51f9c0c28.0_1682728234971_0.0489545659568813","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6cb6663613a07b568e213437dbd2abfad9c19e91","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4e840d685.0.tgz","fileCount":35,"integrity":"sha512-P2He/l0SGwGYusH/wQ5pVqx0D6XSE+ckMI4dVodRqWqlkTA/4BI0/nZabYDui6na+S9p8c4oXjvcZ5pjqRDrUQ==","signatures":[{"sig":"MEQCIHK6cwlZ8Q35pEY89dj3wNC6/4J6fUSAJ760FGH2fJqaAiBj6Orm7qLSStvw9L6E6IaYlcpugIaMOjbBol8oKNRFdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4e840d685.0","@material/theme":"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/line-ripple_15.0.0-canary.4e840d685.0_1683041554659_0.15595791857210428","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"2c1d60652aee0d0e365b6484ac1f8c7cb4797017","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.10b8563e4.0.tgz","fileCount":35,"integrity":"sha512-jBDaNcOaCvCSca6twJs/LxjCVWAnIyyKZd8AydP+P6UB18jgZ61HbNhpRVKZoJ+aU8mWBuzU9ZOwo1GJO3BHuA==","signatures":[{"sig":"MEUCIQC847WXCHXKsjdrxKYr7VCR+EH/xOOi3Fo04wvdsvhk2AIgTvdzCiLKHRIzSm8+1U4o5MT+2bWcq/vNF/LsfnIKMjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUZ+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobrhAAgRKDDI4TlDYLMmydBIBTerzAVcqrq/sVyqFqqEBhJpeBnEpI\r\nriVTh0p80ruinuBYNemKhr/NynJdSlEN2eYnG9GJxIdQpOjeiejunwWKsqPr\r\nOHIBSWVVzF5qIfEbsvGa+mZ8C+mLaJR+r8xOQx0H77+Z9yopwqoh+fz2vuyg\r\n6Kq9va0gMFiRXAY7U+xmrOujWdk+MCyt9WaGdzXonik8VYfff7gamE4f2O/2\r\n/40hwT5J9hVKsLDrrSB9ncDo5j6a3PgLOtEJr17RnkKdvqaOzJwZXL04PQOd\r\nGobdp0dN+CaUGodpJXoUxWosytnP/XfcizeAf4Qcaj7aRy5RZ04MkcK22Qu7\r\nEkWRaZvkMiS1h04cyCCcCbLpBa59OHKI40ZAOtCQwUyjzJvVKat2jkuTbjgE\r\nA5Qsl4DvrA1tBch3Me+YmxQbAF3igoe6/+78F5rmsMVwhsQ8qBk90mztOiXc\r\nPDKUl8dVtLrpACSsH/g574V8bBkK/IdJU3XMRNJr8/gQodIPVRPcEggvVuuN\r\nBUgZAWQA82N+CejP2GhnSkOkKHQm5PIX2wSGeeJJGtzrKfrZhBHkSiKKrExn\r\nWI40Qxj2CuQlcCC2eHUltUOHoO0hZmnNwp2fseTRi4TUSbcvWXyIr/lcW+l+\r\nTNFZvFbylWc5TA8YaVeavnA709VFrkTQlUc=\r\n=vO5n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/theme":"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/line-ripple_15.0.0-canary.10b8563e4.0_1683070864197_0.8555689600621008","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bbb10d68c5fffe9b492c085455d5c7e851a3cf67","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.736b7fda4.0.tgz","fileCount":35,"integrity":"sha512-/TgHffWZ3CkVtM4uP/4UskPqcj/rcujhXbOMBuY71cGBJQ4gP5fupg37PO3ajLTcZKquF8HXj5wzzXgiKV/n+A==","signatures":[{"sig":"MEYCIQCeWSvOQQS+hMp3jKOreEmxlU058fqftJaxutgUfqVHpAIhAPHGRtB3+v0EBDITYK/a+PEc9YHMGwNWnVlZStjUY9uP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnjwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov+xAAm6fdQ4/zwzcISddaNa7HvmEB2u6MI1QJeZFOw0i9gM4QVQ3B\r\n5zqlMqIHQ5+fF8sPBbRZE2eboCqfenwdesAd6jiZiMayC8mwUlqLJPuzZ1vA\r\nKIKgdXW1tTyo6BT+ri/M8KjwQJvE0djjcQr8qG3/F+hgLODSXh2TjpbntUer\r\npl36c5tlqMJ7GV+XvbUcdKL+ZEo+EkXNwzHeQw+yY63QMU4DgtoyiRU86zcv\r\n4nlmzRyAbT/1W8L2QpMeLPOwlaswyxY5yO3IxaxkGBI62cVkwy8+JaLcFoPT\r\n0ZVlOMJ/dpkFT+8AoBQL5fZssx+tUc1g5hjYTXcrdJ6YNlwjHh+WpWBScwe7\r\nv2HzdhNFNnS0bARQTZEGUFXgTvMdcnPze9cd3itPCHODxIs/m08a3yuMEdQv\r\ndAD3JIt13XOTQ66x9hUbOMU6+aUObXDVXhxqJcTX08+uZzuzyyTQ4AGcdBo3\r\nZLTv+qNVqrgwcd31MLWwqpjTIApcx8M6ym37/pJHn1vd+2wXWTSyRy9f4Tyb\r\n32fPc5WKWd7oa4zcof6Cd+jVq4UcUCQ4J9knsLcuNa+uN7oV5Su0FGx8EAEe\r\n1jbtFyPqt7uyg/+MSNahhiZgHyG2f/NVNBY3y/jYmVcI9erRj1xEZ60qHGPD\r\nVUQG45Q9wcBwf4lG307d7xOTfwbmIv++8rs=\r\n=mkJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/theme":"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/line-ripple_15.0.0-canary.736b7fda4.0_1683126512602_0.42773716976168363","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c88ae1fb1340411ae21456a7f0a75a7bf6eae7c9","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0e533c5a1.0.tgz","fileCount":35,"integrity":"sha512-KjHXrg/piHDsizIRIs8/RuD/pNMSW+crQgLljMW++Bj7Uk6gNfp1l9Lu7iCnDo/TpcPNkupkAOJfE3qb4n532g==","signatures":[{"sig":"MEQCIHLME27tLf0vxYICr8mTe1790Ap6O5XwSHVwB7MqEd4xAiAOKf4ho7g224kHVw4VXGfCq5Dqd+NwwLSeN3eWLNTr/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/theme":"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/line-ripple_15.0.0-canary.0e533c5a1.0_1683305721922_0.8173333538918546","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"96ae233bf150903818ee25a1f4936bf9041d2a46","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5f01c15a2.0.tgz","fileCount":35,"integrity":"sha512-BIM8NQA4pc3yU4qAIPdZ3WQMDCQ/CIufoiSdTIBBrVC79dtKdl+E0g7dM+ywlTO3Bg8dRb69SZRn93eVwqT8sg==","signatures":[{"sig":"MEUCIQD75b5S8hjmJoxo2EhjVPG7GoP4q6GPZccXYtQSJ5qTRwIgB3ouTC27pPYt8PRqwIsaNgnT7JQ/Dqy6Ww6FqHIAjEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/theme":"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/line-ripple_15.0.0-canary.5f01c15a2.0_1683307528237_0.03810258533485111","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ebb07561b018cc7dc366a618fab363f0ee20bf92","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3b5b55e31.0.tgz","fileCount":35,"integrity":"sha512-p92jxhnw7bw9Sxx7P4uTy/mTxQ3+q7uZlRoRy+JtN6y9yEmZ2eqexEjf7IDQEvotHsLam7PKstg2h0X9CtujmA==","signatures":[{"sig":"MEYCIQCAZL5SKheqK5WWaGAVxfDrly8v26g8srequcreEmySPgIhAPXjziGLCGde3+JU3oBuk8FCQBjecdhKiDSo2S8GR5dS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/theme":"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/line-ripple_15.0.0-canary.3b5b55e31.0_1683311884035_0.5276361699567986","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"367a5cb1243327e1b6ff460574432507ac3d69a5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d0788120f.0.tgz","fileCount":35,"integrity":"sha512-nvS5WO6ZfqXCzZX2sGkX8jcmdWtlyx1rSbeWiLLu2S0ry5N/fLogC7T2OdE8C7URVtaK/svqnMVhQdF1Umhegw==","signatures":[{"sig":"MEQCIFxSt6fjmcK6Ke9TvxjEpI0mzn29FvshSJ7wsc68GO28AiB19Q2Z03y6HEsLMozcsNOidyHjdshgiiniz7Zy/FcCcA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d0788120f.0","@material/theme":"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/line-ripple_15.0.0-canary.d0788120f.0_1683620532142_0.6744020332996099","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"866e014f9225540d03b97161c39105b25d36aae6","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f52358dd0.0.tgz","fileCount":35,"integrity":"sha512-7zkeMT89QImoeTTJzkEkE1F1wVWiGjeEaV+snqfs47wZ2tpnBru5Gl/OffOayYXa/rXuUdcuwy19kZejVRcirg==","signatures":[{"sig":"MEQCIH6cdviParwHRjQ4YqS7lYXlTlT/uuXY1LHMWSxPBsPjAiBS73S30PNgUcWEO7vlVf7bsd2NmrEobOzOAGYfq9nWpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/theme":"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/line-ripple_15.0.0-canary.f52358dd0.0_1683901771279_0.793469794539456","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3c3fbaa3.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d3c3fbaa3.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@15.0.0-canary.d3c3fbaa3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e4ba6bcd79334dc4a016e73019bbaa8e491073d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d3c3fbaa3.0.tgz","fileCount":35,"integrity":"sha512-SbtmXwopTKKt8hWeNp1yl7i5tSAT/s5thHyjena3L3KPyXcwT7ssq7Rtytwx44lBbVL6xnKhrm9mWLwRgopLgg==","signatures":[{"sig":"MEQCIACDP1JJZc/+Av681KkIb9o7Hq6gcSV/TD+uMtqgWhRrAiA5FY07NDEvZsaCNnGSIJ+8s9RFJFKA5IPLS4eCErWxfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\n","gitHead":"3b7f31c254605439f8fef56301c46f7bcbf3a9fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d3c3fbaa3.0","@material/theme":"15.0.0-canary.d3c3fbaa3.0","@material/animation":"15.0.0-canary.d3c3fbaa3.0","@material/feature-targeting":"15.0.0-canary.d3c3fbaa3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/line-ripple_15.0.0-canary.d3c3fbaa3.0_1683914372765_0.5523762890239503","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5d71914546a56f9cc5bb77b1de8654edae9a7b9a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.576d3d2c8.0.tgz","fileCount":35,"integrity":"sha512-NnHk935Ae39eH4Ac7aR0GKIUd3/7WkV5VRW/SXdwTaEie0hLK9+AGXkhJH0U6pmmWmM7moJNRFXZMSv5oavkBw==","signatures":[{"sig":"MEYCIQDf+j0apa5MZW5XJ18QoxUID6+9YuP9ijJ3jdndTGS+4QIhANjUVMMgduNZioAbp816mwWxvCOED5NQDdg1VECqu57B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/theme":"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/line-ripple_15.0.0-canary.576d3d2c8.0_1684202350550_0.11841713656640485","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/line-ripple","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c4bc5afb9aa2f65424b5455678ad63f0db1d9ac2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.19bb36a46.0.tgz","fileCount":35,"integrity":"sha512-/YPya0gteU4GnbUmI5ozJUSMKHPOfZRAHZfelRbcCDyQhdfyxn3de6qOt7UzDpqtCBRY15GxjzROaJCWG6OKEg==","signatures":[{"sig":"MEUCIFc9woa/CB4OB1hhgBMZ06ass7+PIBEmB8syIPc8t6+0AiEAkN0wyl7vm/78WvkENrAHAA6Fv/4mqOdY18oXlWtgdFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/theme":"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/line-ripple_15.0.0-canary.19bb36a46.0_1684266790542_0.32387252343554906","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b5677b792fb9f0a21ee0a7654354c5a702cab8b5","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":35,"integrity":"sha512-Aw1f/+W5cKmV9dGm6v6BD3wd/NYQ02k6Z7OFSPqKZdWk916DqxCiv0Bez4HRsb381YmfWs+nLH6qB7Xx+6M/VA==","signatures":[{"sig":"MEUCIEd86E9dELYemInc4TlOO5x+ILssQ2BASdwKSU/gIP0IAiEAzethfUha6VPNLHNLoz/S0VQOoufdEjkKiKh4LMfyMso=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"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/line-ripple_15.0.0-canary.aa5ac7fe5.0_1684776273365_0.42114430902169575","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/line-ripple","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"563b789ed5932e615df40029bc8d063f84489241","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.90291f2e2.0.tgz","fileCount":35,"integrity":"sha512-cWpS7l/pFg6cUzL7Lx3ywF6RYF6ESYPkiGlDo9kFERv8lVA2/3m4NF4d9b4kC9h9OWx1b1CaUFRFGD07okgI+g==","signatures":[{"sig":"MEUCICvGDfyhlc9jnBt7XoO77VC1ZkXsa1DX98O/txNQnU6XAiEArONiwYq+PDehBBRCTm3FOmJmH8IvmNFi4REk1TWIFuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/theme":"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/line-ripple_15.0.0-canary.90291f2e2.0_1684863707927_0.20256337579927686","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/line-ripple","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d5de6a19a6dc2676802549ce20e680b6338c141f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.446734f27.0.tgz","fileCount":35,"integrity":"sha512-45pS6kmPkVS7DIM97Bc1q/iVxXW1fcps3gcOngHP30HyaWxMVBPeGg8rPYayPyefCzEkBSIASsjWyZgMj2143g==","signatures":[{"sig":"MEYCIQCepmACmZTTcIJtSPGo1dy3nPNJIHAj6h+9P856hFHWLQIhAOyOPMNDdlxfv8PAE52vVAW6urOo5TyNIfap6YNsftOP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.446734f27.0","@material/theme":"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/line-ripple_15.0.0-canary.446734f27.0_1685483240102_0.47745566940465234","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/line-ripple","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"d528c14655c98e2b1bdeac6882dc12ea47644257","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.19de312d8.0.tgz","fileCount":35,"integrity":"sha512-ECTaDWeo8beDJ0rP5f15v17w0PgeQTF3rZzfyS74c+eUyDKJH9Ia8BU7rTR1PFcpAAwIOjFDQEMqg1KnNl/wEw==","signatures":[{"sig":"MEYCIQCK2O79qJ6iTGlLaLb/NS/RRFqeuIXIAU0e3RPQfHPfJgIhAJJ/WxwVGEEHNQJAHquSQrHr0CdvOJq1cbwkw4H+cQHp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.19de312d8.0","@material/theme":"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/line-ripple_15.0.0-canary.19de312d8.0_1686071831179_0.39822223709060833","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3b79aed70716bf0c9825c8b2aebe0be32cf7eae7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6081d829b.0.tgz","fileCount":35,"integrity":"sha512-7KKDxXHoTs/pH2QQ8b+K35wQVVyNsKQglcaOkSr4WEKOzqQ+iKdP1thlvKbo/b6XDh3vWu6O5gSr4pqS5PVn2w==","signatures":[{"sig":"MEUCIH/cD9cgJeUyksbP1tzXeb1LXB5XMxoFlDeoFwil0+tFAiEAxgdTiVyM7+YIn/MWNhg4AaxXo7n4EuvoCpk0hWnyM0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6081d829b.0","@material/theme":"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/line-ripple_15.0.0-canary.6081d829b.0_1686100390884_0.9401585497938258","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1dfdc26935ebc48677d8554aa83b699019cb195b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b26c34a68.0.tgz","fileCount":35,"integrity":"sha512-R+p1VM9NEsVNm5BMkmduyB/YWZtDapg0rrYSbt3Y/oTYLYZgVS2QOD+6ZysYVZXLveJFx5Mmt3pkEBnfDHjg4g==","signatures":[{"sig":"MEUCIQDvf2edpnbHKWW1O+tCho62m7pgCK6TBqVR36c9VzNGEgIgIwFvk3ueiEQku2DfFQP8PZayE1tYqmTFbuwqyOSLUXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/theme":"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/line-ripple_15.0.0-canary.b26c34a68.0_1686168975635_0.7579358415299717","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"22f31a8175136007b43062a16396cf1b381b6d42","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4fe911371.0.tgz","fileCount":35,"integrity":"sha512-oeLtDAJM4T0R/IKdjr+CNgwPvR+h2/9+7vPgafUCBb0RvQZeRkfIPlGCr92tDGqbIewd6wn5P/jP3bN5CO/aBQ==","signatures":[{"sig":"MEQCICKbfaOpVGKKg59LERf2M19zVVcNHJ3iPkhF/G9PZGFeAiAcWDh6APiSKk2rlKBzi0OueNUyiqQImY2gcclTbAStnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4fe911371.0","@material/theme":"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/line-ripple_15.0.0-canary.4fe911371.0_1686179101984_0.5391194122367977","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b69e1c807b02b7f3506b93f0312e30ef64e27e22","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a9ff9866f.0.tgz","fileCount":35,"integrity":"sha512-bBi40LqNPhbYKo+A/OZeVzyAMaOEEEtyfUcodl4DEOPdAtW0n/LWohQlFOip0jLF6opmK39kJmNOq4ehK2LEpg==","signatures":[{"sig":"MEYCIQCq2shGdNfVAK6czYyUDOme9nICgb1jIyiLWEz9nipxfAIhAN0w+yUfmVPUbEZ6nzXu884l5YQ/oaoY58q9BQZ99a4Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/theme":"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/line-ripple_15.0.0-canary.a9ff9866f.0_1686656243447_0.9505985689477663","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e0c9b1601352d690a5cf54043c23c95bf6f49059","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b994146f6.0.tgz","fileCount":35,"integrity":"sha512-evjZxCu4iodiKtW8N0xjY8ACRXm3sY+4rAmq3vV5BmHWAJ3BobjbFYslDMZQ+4mu3HmwMatbJehKxHegahitNg==","signatures":[{"sig":"MEUCIQDTZ/px3Wzgq6SF5vGh2PvYVtGK+Rlgm2mlwOItEaCEfQIgBFXVHDrhDndyiCW1VWWw2YLQOEfEReQWwLXcXbEPa0M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b994146f6.0","@material/theme":"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/line-ripple_15.0.0-canary.b994146f6.0_1686776560601_0.7675222401228134","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"26faf8cd609871d65510764c070ee4b68a605377","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":35,"integrity":"sha512-ay9Ss39q5JalsojxjGXj9OBY70yMqq4ZLOMl2ZGnbMVnHtTzVuIhBIIM/Nn19NjbKlfPYRRTZ/w4810X08HpjA==","signatures":[{"sig":"MEUCIGp62MS3Yd/0Q81amoyhUTbBPimj8ALQkyjE/vOSYXxZAiEA7KzmQyN1pKtGvuSOeCWawjyXQpvUO3MdaBCosEwOSys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/theme":"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/line-ripple_15.0.0-canary.1fb4b1a06.0_1687892169831_0.49484418483816506","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"858c2d461d5362ef65ae0fefcb5a34bd573a8d65","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c64a2776e.0.tgz","fileCount":35,"integrity":"sha512-Y3uExAtPGa/5Hndxv8EWJycoV1f0xW032Kpvaxd5pWqXrWUymsyr1/5oPnVa1sPnXDnCcnZXLXJpuK7BQIAf/w==","signatures":[{"sig":"MEYCIQD9OYmrRH1kCYjPwx0Vnj0b7dp8kNUqsg6udIq3pZVWCgIhAIJjGbXNl2kOHZhIqMBEdU70vGY4Fq8gOdLJpyVs4xgs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/theme":"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/line-ripple_15.0.0-canary.c64a2776e.0_1687896933364_0.3699740476796378","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c3132758fb7be100ed8a6acdce28543bf98273fd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":35,"integrity":"sha512-zpLlIci8SBAOzzdSix9Le/B9KRzfkUV3Te9aY28s0cBFqms44dTfbDNm7ibWFzeRXFMX1RA89mUAyxuLbiAOmA==","signatures":[{"sig":"MEUCID4FeaCyVdKC3iw1HcJOXoEi81sGdGVStg3IdvpMTwvxAiEAmSH/epeY3xyhK+lR9ym+c8bZXyqffKGzXJV/8P4hhp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/theme":"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/line-ripple_15.0.0-canary.b05d9eb7c.0_1688055769050_0.5751885548158076","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"69e0606bd205a4453edd456a33842dd5d05db23a","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2a9697dc5.0.tgz","fileCount":35,"integrity":"sha512-W4aHy/Doz7LpG5IYB+Ko3qAnSg7umaKdRnGZnxpfikwWu4L1npIL5LHHeyzTzEyFn8QvSAXyjTBci5dPtHpmYg==","signatures":[{"sig":"MEUCIQCWRnEw6dGxKbwGizo24rJP5s5D+hdSQSi7JfvQK7DTAwIgGWIPl3spKc/F9Tt00gryM/HnMeJZRMMJM8px/Jaot2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/theme":"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/line-ripple_15.0.0-canary.2a9697dc5.0_1688163183782_0.17545206148886283","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"00223573561fe75a6109027e4bd4a88d4affa96e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0c52adeab.0.tgz","fileCount":35,"integrity":"sha512-2fvtgqcoDcFn3rUR8/+/38E/XJ9uAlPGgnmn2wHWSY9sFXsks5yGIXuoX13ZzWUJpnCDhdr/VvwYB10yY2wQQA==","signatures":[{"sig":"MEQCIG7OSoFyFwWx1nFW8nrhc4RZZSQZ3DuE4+Mrdsa8PQZTAiBzKKAwrkj/FDImZ2F0DVpTYekWhdb5rzXeDV7AsSCxQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/theme":"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/line-ripple_15.0.0-canary.0c52adeab.0_1688574289038_0.6065033663939321","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/line-ripple","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1b7f881a1d04f88c3d7e098a8a0c496d25af036b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.83355c322.0.tgz","fileCount":35,"integrity":"sha512-gUV2I6H3DpdEI9h/o4v5UfDqJc8ms5c+N74E0aic16iHM1CLQazJYesg71ZbhJPrBQ5fW4Us3IPVItnePWsMGA==","signatures":[{"sig":"MEQCID5BWiFV98bmB/D3ZuaAaPQXTprKgq4dDi3wbdLyUDfEAiBDf/nNZZZb+XiVBOwHTCJnIN3AAnxWSDQlhbNZoAXf4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.83355c322.0","@material/theme":"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/line-ripple_15.0.0-canary.83355c322.0_1689001455666_0.8512948631005954","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0de6f3f4bcca06056ab0dec23a84a7a99fb0ecc4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":35,"integrity":"sha512-8S30WXEuUdgDdBulzUDlPXD6qMzwCX9SxYb5mGDYLwl199cpSGdXHtGgEcCjokvnpLhdZhcT1Dsxeo1g2Evh5Q==","signatures":[{"sig":"MEQCICl6vRJXhn3DfC4Hv9sj4yRVtLnbWSXJAjQ3OwPqvbvzAiA87Co2nn/T2iuB8aXb+U6M+9TYbPvvS83qfSDlP68NXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"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/line-ripple_15.0.0-canary.bc9ae6c9c.0_1691097547452_0.612265158614204","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/line-ripple","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4c9b27be1a7d2e740ae89df23e7380ac4b80dc29","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.3c44cd956.0.tgz","fileCount":35,"integrity":"sha512-VRTgn8UX7diYt/KJi/7UuzttkhMTlWWCb7+eaIPI0gPYTlRQjHAlntRjNr0+apsJLwoSyIZHEIRDG3ylYQ1IHA==","signatures":[{"sig":"MEUCIQCgsBaKpuHRZsX91rsU2pYVFHFc7dwAXOJDfXel7UnA9wIgBaYq1Wfw99B4AwHo6zJu6DVhstVDd891i4zoQNUv6yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/theme":"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/line-ripple_15.0.0-canary.3c44cd956.0_1691430373697_0.7713155426131488","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/line-ripple","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"99c130ca5eacb80d158effa67d3b8148916af1e7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.02702296e.0.tgz","fileCount":35,"integrity":"sha512-Aqg6Olli3bBa/Qq+Qo4XmzL2SVflzT0mqdr7hTWqBcSRa3aKhrIVUH5TGs0qZQbB8eEeqjdj+sBw7+YuI/ufTA==","signatures":[{"sig":"MEUCIDTd/9l80cYvX0qdNAg8bNcS9serc9nGo3ORNiA48XzhAiEAlnGWULEEyaMjPVzQRwXXcrazfvukZbgnl6A1T+iSc5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.02702296e.0","@material/theme":"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/line-ripple_15.0.0-canary.02702296e.0_1692965039658_0.03494409440319224","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/line-ripple","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"fede812f75922fa9f8a00b575386aafc5a24328d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.872b65832.0.tgz","fileCount":35,"integrity":"sha512-nX4R37SnjSykHCBZh2yEa5osq5eZv5NlWkA6UZnO5uplpXMUpSY0SnNSWbAKYLNgsTWi6kTYlkKy79hKMpR6eg==","signatures":[{"sig":"MEQCIE2fbClzZFnUZELdem/VcGJgkiZaco46TGkSCI0yPkSxAiBkbUCYj9ZCI4jVOED5aNdGpLIWfOX38sLj//l54w65Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.872b65832.0","@material/theme":"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/line-ripple_15.0.0-canary.872b65832.0_1693397521409_0.8448705397899166","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/line-ripple","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ec829afbd94be09377bff22e499dbe7399502f04","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.89b2e4122.0.tgz","fileCount":35,"integrity":"sha512-VljkW7tC1CgAUdqMt0Dotte95yUmwuAl0996s30jYj7IIjwcrl4yc9v6nXYyKdEX6hs0PrJW7p5AQR/XVWMOdA==","signatures":[{"sig":"MEQCIGo0v0dOzHQik3vq5+Nlt0kWLfPNlUp1l15rG3BQvV+cAiB54iYLalzJfkMpGleVljnsUULXV/3Eo7T7DhCSgGi+qQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/theme":"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/line-ripple_15.0.0-canary.89b2e4122.0_1693497944270_0.22611397025289226","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"0a2bc9ea8d8951b2d450e5b7e4679c8dab15ee2b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7a3942e7a.0.tgz","fileCount":35,"integrity":"sha512-f+mNIf34/BbJ1rEI0c/RI2TDYhRmIXbNuR3kq4GW0r8NE8mIBezDMJxcIDHe/msswFSSRLEXtTkSNiXA5UKFSg==","signatures":[{"sig":"MEYCIQCeprQGYWzToYOr0ZwySDrf9PuKNsA+l/1kQGi4BihIXAIhAIS9e4Hg3dpofmTBBBRm4mAoOT1mjpc0ZaGGKFXaQy6w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/theme":"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/line-ripple_15.0.0-canary.7a3942e7a.0_1693507104260_0.447842137005658","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/line-ripple","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1c301ee1313785ca9b0cfb4c4283d4c42367456e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.54feb3020.0.tgz","fileCount":35,"integrity":"sha512-PvafJwSygzsAxZT+roqOVDTFTZVQItNGXznp4iKzyD1uXwVN6P5DO9fNKxt+IcktrGhbW/laJvG4ffoDlvC5Yg==","signatures":[{"sig":"MEUCICjPDjfi+vjF+0mJ05wSedKMAkLO4LnWBacs8Yea5xW0AiEA/RM/9nHYEKtfEqHUc6ebzvocMwitfzP0I05GO8+NrJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.54feb3020.0","@material/theme":"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/line-ripple_15.0.0-canary.54feb3020.0_1694466236639_0.018460791203599225","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"1cd7114a98f672b4c43eb3381427708c5ddd193d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":35,"integrity":"sha512-ZGC/HaUelqhgj0aHVo49zzT49YqdzUIKCrG4gdsayeCQRH69f9gcSCZRHRGbgS7mv/tOfVVd86zS3gaD1pJkag==","signatures":[{"sig":"MEYCIQC/zrNF6Q0cvAC6I678qAfAF6/i873wSTCnU2Q4nqSXDwIhALXhDPaWDcJ08cgMg88Tu4bCGb5a1mqfVithEIc2XhU+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/theme":"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/line-ripple_15.0.0-canary.6cda3ce8d.0_1694483041377_0.4550099256214373","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/line-ripple","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"50f5907a317ae80c7e4f1d84d29c1f37fdd31159","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.205b20b36.0.tgz","fileCount":35,"integrity":"sha512-INluxWP23cXp/eSnTrP0LCt3JeTbjwQ9UeMCLq/c7yiRQVgm+l0N9iqIKrQuw45U9S//dfjXfvdenpcb0tJcgQ==","signatures":[{"sig":"MEQCIAkOxwPUYB+m2X2ZEN7WBxnGRI57G6BMRwBca9Y0gLcDAiA/0yJViOopUMJxHDBOxqKRfEPQ2+L2pjR9Hv6wxA5NNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.205b20b36.0","@material/theme":"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/line-ripple_15.0.0-canary.205b20b36.0_1694625315655_0.8556866395261971","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/line-ripple","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"47fc8227f749ef641fbc8a2c185c4d53474043b4","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.22bf82024.0.tgz","fileCount":35,"integrity":"sha512-pk/eHsoDh3TRJi9MQjbbVoa5Rx7a2dqJvCJ8Si/M6cmEw6spbnFCTVSz7MEPWUz4FUn3Qtn2YCFeVe65lBMNNw==","signatures":[{"sig":"MEUCIHwLSxQvLCD4fJ5+r5vAQuOojIMkf8C6QaXc0bGwW6FCAiEA08InMx/3K0gChA4Ce7u4LDIaqEy+nSzv+Osxa7VcF6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479137},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(evtType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(evtType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(evt: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.22bf82024.0","@material/theme":"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/line-ripple_15.0.0-canary.22bf82024.0_1695028258416_0.09923420995889409","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b38d7b59507067622825f31e7663301cd18ba240","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a246a4439.0.tgz","fileCount":35,"integrity":"sha512-20WmwRrejmtOdI37+959UqEVIjbMtAXlkDOkfCIA3OUhp+oZSjVkCqKxI16jxxVlnzJ353fy8xeSKzOHe4sExQ==","signatures":[{"sig":"MEQCICc5X+yguYSlsIANJAohDVc/qvzZ+VWNFaM5VT01xWaMAiBstGx5kY1aB0TBKRc45Fwah70mDaWZak85I7qk2v/gJQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a246a4439.0","@material/theme":"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/line-ripple_15.0.0-canary.a246a4439.0_1695059081327_0.8695653572622264","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"844c9ab0c95a5b21b993212da4e68e5fe8627cb3","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d153db62b.0.tgz","fileCount":35,"integrity":"sha512-PIS+L9o6rjeZtIwnlfcSm6j2bM6tXyrCknFYFxdng2ZBwj7xhBZWTgckYn22hQsmGlcidBuL5WXQR4X5S6ZfWQ==","signatures":[{"sig":"MEUCIQCByVqGDtoAhGVWVPzykKj5qb0Pn5ZZ9bx68agxZurdGwIgPXze8ojcrcVwfVHZ1/EfUHeGDrhE0hFG0K30qg8zDTc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d153db62b.0","@material/theme":"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/line-ripple_15.0.0-canary.d153db62b.0_1695150832716_0.10949937351738526","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3990e69e6f023eb104dc1be60bd3bdbb43dbc24b","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2528c1c3b.0.tgz","fileCount":35,"integrity":"sha512-7Vw5tNuhL7B2mKC0AaVx19/JkMnKfpw1Ag/XQfCJOqP3YJ9W5MZ4kLxQXVicrIbIAa6w6YJHn3omlaGdNDRh2w==","signatures":[{"sig":"MEUCID1axIMwT2ua2HCfzgjloJcjhOy1pnZsHCp5CAUSI8FdAiEA5nayMhNthuZ8V1gdCk7C/3YwZGSaBWbP4kbGoX4sjc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/theme":"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/line-ripple_15.0.0-canary.2528c1c3b.0_1695233118035_0.0930220802650441","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/line-ripple","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"dad90e721baf24fd9e12a2ee1617bb0b9a36e181","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.1728a6dcf.0.tgz","fileCount":35,"integrity":"sha512-2bN2g/CnrCp2D6pdDckyldjrYS/d667HmKD+w8bHQUfmaP1X8wqHqwvWwRFD+1gGY4QG15Iw03ZC4eUNrcMEJA==","signatures":[{"sig":"MEUCIDJNFQHcoIYU47XioPxVMbIbjs7BfUlRHovT6jKw0CMsAiEAipSSKKtXykVo3OIzvI+LZRn/EfeqE7BiHJLvFae/Qac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/theme":"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/line-ripple_15.0.0-canary.1728a6dcf.0_1695691320106_0.39073242495463467","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/line-ripple","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"b81a15eb1c19c980bcb45b5cd6b7b3eefdadd4f7","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.ebb636f3d.0.tgz","fileCount":35,"integrity":"sha512-W3K7m5FRcZkkCT79tlBOGaGmSLvbfmZGo8G6YxkP8F4yubasdzVT0QhoDK0reYwzeu/LipEI8FBKsXJyaXnkbA==","signatures":[{"sig":"MEUCIQD0qDNBKUXbyTINCjH/0PS8C2DgJDNcF1aTsj28SJs8UgIgMmSdzOTbu91fgWIbJrZhWdFPHrdTrqjrw7BRp0D3hhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/theme":"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/line-ripple_15.0.0-canary.ebb636f3d.0_1696016611313_0.5730267969981224","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ca5fa1a6821064e4d6201a66fae602f9a8f7e094","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":35,"integrity":"sha512-dxnwkuQv8u5JQprPv8wGjz4liwI+PNEKHxvC8CEiBxpBSGSFhC7YGY8B9aAoG0pul0ssvlTXMXS+cflE9FJOJA==","signatures":[{"sig":"MEYCIQDOut4J7xt7EYgTo1XsyvrDewkP/ZEGDCgdOkZPh9G5hgIhALmgFHT2SdspMQK52NSoVrPb6XuaSUnp+7r4kjVS2mIR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/theme":"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/line-ripple_15.0.0-canary.c0d21ecc9.0_1696880151033_0.2780358845010462","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/line-ripple","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"6f8a1170e6d78d5746d44a22b46b1c668639c590","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.127a44b28.0.tgz","fileCount":35,"integrity":"sha512-mGS8kIM9DRbnUoCUzTgXXcW4o28wZPpQf6ZAwoJ9M2M/o8M0k9/96mlKOhBveHz5VZwcslMxKrEPXJ7rYeCPPA==","signatures":[{"sig":"MEUCIEpwFVnMurplWGr31gyt4+JmA4Ke3MofhfGh7fGCba3YAiEAn7Lblfq2bdfO9nwxUKJnvENcRiYtRcrADCkDJu9fjFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.127a44b28.0","@material/theme":"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/line-ripple_15.0.0-canary.127a44b28.0_1697140731760_0.4763061604800589","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/line-ripple","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ac72e26487dcc59caf06aeea862df9dc9647ac07","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.0ad128337.0.tgz","fileCount":35,"integrity":"sha512-QZR2NGbQslyaZks1asDuq4oKiiEPGLEmEgv03HwiZVmcKLZ+mqPMsJSuBHcGo7qGVFF1XjaI3KAFl1DRNo7lsg==","signatures":[{"sig":"MEQCIBDm1+7Yr5zM171JO2IlLxpfXxoCec8eEjxnbWupEkhyAiANNngsOBy7tCcjKl1GKJcFaAWnlMDHXCRBfARVSsZ3yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.0ad128337.0","@material/theme":"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/line-ripple_15.0.0-canary.0ad128337.0_1697741446215_0.7935438107112338","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/line-ripple","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"5a189e5f1bb1e479724c3408fdfe35d9272a960e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.9cec94097.0.tgz","fileCount":35,"integrity":"sha512-hbhs1n0Q50caMqPwijmJi9GJqkfXGnzvUsvsAxjJRevtGLInLWhdFmLwzHgDXysaRYkQcIBaQQWxvouQ+MfAcA==","signatures":[{"sig":"MEUCIQDOO6RYv3abyIqVrFFB1wGqk9I/J201TG27iAVpdx9UWwIgT0YqRlIB8OaHMNMBG90iiYUGpbdaMu/ajZDh03/UYrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.9cec94097.0","@material/theme":"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/line-ripple_15.0.0-canary.9cec94097.0_1697756905473_0.47028645991800366","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"ddab5968b6df1b1b15cfa85d379699483dae311e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":35,"integrity":"sha512-bDNUDX/yNcmSeXaI13BnTKTMOcZnRB7ru4LbWFxGDTz6/hGVRwssfP/IYIcwP1JjzadQNqGRV6JnsYEHbBj+sg==","signatures":[{"sig":"MEUCIBooyh7pNHVNblD/efEx9COhlxhdZhkcr2HDx3F8rZ8vAiEAwNHyaF8DT4RbTyN+4HDzwAVbrbHlCc+1RjEuamScQA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/theme":"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/line-ripple_15.0.0-canary.c51a0bbcc.0_1700081888298_0.3121963844655886","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3bd3db2545aa053e5c6bba57d667bba879863aa0","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.d76666ad4.0.tgz","fileCount":35,"integrity":"sha512-QjlRtWWoVHyqf2VeLoyh3OwBXx9GVkeQzwkBsqz64NavCusm9X8n9WKIp5oiveQhGrZX8hN08nihSDcdS1Aj/g==","signatures":[{"sig":"MEYCIQDXyK1DQ0O8GAV8m+NlyiRYuRyVrcaylbAa4lkLGgv/qAIhAI8PfIv+3GrzenNYxe+ccQD5BQfMELMvJ56Co8kvb1PN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/theme":"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/line-ripple_15.0.0-canary.d76666ad4.0_1701123153088_0.05412022719481313","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"a2f6ccb1b073b94602c7b722e5616eb82158e2fc","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.8656bf0e0.0.tgz","fileCount":35,"integrity":"sha512-vEBzkccPq2VxkdTjS9XnhKNKqJT4BUhnHzzRop0TFBgvowTpUvaETVtiQnH6DW5f9RMFZh0+SyMafhU/OsEKNA==","signatures":[{"sig":"MEQCIHBwTFinF1HrfuF7A7EXoJbY3DdmyRgBIhyJ+pW/9ckrAiAZFM+2X2Q0hASjzVK7A0loOxiY8Zu3UIgzcAMq3g8eRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/theme":"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/line-ripple_15.0.0-canary.8656bf0e0.0_1702415882525_0.2156128781961013","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/line-ripple","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"66487ff758834306180a7449ce4487103bcfe1d8","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.7f224ddd4.0.tgz","fileCount":35,"integrity":"sha512-f60hVJhIU6I3/17Tqqzch1emUKEcfVVgHVqADbU14JD+oEIz429ZX9ksZ3VChoU3+eejFl+jVdZMLE/LrAuwpg==","signatures":[{"sig":"MEUCIHO9/GOdQHqg9XIK9u/HhJJ4nRbXbGI5D8BelpctMtAQAiEAljfVS0pSjnjjwsbbogxzgkXpUus3YsJLDWuXYsKFo1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/theme":"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/line-ripple_15.0.0-canary.7f224ddd4.0_1703743709456_0.22180952151893574","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c50ae02f7e143f14ae554e714907d5e52130cffb","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":35,"integrity":"sha512-oxLF7LLFyGeOtY5zAnQckbLBJ3ZT89H9IR480QIf774L/Dh8GbgrOrdgxXNU/LgHo9jKJ310xRZoYD4JV5UG1A==","signatures":[{"sig":"MEUCIQC1u0jjB8SEgxrSfD4ARGetc+FBQ8P3jFYQR1MBzvoGpQIgUscTNg0aMY4P8GQkvz3KeOJ+fbC6OY74ZJ5XkYDPv6c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/theme":"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/line-ripple_15.0.0-canary.a0b8a90c0.0_1707333531825_0.2835703461537431","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/line-ripple","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"bcec14212d14eefdfdf11127fbd170735aeab132","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.e50b478eb.0.tgz","fileCount":35,"integrity":"sha512-JGgqEfZAVNEVxyZV/G6HH29WmJFMSq3ICT/U2w9RIp9BYXOmvXGr3Phz/EX3LJpK3Wowt82aAL7piO7LWYFepw==","signatures":[{"sig":"MEUCIQDrEKcfMmTQRTn8fkf3Ke8TvXLf0xSniNxMcM6DnO+M7QIgcJwHyrtPNnrV36GFMRpe+R0uQ6R1Ezry4El6aLVrqWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/theme":"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/line-ripple_15.0.0-canary.e50b478eb.0_1707415639585_0.4503946643388901","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/line-ripple","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"79ee251bbb1b5699d8e7113de3cd9ce80b28f932","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.c43b3438b.0.tgz","fileCount":35,"integrity":"sha512-Td0cZib7gWe0y8GYS4LX+4UjzCWzxQuXxKNvSq0K75oxQmAEMWk/IzQcPyVgA/Ti5s9U6tsrDMXYPNfR6SgaSw==","signatures":[{"sig":"MEUCIQDkDG+Ye8A+ITCtQ/Ni4QKfjqlXZddqVqwIDBpB7y8ECgIgJVR75epzH0D7NGSimDG3tNjtOXqZx9BD2m1Es2XbaOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/theme":"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/line-ripple_15.0.0-canary.c43b3438b.0_1708719414110_0.4698197450345878","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/line-ripple","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"4630dc3fe1dc3db026186177a2a3c68cfc1c673d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.819498d8c.0.tgz","fileCount":35,"integrity":"sha512-n0tkJyzI3GOIFmejCw6cVtejNbE0vPGyBtjgcTgMHSwhT2YvYf4ZBj5QA/d3BgmDN2qi4sEu6z8lOG3MNnUwRg==","signatures":[{"sig":"MEUCICDtXdaW9vUMiw72YagNWx58kJ27V/HqhaNAB5uA+RClAiEA8rjsXRI3VXAT6NvCArLUy1M4NqS4VoHcdUlszMGKF7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.819498d8c.0","@material/theme":"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/line-ripple_15.0.0-canary.819498d8c.0_1710515640786_0.033029110391451066","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/line-ripple","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"42c5b4feeffddb26f74ba81a4b7c513c71f6d0ea","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.453a6248a.0.tgz","fileCount":35,"integrity":"sha512-R76RmBqu9U5jrzNLZFCTGEex+gdDT+31UjuvQhaGk7eo7n7TFdJ77BoSwF/8TqI0xzYQoFK7LPtfin51isx1Yw==","signatures":[{"sig":"MEYCIQCIpce6qRs8PjhaS8Zhr9xZje/DbaDQ+v2YgUPbqJJRrgIhAPfytesL6/M+hawNQZIpqJ3wWB25tAFdMyMN1RU4a9ID","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.453a6248a.0","@material/theme":"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/line-ripple_15.0.0-canary.453a6248a.0_1711386775328_0.6577743928475743","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/line-ripple","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"3a4b1a894bda7b8f225dd1bac718facde6309dfd","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.68edc03c6.0.tgz","fileCount":35,"integrity":"sha512-dy0fJz3SPGupmYuKivZKaO/cpiz/LSFgEqjsxhxbB6K1WRa8w7cyqsLRHyhGY7Cb4463o/mCpNvWMllo8ymvoQ==","signatures":[{"sig":"MEUCIQDdr9gGLkuf/M6Kb8Y/qQHevKlVpZa9FJUzVZaPttqfGwIgbzfzideHx8AP2//uNjG8+sDjrBKHJYVIWNwotzqYGHc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/theme":"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/line-ripple_15.0.0-canary.68edc03c6.0_1712603100976_0.8238692509450274","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/line-ripple","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"cdc511914fdcc959ab4bff725f5f70737326d9a2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.5bebc0064.0.tgz","fileCount":35,"integrity":"sha512-PzkMXNBdxWFev31ugtZ4iX4hysszrhZ56wVAASmjLmJXQuwy2ZDriaVFt+tpNl5SG3YpONqCUcYp7BNQl8XJpA==","signatures":[{"sig":"MEUCIQC/jzvPg9BpaTY0DXyV+HC4ru1/yoBLq4RiYtY//DAbAgIgYAWDZQy9FWn4mHPySsHXkZ5HaQUh7H1NCtd2q37XhQY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/theme":"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/line-ripple_15.0.0-canary.5bebc0064.0_1712871562931_0.31448377245810666","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/line-ripple","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"05056098b1278784ac6004f3303854e71e527cc2","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.311f29a60.0.tgz","fileCount":35,"integrity":"sha512-wK9I5lnoj/qB5eO65qcbkAPD2/qezWAk/Qprb7RgMObnL88BOZ36vSjkPZSQ2vKa0rd7hcVPqQ1XRx9ILGUnTA==","signatures":[{"sig":"MEUCIG1h/PZqONtvRJrZcE3pPbRN32K+LZAMqDGPyNvdRoHOAiEAzjGKUYOvGDyWPfI6VPghhnl76b0d4Gjwe20i6kw1beo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.311f29a60.0","@material/theme":"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/line-ripple_15.0.0-canary.311f29a60.0_1713895131774_0.6016979965612665","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/line-ripple","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"c6c393361ddfaf49c3c210736ba8092064e9932e","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.65c10a622.0.tgz","fileCount":35,"integrity":"sha512-AsePQ2NUShhh7fxo0igOQ10i5F3aaDU4lA3hfPTJlSn72NzsFj2c5yIi8NJEaB4riJ1HtmZjNbIOQUesHxDJIg==","signatures":[{"sig":"MEQCIHcLg9nBp+8jTvUGJ+3+ktiEGz/hK6mezOdIIrdZfggaAiAvGq2Z4o/ic4MAhrlGp0OFaIzNOgHyGNAeASynJdaeHQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.65c10a622.0","@material/theme":"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/line-ripple_15.0.0-canary.65c10a622.0_1714070878162_0.5873556750288522","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"e473af26e30cb204b760b1d08149a6933257d85f","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":35,"integrity":"sha512-NLhNLpdBM5b8KjEOnO8Y9IJ4q3rfTmjuuyUUN+P7ckVBJdZNmy4bxo38IepBi12ah4GuS0NbQO4phUnjFEm/2Q==","signatures":[{"sig":"MEMCIEnBirHIrGwO8X3xGRHZtamsZUj675ObNJZ6fEiO4i3fAh8xGOe8fNCM1ZGoH4QbD9WQQIZd/abWYsKKmZHmPOlc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/theme":"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/line-ripple_15.0.0-canary.4b35cb7d0.0_1714651325378_0.7687830710418837","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/line-ripple","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"915ac8e63a4095eef6ab29370403f2f29d76d97c","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.f80ac92b0.0.tgz","fileCount":35,"integrity":"sha512-fx9MeZqvlYlvyHNe+YroI90lUhPeCXBuk90iVryYHDwz3Zd0R9ajsQY8yjBhFHtIxaytmW7wSE42hp7qG7eVXA==","signatures":[{"sig":"MEYCIQDulHLfRs8Oy9KAi5cD37kwj1pzYAzQYLEcX43Drf83JgIhAK8Wo+xjwAZB9KT42z6vl2u8xVVquLY/M/b6CktRs6Vl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/theme":"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/line-ripple_15.0.0-canary.f80ac92b0.0_1714651948851_0.5116810692696347","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/line-ripple","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"88e9f731c5ef9212c24e9a3eba62978cc7250ae1","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.2f5b899bc.0.tgz","fileCount":35,"integrity":"sha512-4QG6QIPZABPjJeYoFv9nxfSEZRb22xzvr9KztFaogiPIfsO+kA/rPqp79uNZkiVQjsjwfCiro7FFyAZ2xqevlg==","signatures":[{"sig":"MEUCID/8mD18QB8sBuTG1jOc8dzn5qy7Yp/JRAl/NH/hBqHsAiEAytacwR8RztjdYLdTzTZ1jYMTRHl6nvZ+YmYjGMNZsMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/theme":"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/line-ripple_15.0.0-canary.2f5b899bc.0_1716213244541_0.44569656518270917","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/line-ripple","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","lineripple","line-ripple"],"license":"MIT","_id":"@material/line-ripple@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":"7f50599b1363abe2ea045e3044f7f08b3de8c843","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.cfec83c74.0.tgz","fileCount":35,"integrity":"sha512-aspXxEF0MguC0tlCdSsWJF+Z8dSRgT0zY5oT+/P2jDqSEC8vdlwrFWvP/v9gm/sT+VX9/hyy0P4DXsqdGmA+Eg==","signatures":[{"sig":"MEUCIE3yefWDrfadAyg/MvQQ6XLPnx0whC9LxQXwJSQmhMMgAiEA2tzcOz+rQpMNXR2tKP5qoqUzRj8GBNZmhDgVLxyPAFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479269},"main":"dist/mdc.lineRipple.js","module":"index.js","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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-line-ripple"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web line-ripple component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/theme":"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/line-ripple_15.0.0-canary.cfec83c74.0_1716231365254_0.7186140317192893","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/line-ripple","description":"The Material Components for the web line-ripple component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","lineripple","line-ripple"],"main":"dist/mdc.lineRipple.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-line-ripple"},"publishConfig":{"access":"public"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"<!--docs:\ntitle: \"Line Ripple\"\nlayout: detail\nsection: components\nexcerpt: \"The line ripple is used to highlight user-specified input above it.\"\npath: /catalog/input-controls/line-ripple/\n-->\n\n# Line Ripple\n\nThe line ripple is used to highlight user-specified input above it. When a line ripple is active, the line’s color and thickness changes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/go/design-text-fields#text-fields-layout\">Material Design guidelines: Text Fields Layout</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material-components.github.io/material-components-web-catalog/#/component/text-field\">Demo with Line Ripple on Text Field</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/line-ripple\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n<span class=\"mdc-line-ripple\"></span>\n```\n\n### Styles\n\n```scss\n@use \"@material/line-ripple/mdc-line-ripple\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCLineRipple} from '@material/line-ripple';\n\nconst lineRipple = new MDCLineRipple(document.querySelector('.mdc-line-ripple'));\n```\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-line-ripple` | Mandatory.\n`mdc-line-ripple--active` | Styles the line ripple as an active line ripple.\n`mdc-line-ripple--deactivating` | Styles the line ripple as a deactivating line ripple.\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`active-color($color)` | Customizes the color of the line ripple when active.\n`inactive-color($color)` | Customizes the color of the line ripple when inactive.\n\n## `MDCLineRipple` Properties and Methods\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Proxies to the foundation's `activate()` method.\n`deactivate() => void` | Proxies to the foundation's `deactivate()` method.\n`setRippleCenter(xCoordinate: number) => void` | Proxies to the foundation's `setRippleCenter(xCoordinate: number)` method.\n\n## Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Line Ripple for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCLineRippleAdapter`\n\nMethod Signature | Description\n--- | ---\n`addClass(className: string) => void` | Adds a class to the root element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`hasClass(className: string) => boolean` | Determines whether the root element has the given CSS class name.\n`setStyle(propertyName: string, value: string) => void` | Sets the style property with `propertyName` to `value` on the root element.\n`registerEventHandler(eventType: EventType, handler: EventListener) => void` | Registers an event listener on the root element for a given event.\n`deregisterEventHandler(eventType: EventType, handler: EventListener) => void` | Deregisters an event listener on the root element for a given event.\n\n### `MDCLineRippleFoundation`\n\nMethod Signature | Description\n--- | ---\n`activate() => void` | Activates the line ripple.\n`deactivate() => void` |  Deactivates the line ripple.\n`setRippleCenter(xCoordinate: number) => void` | Sets the center of the ripple to the `xCoordinate` given.\n`handleTransitionEnd(event: Event) => void` | Handles a `transitionend` event.\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/line-ripple@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-sFpZFHaJac8syd/78TYArL0NT2IMXiphxX+BLa5R72EDTg2+ycqtyzXjEzVw1OvVp6TY0Pa4kPYqVF43W0Jw8w==","shasum":"17f14674e51f4d5a6421bc865beb25d1d4a74c1d","tarball":"https://registry.npmjs.org/@material/line-ripple/-/line-ripple-15.0.0-canary.423edc3dc.0.tgz","fileCount":35,"unpackedSize":479269,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6cnKsYEhtSYuiI5raizYRyD28zkhGe00NuWMpmR6XoAiEAllXJfa3qC//+7hwHdHYJ4AseAX/Ew0/AdxVSfPSnbJw="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/line-ripple_15.0.0-canary.423edc3dc.0_1719425498673_0.28224159561475926"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-05T22:02:55.218Z","modified":"2024-06-26T18:11:39.175Z","0.30.0":"2018-02-05T22:02:55.218Z","0.32.0":"2018-03-05T22:08:45.366Z","0.33.0":"2018-03-19T16:40:03.470Z","0.34.0":"2018-04-02T21:51:57.403Z","0.35.0":"2018-04-23T22:40:23.601Z","0.38.0":"2018-07-30T17:06:23.061Z","0.39.0":"2018-08-27T17:40:15.920Z","0.39.1":"2018-08-31T21:36:12.749Z","0.39.2":"2018-09-11T16:54:59.509Z","0.39.3":"2018-09-11T17:18:48.246Z","0.40.0":"2018-09-24T20:00:48.289Z","0.40.1":"2018-10-08T20:54:17.535Z","0.41.0":"2018-10-29T20:21:50.528Z","0.43.0":"2019-01-07T19:48:58.684Z","1.0.0-0":"2019-02-27T23:59:21.761Z","1.0.0-1":"2019-03-04T23:33:13.396Z","1.0.0":"2019-03-06T21:08:00.623Z","1.1.0":"2019-03-26T19:25:46.373Z","2.3.0":"2019-05-28T21:23:34.883Z","3.0.0-alpha.0":"2019-06-12T04:06:45.161Z","3.0.0-alpha.1":"2019-06-12T19:02:02.305Z","3.0.0":"2019-06-25T22:27:51.236Z","3.1.0-alpha.0":"2019-07-16T13:29:04.565Z","3.1.0":"2019-07-22T22:02:29.134Z","4.0.0-alpha.0":"2019-08-07T21:09:13.985Z","4.0.0-canary.0":"2019-09-05T04:37:44.953Z","4.0.0-canary.1":"2019-09-09T20:20:36.389Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:26.709Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:12.286Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:01.177Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:46.333Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:07.153Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:29.006Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:28.152Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:21.028Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:28.201Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:07.423Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:33.809Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:00.597Z","4.0.0-canary.01628efa.0":"2019-10-29T00:02:51.878Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:35.970Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:43.441Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:25.577Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:02.688Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:04.618Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:40.048Z","4.0.0":"2019-11-02T18:11:37.387Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:34.508Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:36.406Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:34.301Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:05.085Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:06.306Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:17.114Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:36.700Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:26.706Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:42.699Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:49.024Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:41.091Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:23.079Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:16.767Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:39.453Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:26.954Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:41.304Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:54:46.642Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:39.285Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:14.555Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:17:54.748Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:06.315Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:05.770Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:54:54.891Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:35.486Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:01.290Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:47.168Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:29.111Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:14.127Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:10.471Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:09.305Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:39.673Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:36.836Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:09:35.832Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:11.789Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:28.469Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:37.341Z","5.0.0-canary.391674a26.0":"2019-12-18T19:16:52.632Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:34:45.568Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:01.269Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:23:52.979Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:38.302Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:40.564Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:08.129Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:26:59.839Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:02.395Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:32.088Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:39.874Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:28.529Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:49:50.048Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:31.457Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:24.833Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:02:55.013Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:53:57.639Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:13.902Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:14.664Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:15.860Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:36:52.453Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:07.478Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:18.721Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:22.129Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:15:38.374Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:09:52.779Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:21.496Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:04.692Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:48.407Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:31.252Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:59.752Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:08.352Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:44.877Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:02.094Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:41.343Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:32.849Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:22.216Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:07.760Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:32.446Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:21:47.953Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:28.461Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:57:53.724Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:01.824Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:01.631Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:39:46.859Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:48.294Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:38.986Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:09:58.020Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:07.100Z","5.0.0-canary.426913342.0":"2020-01-10T01:43:59.766Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:06.727Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:33.183Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:28.990Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:35.232Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:31:42.804Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:14.193Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:10.536Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:31.667Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:44.936Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:20.627Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:42:51.221Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:04.795Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:47:36.777Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:47:52.644Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:19.097Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:39.881Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:47.788Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:45.691Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:30.462Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:05.439Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:16:59.254Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:34.293Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:46.383Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:34.745Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:34.744Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:16.019Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:28.620Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:08.585Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:45:53.109Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:44:42.415Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:22:07.269Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:55:10.938Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:57:24.057Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:16:42.435Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:09:15.874Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:12:20.682Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:55:05.234Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:55:03.593Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:47:21.351Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:20:35.743Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:45:34.403Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:32:00.082Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:55:49.335Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:24:02.124Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:29:14.388Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:43:08.622Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:48:39.195Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:09:18.308Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:55:25.234Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:16:44.312Z","5.0.0-canary.45985457b.0":"2020-01-29T23:32:36.655Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:36:58.537Z","5.0.0-canary.181486643.0":"2020-01-30T20:55:50.987Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:22:55.397Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:02:46.171Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:09:51.966Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:12:28.510Z","5.0.0-canary.535398572.0":"2020-02-03T18:11:41.172Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:03:35.888Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:00:11.146Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:02:33.984Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:32:54.281Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:29:35.013Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:21:00.555Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:55:15.593Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T22:59:07.047Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:48:23.154Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:24:28.464Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:11:07.645Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:43:08.541Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:42:54.137Z","5.0.0-canary.612443dfb.0":"2020-02-11T19:48:41.577Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:51:11.112Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:43:20.544Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:05:58.079Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:23:12.332Z","5.0.0":"2020-02-14T00:08:34.033Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:47:49.975Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:43:14.533Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:22:14.403Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:15:43.446Z","6.0.0-canary.765caef18.0":"2020-02-21T17:32:39.336Z","6.0.0-canary.949562303.0":"2020-02-21T20:37:15.459Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:57:39.297Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:00:25.803Z","5.1.0":"2020-02-25T21:37:30.776Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:38:19.118Z","6.0.0-canary.781434a92.0":"2020-02-25T23:27:37.673Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:03:12.086Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:11:47.221Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:09:32.500Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:25:25.517Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:43:50.365Z","6.0.0-canary.98b843417.0":"2020-03-05T18:30:40.739Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:22:00.159Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:46:09.666Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:21:35.934Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:02:04.473Z","6.0.0-canary.a731fd0a4.0":"2020-03-10T20:32:08.486Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:36:12.208Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:58:00.964Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:05:07.467Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:32:53.224Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:25:11.611Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:37:42.082Z","6.0.0-canary.bec065920.0":"2020-03-12T20:19:53.790Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:20:23.475Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:00:56.300Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:47:38.589Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:34:24.833Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:35:33.968Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:53:11.244Z","6.0.0-canary.35a32aaea.0":"2020-03-20T19:58:47.487Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:14:48.940Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:43:06.932Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:46:48.356Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:18:05.876Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:04:35.193Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:56:11.219Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:19:14.645Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:55:57.448Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:55:40.258Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:09:09.071Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:13:28.684Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:03:38.058Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:24:19.128Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:35:47.039Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:41:24.954Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:32:12.069Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:29:38.544Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:46:58.398Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:22:23.048Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:46:10.893Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:30:44.760Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:52:28.167Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:33:40.147Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:05:43.582Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:10:08.272Z","6.0.0-canary.c02642273.0":"2020-04-15T16:17:06.376Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:43:06.930Z","6.0.0-canary.490fbdc09.0":"2020-04-16T05:59:32.556Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:26:26.598Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:18:53.621Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:54:07.117Z","6.0.0-canary.ca61b656f.0":"2020-04-16T19:59:46.395Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:32:42.857Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:40:50.253Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:02:42.426Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:21:17.827Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:17:44.560Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:58:08.690Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:55:39.308Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:20:00.059Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:14:37.555Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:18:14.296Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:41:44.293Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:07:00.511Z","7.0.0-canary.8540808be.0":"2020-04-23T17:25:45.200Z","6.0.0":"2020-04-23T17:26:13.922Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:45:24.429Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:20:55.822Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:05:49.042Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:18:37.997Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:43:43.888Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:31:58.027Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:06:36.030Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:17:14.653Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:43:42.245Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:29:19.772Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:27:35.560Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:32:25.410Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:42:07.955Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:25:32.457Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:22:18.891Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:35:37.096Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:47:20.287Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:18:48.275Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:30:51.366Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:33:34.477Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T16:58:47.496Z","7.0.0-canary.09f591967.0":"2020-05-05T21:04:02.008Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:09:11.722Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:07:22.764Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:54:51.220Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:18:28.744Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:49:13.353Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:38:08.864Z","7.0.0-canary.119e21426.0":"2020-05-08T20:22:09.205Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:06:57.911Z","7.0.0-canary.e84444387.0":"2020-05-08T21:31:18.471Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:12:47.565Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:28:36.363Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:32:10.238Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:26:56.454Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:24:51.158Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:17:48.360Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:46:59.534Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:42:30.687Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:51:12.234Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:53:22.757Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:43:45.283Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:17:46.610Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:50:31.463Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:09:00.269Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:37:50.096Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:36:13.479Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:50:16.073Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:02:32.103Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:12:26.395Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:40:56.184Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:01:48.622Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:14:20.810Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:17:53.149Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:19:40.522Z","7.0.0-canary.740860e78.0":"2020-05-21T17:26:27.968Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:28:24.946Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:28:44.808Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:31:26.490Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:32:49.930Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:47:46.142Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:20:45.391Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T20:59:29.997Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:03:34.342Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:28:22.153Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:31:42.186Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:32:37.174Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:46:06.700Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:44:59.815Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:07:11.205Z","7.0.0-canary.01de07011.0":"2020-05-26T19:52:21.658Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:34:33.869Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:13:26.953Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:54:39.826Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T18:59:03.199Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:16:05.903Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:20:34.111Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:29:40.968Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:37:57.701Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:36:34.376Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:51:02.868Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:54:57.638Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:50:02.725Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:14:49.785Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:04:43.522Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:40:21.798Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:25:13.704Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:43:57.087Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:48:44.025Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:48:32.240Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:25:41.334Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:02:22.256Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:23:12.604Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:51:57.221Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:46:14.983Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:02:45.852Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:57:18.596Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:08:46.309Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:11:59.219Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:13:37.532Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:14:04.566Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:04:15.524Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:44:02.038Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:41:32.442Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:56:24.959Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:53:37.639Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:25:57.602Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:16:08.027Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:39:18.708Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:45:39.014Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:07:57.258Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:30:24.565Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:49:00.413Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:20:46.867Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:15:25.636Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:03:55.674Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:16:00.059Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:21:00.827Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:27:25.072Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:47:49.340Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:10:09.964Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:19:36.401Z","7.0.0-canary.10b505785.0":"2020-06-19T20:21:01.624Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:37:15.477Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:39:29.710Z","7.0.0-canary.c20727498.0":"2020-06-19T20:42:26.208Z","7.0.0-canary.4e360ae94.0":"2020-06-19T20:59:07.891Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:01:23.254Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:02:35.066Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:27:36.277Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:29:47.593Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:30:58.588Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:33:44.699Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:23:17.134Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:14:04.788Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:16:19.303Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:24:55.057Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:53:00.286Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:57:02.027Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:29:00.816Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:27:35.827Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:33:00.932Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:39:32.529Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:47:43.204Z","7.0.0-canary.080965f39.0":"2020-06-23T15:17:11.318Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T15:59:35.162Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:24:33.693Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:47:32.476Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:00:04.555Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:02:39.811Z","7.0.0":"2020-06-23T19:10:18.919Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:11:13.398Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:40:23.058Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:55:35.986Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:31:16.128Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:55:57.179Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:52:53.085Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:38:19.720Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:01:09.686Z","8.0.0-canary.38197b443.0":"2020-06-25T21:22:09.318Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:38:23.331Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:16:23.769Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:47:54.277Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:23:11.286Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:14:58.006Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:30:10.413Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:51:20.461Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:05:01.965Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:13:57.280Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:46:34.805Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:55:43.059Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:26:47.679Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:38:34.628Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:40:49.714Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:47:35.542Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:15:25.320Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:43:40.988Z","8.0.0-canary.d850de590.0":"2020-07-09T18:05:03.962Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:34:54.336Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:35:45.951Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:51:22.765Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:20:17.659Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:12:04.059Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:42:18.581Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:06:48.859Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:33:55.284Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:19:34.988Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:10:04.588Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:12:42.080Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:14:37.228Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:33:51.275Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:08:58.704Z","8.0.0-canary.01db89053.0":"2020-07-16T16:38:43.895Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:19:36.915Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:55:14.840Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:49:46.898Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:46:48.405Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:22:52.088Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:33:23.671Z","8.0.0-canary.12a109680.0":"2020-07-22T23:03:07.289Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:52:31.386Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:49:08.948Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:45:26.569Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:47:02.307Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:58:17.923Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T20:59:10.935Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:23:20.546Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:23:32.791Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:43:16.583Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:10:25.393Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:56:30.923Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:12:47.252Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:06:03.803Z","8.0.0-canary.75553837c.0":"2020-07-27T15:11:58.990Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:37:36.399Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:46:43.054Z","8.0.0-canary.81dc33377.0":"2020-07-27T15:58:50.462Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:32:00.234Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:08:09.283Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:50:58.213Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:57:41.144Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:57:55.816Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:53:45.097Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:49:55.053Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:38:53.685Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:51:47.851Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:15:32.949Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:36:01.126Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:48:52.214Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:20:16.521Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:34:36.507Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:38:22.825Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:14:27.621Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:24:56.997Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:00:58.926Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:09:56.059Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:14:56.426Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:27:13.757Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:09:51.211Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:21:09.195Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:45:46.706Z","8.0.0-canary.005e86a9b.0":"2020-07-30T17:59:28.061Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:08:22.092Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:19:58.023Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:30:56.046Z","8.0.0-canary.f041a48c9.0":"2020-07-30T22:59:03.246Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:50:03.329Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:22:39.463Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:50:25.348Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:53:09.995Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:53:25.760Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:53:48.080Z","8.0.0-canary.72258f898.0":"2020-08-04T01:16:56.996Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:47:48.408Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:23:49.892Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:48:27.507Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:53:24.811Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:19:15.536Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:39:00.531Z","8.0.0-canary.08090126b.0":"2020-08-06T19:32:15.743Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:49:33.802Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:26:17.602Z","8.0.0-canary.96a640534.0":"2020-08-06T22:41:05.114Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:50:57.887Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:19:58.556Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:48:11.489Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:52:08.861Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:30:21.408Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:01:21.322Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:07:43.928Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:03:42.215Z","8.0.0-canary.760873445.0":"2020-08-12T21:42:49.716Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:52:45.477Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:00:16.033Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:28:15.867Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:11:57.071Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:28:32.662Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:49:18.904Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:16:53.642Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:50:28.360Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:15:48.806Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:29:07.020Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:22:05.380Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:38:01.168Z","8.0.0-canary.000d64815.0":"2020-08-17T17:03:51.459Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:31:25.062Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:36:22.602Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:41:30.913Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:23:29.132Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:20:32.730Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:32:31.842Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:37:04.159Z","8.0.0-canary.546277d32.0":"2020-08-20T16:42:39.619Z","8.0.0-canary.da72839f4.0":"2020-08-20T17:59:25.688Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:17:58.058Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:14:46.027Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:57:19.114Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:05:55.425Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:52:12.070Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:28:24.221Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:11:21.389Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T19:59:54.613Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:40:22.331Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:03:26.059Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:55:59.802Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:48:52.387Z","8.0.0-canary.911014711.0":"2020-08-27T16:07:32.607Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:54:12.095Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:54:39.775Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:55:47.558Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:12:22.385Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:15:36.285Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:10:02.612Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:49:18.396Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:55:04.538Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:09:45.194Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T22:59:48.262Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:32:15.171Z","8.0.0-canary.40d8e4726.0":"2020-09-14T23:29:32.746Z","8.0.0-canary.c25d70a31.0":"2020-09-15T02:28:15.158Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:53:51.256Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:51:24.052Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:58:08.347Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:25:14.617Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:42:30.322Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:10:07.412Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:17:29.619Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:42:42.098Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:13:43.228Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:45:46.328Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:31:51.236Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:34:51.791Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:50:51.057Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:23:57.794Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:53:40.561Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:09:40.436Z","8.0.0-canary.d71622574.0":"2020-10-09T16:31:14.278Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:53:27.685Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:45:59.162Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:56:23.610Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:15:22.692Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:17:04.176Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:03:52.098Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:07:38.330Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:51:12.044Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:30:46.669Z","8.0.0-canary.596e98424.0":"2020-10-28T16:03:06.152Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:11:39.460Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:44:32.573Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:12:21.744Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:40:47.163Z","8.0.0-canary.c61db90a5.0":"2020-10-28T18:59:09.859Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:32:02.323Z","8.0.0-canary.5511c5254.0":"2020-10-30T17:59:48.213Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:04:28.371Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T22:58:37.051Z","8.0.0":"2020-11-02T22:58:59.742Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:21:04.444Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:27:25.362Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:36:45.223Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:08:19.803Z","9.0.0-canary.419e03572.0":"2020-11-04T01:32:38.854Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:45:34.773Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:04:56.247Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:56:05.936Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:15:36.578Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:44:16.121Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:20:13.129Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:49:32.067Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:45:17.805Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:16:50.944Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:24:39.940Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:26:50.734Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:57:34.770Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:43:18.597Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:34:29.375Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:25:39.190Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:51:54.976Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:54:42.385Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:17:56.990Z","9.0.0-canary.a41527604.0":"2020-11-19T19:59:38.661Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:55:09.691Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:46:58.558Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:08:23.379Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:15:11.647Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:30:34.719Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:32:17.898Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:39:57.462Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:51:00.630Z","9.0.0-canary.fd22355f7.0":"2020-11-30T22:59:05.288Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:56:05.060Z","9.0.0-canary.977585650.0":"2020-12-02T14:41:31.869Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:49:06.687Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:07:05.449Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:16:00.499Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:21:55.747Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:29:13.799Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:41:04.362Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T15:57:42.401Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:00:50.698Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:44:17.958Z","9.0.0-canary.832668d33.0":"2020-12-04T18:05:28.117Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:28:35.491Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:41:23.592Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:49:03.975Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:01:00.743Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:12:45.561Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:27:49.706Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:31:45.524Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:44:59.029Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:04:52.540Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:10:31.487Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:49:13.377Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:07:23.923Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:43:44.124Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:27:32.497Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:04:58.079Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:06:47.338Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:01:22.399Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:27:06.223Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:07:02.958Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:41:29.910Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:04:32.932Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:45:11.805Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:08:01.356Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:47:32.802Z","9.0.0":"2020-12-29T19:45:31.265Z","10.0.0-canary.555aecce5.0":"2020-12-29T19:45:42.253Z","10.0.0-canary.776c18681.0":"2020-12-30T00:39:42.010Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:11:20.130Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:45:59.882Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:03:50.602Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:09:15.573Z","10.0.0-canary.365c69360.0":"2021-01-05T17:47:46.094Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:00:00.698Z","10.0.0-canary.766981c15.0":"2021-01-05T22:39:42.280Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:49:34.444Z","10.0.0-canary.968735356.0":"2021-01-06T15:50:11.544Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:43:38.459Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:25:49.880Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:33:41.910Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:19:21.872Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:51:00.744Z","10.0.0-canary.089de519c.0":"2021-01-08T22:20:12.972Z","10.0.0-canary.163119837.0":"2021-01-08T23:44:40.863Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:23:38.631Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:11:45.345Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:54:30.389Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:06:23.483Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:09:51.580Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:33:28.719Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:26:06.044Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:53:21.037Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:18:36.445Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:07:34.116Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:54:23.364Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:09:04.956Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:04:15.037Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:55:50.544Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:51:39.563Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:50:59.544Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:34:55.002Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:23:10.580Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:09:28.919Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:44:29.603Z","10.0.0-canary.623af861e.0":"2021-01-26T03:44:45.204Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:32:11.239Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:45:21.443Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:03:29.572Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:26:41.388Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:19:29.932Z","10.0.0-canary.994873795.0":"2021-01-27T14:50:28.142Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:01:32.541Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:31:46.052Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:03:00.118Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:02:57.161Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:14:07.744Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:19:56.363Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:48:36.831Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:42:08.737Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:18:02.722Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:33:25.776Z","10.0.0-canary.05f249666.0":"2021-02-04T17:49:37.624Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:42:33.248Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:34:09.979Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:00:06.170Z","10.0.0-canary.533092a90.0":"2021-02-05T03:46:15.024Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:16:46.630Z","10.0.0":"2021-02-05T16:18:10.695Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:41:25.335Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:31:07.419Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:04:21.479Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:02:51.005Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:33:32.113Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:16:39.104Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T17:59:39.485Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:40:47.124Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:52:03.961Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:16:23.787Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:06:07.758Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:41:21.713Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:30:19.603Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T15:58:48.977Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:30:12.945Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:11:09.326Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:15:36.053Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:09:13.077Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:24:29.254Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:57:33.693Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:44:07.384Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:34:28.654Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:04:38.347Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:37:00.745Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:22:39.664Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:41:58.399Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:26:59.817Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:36:20.694Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:12:39.644Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:35:57.636Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:45:03.216Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:00:01.462Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:48:46.782Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:45:17.438Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:30:02.913Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:13:08.159Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:32:13.281Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:33:25.841Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:34:09.898Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:49:59.726Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:14:51.616Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:47:08.316Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:21:44.015Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:36:35.261Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:06:41.772Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:38:14.230Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:52:34.019Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:20:17.402Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:31:07.162Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:23:33.077Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:41:42.092Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:00:08.131Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:39:25.149Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:48:41.853Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:44:43.871Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:39:12.994Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:43:31.355Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:26:55.297Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:51:41.717Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:56:30.311Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:24:20.344Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:49:14.393Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:02:00.713Z","11.0.0-canary.81911b707.0":"2021-03-11T18:22:28.161Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:36:06.976Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:00:45.745Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:08:03.790Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:32:21.929Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:39:39.604Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:43:33.719Z","11.0.0-canary.73a227194.0":"2021-03-12T00:23:11.630Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:02:05.757Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:34:05.570Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:19:21.926Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:47:02.332Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:11:29.862Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:38:46.275Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:40:35.643Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:01:01.304Z","11.0.0-canary.6072ed604.0":"2021-03-17T22:58:43.752Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:19:05.201Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:16:24.836Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:43:21.920Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:17:02.459Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:37:01.667Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:50:15.862Z","11.0.0-canary.cbc57c600.0":"2021-03-19T00:58:58.118Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:11:17.717Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:33:02.572Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:43:09.457Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:04:17.933Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:36:54.986Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:06:48.463Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:02:02.861Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:53:06.477Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:03:51.434Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:28:46.775Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:15:29.332Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:31:39.418Z","11.0.0-canary.e3ec22f45.0":"2021-03-25T17:54:56.689Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:56:34.700Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:47:50.058Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:20:10.099Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:32:58.537Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:10:57.210Z","11.0.0-canary.24609b822.0":"2021-03-31T20:56:27.335Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:04:18.985Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:00:06.076Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:46:35.859Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:23:17.856Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:04:19.005Z","11.0.0-canary.a4009b80a.0":"2021-04-05T21:59:48.290Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:41:31.471Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:43:51.730Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:53:15.695Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:57:11.211Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:35:08.659Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:37:57.138Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:34:46.983Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:10:23.256Z","11.0.0-canary.24255c408.0":"2021-04-09T20:11:39.088Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:52:58.797Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:14:58.387Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:42:49.746Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:02:27.508Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:03:29.695Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:30:37.955Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:45:34.368Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:53:41.307Z","11.0.0":"2021-04-15T22:57:44.015Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:44:21.534Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:46:17.541Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:40:46.042Z","12.0.0-canary.b52196498.0":"2021-04-19T19:57:19.151Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:07:56.864Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:56:33.122Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:37:16.994Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:48:54.943Z","12.0.0-canary.cad489689.0":"2021-04-22T16:48:51.147Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:33:50.224Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:12:34.135Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:42:35.038Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:48:53.872Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:09:03.910Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:19:17.207Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:58:03.421Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:35:42.122Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:57:10.104Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:45:26.375Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:06:55.211Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:12:14.772Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:47:21.534Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:53:01.036Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:44:10.684Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:48:43.838Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:42:30.059Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:17:16.329Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:22:54.933Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:01:22.230Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:37:11.839Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:21:46.867Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:52:54.757Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:22:00.154Z","12.0.0-canary.33148231f.0":"2021-05-03T19:38:17.624Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:45:25.996Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:41:06.789Z","12.0.0-canary.de997644b.0":"2021-05-04T17:27:41.792Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:54:26.567Z","12.0.0-canary.be999eb08.0":"2021-05-04T17:59:43.828Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:09:47.691Z","12.0.0-canary.718c90178.0":"2021-05-04T19:27:11.528Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:29:53.967Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:33:16.544Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:49:03.492Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:57:34.573Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:02:36.766Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:06:00.986Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:21:06.739Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:15:46.212Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:26:38.968Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T20:59:29.309Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:40:24.255Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:38:42.294Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:29:25.877Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:55:48.601Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:28:47.717Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:42:47.067Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:42:23.356Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:18:09.717Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:23:02.845Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:44:55.112Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:56:16.272Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:08:24.793Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:24:11.183Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:58:04.809Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:57:53.206Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:16:48.456Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:22:07.645Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:19:20.273Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:22:40.591Z","12.0.0-canary.33a954852.0":"2021-05-13T15:07:09.694Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:30:27.976Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:07:31.041Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:13:12.922Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:40:10.190Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:53:21.511Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:12:40.311Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:27:48.923Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:56:19.694Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:50:25.858Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:18:06.104Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:05:12.190Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:13:54.203Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:34:55.241Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:04:22.059Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:45:07.469Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:53:55.186Z","12.0.0-canary.464a00286.0":"2021-06-03T14:45:16.507Z","12.0.0-canary.474de7878.0":"2021-06-03T15:13:48.012Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:45:52.537Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:13:41.454Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:41:13.927Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:47:49.287Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:21:44.001Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:40:18.422Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:05:27.582Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:06:31.789Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:35:21.952Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:35:20.499Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:05:19.667Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:45:57.470Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:38:39.312Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:17:35.132Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:21:27.499Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:29:39.972Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:03:03.664Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:50:13.703Z","12.0.0-canary.271fff902.0":"2021-06-15T22:50:36.247Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:05:39.130Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:04:53.943Z","12.0.0-canary.940550232.0":"2021-06-17T19:39:37.766Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:23:57.411Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:11:11.185Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:39:55.210Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:36:19.088Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:11:29.341Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:24:04.163Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:26:54.356Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:14:20.998Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:51:57.999Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:40:21.496Z","12.0.0-canary.796811db7.0":"2021-07-01T00:02:51.855Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:05:56.994Z","12.0.0-canary.435866d32.0":"2021-07-02T18:20:43.300Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-02T23:59:31.096Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:08:42.327Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:03:03.469Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:03:42.363Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:24:57.908Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:50:44.050Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:48:45.153Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:08:44.549Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:43:42.711Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:53:26.644Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:49:58.372Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:21:48.034Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:47:33.559Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:07:36.317Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:21:26.223Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:41:50.732Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:06:37.757Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:57:24.639Z","12.0.0-canary.7239684d4.0":"2021-07-16T15:58:37.720Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:13:28.572Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:42:39.221Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:41:30.066Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:08:15.326Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:56:21.781Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:05:00.751Z","12.0.0-canary.791311bba.0":"2021-07-20T22:07:02.079Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:35:29.364Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:49:21.814Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:05:55.989Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:37:52.387Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:11:47.195Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:31:46.766Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:55:19.539Z","12.0.0-canary.22f390c43.0":"2021-07-27T18:59:24.980Z","12.0.0":"2021-07-27T19:49:23.127Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:50:56.296Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:17:41.865Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:25:17.646Z","13.0.0-canary.28656298a.0":"2021-07-29T18:12:37.542Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:34:53.055Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:04:26.553Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:32:57.401Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:22:54.413Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:13:25.243Z","13.0.0-canary.a80c8b2c2.0":"2021-08-04T23:59:19.817Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:55:53.300Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:41:50.085Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:17:39.077Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:49:28.603Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:14:26.418Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:06:56.166Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:16:51.467Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:16:54.317Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:21:05.045Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:40:20.883Z","13.0.0-canary.f4241a42a.0":"2021-08-11T16:59:02.488Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:28:22.123Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:54:52.028Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:44:49.839Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:48:04.417Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:07:41.432Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:21:22.559Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:53:46.969Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:13:41.136Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:23:01.260Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:01:46.106Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:17:11.901Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:48:11.498Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:31:53.368Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:26:14.626Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:19:57.929Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:43:49.664Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:26:13.856Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:28:08.082Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:16:42.638Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:27:29.573Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:48:01.063Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:17:45.061Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:32:49.920Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:53:24.924Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T21:59:00.770Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:37:38.467Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:05:18.675Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:08:32.782Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:43:56.578Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:53:56.532Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:10:48.761Z","13.0.0-canary.611db508e.0":"2021-09-02T03:14:34.444Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:37:19.257Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:44:21.312Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:45:53.612Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:29:23.517Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:30:50.723Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:31:21.147Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:42:20.553Z","13.0.0-canary.72464476c.0":"2021-09-07T15:33:37.642Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:32:51.734Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:42:38.579Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:34:58.041Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:00:25.982Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:09:44.783Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:24:46.318Z","13.0.0-canary.864798678.0":"2021-09-09T18:36:11.948Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:20:57.206Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:03:04.993Z","13.0.0-canary.08398f880.0":"2021-09-13T23:33:47.095Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:49:42.192Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:11:40.824Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T21:58:27.924Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:16:45.640Z","13.0.0-canary.80a583365.0":"2021-09-17T20:35:12.265Z","13.0.0-canary.83900936a.0":"2021-09-17T23:23:46.190Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:35:24.911Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:46:58.638Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:37:09.784Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:11:19.518Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:57:19.865Z","13.0.0-canary.65084baff.0":"2021-09-23T21:24:51.195Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:41:09.734Z","13.0.0":"2021-09-24T19:45:16.761Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:46:01.932Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:10:28.254Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:28:41.504Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:42:24.846Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:56:18.515Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:30:40.872Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:27:58.069Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:46:20.966Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:21:29.076Z","14.0.0-canary.261f2db59.0":"2021-10-20T16:59:04.227Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:21:17.691Z","14.0.0-canary.348665978.0":"2021-10-21T14:50:02.926Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:11:36.653Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:52:13.933Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:01:00.493Z","14.0.0-canary.a986df922.0":"2021-10-29T21:34:29.424Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:05:20.730Z","14.0.0-canary.468392606.0":"2021-11-11T19:39:34.195Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:50:17.363Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:56:13.652Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:57:53.089Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:23:47.583Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:35:52.546Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:29:15.225Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:13:15.796Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:39:42.450Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:49:18.097Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:15:39.964Z","14.0.0-canary.554c71829.0":"2021-11-16T16:18:32.805Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:23:25.181Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T18:58:34.051Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:24:17.278Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:38:26.520Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:34:27.279Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:03:46.483Z","14.0.0-canary.93134d453.0":"2021-11-23T15:38:08.146Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:31:31.938Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:36:42.150Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:49:57.338Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:55:21.991Z","14.0.0-canary.17a072535.0":"2021-12-02T18:04:32.496Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:43:35.938Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:05:42.079Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:24:36.159Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:28:33.059Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:54:17.003Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:39:07.746Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:12:13.983Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:09:01.182Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:31:41.751Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:45:03.124Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:13:26.383Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:00:13.232Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:53:26.529Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:32:14.525Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:48:49.845Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:41:37.943Z","14.0.0-canary.390220e42.0":"2022-01-17T16:45:20.178Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:52:03.320Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:16:39.905Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:53:40.429Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:02:38.932Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:30:56.753Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:12:25.922Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:36:23.461Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:40:43.666Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:49:10.470Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:21:59.026Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:56:26.817Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:45:46.808Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:52:51.815Z","14.0.0-canary.96ea061c1.0":"2022-02-09T18:58:32.020Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:05:51.445Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:28:43.832Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:48:15.121Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:15:45.168Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:03:31.912Z","14.0.0-canary.868793776.0":"2022-02-22T19:34:41.211Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:45:36.528Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:32:35.358Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:26:55.404Z","14.0.0-canary.6505e61c5.0":"2022-03-03T19:59:45.266Z","14.0.0-canary.16c166154.0":"2022-03-08T23:21:47.754Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:27:51.099Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:29:03.380Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:49:32.929Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:03:03.664Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:17:19.995Z","14.0.0-canary.32b391398.0":"2022-03-17T17:58:37.820Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:38:39.468Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:51:27.252Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:43:31.389Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:50:08.717Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:18:01.513Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:39:24.465Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:04:03.052Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:34:23.123Z","14.0.0-canary.344d52823.0":"2022-03-29T18:42:42.307Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:32:20.872Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:13:38.039Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:23:37.495Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:22:50.428Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:05:02.565Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:47:06.036Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:10:38.728Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:01:17.230Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:44:41.970Z","14.0.0":"2022-04-28T16:55:15.144Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:56:22.632Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:14:04.346Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:30:56.022Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:55:28.341Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:57:47.524Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:23:53.930Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:39:45.486Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:17:53.613Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:43:37.265Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:26:12.802Z","15.0.0-canary.05930a453.0":"2022-05-13T18:46:53.962Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:00:28.772Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:32:05.503Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:02:11.619Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:21:08.021Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:57:01.157Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:39:02.864Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:20:19.613Z","15.0.0-canary.df47894db.0":"2022-06-13T17:08:00.672Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:29:17.497Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:56:56.780Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:22:00.074Z","15.0.0-canary.764de225d.0":"2022-06-29T16:26:35.805Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:27:57.009Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:54:32.431Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:53:56.030Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:50:37.335Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:30:35.484Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:02:10.826Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:30:57.341Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:38:12.288Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:38:42.549Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:36:33.429Z","15.0.0-canary.88db01990.0":"2022-07-12T11:39:32.608Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:28:25.350Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:34:30.854Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:04:47.636Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:07:43.549Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:48:54.887Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:42:44.200Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:00:30.275Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:04:33.171Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:23:39.227Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:46:14.772Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:19:21.118Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:28:48.667Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:21:25.760Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:39:35.094Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:56:43.974Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:08:37.913Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:04:09.055Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:45:06.372Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:12:59.175Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:40:12.632Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:20:12.915Z","15.0.0-canary.10196647d.0":"2022-08-03T21:53:18.630Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:42:23.509Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:19:55.261Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:45:28.094Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:00:49.460Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:05:09.024Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:43:57.659Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:20:26.944Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:17:49.416Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:19:21.242Z","15.0.0-canary.4299717da.0":"2022-09-07T16:15:12.716Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:18:18.456Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:03:29.839Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:02:25.719Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:38:42.846Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:54:24.512Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:17:13.756Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:19:35.706Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:35:23.633Z","15.0.0-canary.9f17ff2cb.0":"2022-09-21T18:07:46.649Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:23:55.560Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:47:14.617Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:07:35.936Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:55:55.267Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:57:06.352Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:44:22.865Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:30:43.661Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:56:49.727Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:55:35.107Z","15.0.0-canary.db414b864.0":"2022-09-28T14:52:02.952Z","15.0.0-canary.c0462d134.0":"2022-09-28T17:51:34.288Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:06:17.530Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:55:11.948Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:30:38.945Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:13:19.583Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:20:35.052Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:17:39.004Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:18:39.315Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:03:12.264Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:14:18.760Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:50:23.141Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:36:59.300Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:54:29.635Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:05:15.582Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:07:16.142Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:37:25.858Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:48:22.883Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:01:43.959Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:57:49.930Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:20:12.071Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:40:51.012Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:50:38.861Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:13:18.190Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:50:56.767Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:17:13.441Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:55:39.213Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:21:46.277Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:56:27.883Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:39:48.966Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:41:40.050Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:22:44.582Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:42:02.164Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:12:45.539Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:16:33.176Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:36:21.209Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:11:05.490Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:56:05.665Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:05:09.403Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:18:33.181Z","15.0.0-canary.fc539db34.0":"2022-10-24T18:58:30.886Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:44:23.179Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:29:39.220Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:14:27.750Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:31:44.089Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:48:34.170Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:55:41.568Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:36:11.697Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:10:01.699Z","15.0.0-canary.909b48215.0":"2022-11-03T04:07:06.533Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:18:21.970Z","15.0.0-canary.da95e2a05.0":"2022-11-04T16:58:22.558Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:56:21.544Z","15.0.0-canary.215506426.0":"2022-11-05T01:05:18.868Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:03:23.850Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:23:56.044Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:12:47.470Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:26:54.557Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:55:56.784Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:16:57.174Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:34:54.591Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:52:33.895Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:02:10.706Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:05:18.473Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:35:04.821Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:35:47.242Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:11:08.890Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:44:37.483Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:57:48.282Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:26:20.304Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:27:36.051Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:01:13.845Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:29:14.246Z","15.0.0-canary.b01136063.0":"2022-11-16T00:14:59.490Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:12:26.684Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:14:26.033Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:16:48.277Z","15.0.0-canary.3777b03cb.0":"2022-11-16T18:40:33.678Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:55:16.777Z","15.0.0-canary.7c73f6134.0":"2022-11-16T19:58:47.262Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:04:23.383Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:58:04.260Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:08:15.715Z","15.0.0-canary.bb7751002.0":"2022-11-16T23:59:25.073Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:00:28.023Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:54:32.370Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:04:00.654Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:20:21.540Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:15:25.638Z","15.0.0-canary.697fbdebd.0":"2022-11-18T16:59:54.238Z","15.0.0-canary.d58410453.0":"2022-11-18T19:24:14.729Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:44:34.110Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:53:02.902Z","15.0.0-canary.96f472604.0":"2022-11-21T12:51:58.853Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:01:40.906Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:53:17.274Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T18:59:50.337Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:30:15.807Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:15:45.223Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:38:40.049Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:56:03.152Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:14:41.860Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:13:03.935Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:46:39.188Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:10:53.810Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:33:09.976Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:48:02.791Z","15.0.0-canary.65c411674.0":"2022-11-29T17:37:31.623Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:13:29.163Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:06:15.188Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:28:20.945Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:53:49.617Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:23:20.984Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:01:05.733Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:00:18.521Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:06:10.071Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:25:47.684Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:41:52.965Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:24:59.126Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:51:18.320Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:02:10.798Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:40:38.074Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:43:29.607Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:30:07.493Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:45:34.313Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:01:26.467Z","15.0.0-canary.817002c29.0":"2022-12-13T21:53:18.128Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:28:05.464Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:18:11.503Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:44:06.740Z","15.0.0-canary.34767110.0":"2022-12-14T17:21:07.359Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:24:50.066Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:07:53.406Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:26:28.332Z","15.0.0-canary.604264203.0":"2022-12-21T21:40:10.639Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:24:28.699Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:11:34.736Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:04:19.496Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:03:05.084Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:50:56.276Z","15.0.0-canary.16abb41ed.0":"2022-12-28T19:37:47.459Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:01:29.531Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:40:20.049Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:05:12.632Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:47:05.328Z","15.0.0-canary.af490a848.0":"2023-01-03T15:56:16.248Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:38:04.735Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:12:34.010Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:31:49.750Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:16:57.623Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:36:26.050Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:35:03.448Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:02:12.726Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:08:45.409Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:20:54.512Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:15:34.815Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:42:22.027Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:23:19.915Z","15.0.0-canary.f476fdece.0":"2023-01-10T16:13:56.269Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:27:19.447Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:10:55.044Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:17:54.514Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:16:39.744Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:11:47.990Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:53:29.208Z","15.0.0-canary.202823f54.0":"2023-01-11T21:35:04.614Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:54:54.260Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:35:33.165Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:23:52.309Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:48:36.257Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:38:33.156Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:29:06.184Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:34:12.057Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:26:11.725Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:42:58.044Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:29:18.018Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:43:26.239Z","15.0.0-canary.15b221540.0":"2023-02-01T17:51:43.354Z","15.0.0-canary.eeebb8bba.0":"2023-02-01T18:21:32.288Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:57:35.585Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:33:19.259Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:36:53.604Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:08:14.867Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:13:51.854Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:23:22.008Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:08:44.509Z","15.0.0-canary.de38de758.0":"2023-02-09T15:41:34.812Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:02:11.903Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:49:11.999Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:56:57.446Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:33:11.182Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:18:27.338Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:40:30.761Z","15.0.0-canary.901c83e77.0":"2023-02-27T18:05:17.303Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:34:50.654Z","15.0.0-canary.f32339937.0":"2023-03-06T15:14:48.182Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:26:41.691Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:41:01.938Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:42:08.008Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:25:39.725Z","15.0.0-canary.274610c77.0":"2023-03-09T14:57:47.222Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:51:52.157Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:17:21.945Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:44:14.053Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:46:32.145Z","15.0.0-canary.de5224633.0":"2023-03-09T23:55:01.130Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:07:08.656Z","15.0.0-canary.23073a303.0":"2023-03-10T14:14:01.272Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:46:37.327Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:47:17.394Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:24:10.579Z","15.0.0-canary.82554d770.0":"2023-03-11T01:36:32.067Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:37:42.120Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:43:23.907Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:46:42.249Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:01:08.801Z","15.0.0-canary.112715df5.0":"2023-03-13T18:38:22.310Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:30:41.386Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:38:09.358Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:42:35.771Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:51:49.346Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:15:37.597Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:46:36.059Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:15:56.937Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:19:22.459Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:23:09.935Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:25:43.214Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:26:18.383Z","15.0.0-canary.87809c710.0":"2023-03-14T18:42:36.925Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:46:58.987Z","15.0.0-canary.419b23cc6.0":"2023-03-14T18:57:55.161Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:12:38.070Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:10:28.946Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:40:03.478Z","15.0.0-canary.39e473690.0":"2023-03-21T17:50:27.203Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:57:27.702Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:49:13.982Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:33:44.553Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:46:33.140Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:40:22.323Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:07:03.378Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:52:59.094Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:54:49.375Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:29:32.597Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:03:23.775Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:41:42.072Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:37:07.730Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:39:09.466Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:00:04.153Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:50:07.651Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:20:17.351Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:20:48.147Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:30:35.134Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:32:34.879Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:41:04.525Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:08:32.754Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:55:22.141Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:25:28.399Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:38:04.197Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:22:12.328Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:29:31.462Z","15.0.0-canary.d3c3fbaa3.0":"2023-05-12T17:59:33.002Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T01:59:10.721Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:53:10.769Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:24:33.561Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:41:48.125Z","15.0.0-canary.446734f27.0":"2023-05-30T21:47:20.267Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:17:11.317Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:13:11.135Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:16:15.801Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:05:02.256Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:37:23.718Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:02:40.900Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:56:10.037Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:15:33.568Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:22:49.294Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:13:03.938Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:24:49.242Z","15.0.0-canary.83355c322.0":"2023-07-10T15:04:15.901Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:19:07.686Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:46:13.906Z","15.0.0-canary.02702296e.0":"2023-08-25T12:03:59.960Z","15.0.0-canary.872b65832.0":"2023-08-30T12:12:01.696Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:05:44.644Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:38:24.475Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:03:56.934Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:44:01.581Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:15:15.898Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:10:58.667Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:44:41.585Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:13:52.871Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:05:18.311Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:22:00.339Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:43:31.618Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:35:51.188Z","15.0.0-canary.127a44b28.0":"2023-10-12T19:58:52.026Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:50:46.468Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:08:25.627Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:58:08.574Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:12:33.331Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:18:02.937Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:08:29.711Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:18:52.049Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:07:19.794Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:16:54.353Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:14:01.002Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:12:55.543Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:05:01.117Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:39:23.129Z","15.0.0-canary.311f29a60.0":"2024-04-23T17:58:51.944Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:47:58.301Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:02:05.537Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:12:29.230Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:54:04.708Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:56:05.400Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:11:38.825Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","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-line-ripple"},"keywords":["material components","material design","lineripple","line-ripple"],"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":""}